379 lines
18 KiB
HTML
379 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" data-theme="light">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>deemix</title>
|
|
<link rel="stylesheet" type="text/css" href="/public/css/vendor/animate.css">
|
|
<link rel="stylesheet" type="text/css" href="/public/css/vendor/material-icons.css">
|
|
<link rel="stylesheet" type="text/css" href="/public/css/vendor/OpenSans.css">
|
|
<link rel="stylesheet" type="text/css" href="/public/css/vendor/toastify.css">
|
|
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
|
|
<link rel="shortcut icon" href="/public/favicon.ico">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
|
|
<script>
|
|
if (localStorage.getItem('selectedTheme')) {
|
|
document.documentElement.setAttribute('data-theme', localStorage.getItem('selectedTheme'))
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="start_app_placeholder" class="loading_placeholder">
|
|
<span class="loading_placeholder__text">Connecting to the server...</span>
|
|
<div class="lds-ring">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar-placeholder"></div>
|
|
|
|
<main id="main_content">
|
|
<div id="middle_section">
|
|
<header id="search">
|
|
<div class="search__icon">
|
|
<i class="material-icons">search</i>
|
|
</div>
|
|
<input id="searchbar" autocomplete="off" type="search" name="searchbar" value=""
|
|
placeholder="Search something or paste a link..." autofocus>
|
|
</header>
|
|
<section id="content">
|
|
<div id="container">
|
|
<div id="search_tab" class="main_tabcontent">
|
|
<div :class="{'hide': results.query != ''}">
|
|
<h2>Start searching!</h2>
|
|
<p>
|
|
You can search a track, a whole album, an artist, a playlist.... everything! You can also paste a
|
|
Deezer link
|
|
</p>
|
|
</div>
|
|
<div v-show="results.query !== ''">
|
|
<ul class="section-tabs">
|
|
<li class="section-tabs__tab search_tablinks" id="search_all_tab">All</li>
|
|
<li class="section-tabs__tab search_tablinks" id="search_track_tab">Tracks</li>
|
|
<li class="section-tabs__tab search_tablinks" id="search_album_tab">Album</li>
|
|
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">Artist</li>
|
|
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">Playlist</li>
|
|
</ul>
|
|
<div id="search_tab_content">
|
|
<!-- ### Main Search Tab ### -->
|
|
<div id="main_search" class="search_tabcontent">
|
|
<template v-for="section in results.allTab.ORDER">
|
|
<section
|
|
v-if="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)"
|
|
class="search_section">
|
|
<h2 @click="changeSearchTab(section)" class="search_header"
|
|
:class="{ top_result_header : section === 'TOP_RESULT'}">
|
|
{{ names[section] }}
|
|
</h2>
|
|
<!-- Top result -->
|
|
<div v-if="section == 'TOP_RESULT'" class="top_result clickable" @click="handleClickTopResult"
|
|
:data-id="results.allTab.TOP_RESULT[0].id">
|
|
<div class="cover_container">
|
|
<img aria-hidden="true" :src="results.allTab.TOP_RESULT[0].picture"
|
|
:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'" />
|
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
|
@click.stop="addToQueue" :data-link="results.allTab.TOP_RESULT[0].link"
|
|
class="download_overlay">
|
|
<i class="material-icons">get_app</i>
|
|
</div>
|
|
</div>
|
|
<div class="info_box">
|
|
<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
|
|
<p class="secondary-text">
|
|
{{ results.allTab.TOP_RESULT[0].type == 'artist' ? numberWithDots(results.allTab.TOP_RESULT[0].nb_fan) + ' fans' : 'by '+results.allTab.TOP_RESULT[0].artist+' - '+results.allTab.TOP_RESULT[0].nb_song+' tracks'}}
|
|
</p>
|
|
<span
|
|
class="tag">{{ results.allTab.TOP_RESULT[0].type.charAt(0).toUpperCase() + results.allTab.TOP_RESULT[0].type.substring(1)}}</span>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="section == 'TRACK'">
|
|
<table class="table table--tracks">
|
|
<tbody>
|
|
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
|
|
<td class="table__icon" aria-hidden="true">
|
|
<img class="rounded coverart"
|
|
:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
|
|
</td>
|
|
<td class="table__cell table__cell--large breakline">
|
|
<div class="table__cell-content table__cell-content--vertical-center">
|
|
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
|
explicit
|
|
</i>
|
|
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
|
|
</div>
|
|
</td>
|
|
<td class="table__cell table__cell--medium table__cell--center breakline">
|
|
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
|
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
|
|
</span>
|
|
</td>
|
|
<td class="table__cell--medium table__cell--center breakline clickable"
|
|
@click="albumView" :data-id="track.ALB_ID">
|
|
{{track.ALB_TITLE}}
|
|
</td>
|
|
<td class="table__cell table__cell--center">
|
|
{{convertDuration(track.DURATION)}}
|
|
</td>
|
|
<td class="table__cell--download table__cell--center clickable"
|
|
@contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
|
|
:data-link="'https://www.deezer.com/track/'+track.SNG_ID" role="button"
|
|
aria-label="download">
|
|
<i class="material-icons">
|
|
get_app
|
|
</i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
|
|
<div v-for="release in results.allTab.ARTIST.data.slice(0, 10)" class="release clickable"
|
|
@click="artistView" :data-id="release.ART_ID">
|
|
<div class="cover_container">
|
|
<img aria-hidden="true" class="circle coverart"
|
|
:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
|
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
|
@click.stop="addToQueue" :data-link="'https://deezer.com/artist/'+release.ART_ID"
|
|
class="download_overlay"><i class="material-icons">get_app</i></div>
|
|
</div>
|
|
<p class="primary-text">{{ release.ART_NAME }}</p>
|
|
<p class="secondary-text">{{numberWithDots(release.NB_FAN) + ' fans'}}</p>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
|
|
<div v-for="release in results.allTab.ALBUM.data.slice(0, 10)" class="release clickable"
|
|
@click="albumView" :data-id="release.ALB_ID">
|
|
<div class="cover_container">
|
|
<img aria-hidden="true" class="rounded coverart"
|
|
:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
|
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
|
@click.stop="addToQueue" :data-link="'https://deezer.com/album/'+release.ALB_ID"
|
|
class="download_overlay"><i class="material-icons">get_app</i></div>
|
|
</div>
|
|
<p class="primary-text inline-flex">
|
|
<i v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
|
|
class="material-icons explicit_icon">explicit</i>
|
|
{{release.ALB_TITLE}}
|
|
</p>
|
|
<p class="secondary-text">{{release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks'}}</p>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
|
|
<div v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)" class="release clickable"
|
|
@click="playlistView" :data-id="release.PLAYLIST_ID">
|
|
<div class="cover_container">
|
|
<img aria-hidden="true" class="rounded coverart"
|
|
:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'">
|
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
|
@click.stop="addToQueue" :data-link="'https://deezer.com/playlist/'+release.PLAYLIST_ID"
|
|
class="download_overlay"><i class="material-icons">get_app</i></div>
|
|
</div>
|
|
<p class="primary-text">{{ release.TITLE }}</p>
|
|
<p class="secondary-text">{{release.NB_SONG+' tracks'}}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<div
|
|
v-if="results.allTab.ORDER.every(section => section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[section].data.length == 0)">
|
|
<h1>No results</h1>
|
|
</div>
|
|
</div>
|
|
<!-- ### Track Search Tab ### -->
|
|
<div id="track_search" class="search_tabcontent">
|
|
<base-loading-placeholder v-if="!results.trackTab.loaded"></base-loading-placeholder>
|
|
<div v-else-if="results.trackTab.data.length == 0">
|
|
<h1>No Tracks found</h1>
|
|
</div>
|
|
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Title</th>
|
|
<th>Artists</th>
|
|
<th>Album</th>
|
|
<th>
|
|
<i class="material-icons">
|
|
timer
|
|
</i>
|
|
</th>
|
|
<th style="width: 56px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="track in results.trackTab.data">
|
|
<td class="table__icon table__icon--big">
|
|
<a href="#" @click="playPausePreview"
|
|
:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
|
|
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
|
class="material-icons preview_controls">
|
|
play_arrow
|
|
</i>
|
|
<img class="rounded coverart" :src="track.album.cover_small">
|
|
</a>
|
|
</td>
|
|
<td class="table__cell table__cell--large breakline">
|
|
<div class="table__cell-content table__cell-content--vertical-center">
|
|
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
|
explicit
|
|
</i>
|
|
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
|
</div>
|
|
</td>
|
|
<td class="table__cell table__cell--medium table__cell--center breakline clickable"
|
|
@click="artistView" :data-id="track.artist.id">
|
|
{{track.artist.name}}
|
|
</td>
|
|
<td class="table__cell table__cell--medium table__cell--center breakline clickable"
|
|
@click="albumView" :data-id="track.album.id">
|
|
{{track.album.title}}
|
|
</td>
|
|
<td class="table__cell table__cell--small table__cell--center">
|
|
{{convertDuration(track.duration)}}
|
|
</td>
|
|
<td class="table__cell--download table__cell--center clickable"
|
|
@contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="track.link"
|
|
role="button" aria-label="download">
|
|
<i class="material-icons">
|
|
get_app
|
|
</i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- ### Album Search Tab ### -->
|
|
<div id="album_search" class="search_tabcontent">
|
|
<base-loading-placeholder v-if="!results.albumTab.loaded"></base-loading-placeholder>
|
|
<div v-else-if="results.albumTab.data.length == 0">
|
|
<h1>No Albums found</h1>
|
|
</div>
|
|
<div class="release_grid" v-if="results.albumTab.data.length > 0">
|
|
<div v-for="release in results.albumTab.data" class="release clickable" @click="albumView"
|
|
:data-id="release.id">
|
|
<div class="cover_container">
|
|
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium">
|
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
|
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
|
|
class="material-icons">get_app</i></div>
|
|
</div>
|
|
<p class="primary-text inline-flex">
|
|
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
|
|
{{ release.title }}
|
|
</p>
|
|
<p class="secondary-text">{{ 'by '+release.artist.name+' - '+release.nb_tracks+' tracks' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ### Artist Search Tab ### -->
|
|
<div id="artist_search" class="search_tabcontent">
|
|
<base-loading-placeholder v-if="!results.artistTab.loaded"></base-loading-placeholder>
|
|
<div v-else-if="results.artistTab.data.length == 0">
|
|
<h1>No Artists found</h1>
|
|
</div>
|
|
<div class="release_grid" v-if="results.artistTab.data.length > 0">
|
|
<div v-for="release in results.artistTab.data" class="release clickable" @click="artistView"
|
|
:data-id="release.id">
|
|
<div class="cover_container">
|
|
<img aria-hidden="true" class="circle coverart" :src="release.picture_medium">
|
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
|
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
|
|
class="material-icons">get_app</i></div>
|
|
</div>
|
|
<p class="primary-text">{{ release.name }}</p>
|
|
<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ### Playlist Search Tab ### -->
|
|
<div id="playlist_search" class="search_tabcontent">
|
|
<base-loading-placeholder v-if="!results.playlistTab.loaded"></base-loading-placeholder>
|
|
<div v-else-if="results.playlistTab.data.length == 0">
|
|
<h1>No Playlists found</h1>
|
|
</div>
|
|
<div class="release_grid" v-if="results.playlistTab.data.length > 0">
|
|
<div v-for="release in results.playlistTab.data" class="release clickable" @click="playlistView"
|
|
:data-id="release.id">
|
|
<div class="cover_container">
|
|
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium">
|
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
|
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
|
|
class="material-icons">get_app</i></div>
|
|
</div>
|
|
<p class="primary-text">{{ release.title }}</p>
|
|
<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="home-tab-placeholder"></div>
|
|
|
|
<div id="charts-tab-placeholder"></div>
|
|
|
|
<div id="favorites-tab-placeholder"></div>
|
|
|
|
<div id="link-analyzer-tab-placeholder"></div>
|
|
|
|
<div id="settings-tab-placeholder"></div>
|
|
|
|
<div id="about-tab-placeholder"></div>
|
|
|
|
<div id="artist-tab-placeholder"></div>
|
|
|
|
<div id="tracklist-tab-placeholder"></div>
|
|
|
|
<div id="errors-tab-placeholder"></div>
|
|
|
|
</div>
|
|
</section>
|
|
<div id="search_placeholder" class="loading_placeholder loading_placeholder--hidden">
|
|
<span class="loading_placeholder__text">Searching...</span>
|
|
<div class="lds-ring">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="download_tab_container" class="tab_hidden">
|
|
<div id="download_tab_drag_handler"></div>
|
|
<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
|
|
<div id="queue_buttons">
|
|
<i id="open_downloads_folder" class="material-icons download_bar_icon hide">folder_open</i>
|
|
<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
|
|
<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
|
|
</div>
|
|
<div id="download_list"></div>
|
|
</div>
|
|
</main>
|
|
|
|
<audio id="preview-track">
|
|
<source id="preview-track_source" src="" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<div id="modal_quality" class="smallmodal">
|
|
<!-- Modal content -->
|
|
<div class="smallmodal-content">
|
|
<button class="quality-button" data-quality-value="9">Download FLAC</button><br>
|
|
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br>
|
|
<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br>
|
|
<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br>
|
|
<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br>
|
|
<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="/public/js/vendor/socket.io.js"></script>
|
|
|
|
<script src="/public/js/bundle.js"></script>
|
|
|
|
</html> |