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

continued js refactor: added downloads.js, quality-modal.js, stacke-tabs.js, minor improvements

Browse Source
This commit is contained in:
Roberto Tonino 2020-04-22 22:06:59 +02:00
parent 7b106e97ab
commit dcb09ecb13
11 changed files with 5101 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
public/index.html
View File

@ -50,16 +50,15 @@
<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>
<h1 @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" @click="handleClickTopResult"
: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"
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" 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">
@ -78,15 +77,14 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
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)"
<td class="breakline"><span class="clickable" @click="artistView"
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">
<td class="breakline clickable" @click="albumView" 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"
<td role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" 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>
@ -94,14 +92,13 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
</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">
@click="artistView" 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>
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" 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>
@ -109,12 +106,12 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
</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">
@click="albumView" 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"
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" 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>
@ -123,13 +120,12 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
</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">
@click="playlistView" 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"
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" 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>
@ -164,14 +160,14 @@ <h1>No Tracks found</h1>
<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 clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">
<td class="breakline clickable" @click="artistView" 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">
<td class="breakline clickable" @click="albumView" 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 role="button" aria-label="download" @contextmenu="openQualityModal(event)" @click="addToQueue"
v-bind:data-link="track.link" style="width: 56px; text-align: center;" class="clickable"><i
class="material-icons">get_app</i>
</td>
</tr>
</table>
@ -185,12 +181,12 @@ <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)"
<div v-for="release in results.albumTab.data" class="release clickable" @click="albumView"
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
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" 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>
@ -207,12 +203,12 @@ <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" @click="artistView"
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
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" 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>
@ -229,12 +225,12 @@ <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" @click="playlistView"
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
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" 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>
@ -472,9 +468,8 @@ <h1>About</h1>
<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" @contextmenu="openQualityModal(event)" @click="addToQueue"
v-bind:data-link="link" class="fab right"><i class="material-icons">get_app</i></div>
</header>
<div class="tab">
@ -487,7 +482,7 @@ <h1>{{ title }}</h1>
<table>
<thead>
<tr>
<th v-for="data in head" v-on:click="data.sortKey ? sortBy(data.sortKey) : null"
<th v-for="data in head" @click="data.sortKey ? sortBy(data.sortKey) : null"
v-bind:style="{ 'width': data.width ? data.width : 'auto'}"
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}}
@ -496,7 +491,7 @@ <h1>{{ title }}</h1>
</thead>
<tbody>
<tr v-for="release in showTable">
<td class="inline-flex clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
<td class="inline-flex clickable" @click="albumView" 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>
@ -505,8 +500,8 @@ <h1>{{ title }}</h1>
style="color:#FF7300;">fiber_new</i>
</td>
<td>{{release.release_date}}</td>
<td v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)"
v-bind:data-link="release.link" class="clickable"><i class="material-icons">file_download</i></td>
<td @click="addToQueue" @contextmenu="openQualityModal(event)" v-bind:data-link="release.link"
class="clickable"><i class="material-icons">file_download</i></td>
</tr>
</tbody>
</table>
@ -529,7 +524,7 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<tr>
<th v-for="data in head" v-html="data.title"
v-bind:style="{ 'width': data.width ? data.width : 'auto'}"></th>
<th style="width: 32px"><input v-on:click="toggleAll(event)" class="selectAll" type="checkbox"></th>
<th style="width: 32px"><input @click="toggleAll(event)" class="selectAll" type="checkbox"></th>
</tr>
</thead>
<tbody>
@ -540,10 +535,10 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<td class="inline-flex"><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">
<td class="clickable" @click="artistView" 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 class="clickable" v-if="type == 'Playlist'" @click="albumView" 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>
@ -557,9 +552,9 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<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 class="with_icon" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)"
<button @contextmenu="openQualityModal(event)" @click="addToQueue" v-bind:data-link="link">Download
{{ type }}</button>
<button class="with_icon" @contextmenu="openQualityModal(event)" @click="addToQueue"
v-bind:data-link="selectedLinks()">Download selection<i
class="material-icons">file_download</i></button>
<button class="back-button">Back</button>

411
public/js/app.js
View File

@ -3,15 +3,15 @@
import * as Utils from './modules/utils.js'
/* ===== Vue components ===== */
import { MainSearch } from './modules/main-search.js'
import { SettingsTab } from './modules/settings-tab.js'
import MainSearch from './modules/main-search.js'
import SettingsTab from './modules/settings-tab.js'
import { socket } from './modules/socket.js'
import { toast } from './modules/toasts.js'
import { resetTracklistTab } from './modules/tracklist-tab.js'
import { resetArtistTab } from './modules/artist-tab.js'
import { toast } from './modules/toasts.js'
import { socket } from './modules/socket.js'
/* ===== Globals ===== */
import Downloads from './modules/downloads.js'
import QualityModal from './modules/quality-modal.js'
/* ===== Socketio listeners ===== */
@ -20,14 +20,14 @@ socket.on('message', function (msg) {
console.log(msg)
})
socket.on('toast', data => {
toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
})
// Needs:
// 1. toast
socket.on('logging_in', function () {
toast('Logging in', 'loading', false, 'login-toast')
})
// Needs:
// 1. toast
socket.on('logged_in', function (data) {
switch (data.status) {
case 1:
@ -70,6 +70,8 @@ socket.on('logged_in', function (data) {
}
})
// Needs:
// 1. toast
socket.on('logged_out', function () {
toast('Logged out', 'done', true, 'login-toast')
localStorage.removeItem('arl')
@ -86,17 +88,17 @@ socket.on('logged_out', function () {
* @since 0.1.0 (?)
*/
function linkEventListeners() {
document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
document.getElementById('search_tab').addEventListener('click', handleTabClick)
// Back buttons
const backButtons = Array.from(document.getElementsByClassName('back-button'))
backButtons.forEach(button => {
button.addEventListener('click', backTab)
})
// Queue buttons
document.getElementById('clean_queue').addEventListener('click', () => {
socket.emit('removeFinishedDownloads')
})
@ -109,6 +111,8 @@ function linkEventListeners() {
/* ===== App initialization ===== */
function init() {
linkEventListeners()
Downloads.linkListeners()
QualityModal.init()
if (localStorage.getItem('arl')) {
let arl = localStorage.getItem('arl')
@ -134,6 +138,14 @@ window.main_selected = ''
window.windows_stack = []
window.currentStack = {}
// Needs:
// 1. windows_stack
// 2. currentStack
// 3. main_selected
// 4. SettingsTab
// 5. lastSettings
// 6. search_selected
// 7. MainSearch
window.changeTab = function (evt, section, tabName) {
windows_stack = []
currentStack = {}
@ -154,7 +166,7 @@ window.changeTab = function (evt, section, tabName) {
window[section + '_selected'] = tabName
// Not choosing .currentTarget beacuse the event
// is delegated, so it refers to #sidebar
// is delegated
evt.target.classList.add('active')
// Check if you need to load more content in the search tab
@ -163,10 +175,14 @@ window.changeTab = function (evt, section, tabName) {
['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])
MainSearch.search(search_selected.split('_')[0])
}
}
// Needs:
// 1. windows_stack
// 2. main_selected
// 3. currentStack
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)
@ -183,6 +199,13 @@ window.showTab = function (type, id, back = false) {
document.getElementById(tab).style.display = 'block'
}
// Needs:
// 1. windows_stack
// 2. main_selected
// 3. resetArtistTab
// 4. resetTracklistTab
// 5. socket
// 6. showTab
function backTab() {
if (windows_stack.length == 1) {
document.getElementById(`main_${main_selected}link`).click()
@ -198,6 +221,54 @@ function backTab() {
}
}
/* search.js */
// Load more content when the search page is at the end
// Needs:
// 1. main_selected
// 2. search_selected
// 3. MainSearch
$('#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
) {
MainSearch.scrolledSearch(search_selected.split('_')[0])
}
}
})
// Search section
// Needs:
// 1. QualityModal
// 2. Downloads
// 3. socket
// 4. MainSearch
// 5. main_selected
$('#searchbar').keyup(function (e) {
if (e.keyCode == 13) {
let term = this.value
if (Utils.isValidURL(term)) {
if (e.ctrlKey) {
QualityModal.open(term)
} else {
Downloads.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()
}
}
}
})
/* ===== Handlers ===== */
/**
* Handles click Event on the sidebar and changes tab
* according to clicked icon.
@ -236,73 +307,6 @@ function handleSidebarClick(event) {
}
}
/* stackedTabs.js */
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)
}
/* 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) {
let 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.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 })
}
}
function handleTabClick(event) {
let targetID = event.target.id
@ -327,248 +331,3 @@ function handleTabClick(event) {
break
}
}
// 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()
}
}
}
})
/* settings.js */
/* downloadList.js */
// 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])
})
})
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', addToQueue)
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 = []
})
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')
var $modalQuality = $(modalQuality)
modalQuality.open = false
window.onclick = function (event) {
if (event.target == modalQuality && modalQuality.open) {
$modalQuality.addClass('animated fadeOut')
}
}
$modalQuality.on('webkitAnimationEnd', function () {
if (modalQuality.open) {
$modalQuality.removeClass('animated fadeOut')
$modalQuality.css('display', 'none')
modalQuality.open = false
} else {
$modalQuality.removeClass('animated fadeIn')
$modalQuality.css('display', 'block')
modalQuality.open = true
}
})
window.openQualityModal = function (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')
}

11
public/js/modules/artist-tab.js
View File

@ -1,4 +1,7 @@
import { socket } from './socket.js'
import { albumView } from './stacked-tabs.js'
import Downloads from './downloads.js'
import QualityModal from './quality-modal.js'
export const ArtistTab = new Vue({
el: '#artist_tab',
@ -14,13 +17,14 @@ export const ArtistTab = new Vue({
body: null
},
methods: {
albumView,
addToQueue(e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
QualityModal.open(e.currentTarget.dataset.link)
},
moreInfo(url, e) {
if (e) e.preventDefault()
@ -54,6 +58,9 @@ export const ArtistTab = new Vue({
if (this.body) return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
else return []
}
},
mounted() {
console.log('artist tab mounted')
}
})

247
public/js/modules/downloads.js Normal file
View File

@ -0,0 +1,247 @@
import { socket } from './socket.js'
import { toast } from './toasts.js'
let queueList = {}
let queue = []
let queueComplete = []
const downloadListEl = document.getElementById('download_list')
function linkListeners() {
downloadListEl.addEventListener('click', handleListClick)
document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
}
function sendAddToQueue(url, bitrate = null) {
if (url.indexOf(';') !== -1) {
let urls = url.split(';')
urls.forEach(url => {
socket.emit('addToQueue', { url: url, bitrate: bitrate })
})
} else if (url != '') {
socket.emit('addToQueue', { url: url, bitrate: bitrate })
}
}
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)
}
$(downloadListEl).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 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')
}
}
}
function initQueue(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 startDownload(uuid) {
$('#bar_' + uuid)
.removeClass('indeterminate')
.addClass('determinate')
}
socket.on('startDownload', startDownload)
function handleListClick(event) {
if (!event.target.matches('.queue_icon[data-uuid]')) {
return
}
let icon = event.target.innerText
let uuid = $(event.target).data('uuid')
switch (icon) {
case 'remove':
socket.emit('removeFromQueue', uuid)
break
default:
}
}
// Show/Hide Download Tab
function toggleDownloadTab(ev) {
ev.preventDefault()
let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
localStorage.setItem('downloadTabOpen', !isHidden)
}
socket.on('init_downloadQueue', initQueue)
socket.on('addedToQueue', addToQueue)
function removeFromQueue(uuid) {
let index = queue.indexOf(uuid)
if (index > -1) {
queue.splice(index, 1)
$(`#download_${queueList[uuid].uuid}`).remove()
delete queueList[uuid]
}
}
// Needs:
// 1. socket
// 2. queue
// 3. queueList
socket.on('removedFromQueue', removeFromQueue)
// Needs:
// 1. socket
// 2. queue
// 3. queueList
// 4. queueComplete
// 5. toast
function finishDownload(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('finishDownload', finishDownload)
// Needs:
// 1. socket
// 2. queueComplete
// 3. queue
// 4. queueList
function removeAllDownloads(currentItem) {
queueComplete = []
if (currentItem == '') {
queue = []
queueList = {}
$(downloadListEl).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('removedAllDownloads', removeAllDownloads)
// Needs:
// 1. socket
// 2. queueComplete
function removedFinishedDownloads() {
queueComplete.forEach(item => {
$('#download_' + item).remove()
})
queueComplete = []
}
socket.on('removedFinishedDownloads', removedFinishedDownloads)
// Needs:
// 1. socket
// 2. queue
// 3. queueList
function updateQueue(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 + '%')
}
}
}
socket.on('updateQueue', updateQueue)
export default {
linkListeners,
sendAddToQueue,
addToQueue
}

53
public/js/modules/main-search.js
View File

@ -1,6 +1,9 @@
import { socket } from './socket.js'
import { artistView, albumView, playlistView } from './stacked-tabs.js'
import Downloads from './downloads.js'
import QualityModal from './quality-modal.js'
export const MainSearch = new Vue({
const MainSearch = new Vue({
data: {
names: {
TOP_RESULT: 'Top Result',
@ -46,6 +49,27 @@ export const MainSearch = new Vue({
}
},
methods: {
artistView,
albumView,
playlistView,
handleClickTopResult(event) {
let topResultType = this.results.allTab.TOP_RESULT[0].type
switch (topResultType) {
case 'artist':
artistView(event)
break
case 'album':
albumView(event)
break
case 'playlist':
playlistView(event)
break
default:
break
}
},
changeSearchTab(section) {
if (section != 'TOP_RESULT') {
document.getElementById(`search_${section.toLowerCase()}_tab`).click()
@ -53,11 +77,11 @@ export const MainSearch = new Vue({
},
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
QualityModal.open(e.currentTarget.dataset.link)
},
numberWithDots(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
@ -72,8 +96,29 @@ export const MainSearch = new Vue({
ss = '0' + ss
}
return mm + ':' + ss
},
search(type) {
socket.emit('search', {
term: this.results.query,
type: type,
start: this.results[type + 'Tab'].next,
nb: 30
})
},
scrolledSearch(type) {
if (this.results[type + 'Tab'].next < this.results[type + 'Tab'].total) {
socket.emit('search', {
term: this.results.query,
type: type,
start: this.results[type + 'Tab'].next,
nb: 30
})
}
}
},
mounted() {
console.log('main search mounted')
}
}).$mount('#search_tab')
socket.on('mainSearch', result => {
@ -108,3 +153,5 @@ socket.on('search', result => {
}
MainSearch.results[result.type + 'Tab'].loaded = true
})
export default MainSearch

47
public/js/modules/quality-modal.js Normal file
View File

@ -0,0 +1,47 @@
import Downloads from './downloads.js'
const QualityModal = {
// Defaults
open: false,
url: ''
}
function init() {
QualityModal.element = document.getElementById('modal_quality')
linkListeners()
}
function open(link) {
QualityModal.url = link
QualityModal.element.style.display = 'block'
QualityModal.element.classList.add('animated', 'fadeIn')
}
function linkListeners() {
QualityModal.element.addEventListener('click', handleClick)
QualityModal.element.addEventListener('webkitAnimationEnd', handleAnimationEnd)
}
function handleClick(event) {
QualityModal.element.classList.add('animated', 'fadeOut')
if (!event.target.matches('.quality-button')) {
return
}
let bitrate = event.target.dataset.qualityValue
Downloads.sendAddToQueue(QualityModal.url, bitrate)
}
function handleAnimationEnd() {
QualityModal.element.classList.remove('animated', QualityModal.open ? 'fadeOut' : 'fadeIn')
QualityModal.element.style.display = QualityModal.open ? 'none' : 'block'
QualityModal.open = !QualityModal.open
}
export default {
init,
open
}

6
public/js/modules/settings-tab.js
View File

@ -5,7 +5,7 @@ import { socket } from './socket.js'
window.lastSettings = {}
window.lastCredentials = {}
export const SettingsTab = new Vue({
const SettingsTab = new Vue({
data() {
return {
settings: { tags: {} },
@ -25,8 +25,6 @@ export const SettingsTab = new Vue({
toast('ARL copied to clipboard', 'assignment')
},
saveSettings() {
console.log(socket)
lastSettings = { ...SettingsTab.settings }
lastCredentials = { ...SettingsTab.spotifyFeatures }
socket.emit('saveSettings', lastSettings, lastCredentials)
@ -59,3 +57,5 @@ function loadSettings(settings, spotifyCredentials) {
SettingsTab.settings = settings
SettingsTab.spotifyFeatures = spotifyCredentials
}
export default SettingsTab

26
public/js/modules/stacked-tabs.js Normal file
View File

@ -0,0 +1,26 @@
import { resetArtistTab } from './artist-tab.js'
import { resetTracklistTab } from './tracklist-tab.js'
import { socket } from './socket.js'
export function artistView(ev) {
let id = ev.currentTarget.dataset.id
resetArtistTab()
socket.emit('getTracklist', { type: 'artist', id: id })
showTab('artist', id)
}
export function albumView(ev) {
let id = ev.currentTarget.dataset.id
console.log('album view', id)
resetTracklistTab()
socket.emit('getTracklist', { type: 'album', id: id })
showTab('album', id)
}
export function playlistView(ev) {
let id = ev.currentTarget.dataset.id
console.log('playlist view', id)
resetTracklistTab()
socket.emit('getTracklist', { type: 'playlist', id: id })
showTab('playlist', id)
}

6
public/js/modules/toasts.js
View File

@ -1,3 +1,5 @@
import { socket } from './socket.js'
let toastsWithId = {}
export const toast = function (msg, icon = null, dismiss = true, id = null) {
@ -34,3 +36,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
}
}
}
socket.on('toast', data => {
toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
})

12
public/js/modules/tracklist-tab.js
View File

@ -1,4 +1,7 @@
import { socket } from './socket.js'
import { artistView, albumView } from './stacked-tabs.js'
import Downloads from './downloads.js'
import QualityModal from './quality-modal.js'
export const TracklistTab = new Vue({
el: '#tracklist_tab',
@ -15,13 +18,15 @@ export const TracklistTab = new Vue({
body: []
},
methods: {
artistView,
albumView,
addToQueue: function (e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
QualityModal.open(e.currentTarget.dataset.link)
},
toggleAll: function (e) {
this.body.forEach(item => {
@ -50,6 +55,9 @@ export const TracklistTab = new Vue({
}
return mm + ':' + ss
}
},
mounted() {
console.log('tracklist tab mounted')
}
})

4570
public/js/vendor/vue.min.js vendored
View File

File diff suppressed because one or more lines are too long