evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Started implementing track preview

Browse Source
This commit is contained in:
RemixDev
2020-04-19 19:22:21 +02:00
parent 2a5d3c2677
commit 6c49966c45
3 changed files with 154 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
public/index.html
View File

@@ -33,25 +33,24 @@
<div id="search_tab_content">
<!-- ### Main Search Tab ### -->
<div id="main_search" class="search_tabcontent">
<template v-for="section in results.ORDER">
<div v-if="(section != 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)" class="search_section">
<template v-for="section in results.allTab.ORDER">
<div v-if="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)" class="search_section">
<h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
<!-- Top result -->
<div v-if="section == 'TOP_RESULT'" class="top_result clickable" v-on:click="window[results.TOP_RESULT[0].__TYPE__.toLowerCase()+'View'](event)" v-bind:data-id="results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : ''">
<div v-if="section == 'TOP_RESULT'" class="top_result clickable" v-on:click="window[results.allTab.TOP_RESULT[0].type+'View'](event)" v-bind:data-id="results.allTab.TOP_RESULT[0].id">
<div class="cover_container">
<img v-bind:src="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + results.TOP_RESULT[0].ART_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + results.TOP_RESULT[0].ALB_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'https://e-cdns-images.dzcdn.net/images/'+ results.TOP_RESULT[0].PICTURE_TYPE +'/' + results.TOP_RESULT[0].PLAYLIST_PICTURE :'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'"
v-bind:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/'+results.TOP_RESULT[0].__TYPE__+'/'+(results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : '')" class="download_overlay"><i class="material-icons">get_app</i></div>
<img v-bind:src="results.allTab.TOP_RESULT[0].picture" v-bind:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind: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.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_NAME : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_TITLE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].TITLE : '' }}</p>
<p class="secondary-text">{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? numberWithDots(results.TOP_RESULT[0].NB_FAN) + ' fans' : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'by '+results.TOP_RESULT[0].ART_NAME+' - '+results.TOP_RESULT[0].NUMBER_TRACK+' tracks' : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'by '+results.TOP_RESULT[0].PARENT_USERNAME+' - '+results.TOP_RESULT[0].NB_SONG+' tracks' : '' }}</p>
<span class="tag">{{ results.TOP_RESULT[0].__TYPE__.charAt(0).toUpperCase() + results.TOP_RESULT[0].__TYPE__.substring(1)}}</span>
<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-if="section == 'TRACK'">
<div v-else-if="section == 'TRACK'">
<table class="tracks_table">
<tr v-for="track in results.TRACK.data.slice(0, 6)" class="track_row">
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
<td class="breakline"><span class="clickable" v-on:click="artistView(event)" v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
@@ -61,28 +60,51 @@
</tr>
</table>
</div>
<div v-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only">
<div v-for="release in results[section].data.slice(0, 10)" class="release clickable" v-on:click="window[section.toLowerCase()+'View'](event)" v-bind:data-id="section == 'ARTIST' ? release.ART_ID : section == 'ALBUM' ? release.ALB_ID : section == 'PLAYLIST' ? release.PLAYLIST_ID : ''">
<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" v-on:click="artistView(event)" v-bind:data-id="release.ART_ID">
<div class="cover_container">
<img v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'" v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'">
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/'+(section == 'ARTIST' ? 'artist/'+release.ART_ID : section == 'ALBUM' ? 'album/'+release.ALB_ID : section == 'PLAYLIST' ? 'playlist/'+release.PLAYLIST_ID : '')" class="download_overlay"><i class="material-icons">get_app</i></div>
<img class="circle coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind: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">{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p>
<p class="secondary-text">{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p>
<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" v-on:click="albumView(event)" v-bind:data-id="release.ALB_ID">
<div class="cover_container">
<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind: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">{{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" v-on:click="playlistView(event)" v-bind:data-id="release.PLAYLIST_ID">
<div class="cover_container">
<img class="rounded coverart" v-bind: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" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind: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>
</div>
</template>
<div v-if="results.ORDER.every(section => section == 'TOP_RESULT' ? results[section].length == 0 : results[section].data.length == 0)">
<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">
<div v-if="results.data.length == 0">
<div v-if="!results.trackTab.loaded">
<h1>Loading</h1>
</div>
<div v-else-if="results.trackTab.data.length == 0">
<h1>No Tracks found</h1>
</div>
<table class="tracks_table" v-if="results.data.length > 0">
<table class="tracks_table" v-if="results.trackTab.data.length > 0">
<tr>
<th style="width: 48px;"></th>
<th>Title</th>
@@ -91,61 +113,70 @@
<th><i class="material-icons">timer</i></th>
<th style="width: 56px;"></th>
</tr>
<tr v-for="track in results.data" class="track_row">
<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
<td class="breakline"><span class="clickable" v-on:click="artistView(event)" v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.ALB_ID">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td>
<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
<tr v-for="track in results.trackTab.data" class="track_row">
<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="track.album.cover_small"></td>
<td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
<td class="breakline" class="clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">{{track.artist.name}}</td>
<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.album.id">{{track.album.title}}</td>
<td>{{convertDuration(track.duration)}}</td>
<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="track.link" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
</tr>
</table>
</div>
<!-- ### Album Search Tab ### -->
<div id="album_search" class="search_tabcontent">
<div v-if="results.data.length == 0">
<div v-if="!results.albumTab.loaded">
<h1>Loading</h1>
</div>
<div v-else-if="results.albumTab.data.length == 0">
<h1>No Albums found</h1>
</div>
<div class="release_grid" v-if="results.data.length > 0">
<div v-for="release in results.data" class="release clickable" v-on:click="albumView(event)" v-bind:data-id="release.ALB_ID">
<div class="release_grid" v-if="results.albumTab.data.length > 0">
<div v-for="release in results.albumTab.data" class="release clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
<div class="cover_container">
<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/album/'+release.ALB_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
<img class="rounded coverart" v-bind:src="release.cover_medium">
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i class="material-icons">get_app</i></div>
</div>
<p class="primary-text">{{ release.ALB_TITLE }}</p>
<p class="secondary-text">{{ 'by '+release.ART_NAME }}</p>
<p class="primary-text">{{ 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">
<div v-if="results.data.length == 0">
<div v-if="!results.artistTab.loaded">
<h1>Loading</h1>
</div>
<div v-else-if="results.artistTab.data.length == 0">
<h1>No Artists found</h1>
</div>
<div class="release_grid" v-if="results.data.length > 0">
<div v-for="release in results.data" class="release clickable" v-on:click="artistView(event)" v-bind:data-id="release.ART_ID">
<div class="release_grid" v-if="results.artistTab.data.length > 0">
<div v-for="release in results.artistTab.data" class="release clickable" v-on:click="artistView(event)" v-bind:data-id="release.id">
<div class="cover_container">
<img class="circle coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/artist/'+release.ART_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
<img class="circle coverart" v-bind:src="release.picture_medium">
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="release.link" 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>
<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">
<div v-if="results.data.length == 0">
<div v-if="!results.playlistTab.loaded">
<h1>Loading</h1>
</div>
<div v-else-if="results.playlistTab.data.length == 0">
<h1>No Playlists found</h1>
</div>
<div class="release_grid" v-if="results.data.length > 0">
<div v-for="release in results.data" class="release clickable" v-on:click="playlistView(event)" v-bind:data-id="release.PLAYLIST_ID">
<div class="release_grid" v-if="results.playlistTab.data.length > 0">
<div v-for="release in results.playlistTab.data" class="release clickable" v-on:click="playlistView(event)" v-bind:data-id="release.id">
<div class="cover_container">
<img class="rounded coverart" v-bind: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" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/playlist/'+release.PLAYLIST_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
<img class="rounded coverart" v-bind:src="release.picture_medium">
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind: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">{{ release.NB_SONG+' tracks' }}</p>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
</div>
</div>
</div>