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

started refactoring of js

Browse Source
This commit is contained in:
Roberto Tonino 2020-04-19 22:02:06 +02:00
parent 39ec44884b
commit 0b3420cb71
11 changed files with 1529 additions and 1380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
public/index.html
View File

@ -1,89 +1,131 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>deemix</title>
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
</head>
<body>
<aside role="navigation" id="sidebar">
<i class="material-icons side_icon">menu</i>
<i id="main_search_tablink" class="main_tablinks"></i>
<i role="link" aria-label="home" id="main_home_tablink" class="material-icons side_icon main_tablinks">home</i>
<i role="link" aria-label="charts" id="main_charts_tablink" class="material-icons side_icon main_tablinks">bubble_chart</i>
<i role="link" aria-label="favorites" id="main_favorites_tablink" class="material-icons side_icon main_tablinks">album</i>
<i role="link" aria-label="link analyzer" id="main_analyzer_tablink" class="material-icons side_icon main_tablinks">link</i>
<i role="link" aria-label="settings" id="main_settings_tablink" class="material-icons side_icon main_tablinks">settings</i>
<i role="link" aria-label="charts" id="main_charts_tablink"
class="material-icons side_icon main_tablinks">bubble_chart</i>
<i role="link" aria-label="favorites" id="main_favorites_tablink"
class="material-icons side_icon main_tablinks">album</i>
<i role="link" aria-label="link analyzer" id="main_analyzer_tablink"
class="material-icons side_icon main_tablinks">link</i>
<i role="link" aria-label="settings" id="main_settings_tablink"
class="material-icons side_icon main_tablinks">settings</i>
<i role="link" aria-label="about" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i>
</aside>
<main id="main_content">
<div id="middle_section">
<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search..." autofocus></header>
<section id="content"><div id="container">
<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value=""
placeholder="Search..." autofocus></header>
<section id="content">
<div id="container">
<div id="search_tab" class="main_tabcontent">
<div class="tab">
<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
<button class="search_tablinks" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
<button class="search_tablinks" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
<button class="search_tablinks" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
<button class="search_tablinks" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
<button class="search_tablinks" id="search_all_tab">All</button>
<button class="search_tablinks" id="search_track_tab">Tracks</button>
<button class="search_tablinks" id="search_album_tab">Album</button>
<button class="search_tablinks" id="search_artist_tab">Artist</button>
<button class="search_tablinks" id="search_playlist_tab">Playlist</button>
</div>
<div id="search_tab_content">
<!-- ### Main Search Tab ### -->
<div id="main_search" class="search_tabcontent">
<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">
<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.allTab.TOP_RESULT[0].type+'View'](event)" v-bind:data-id="results.allTab.TOP_RESULT[0].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.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>
<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.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>
<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="tracks_table">
<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 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 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>
<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>
</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" v-on:click="artistView(event)" v-bind:data-id="release.ART_ID">
<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 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>
<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">{{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 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>
<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 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>
<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>
@ -91,7 +133,8 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
</div>
</div>
</template>
<div v-if="results.allTab.ORDER.every(section => section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[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>
@ -113,12 +156,18 @@ <h1>No Tracks found</h1>
<th style="width: 56px;"></th>
</tr>
<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 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 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>
<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>
@ -131,10 +180,13 @@ <h1>Loading</h1>
<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" v-on:click="albumView(event)" v-bind:data-id="release.id">
<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="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 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">{{ 'by '+release.artist.name+' - '+release.nb_tracks+' tracks' }}</p>
@ -150,10 +202,13 @@ <h1>Loading</h1>
<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" v-on:click="artistView(event)" v-bind:data-id="release.id">
<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="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 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.name }}</p>
<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
@ -169,10 +224,13 @@ <h1>Loading</h1>
<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" v-on:click="playlistView(event)" v-bind:data-id="release.id">
<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="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 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">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
@ -186,16 +244,23 @@ <h1>No Playlists found</h1>
<h1>Home</h1>
</div>
<div id="charts_tab" class="main_tabcontent"><h1>Charts</h1></div>
<div id="charts_tab" class="main_tabcontent">
<h1>Charts</h1>
</div>
<div id="favorites_tab" class="main_tabcontent"><h1>Favorites</h1></div>
<div id="favorites_tab" class="main_tabcontent">
<h1>Favorites</h1>
</div>
<div id="analyzer_tab" class="main_tabcontent"><h1>Link Analyzer</h1></div>
<div id="analyzer_tab" class="main_tabcontent">
<h1>Link Analyzer</h1>
</div>
<div id="settings_tab" class="main_tabcontent fixed_footer">
<h1>Settings</h1>
<div id="logged_in_info" class="inline-flex">
<img id="settings_picture" src="" alt="Profile Picture" class="circle" style="width: 125px;height:125px; margin-right: 12px;"/>
<img id="settings_picture" src="" alt="Profile Picture" class="circle"
style="width: 125px;height:125px; margin-right: 12px;" />
<div>
<p>You are logged in as <b id="settings_username"></b></p>
<button id="settings_btn_logout">Logout</button>
@ -205,7 +270,8 @@ <h1>Settings</h1>
<input autocomplete="off" type="password" id="login_input_arl" placeholder="ARL" />
<button id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
</div>
<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my own ARL?</a></p>
<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I
get my own ARL?</a></p>
<p><button style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
<div id="settings_generic_tab">
<div class="input_group">
@ -392,24 +458,31 @@ <h1>Settings</h1>
</footer>
</div>
<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
<div id="about_tab" class="main_tabcontent">
<h1>About</h1>
</div>
<div id="artist_tab" class="main_tabcontent fixed_footer image_header">
<header class="inline-flex" v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<header class="inline-flex"
v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<h1>{{ title }}</h1>
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="link" class="fab right"><i class="material-icons">get_app</i></div>
<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)"
v-on:click="addToQueue(event)" v-bind:data-link="link" class="fab right"><i
class="material-icons">get_app</i></div>
</header>
<div class="tab">
<template v-for="(item, name, index) in body">
<button v-bind:class="'selective' + (name==currentTab ? 'active' : '')" v-bind:href="'#artist_' + name" v-on:click="changeTab(name)">{{ name }}</button>
<button v-bind:class="'selective' + (name==currentTab ? 'active' : '')" v-bind:href="'#artist_' + name"
v-on:click="changeTab(name)">{{ name }}</button>
</template>
</div>
<table>
<thead>
<tr>
<th v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null" v-bind:class="{ 'sort-asc': data.sortKey == sortKey && sortOrder == 'asc', 'sort-desc': data.sortKey == sortKey && sortOrder == 'desc', 'sortable': data.sortKey, 'clickable': data.sortKey }">
<th v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null"
v-bind:class="{ 'sort-asc': data.sortKey == sortKey && sortOrder == 'asc', 'sort-desc': data.sortKey == sortKey && sortOrder == 'desc', 'sortable': data.sortKey, 'clickable': data.sortKey }">
{{data.title}}
</th>
</tr>
@ -418,12 +491,15 @@ <h1>{{ title }}</h1>
<tr v-for="release in showTable">
<td class="inline-flex clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
<img class="rounded" v-bind:src="release.cover_small" style="margin-right: 16px;" />
<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit" style="color:#FF3B30;">explicit</i>
<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit"
style="color:#FF3B30;">explicit</i>
{{release.title}}
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">fiber_new</i>
<i v-if="checkNewRelease(release.release_date)" class="material-icons"
style="color:#FF7300;">fiber_new</i>
</td>
<td>{{release.release_date}}</td>
<td><i v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)" v-bind:data-link="release.link" class="material-icons">file_download</i></td>
<td><i v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)"
v-bind:data-link="release.link" class="material-icons">file_download</i></td>
</tr>
</tbody>
</table>
@ -434,7 +510,8 @@ <h1>{{ title }}</h1>
</div>
<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
<header v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<header
v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<h1>{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1>
<h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ release_date }}</span></h2>
</header>
@ -450,9 +527,12 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
<tr v-if="track.type == 'track'">
<td><i class="material-icons">play_arrow</i></td>
<td>{{ track.track_position }}</td>
<td><i v-if="track.explicit_lyrics" class="material-icons">explicit</i>{{ track.title }} <span v-if="track.title_version">{{track.title_version}}</span></td>
<td class="clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">{{ track.artist.name }}</td>
<td class="clickable" v-if="type == 'Playlist'" v-on:click="albumView(event)" v-bind:data-id="track.album.id">{{ track.album.title }}</td>
<td><i v-if="track.explicit_lyrics" class="material-icons">explicit</i>{{ track.title }} <span
v-if="track.title_version">{{track.title_version}}</span></td>
<td class="clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">
{{ track.artist.name }}</td>
<td class="clickable" v-if="type == 'Playlist'" v-on:click="albumView(event)"
v-bind:data-id="track.album.id">{{ track.album.title }}</td>
<td>{{ convertDuration(track.duration) }}</td>
<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
</tr>
@ -463,15 +543,20 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
</tbody>
</table>
<span v-if="label" style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
<span v-if="label"
style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
<footer>
<button v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="link">Download {{ type }}</button>
<button v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="selectedLinks()">Download selection<i class="material-icons right">file_download</i></button>
<button v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
v-bind:data-link="link">Download {{ type }}</button>
<button v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
v-bind:data-link="selectedLinks()">Download selection<i
class="material-icons right">file_download</i></button>
<button onclick="backTab()">Back</button>
</footer>
</div>
</div></section>
</div>
</section>
</div>
<div id="download_tab_container" class="tab_hidden">
@ -502,12 +587,6 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
<script type="text/javascript" src="/public/js/vendor/lodash.min.js"></script>
<script type="text/javascript" src="/public/js/vendor/toastify.js"></script>
<script type="text/javascript" src="/public/js/app/app.js"></script>
<script type="text/javascript" src="/public/js/app/settings.js"></script>
<script type="text/javascript" src="/public/js/app/modals.js"></script>
<script type="text/javascript" src="/public/js/app/tabs.js"></script>
<script type="text/javascript" src="/public/js/app/stackedTabs.js"></script>
<script type="text/javascript" src="/public/js/app/utils.js"></script>
<script type="text/javascript" src="/public/js/app/search.js"></script>
<script type="text/javascript" src="/public/js/app/downloadList.js"></script>
<script type="module" src="/public/js/app.js"></script>
</html>

905
public/js/app.js Normal file
View File

@ -0,0 +1,905 @@
import * as Utils from './modules/utils.js'
import { MainSearch } from './modules/search-tab/main-search.js'
const socket = io.connect(window.location.href)
const localStorage = window.localStorage
// Toasts stuff
window.toastsWithId = {}
// Settings
window.lastSettings = {}
window.lastCredentials = {}
window.toast = function (msg, icon = null, dismiss = true, id = null) {
if (toastsWithId[id]) {
let toastObj = toastsWithId[id]
let toastDOM = $(`div.toastify[toast_id=${id}]`)
if (msg) {
toastDOM.find('.toast-message').html(msg)
}
if (icon) {
if (icon == 'loading') icon = `<div class="circle-loader"></div>`
else icon = `<i class="material-icons">${icon}</i>`
toastDOM.find('.toast-icon').html(icon)
}
if (dismiss !== null && dismiss) {
setTimeout(function () {
toastObj.hideToast()
delete toastsWithId[id]
}, 3000)
}
} else {
if (icon == null) icon = ''
else if (icon == 'loading') icon = `<div class="circle-loader"></div>`
else icon = `<i class="material-icons">${icon}</i>`
let toastObj = Toastify({
text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
duration: dismiss ? 3000 : 0,
gravity: 'bottom',
position: 'left'
}).showToast()
if (id) {
toastsWithId[id] = toastObj
$(toastObj.toastElement).attr('toast_id', id)
}
}
}
/* ===== Socketio listeners ===== */
socket.on('toast', data => {
toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
})
// Debug messages for socketio
socket.on('message', function (msg) {
console.log(msg)
})
// Login stuff
window.loginButton = function () {
let arl = document.querySelector('#login_input_arl').value
if (arl != '' && arl != localStorage.getItem('arl')) {
socket.emit('login', arl, true)
}
}
socket.on('logging_in', function () {
toast('Logging in', 'loading', false, 'login-toast')
})
socket.on('logged_in', function (data) {
switch (data.status) {
case 1:
case 3:
toast('Logged in', 'done', true, 'login-toast')
if (data.arl) {
localStorage.setItem('arl', data.arl)
$('#login_input_arl').val(data.arl)
}
$('#open_login_prompt').hide()
if (data.user) {
$('#settings_username').text(data.user.name)
$('#settings_picture').attr(
'src',
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
)
$('#logged_in_info').show()
}
break
case 2:
toast('Already logged in', 'done', true, 'login-toast')
if (data.user) {
$('#settings_username').text(data.user.name)
$('#settings_picture').attr(
'src',
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
)
$('#logged_in_info').show()
}
break
case 0:
toast("Couldn't log in", 'close', true, 'login-toast')
localStorage.removeItem('arl')
$('#login_input_arl').val('')
$('#open_login_prompt').show()
$('#logged_in_info').hide()
$('#settings_username').text('Not Logged')
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
break
}
})
socket.on('logged_out', function () {
toast('Logged out', 'done', true, 'login-toast')
localStorage.removeItem('arl')
$('#login_input_arl').val('')
$('#open_login_prompt').show()
$('#logged_in_info').hide()
$('#settings_username').text('Not Logged')
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
})
/**
* Adds event listeners.
* @returns {void}
* @since 0.1.0 (?)
*/
function linkEventListeners() {
document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
document.getElementById('settings_btn_updateArl').addEventListener('click', loginButton)
}
/**
* App initialization.
* @returns {void}
* @since 0.1.0 (?)
*/
function init() {
linkEventListeners()
if ('true' === localStorage.darkMode) {
document.documentElement.classList.add('dark-theme')
}
if (localStorage.getItem('arl')) {
let arl = localStorage.getItem('arl')
socket.emit('login', arl)
$('#login_input_arl').val(arl)
}
// Check if download tab should be open
if ('true' === localStorage.getItem('downloadTabOpen')) {
document.querySelector('#download_tab_container').classList.remove('tab_hidden')
}
// Open default tab
document.getElementById('main_home_tablink').click()
}
document.addEventListener('DOMContentLoaded', init)
/* tabs.js */
window.search_selected = ''
window.main_selected = ''
window.windows_stack = []
window.currentStack = {}
window.changeTab = function (evt, section, tabName) {
windows_stack = []
currentStack = {}
var i, tabcontent, tablinks
tabcontent = document.getElementsByClassName(section + '_tabcontent')
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none'
}
tablinks = document.getElementsByClassName(section + '_tablinks')
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove('active')
}
if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
SettingsTab.settings = { ...lastSettings }
}
document.getElementById(tabName).style.display = 'block'
window[section + '_selected'] = tabName
// Not choosing .currentTarget beacuse the event
// is delegated, so it refers to #sidebar
evt.target.classList.add('active')
// Check if you need to load more content in the search tab
if (
main_selected == 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 &&
MainSearch.results[search_selected.split('_')[0] + 'Tab'].data.length == 0
) {
search(search_selected.split('_')[0])
}
}
window.showTab = function (type, id, back = false) {
if (windows_stack.length == 0) windows_stack.push({ tab: main_selected })
else if (!back) windows_stack.push(currentStack)
if (type == 'artist') {
window.tab = 'artist_tab'
} else {
window.tab = 'tracklist_tab'
}
currentStack = { type: type, id: id }
let tabcontent = document.getElementsByClassName('main_tabcontent')
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none'
}
document.getElementById(tab).style.display = 'block'
}
window.backTab = function () {
if (windows_stack.length == 1) {
clickElement('main_' + main_selected + 'link')
} else {
let tabObj = windows_stack.pop()
if (tabObj.type == 'artist') resetArtistTab()
else resetTracklistTab()
socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id })
showTab(tabObj.type, tabObj.id, true)
}
}
/**
* Handles click Event on the sidebar and changes tab
* according to clicked icon.
* Uses event delegation
* @param {Event} event
* @since 0.1.0
*/
window.handleSidebarClick = function (event) {
let targetID = event.target.id
switch (targetID) {
case 'main_search_tablink':
changeTab(event, 'main', 'search_tab')
break
case 'main_home_tablink':
changeTab(event, 'main', 'home_tab')
break
case 'main_charts_tablink':
changeTab(event, 'main', 'charts_tab')
break
case 'main_favorites_tablink':
changeTab(event, 'main', 'favorites_tab')
break
case 'main_analyzer_tablink':
changeTab(event, 'main', 'analyzer_tab')
break
case 'main_settings_tablink':
changeTab(event, 'main', 'settings_tab')
break
case 'main_about_tablink':
changeTab(event, 'main', 'about_tab')
break
default:
break
}
}
document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
/* stackedTabs.js */
var artistTab = new Vue({
el: '#artist_tab',
data: {
currentTab: '',
sortKey: 'release_date',
sortOrder: 'desc',
title: '',
image: '',
type: '',
link: '',
head: null,
body: null
},
methods: {
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
},
moreInfo: function (url, e) {
if (e) e.preventDefault()
showTrackListSelective(url, true)
},
sortBy: function (key) {
if (key == this.sortKey) {
this.sortOrder = this.sortOrder == 'asc' ? 'desc' : 'asc'
} else {
this.sortKey = key
this.sortOrder = 'asc'
}
},
changeTab: function (tab) {
this.currentTab = tab
},
checkNewRelease: function (date) {
var g1 = new Date()
var g2 = new Date(date)
g2.setDate(g2.getDate() + 3)
g1.setHours(0, 0, 0, 0)
if (g1.getTime() <= g2.getTime()) {
return true
} else {
return false
}
}
},
computed: {
showTable() {
if (this.body) return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
else return []
}
}
})
var tracklistTab = new Vue({
el: '#tracklist_tab',
data: {
title: '',
metadata: '',
release_date: '',
label: '',
explicit: false,
image: '',
type: '',
link: '',
head: null,
body: []
},
methods: {
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
},
toggleAll: function (e) {
this.body.forEach(item => {
if (item.type == 'track') {
item.selected = e.currentTarget.checked
}
})
},
selectedLinks: function () {
var selected = []
if (this.body) {
this.body.forEach(item => {
if (item.type == 'track' && item.selected) selected.push(item.link)
})
}
return selected.join(';')
}
}
})
window.resetArtistTab = function () {
artistTab.title = 'Loading...'
artistTab.image = ''
artistTab.type = ''
artistTab.currentTab = ''
artistTab.sortKey = 'release_date'
artistTab.sortOrder = 'desc'
artistTab.link = ''
artistTab.head = []
artistTab.body = null
}
window.resetTracklistTab = function () {
tracklistTab.title = 'Loading...'
tracklistTab.image = ''
tracklistTab.metadata = ''
tracklistTab.label = ''
tracklistTab.release_date = ''
tracklistTab.explicit = false
tracklistTab.type = ''
tracklistTab.head = []
tracklistTab.body = []
}
window.artistView = function (ev) {
let id = ev.currentTarget.dataset.id
resetArtistTab()
socket.emit('getTracklist', { type: 'artist', id: id })
showTab('artist', id)
}
window.albumView = function (ev) {
let id = ev.currentTarget.dataset.id
resetTracklistTab()
socket.emit('getTracklist', { type: 'album', id: id })
showTab('album', id)
}
window.playlistView = function (ev) {
let id = ev.currentTarget.dataset.id
resetTracklistTab()
socket.emit('getTracklist', { type: 'playlist', id: id })
showTab('playlist', id)
}
socket.on('show_artist', function (data) {
artistTab.title = data.name
artistTab.image = data.picture_xl
artistTab.type = 'Artist'
artistTab.link = `https://www.deezer.com/artist/${data.id}`
artistTab.currentTab = Object.keys(data.releases)[0]
artistTab.sortKey = 'release_date'
artistTab.sortOrder = 'desc'
artistTab.head = [
{ title: 'Title', sortKey: 'title' },
{ title: 'Release Date', sortKey: 'release_date' },
{ title: '', width: '56px' }
]
if (_.isEmpty(data.releases)) {
artistTab.body = null
} else {
artistTab.body = data.releases
}
})
socket.on('show_album', function (data) {
tracklistTab.type = 'Album'
tracklistTab.link = `https://www.deezer.com/album/${data.id}`
tracklistTab.title = data.title
tracklistTab.explicit = data.explicit_lyrics
tracklistTab.label = data.label
tracklistTab.metadata = `${data.artist.name} • ${data.tracks.length} songs`
tracklistTab.release_date = data.release_date.substring(0, 10)
tracklistTab.image = data.cover_xl
tracklistTab.head = [
{ title: '<i class="material-icons">music_note</i>', width: '24px' },
{ title: '#' },
{ title: 'Song' },
{ title: 'Artist' },
{ title: '<i class="material-icons">timer</i>', width: '40px' },
{
title: '<input onclick="tracklistTab.toggleAll(event)" class="selectAll" type="checkbox"><span></span>',
width: '24px'
}
]
if (_.isEmpty(data.tracks)) {
tracklistTab.body = null
} else {
tracklistTab.body = data.tracks
}
})
socket.on('show_playlist', function (data) {
tracklistTab.type = 'Playlist'
tracklistTab.link = `https://www.deezer.com/playlist/${data.id}`
tracklistTab.title = data.title
tracklistTab.image = data.picture_xl
tracklistTab.release_date = data.creation_date.substring(0, 10)
tracklistTab.metadata = `by ${data.creator.name} • ${data.tracks.length} songs`
tracklistTab.head = [
{ title: '<i class="material-icons">music_note</i>', width: '24px' },
{ title: '#' },
{ title: 'Song' },
{ title: 'Artist' },
{ title: 'Album' },
{ title: '<i class="material-icons">timer</i>', width: '40px' },
{
title: '<input onclick="tracklistTab.toggleAll(event)" class="selectAll" type="checkbox"><span></span>',
width: '24px'
}
]
if (_.isEmpty(data.tracks)) {
tracklistTab.body = null
} else {
tracklistTab.body = data.tracks
}
})
/* search.js */
// Load more content when the search page is at the end
$('#content').on('scroll', function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
if (
main_selected == 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
) {
scrolledSearch(search_selected.split('_')[0])
}
}
})
window.search = function (type) {
let query = MainSearch.results.query
socket.emit('search', {
term: query,
type: type,
start: MainSearch.results[type + 'Tab'].next,
nb: 30
})
}
window.scrolledSearch = function (type) {
query = MainSearch.results.query
if (MainSearch.results[type + 'Tab'].next < MainSearch.results[type + 'Tab'].total) {
socket.emit('search', {
term: query,
type: type,
start: MainSearch.results[type + 'Tab'].next,
nb: 30
})
}
}
window.searchUpdate = function (result) {
let next = 0
if (result.next) next = parseInt(result.next.match(/index=(\d*)/)[1])
else next = result.total
if (MainSearch.results[result.type + 'Tab'].total != result.total)
MainSearch.results[result.type + 'Tab'].total = result.total
if (MainSearch.results[result.type + 'Tab'].next != next) {
MainSearch.results[result.type + 'Tab'].next = next
MainSearch.results[result.type + 'Tab'].data = MainSearch.results[result.type + 'Tab'].data.concat(result.data)
}
MainSearch.results[result.type + 'Tab'].loaded = true
}
socket.on('search', function (result) {
searchUpdate(result)
})
window.clickElement = function (button) {
return document.getElementById(button).click()
}
window.sendAddToQueue = function (url, bitrate = null) {
if (url.indexOf(';') != -1) {
urls = url.split(';')
urls.forEach(url => {
socket.emit('addToQueue', { url: url, bitrate: bitrate })
})
} else if (url != '') {
socket.emit('addToQueue', { url: url, bitrate: bitrate })
}
}
window.handleTabClick = function (event) {
let targetID = event.target.id
switch (targetID) {
case 'search_all_tab':
changeTab(event, 'search', 'main_search')
break
case 'search_track_tab':
changeTab(event, 'search', 'track_search')
break
case 'search_album_tab':
changeTab(event, 'search', 'album_search')
break
case 'search_artist_tab':
changeTab(event, 'search', 'artist_search')
break
case 'search_playlist_tab':
changeTab(event, 'search', 'playlist_search')
break
default:
break
}
}
document.getElementById('search_tab').addEventListener('click', handleTabClick)
// Search section
$('#searchbar').keyup(function (e) {
if (e.keyCode == 13) {
let term = this.value
if (Utils.isValidURL(term)) {
if (e.ctrlKey) {
openQualityModal(term)
} else {
sendAddToQueue(term)
}
} else {
if (term != MainSearch.query || main_selected == 'search_tab') {
document.getElementById('search_tab_content').style.display = 'none'
socket.emit('mainSearch', { term: term })
} else {
document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()
}
}
}
})
window.mainSearchHandler = function (result) {
let resetObj = { data: [], next: 0, total: 0, loaded: false }
MainSearch.results.allTab = result
MainSearch.results.query = result.QUERY
MainSearch.results.trackTab = { ...resetObj }
MainSearch.results.albumTab = { ...resetObj }
MainSearch.results.artistTab = { ...resetObj }
MainSearch.results.playlistTab = { ...resetObj }
document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()
}
socket.on('mainSearch', function (result) {
mainSearchHandler(result)
})
/* settings.js */
const SettingsTab = new Vue({
el: '#settings_tab',
data: {
settings: { tags: {} },
spotifyFeatures: {}
},
methods: {
addListeners() {
document.getElementById('settings_btn_save').addEventListener('click', window.saveSettings)
document.getElementById('settings_btn_copyArl').addEventListener('click', window.copyARLtoClipboard)
document.getElementById('settings_btn_logout').addEventListener('click', window.logout)
}
},
mounted() {
this.addListeners()
}
})
socket.on('init_settings', function (settings, credentials) {
loadSettings(settings, credentials)
toast('Settings loaded!', 'settings')
})
socket.on('updateSettings', function (settings, credentials) {
loadSettings(settings, credentials)
toast('Settings updated!', 'settings')
})
window.loadSettings = function (settings, spotifyCredentials) {
lastSettings = { ...settings }
lastCredentials = { ...spotifyCredentials }
SettingsTab.settings = settings
SettingsTab.spotifyFeatures = spotifyCredentials
}
window.saveSettings = function () {
lastSettings = { ...SettingsTab.settings }
lastCredentials = { ...SettingsTab.spotifyFeatures }
socket.emit('saveSettings', lastSettings, lastCredentials)
}
window.copyARLtoClipboard = function () {
$('#login_input_arl').attr('type', 'text')
let copyText = document.querySelector('#login_input_arl')
copyText.select()
copyText.setSelectionRange(0, 99999)
document.execCommand('copy')
$('#login_input_arl').attr('type', 'password')
toast('ARL copied to clipboard', 'assignment')
}
window.logout = function () {
socket.emit('logout')
}
/* downloadList.js */
// Show/Hide Download Tab
window.toggleDownloadTab = function (ev) {
ev.preventDefault()
let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
localStorage.setItem('downloadTabOpen', !isHidden)
}
var queueList = {}
var queue = []
var queueComplete = []
socket.on('init_downloadQueue', function (data) {
if (data.queueComplete.length) {
data.queueComplete.forEach(item => {
addToQueue(data.queueList[item])
})
}
if (data.currentItem) {
addToQueue(data['queueList'][data.currentItem], true)
}
data.queue.forEach(item => {
addToQueue(data.queueList[item])
})
})
window.addToQueue = function (queueItem, current = false) {
queueList[queueItem.uuid] = queueItem
if (queueItem.downloaded + queueItem.failed == queueItem.size) queueComplete.push(queueItem.uuid)
else queue.push(queueItem.uuid)
$('#download_list').append(
`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
<div class="download_info">
<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
<div class="download_info_data">
<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
<span class="secondary-text">${queueItem.artist}</span>
</div>
<div class="download_info_status">
<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
queueItem.size
}</span>
</div>
</div>
<div class="download_bar">
<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
<i onclick="downloadAction(event)" class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
</div>
</div>`
)
if (queueItem.progress > 0 || current) {
$('#bar_' + queueItem.uuid)
.removeClass('indeterminate')
.addClass('determinate')
}
$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
if (queueItem.failed >= 1) {
$('#download_' + queueItem.uuid + ' .download_info_status').append(
`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
)
}
if (queueItem.downloaded + queueItem.failed == queueItem.size) {
let result_icon = $('#download_' + queueItem.uuid).find('.queue_icon')
if (queueItem.failed == 0) {
result_icon.text('done')
} else if (queueItem.failed == queueItem.size) {
result_icon.text('error')
} else {
result_icon.text('warning')
}
}
}
socket.on('addedToQueue', function (queueItem) {
addToQueue(queueItem)
})
window.downloadAction = function (evt) {
let icon = $(evt.currentTarget).text()
let uuid = $(evt.currentTarget).data('uuid')
switch (icon) {
case 'remove':
socket.emit('removeFromQueue', uuid)
break
default:
}
}
socket.on('removedFromQueue', function (uuid) {
let index = queue.indexOf(uuid)
if (index > -1) {
queue.splice(index, 1)
$(`#download_${queueList[uuid].uuid}`).remove()
delete queueList[uuid]
}
})
socket.on('startDownload', function (uuid) {
$('#bar_' + uuid)
.removeClass('indeterminate')
.addClass('determinate')
})
socket.on('finishDownload', function (uuid) {
if (queue.indexOf(uuid) > -1) {
toast(`${queueList[uuid].title} finished downloading.`, 'done')
$('#bar_' + uuid).css('width', '100%')
let result_icon = $('#download_' + uuid).find('.queue_icon')
if (queueList[uuid].failed == 0) {
result_icon.text('done')
} else if (queueList[uuid].failed >= queueList[uuid].size) {
result_icon.text('error')
} else {
result_icon.text('warning')
}
let index = queue.indexOf(uuid)
if (index > -1) {
queue.splice(index, 1)
queueComplete.push(uuid)
}
if (queue.length <= 0) {
toast('All downloads completed!', 'done_all')
}
}
})
socket.on('removedAllDownloads', function (currentItem) {
queueComplete = []
if (currentItem == '') {
queue = []
queueList = {}
$('#download_list').html('')
} else {
queue = [currentItem]
let tempQueueItem = queueList[currentItem]
queueList = {}
queueList[currentItem] = tempQueueItem
$('.download_object').each(function (index) {
if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
})
}
})
socket.on('removedFinishedDownloads', function () {
queueComplete.forEach(item => {
$('#download_' + item).remove()
})
queueComplete = []
})
$('#clean_queue').on('click', function () {
socket.emit('removeFinishedDownloads')
})
$('#cancel_queue').on('click', function () {
socket.emit('cancelAllDownloads')
})
socket.on('updateQueue', function (update) {
if (update.uuid && queue.indexOf(update.uuid) > -1) {
if (update.downloaded) {
queueList[update.uuid].downloaded++
$('#download_' + update.uuid + ' .queue_downloaded').text(
queueList[update.uuid].downloaded + queueList[update.uuid].failed
)
}
if (update.failed) {
queueList[update.uuid].failed++
$('#download_' + update.uuid + ' .queue_downloaded').text(
queueList[update.uuid].downloaded + queueList[update.uuid].failed
)
if (queueList[update.uuid].failed == 1) {
$('#download_' + update.uuid + ' .download_info_status').append(
`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">1</span> <i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
)
} else {
$('#download_' + update.uuid + ' .queue_failed').text(queueList[update.uuid].failed)
}
}
if (update.progress) {
queueList[update.uuid].progress = update.progress
$('#bar_' + update.uuid).css('width', update.progress + '%')
}
}
})
/* modals.js */
// quality modal stuff
var modalQuality = document.getElementById('modal_quality')
modalQuality.open = false
window.onclick = function (event) {
if (event.target == modalQuality && modalQuality.open) {
$(modalQuality).addClass('animated fadeOut')
}
}
$(modalQuality).on('webkitAnimationEnd', function () {
if (modalQuality.open) {
$(this).removeClass('animated fadeOut')
$(this).css('display', 'none')
modalQuality.open = false
} else {
$(this).removeClass('animated fadeIn')
$(this).css('display', 'block')
modalQuality.open = true
}
})
window.openQualityModal = function (link) {
$(modalQuality).data('url', link)
$(modalQuality).css('display', 'block')
$(modalQuality).addClass('animated fadeIn')
}
window.modalQualityButton = function (event) {
if (!event.target.matches('.quality-button')) {
return
}
let bitrate = event.target.dataset.qualityValue
var url = $(modalQuality).data('url')
sendAddToQueue(url, bitrate)
$(modalQuality).addClass('animated fadeOut')
}

161
public/js/app/app.js
View File

@ -1,161 +0,0 @@
// Initialization
const socket = io.connect(window.location.href)
var localStorage = window.localStorage
// toasts stuff
var toastsWithId = {}
// settings
var lastSettings = {}
var lastCredentials = {}
function toast(msg, icon = null, dismiss = true, id = null) {
if (toastsWithId[id]) {
let toastObj = toastsWithId[id]
let toastDOM = $(`div.toastify[toast_id=${id}]`)
if (msg) {
toastDOM.find('.toast-message').html(msg)
}
if (icon) {
if (icon == 'loading') icon = `<div class="circle-loader"></div>`
else icon = `<i class="material-icons">${icon}</i>`
toastDOM.find('.toast-icon').html(icon)
}
if (dismiss !== null && dismiss) {
setTimeout(function () {
toastObj.hideToast()
delete toastsWithId[id]
}, 3000)
}
} else {
if (icon == null) icon = ''
else if (icon == 'loading') icon = `<div class="circle-loader"></div>`
else icon = `<i class="material-icons">${icon}</i>`
let toastObj = Toastify({
text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
duration: dismiss ? 3000 : 0,
gravity: 'bottom',
position: 'left'
}).showToast()
if (id) {
toastsWithId[id] = toastObj
$(toastObj.toastElement).attr('toast_id', id)
}
}
}
/* ===== Socketio listeners ===== */
socket.on('toast', data => {
toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
})
// Debug messages for socketio
socket.on('message', function (msg) {
console.log(msg)
})
// Login stuff
function loginButton() {
let arl = document.querySelector('#login_input_arl').value
if (arl != '' && arl != localStorage.getItem('arl')) {
socket.emit('login', arl, true)
}
}
socket.on('logging_in', function () {
toast('Logging in', 'loading', false, 'login-toast')
})
socket.on('logged_in', function (data) {
switch (data.status) {
case 1:
case 3:
toast('Logged in', 'done', true, 'login-toast')
if (data.arl) {
localStorage.setItem('arl', data.arl)
$('#login_input_arl').val(data.arl)
}
$('#open_login_prompt').hide()
if (data.user) {
$('#settings_username').text(data.user.name)
$('#settings_picture').attr(
'src',
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
)
$('#logged_in_info').show()
}
break
case 2:
toast('Already logged in', 'done', true, 'login-toast')
if (data.user) {
$('#settings_username').text(data.user.name)
$('#settings_picture').attr(
'src',
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
)
$('#logged_in_info').show()
}
break
case 0:
toast("Couldn't log in", 'close', true, 'login-toast')
localStorage.removeItem('arl')
$('#login_input_arl').val('')
$('#open_login_prompt').show()
$('#logged_in_info').hide()
$('#settings_username').text('Not Logged')
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
break
}
})
socket.on('logged_out', function () {
toast('Logged out', 'done', true, 'login-toast')
localStorage.removeItem('arl')
$('#login_input_arl').val('')
$('#open_login_prompt').show()
$('#logged_in_info').hide()
$('#settings_username').text('Not Logged')
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
})
/**
* Adds event listeners.
* @returns {void}
* @since 0.1.0 (?)
*/
function linkEventListeners() {
document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
document.getElementById('settings_btn_updateArl').addEventListener('click', loginButton)
}
/**
* App initialization.
* @returns {void}
* @since 0.1.0 (?)
*/
function init() {
linkEventListeners()
if ('true' === localStorage.darkMode) {
document.documentElement.classList.add('dark-theme')
}
if (localStorage.getItem('arl')) {
let arl = localStorage.getItem('arl')
socket.emit('login', arl)
$('#login_input_arl').val(arl)
}
// Check if download tab should be open
if ('true' === localStorage.getItem('downloadTabOpen')) {
document.querySelector('#download_tab_container').classList.remove('tab_hidden')
}
// Open default tab
document.getElementById('main_home_tablink').click()
}
document.addEventListener('DOMContentLoaded', init)

183
public/js/app/downloadList.js
View File

@ -1,183 +0,0 @@
// Show/Hide Download Tab
function toggleDownloadTab(ev) {
ev.preventDefault()
let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
localStorage.setItem('downloadTabOpen', !isHidden)
}
var queueList = {}
var queue = []
var queueComplete = []
socket.on('init_downloadQueue', function (data) {
if (data.queueComplete.length) {
data.queueComplete.forEach(item => {
addToQueue(data.queueList[item])
})
}
if (data.currentItem){
addToQueue(data['queueList'][data.currentItem], true)
}
data.queue.forEach(item => {
addToQueue(data.queueList[item])
})
})
function addToQueue(queueItem, current=false){
queueList[queueItem.uuid] = queueItem
if (queueItem.downloaded + queueItem.failed == queueItem.size) queueComplete.push(queueItem.uuid)
else queue.push(queueItem.uuid)
$('#download_list').append(
`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
<div class="download_info">
<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
<div class="download_info_data">
<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
<span class="secondary-text">${queueItem.artist}</span>
</div>
<div class="download_info_status">
<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
queueItem.size
}</span>
</div>
</div>
<div class="download_bar">
<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
<i onclick="downloadAction(event)" class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
</div>
</div>`)
if (queueItem.progress>0 || current){
$('#bar_' + queueItem.uuid).removeClass('indeterminate').addClass('determinate')
}
$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
if (queueItem.failed >= 1) {
$('#download_' + queueItem.uuid + ' .download_info_status').append(
`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
)
}
if (queueItem.downloaded + queueItem.failed == queueItem.size) {
let result_icon = $('#download_' + queueItem.uuid).find('.queue_icon')
if (queueItem.failed == 0) {
result_icon.text('done')
} else if (queueItem.failed == queueItem.size) {
result_icon.text('error')
} else {
result_icon.text('warning')
}
}
}
socket.on('addedToQueue', function (queueItem) {
addToQueue(queueItem)
})
function downloadAction(evt) {
let icon = $(evt.currentTarget).text()
let uuid = $(evt.currentTarget).data('uuid')
switch (icon) {
case 'remove':
socket.emit('removeFromQueue', uuid)
break
default:
}
}
socket.on('removedFromQueue', function (uuid) {
let index = queue.indexOf(uuid)
if (index > -1) {
queue.splice(index, 1)
$(`#download_${queueList[uuid].uuid}`).remove()
delete queueList[uuid]
}
})
socket.on('startDownload', function (uuid) {
$('#bar_' + uuid)
.removeClass('indeterminate')
.addClass('determinate')
})
socket.on('finishDownload', function (uuid) {
if (queue.indexOf(uuid) > -1) {
toast(`${queueList[uuid].title} finished downloading.`, 'done')
$('#bar_' + uuid).css('width', '100%')
let result_icon = $('#download_' + uuid).find('.queue_icon')
if (queueList[uuid].failed == 0) {
result_icon.text('done')
} else if (queueList[uuid].failed >= queueList[uuid].size) {
result_icon.text('error')
} else {
result_icon.text('warning')
}
let index = queue.indexOf(uuid)
if (index > -1) {
queue.splice(index, 1)
queueComplete.push(uuid)
}
if (queue.length <= 0) {
toast('All downloads completed!', 'done_all')
}
}
})
socket.on('removedAllDownloads', function (currentItem) {
queueComplete = []
if (currentItem == '') {
queue = []
queueList = {}
$('#download_list').html('')
} else {
queue = [currentItem]
tempQueueItem = queueList[currentItem]
queueList = {}
queueList[currentItem] = tempQueueItem
$('.download_object').each(function (index) {
if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
})
}
})
socket.on('removedFinishedDownloads', function () {
queueComplete.forEach(item => {
$('#download_' + item).remove()
})
queueComplete = []
})
$('#clean_queue').on('click', function () {
socket.emit('removeFinishedDownloads')
})
$('#cancel_queue').on('click', function () {
socket.emit('cancelAllDownloads')
})
socket.on('updateQueue', function (update) {
if (update.uuid && queue.indexOf(update.uuid) > -1) {
if (update.downloaded) {
queueList[update.uuid].downloaded++
$('#download_' + update.uuid + ' .queue_downloaded').text(
queueList[update.uuid].downloaded + queueList[update.uuid].failed
)
}
if (update.failed) {
queueList[update.uuid].failed++
$('#download_' + update.uuid + ' .queue_downloaded').text(
queueList[update.uuid].downloaded + queueList[update.uuid].failed
)
if (queueList[update.uuid].failed == 1) {
$('#download_' + update.uuid + ' .download_info_status').append(
`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">1</span> <i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
)
} else {
$('#download_' + update.uuid + ' .queue_failed').text(queueList[update.uuid].failed)
}
}
if (update.progress) {
queueList[update.uuid].progress = update.progress
$('#bar_' + update.uuid).css('width', update.progress + '%')
}
}
})

39
public/js/app/modals.js
View File

@ -1,39 +0,0 @@
// quality modal stuff
var modalQuality = document.getElementById('modal_quality')
modalQuality.open = false
window.onclick = function (event) {
if (event.target == modalQuality && modalQuality.open) {
$(modalQuality).addClass('animated fadeOut')
}
}
$(modalQuality).on('webkitAnimationEnd', function () {
if (modalQuality.open) {
$(this).removeClass('animated fadeOut')
$(this).css('display', 'none')
modalQuality.open = false
} else {
$(this).removeClass('animated fadeIn')
$(this).css('display', 'block')
modalQuality.open = true
}
})
function openQualityModal(link) {
$(modalQuality).data('url', link)
$(modalQuality).css('display', 'block')
$(modalQuality).addClass('animated fadeIn')
}
function modalQualityButton(event) {
if (!event.target.matches('.quality-button')) {
return
}
let bitrate = event.target.dataset.qualityValue
var url = $(modalQuality).data('url')
sendAddToQueue(url, bitrate)
$(modalQuality).addClass('animated fadeOut')
}

168
public/js/app/search.js
View File

@ -1,168 +0,0 @@
// Load more content when the search page is at the end
$('#content').on('scroll', function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
if (
main_selected == 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
) {
scrolledSearch(search_selected.split('_')[0])
}
}
})
function search(type) {
query = MainSearch.results.query
socket.emit('search', {
term: query,
type: type,
start: MainSearch.results[type + 'Tab'].next,
nb: 30
})
}
function scrolledSearch(type) {
query = MainSearch.results.query
if (MainSearch.results[type + 'Tab'].next < MainSearch.results[type + 'Tab'].total) {
socket.emit('search', {
term: query,
type: type,
start: MainSearch.results[type + 'Tab'].next,
nb: 30
})
}
}
function searchUpdate(result) {
let next = 0
if (result.next) next = parseInt(result.next.match(/index=(\d*)/)[1])
else next = result.total
if (MainSearch.results[result.type + 'Tab'].total != result.total)
MainSearch.results[result.type + 'Tab'].total = result.total
if (MainSearch.results[result.type + 'Tab'].next != next) {
MainSearch.results[result.type + 'Tab'].next = next
MainSearch.results[result.type + 'Tab'].data = MainSearch.results[result.type + 'Tab'].data.concat(result.data)
}
MainSearch.results[result.type + 'Tab'].loaded = true
}
socket.on('search', function (result) {
searchUpdate(result)
})
function clickElement(button) {
return document.getElementById(button).click()
}
function sendAddToQueue(url, bitrate = null) {
if (url.indexOf(';') != -1) {
urls = url.split(';')
urls.forEach(url => {
socket.emit('addToQueue', { url: url, bitrate: bitrate })
})
} else if (url != '') {
socket.emit('addToQueue', { url: url, bitrate: bitrate })
}
}
const MainSearch = new Vue({
el: '#search_tab',
data: {
names: {
TOP_RESULT: 'Top Result',
TRACK: 'Tracks',
ARTIST: 'Artists',
ALBUM: 'Albums',
PLAYLIST: 'Playlists'
},
results: {
query: '',
allTab: {
ORDER: [],
TOP_RESULT: [],
ALBUM: {},
ARTIST: {},
TRACK: {},
PLAYLIST: {}
},
trackTab: {
data: [],
next: 0,
total: 0,
loaded: false
},
albumTab: {
data: [],
next: 0,
total: 0,
loaded: false
},
artistTab: {
data: [],
next: 0,
total: 0,
loaded: false
},
playlistTab: {
data: [],
next: 0,
total: 0,
loaded: false
}
}
},
methods: {
changeSearchTab(section) {
if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
},
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
}
}
})
console.log(MainSearch)
// Search section
$('#searchbar').keyup(function (e) {
if (e.keyCode == 13) {
let term = this.value
if (isValidURL(term)) {
if (e.ctrlKey) {
openQualityModal(term)
} else {
sendAddToQueue(term)
}
} else {
if (term != MainSearch.query || main_selected == 'search_tab') {
document.getElementById('search_tab_content').style.display = 'none'
socket.emit('mainSearch', { term: term })
} else {
document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()
}
}
}
})
function mainSearchHandler(result) {
let resetObj = { data: [], next: 0, total: 0, loaded: false }
MainSearch.results.allTab = result
MainSearch.results.query = result.QUERY
MainSearch.results.trackTab = { ...resetObj }
MainSearch.results.albumTab = { ...resetObj }
MainSearch.results.artistTab = { ...resetObj }
MainSearch.results.playlistTab = { ...resetObj }
document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()
}
socket.on('mainSearch', function (result) {
mainSearchHandler(result)
})

54
public/js/app/settings.js
View File

@ -1,54 +0,0 @@
const SettingsTab = new Vue({
el: '#settings_tab',
data: {
settings: { tags: {} },
spotifyFeatures: {}
},
methods: {
addListeners() {
document.getElementById('settings_btn_save').addEventListener('click', saveSettings)
document.getElementById('settings_btn_copyArl').addEventListener('click', copyARLtoClipboard)
document.getElementById('settings_btn_logout').addEventListener('click', logout)
}
},
mounted() {
this.addListeners()
}
})
socket.on('init_settings', function (settings, credentials) {
loadSettings(settings, credentials)
toast('Settings loaded!', 'settings')
})
socket.on('updateSettings', function (settings, credentials) {
loadSettings(settings, credentials)
toast('Settings updated!', 'settings')
})
function loadSettings(settings, spotifyCredentials) {
lastSettings = { ...settings }
lastCredentials = { ...spotifyCredentials }
SettingsTab.settings = settings
SettingsTab.spotifyFeatures = spotifyCredentials
}
function saveSettings() {
lastSettings = { ...SettingsTab.settings }
lastCredentials = { ...SettingsTab.spotifyFeatures }
socket.emit('saveSettings', lastSettings, lastCredentials)
}
function copyARLtoClipboard() {
$('#login_input_arl').attr('type', 'text')
let copyText = document.querySelector('#login_input_arl')
copyText.select()
copyText.setSelectionRange(0, 99999)
document.execCommand('copy')
$('#login_input_arl').attr('type', 'password')
toast('ARL copied to clipboard', 'assignment')
}
function logout() {
socket.emit('logout')
}

198
public/js/app/stackedTabs.js
View File

@ -1,198 +0,0 @@
var artistTab = new Vue({
el: '#artist_tab',
data: {
currentTab: '',
sortKey: 'release_date',
sortOrder: 'desc',
title: "",
image: "",
type: "",
link: "",
head: null,
body: null
},
methods: {
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)},
moreInfo: function(url, e){
if (e) e.preventDefault();
showTrackListSelective(url, true)
},
sortBy: function(key) {
if (key == this.sortKey) {
this.sortOrder = (this.sortOrder == 'asc') ? 'desc' : 'asc';
} else {
this.sortKey = key;
this.sortOrder = 'asc';
}
},
changeTab: function(tab){
this.currentTab = tab
},
checkNewRelease: function(date){
var g1 = new Date();
var g2 = new Date(date);
g2.setDate(g2.getDate()+3)
g1.setHours(0,0,0,0)
if (g1.getTime() <= g2.getTime()){
return true;
}else {
return false;
}
}
},
computed: {
showTable() {
if (this.body)
return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
else
return []
}
}
})
var tracklistTab = new Vue({
el: '#tracklist_tab',
data: {
title: "",
metadata : "",
release_date: "",
label: "",
explicit: false,
image: "",
type: "",
link: "",
head: null,
body: []
},
methods: {
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)},
toggleAll: function(e){
this.body.forEach((item) => {
if (item.type == 'track'){
item.selected = e.currentTarget.checked
}
});
},
selectedLinks: function(){
selected = []
if (this.body){
this.body.forEach((item) => {
if (item.type == 'track' && item.selected) selected.push(item.link)
})
}
return selected.join(";")
}
}
})
function resetArtistTab(){
artistTab.title = "Loading..."
artistTab.image = ""
artistTab.type = ""
artistTab.currentTab = ''
artistTab.sortKey = 'release_date'
artistTab.sortOrder = 'desc'
artistTab.link = ''
artistTab.head = []
artistTab.body = null
}
function resetTracklistTab(){
tracklistTab.title = "Loading..."
tracklistTab.image = ""
tracklistTab.metadata = ""
tracklistTab.label = ""
tracklistTab.release_date = ""
tracklistTab.explicit = false
tracklistTab.type = ""
tracklistTab.head = []
tracklistTab.body = []
}
function artistView(ev){
let id = ev.currentTarget.dataset.id
resetArtistTab()
socket.emit('getTracklist', {type: 'artist', id: id})
showTab('artist', id)
}
function albumView(ev){
let id = ev.currentTarget.dataset.id
resetTracklistTab()
socket.emit('getTracklist', {type: 'album', id: id})
showTab('album', id)
}
function playlistView(ev){
let id = ev.currentTarget.dataset.id
resetTracklistTab()
socket.emit('getTracklist', {type: 'playlist', id: id})
showTab('playlist', id)
}
socket.on('show_artist', function(data){
artistTab.title = data.name
artistTab.image = data.picture_xl
artistTab.type = "Artist"
artistTab.link = `https://www.deezer.com/artist/${data.id}`
artistTab.currentTab = Object.keys(data.releases)[0]
artistTab.sortKey = 'release_date'
artistTab.sortOrder = 'desc'
artistTab.head = [
{title: 'Title', sortKey: "title"},
{title: 'Release Date', sortKey: "release_date"},
{title: '', width: "56px"}
]
if (_.isEmpty(data.releases)){
artistTab.body = null
}else{
artistTab.body = data.releases
}
})
socket.on('show_album', function(data){
tracklistTab.type = 'Album'
tracklistTab.link = `https://www.deezer.com/album/${data.id}`
tracklistTab.title = data.title
tracklistTab.explicit = data.explicit_lyrics
tracklistTab.label = data.label
tracklistTab.metadata = `${data.artist.name} • ${data.tracks.length} songs`
tracklistTab.release_date = data.release_date.substring(0,10)
tracklistTab.image = data.cover_xl
tracklistTab.head = [
{title: '<i class="material-icons">music_note</i>', width: "24px"},
{title: '#'},
{title: 'Song'},
{title: 'Artist'},
{title: '<i class="material-icons">timer</i>', width: "40px"},
{title: '<input onclick="tracklistTab.toggleAll(event)" class="selectAll" type="checkbox"><span></span>', width: "24px"}
]
if (_.isEmpty(data.tracks)){
tracklistTab.body = null
}else{
tracklistTab.body = data.tracks
}
})
socket.on('show_playlist', function(data){
tracklistTab.type = "Playlist"
tracklistTab.link = `https://www.deezer.com/playlist/${data.id}`
tracklistTab.title = data.title
tracklistTab.image = data.picture_xl
tracklistTab.release_date = data.creation_date.substring(0,10)
tracklistTab.metadata = `by ${data.creator.name} • ${data.tracks.length} songs`
tracklistTab.head = [
{title: '<i class="material-icons">music_note</i>', width: "24px"},
{title: '#'},
{title: 'Song'},
{title: 'Artist'},
{title: 'Album'},
{title: '<i class="material-icons">timer</i>', width: "40px"},
{title: '<input onclick="tracklistTab.toggleAll(event)" class="selectAll" type="checkbox"><span></span>', width: "24px"}
]
if (_.isEmpty(data.tracks)){
tracklistTab.body = null
}else{
tracklistTab.body = data.tracks
}
})

102
public/js/app/tabs.js
View File

@ -1,102 +0,0 @@
var search_selected = ''
var main_selected = ''
var windows_stack = []
var currentStack = {}
function changeTab(evt, section, tabName) {
windows_stack = []
currentStack = {}
var i, tabcontent, tablinks
tabcontent = document.getElementsByClassName(section + '_tabcontent')
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none'
}
tablinks = document.getElementsByClassName(section + '_tablinks')
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove('active')
}
if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
SettingsTab.settings = { ...lastSettings }
}
document.getElementById(tabName).style.display = 'block'
window[section + '_selected'] = tabName
// Not choosing .currentTarget beacuse the event
// is delegated, so it refers to #sidebar
evt.target.classList.add('active')
// Check if you need to load more content in the search tab
if (
main_selected == 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 &&
MainSearch.results[search_selected.split('_')[0]+"Tab"].data.length == 0
) {
search(search_selected.split('_')[0])
}
}
function showTab(type, id, back=false) {
if (windows_stack.length == 0) windows_stack.push({ tab: main_selected })
else if (!back) windows_stack.push(currentStack)
if (type == 'artist') tab = 'artist_tab'
else tab = 'tracklist_tab'
currentStack = { type: type, id: id }
let tabcontent = document.getElementsByClassName('main_tabcontent')
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none'
}
document.getElementById(tab).style.display = 'block'
}
function backTab() {
if (windows_stack.length == 1) {
clickElement('main_' + main_selected + 'link')
} else {
let tabObj = windows_stack.pop()
if (tabObj.type == 'artist') resetArtistTab()
else resetTracklistTab()
socket.emit('getTracklist', {type: tabObj.type, id: tabObj.id})
showTab(tabObj.type, tabObj.id, true)
}
}
/**
* Handles click Event on the sidebar and changes tab
* according to clicked icon.
* Uses event delegation
* @param {Event} event
* @since 0.1.0
*/
function handleSidebarClick(event) {
let targetID = event.target.id
switch (targetID) {
case 'main_search_tablink':
changeTab(event, 'main', 'search_tab')
break
case 'main_home_tablink':
changeTab(event, 'main', 'home_tab')
break
case 'main_charts_tablink':
changeTab(event, 'main', 'charts_tab')
break
case 'main_favorites_tablink':
changeTab(event, 'main', 'favorites_tab')
break
case 'main_analyzer_tablink':
changeTab(event, 'main', 'analyzer_tab')
break
case 'main_settings_tablink':
changeTab(event, 'main', 'settings_tab')
break
case 'main_about_tablink':
changeTab(event, 'main', 'about_tab')
break
default:
break
}
}
document.getElementById('sidebar').addEventListener('click', handleSidebarClick)

74
public/js/modules/search-tab/main-search.js Normal file
View File

@ -0,0 +1,74 @@
export const MainSearch = new Vue({
el: '#search_tab',
data: {
names: {
TOP_RESULT: 'Top Result',
TRACK: 'Tracks',
ARTIST: 'Artists',
ALBUM: 'Albums',
PLAYLIST: 'Playlists'
},
results: {
query: '',
allTab: {
ORDER: [],
TOP_RESULT: [],
ALBUM: {},
ARTIST: {},
TRACK: {},
PLAYLIST: {}
},
trackTab: {
data: [],
next: 0,
total: 0,
loaded: false
},
albumTab: {
data: [],
next: 0,
total: 0,
loaded: false
},
artistTab: {
data: [],
next: 0,
total: 0,
loaded: false
},
playlistTab: {
data: [],
next: 0,
total: 0,
loaded: false
}
}
},
methods: {
changeSearchTab(section) {
if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
},
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
},
numberWithDots(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
},
convertDuration(duration) {
//convert from seconds only to mm:ss format
let mm, ss
mm = Math.floor(duration / 60)
ss = duration - mm * 60
//add leading zero if ss < 0
if (ss < 10) {
ss = '0' + ss
}
return mm + ':' + ss
}
}
})

12
public/js/app/utils.js → public/js/modules/utils.js
View File

@ -1,4 +1,4 @@
function isValidURL(text) {
export function isValidURL(text) {
if (text.toLowerCase().startsWith('http')) {
if (text.toLowerCase().indexOf('deezer.com') >= 0 || text.toLowerCase().indexOf('open.spotify.com') >= 0)
return true
@ -6,7 +6,7 @@ function isValidURL(text) {
return false
}
function convertDuration(duration) {
export function convertDuration(duration) {
//convert from seconds only to mm:ss format
let mm, ss
mm = Math.floor(duration / 60)
@ -18,7 +18,7 @@ function convertDuration(duration) {
return mm + ':' + ss
}
function convertDurationSeparated(duration) {
export function convertDurationSeparated(duration) {
let hh, mm, ss
mm = Math.floor(duration / 60)
hh = Math.floor(mm / 60)
@ -27,11 +27,7 @@ function convertDurationSeparated(duration) {
return [hh, mm, ss]
}
function numberWithDots(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
}
function debounce(func, wait, immediate) {
export function debounce(func, wait, immediate) {
var timeout
return function () {
var context = this