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

removed Vue SFCs, added modals.js file

Browse Source
This commit is contained in:
Roberto Tonino 2020-04-19 20:43:58 +02:00
parent 4659b929c7
commit 39ec44884b
13 changed files with 90 additions and 723 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@ -21,7 +21,6 @@
<div id="middle_section"> <div id="middle_section">
<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search..." autofocus></header> <header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search..." autofocus></header>
<section id="content"><div id="container"> <section id="content"><div id="container">
<!-- <div id="v-app"><app/></div> -->
<div id="search_tab" class="main_tabcontent"> <div id="search_tab" class="main_tabcontent">
<div class="tab"> <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_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
@ -207,7 +206,7 @@ <h1>Settings</h1>
<button id="settings_btn_copyArl"><i class="material-icons">assignment</i></button> <button id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
</div> </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 onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p> <p><button style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
<div id="settings_generic_tab"> <div id="settings_generic_tab">
<div class="input_group"> <div class="input_group">
<p>Download Path</p> <p>Download Path</p>
@ -502,9 +501,10 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
<script type="text/javascript" src="/public/js/vendor/vue.min.js"></script> <script type="text/javascript" src="/public/js/vendor/vue.min.js"></script>
<script type="text/javascript" src="/public/js/vendor/lodash.min.js"></script> <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/vendor/toastify.js"></script>
<!-- <script type="text/javascript" src="/public/js/app/v-app.js"></script> -->
<script type="text/javascript" src="/public/js/app/app.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/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/tabs.js"></script>
<script type="text/javascript" src="/public/js/app/stackedTabs.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/utils.js"></script>

42
public/js/app/app.js
View File

@ -117,45 +117,7 @@ socket.on('logged_out', function () {
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`) $('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
}) })
// 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')
}
/** /**
* Adds event listeners. * Adds event listeners.
@ -163,11 +125,9 @@ function modalQualityButton(event) {
* @since 0.1.0 (?) * @since 0.1.0 (?)
*/ */
function linkEventListeners() { function linkEventListeners() {
// document.getElementById('show_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, true))
// document.getElementById('hide_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, false))
document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab) document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
document.getElementById('modal_quality').addEventListener('click', modalQualityButton) document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
document.getElementById('settings_btn_updateArl').addEventListener('click', loginButton)
} }
/** /**

16
public/js/app/components/App.vue
View File

@ -1,16 +0,0 @@
<template>
<the-search-tab />
</template>
<script>
const TheSearchTab = httpVueLoader('./TheSearchTab.vue')
module.exports = {
components: {
TheSearchTab
}
}
</script>
<style>
</style>

59
public/js/app/components/TheSearchTab.vue
View File

@ -1,59 +0,0 @@
<template>
<div id="search_tab" class="main_tabcontent">
<div class="tab">
<button
class="search_tablinks selective"
id="search_all_tab"
onclick="changeTab(event, 'search', 'main_search')"
>All</button>
<button
class="search_tablinks selective"
id="search_track_tab"
onclick="changeTab(event, 'search', 'track_search')"
>Tracks</button>
<button
class="search_tablinks selective"
id="search_album_tab"
onclick="changeTab(event, 'search', 'album_search')"
>Album</button>
<button
class="search_tablinks selective"
id="search_artist_tab"
onclick="changeTab(event, 'search', 'artist_search')"
>Artist</button>
<button
class="search_tablinks selective"
id="search_playlist_tab"
onclick="changeTab(event, 'search', 'playlist_search')"
>Playlist</button>
</div>
<div id="search_tab_content">
<the-main-search></the-main-search>
<the-track-search></the-track-search>
<the-album-search></the-album-search>
<the-artist-search></the-artist-search>
<the-playlist-search></the-playlist-search>
</div>
</div>
</template>
<script>
const TheMainSearch = httpVueLoader('./search-tab/TheMainSearch.vue')
const TheTrackSearch = httpVueLoader('./search-tab/TheTrackSearch.vue')
const TheAlbumSearch = httpVueLoader('./search-tab/TheAlbumSearch.vue')
const TheArtistSearch = httpVueLoader('./search-tab/TheArtistSearch.vue')
const ThePlaylistSearch = httpVueLoader('./search-tab/ThePlaylistSearch.vue')
module.exports = {
components: {
TheMainSearch,
TheTrackSearch,
TheAlbumSearch,
TheArtistSearch,
ThePlaylistSearch
}
}
</script>
<style>
</style>

64
public/js/app/components/search-tab/TheAlbumSearch.vue
View File

@ -1,64 +0,0 @@
<template>
<div id="album_search" class="search_tabcontent">
<div v-if="results.data.length == 0">
<h1>No Albums found</h1>
</div>
<div v-else class="release_grid">
<div v-for="release in results.data" class="release">
<div class="cover_container">
<img
class="rounded coverart"
v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'"
/>
<div
role="button"
aria-label="download"
v-on:contextmenu="openQualityModal(event)"
v-on:click="addToQueue(event)"
v-bind:data-link="'https://www.deezer.com/album/'+release.ALB_ID"
class="download_overlay"
>
<i class="material-icons">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.ALB_TITLE }}</p>
<p class="secondary-text">{{ 'by '+release.ART_NAME }}</p>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data: () => ({
type: 'ALBUM',
nb: 20,
query: '',
results: {
data: [],
next: 0,
total: 0
}
}),
methods: {
addToQueue: function(e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function(e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
},
handleMainSearch(result) {
this.results = result.ALBUM
this.query = result.QUERY
}
},
mounted() {
socket.on('mainSearch', this.handleMainSearch)
}
}
</script>
<style>
</style>

64
public/js/app/components/search-tab/TheArtistSearch.vue
View File

@ -1,64 +0,0 @@
<template>
<div id="artist_search" class="search_tabcontent">
<div v-if="results.data.length == 0">
<h1>No Artists found</h1>
</div>
<div v-else class="release_grid">
<div v-for="release in results.data" class="release">
<div class="cover_container">
<img
class="circle coverart"
v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'"
/>
<div
role="button"
aria-label="download"
v-on:contextmenu="openQualityModal(event)"
v-on:click="addToQueue(event)"
v-bind:data-link="'https://www.deezer.com/artist/'+release.ART_ID"
class="download_overlay"
>
<i class="material-icons">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.ART_NAME }}</p>
<p class="secondary-text">{{ numberWithDots(release.NB_FAN) + ' fans' }}</p>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data: () => ({
type: 'ARTIST',
nb: 20,
query: '',
results: {
data: [],
next: 0,
total: 0
}
}),
methods: {
addToQueue: function(e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function(e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
},
handleMainSearch(result) {
this.results = result.ARTIST
this.query = result.QUERY
}
},
mounted() {
socket.on('mainSearch', this.handleMainSearch)
}
}
</script>
<style>
</style>

291
public/js/app/components/search-tab/TheMainSearch.vue
View File

@ -1,291 +0,0 @@
<template>
<div id="main_search" class="search_tabcontent">
<template v-for="(section, index) in results.ORDER">
<div
class="search_section"
v-if="(section !== 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)"
:key="`section-${index}`"
>
<h1 @click="changeSearchTab(section)">{{ toTitleCase(section) }}</h1>
<div v-if="section === 'TOP_RESULT'" class="top_result">
<div class="cover_container">
<img
:src="getTopResultImgURL2(results.TOP_RESULT)"
:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"
/>
<div
role="button"
aria-label="download"
@contextmenu="openQualityModal(event)"
@click="addToQueue(event)"
:data-link="topResult.buttonURL"
class="download_overlay"
>
<i class="material-icons">get_app</i>
</div>
</div>
<div class="info_box">
<p class="primary-text">{{ topResult.primaryText }}</p>
<p class="secondary-text">{{ topResult.secondaryText }}</p>
<span class="tag">{{ topResult.tag }}</span>
</div>
</div>
<div v-else-if="section === 'TRACK'">
<table class="tracks_table">
<tr v-for="track in results.TRACK.data.slice(0, 6)" :key="track.SNG_ID" class="track_row">
<td style="width: 48px; text-align: center;">
<img
class="rounded coverart"
v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"
/>
</td>
<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
<td class="breakline artists___">
<!-- <span v-for="artist in track.ARTISTS" :key="artist.ART_ID">{{artist.ART_NAME}}</span> -->
<span>{{track.ARTISTS.map(a => a.ART_NAME).join(' ')}}</span>
</td>
<td class="breakline">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td>
<td
class="clickable"
role="button"
aria-label="download"
@contextmenu="openQualityModal(event)"
@click="addToQueue(event)"
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
style="width: 56px; text-align: center;"
>
<i class="material-icons">get_app</i>
</td>
</tr>
</table>
</div>
<!-- <div v-else-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only"> -->
<div v-else class="release_grid firstrow_only">
<div v-for="(release, index) in results[section].data.slice(0, 10)" :key="`release-${index}`" class="release">
<div class="cover_container">
<img
v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'"
v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'"
/>
<div
role="button"
aria-label="download"
v-on:contextmenu="openQualityModal(event)"
v-on:click="addToQueue(event)"
v-bind:data-link="'https://deezer.com/'+(section == 'ARTIST' ? 'artist/'+release.ART_ID : section == 'ALBUM' ? 'album/'+release.ALB_ID : section == 'PLAYLIST' ? 'playlist/'+release.PLAYLIST_ID : '')"
class="download_overlay"
>
<i class="material-icons">get_app</i>
</div>
</div>
<p
class="primary-text"
>{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p>
<p
class="secondary-text"
>{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p>
</div>
</div>
</div>
</template>
<div
v-if="results.ORDER.every(section => section == 'TOP_RESULT' ? results[section].length == 0 : results[section].data.length == 0)"
>
<h1>No results</h1>
</div>
</div>
</template>
<script>
module.exports = {
data: () => ({
results: {
QUERY: '',
ORDER: [],
ALBUM: {},
ARTIST: {},
TRACK: {},
TOP_RESULT: [],
PLAYLIST: {}
},
topResult: {
imgURL: '',
buttonURL: '',
primaryText: '',
secondaryText: '',
tag: ''
}
}),
methods: {
changeSearchTab(section) {
if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
},
addToQueue: function(e) {
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function(e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
},
handleMainSearch(result) {
this.results = result
},
toTitleCase(name) {
if ('string' !== typeof name) {
return
}
name = name.replace('_', ' ')
// Step 1. Lowercase the string
name = name.toLowerCase()
// Step 2. Split the string into an array of strings
name = name.split(' ')
// Step 3. Create the FOR loop
for (var i = 0; i < name.length; i++) {
name[i] = name[i].charAt(0).toUpperCase() + name[i].slice(1)
}
name = name.join(' ')
return name
},
getTopResultImgURL(results) {
if (results.TOP_RESULT.length === 0) {
this.topResult.imgURL = ''
return
}
const topResult = results.TOP_RESULT[0]
const topResultType = topResult.__TYPE__
switch (topResultType) {
case 'artist':
this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/artist/' + topResult.ART_PICTURE
break
case 'album':
this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/' + topResult.ALB_PICTURE
break
case 'playlist':
this.topResult.imgURL =
'https://e-cdns-images.dzcdn.net/images/' + topResult.PICTURE_TYPE + '/' + topResult.PLAYLIST_PICTURE
break
default:
this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
break
}
this.topResult.imgURL += '/156x156-000000-80-0-0.jpg'
},
getTopResultImgURL2(topRes) {
if (topRes.length === 0) {
return ''
}
const topResult = topRes[0]
const topResultType = topResult.__TYPE__
let imgURL = ''
switch (topResultType) {
case 'artist':
imgURL = 'https://e-cdns-images.dzcdn.net/images/artist/' + topResult.ART_PICTURE
break
case 'album':
imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/' + topResult.ALB_PICTURE
break
case 'playlist':
imgURL =
'https://e-cdns-images.dzcdn.net/images/' + topResult.PICTURE_TYPE + '/' + topResult.PLAYLIST_PICTURE
break
default:
imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
break
}
imgURL += '/156x156-000000-80-0-0.jpg'
return imgURL
},
getTopResultButtonURL(results) {
if (results.TOP_RESULT.length === 0) {
this.topResult.buttonURL = ''
return
}
const topResult = results.TOP_RESULT[0]
const topResultType = topResult.__TYPE__
this.topResult.buttonURL = 'https://deezer.com/' + topResultType + '/'
switch (topResultType) {
case 'artist':
this.topResult.buttonURL += topResult.ART_ID
break
case 'album':
this.topResult.buttonURL += topResult.ALB_ID
break
case 'playlist':
this.topResult.buttonURL += topResult.PLAYLIST_ID
break
default:
this.topResult.buttonURL += ''
break
}
},
getTopResultText(results) {
if (results.TOP_RESULT.length === 0) {
this.topResult.primaryText = ''
this.topResult.secondaryText = ''
this.topResult.tag = ''
return
}
const topResult = results.TOP_RESULT[0]
const topResultType = topResult.__TYPE__
this.topResult.tag = this.toTitleCase(topResultType)
switch (topResultType) {
case 'artist':
this.topResult.primaryText = topResult.ART_NAME
this.topResult.secondaryText = numberWithDots(topResult.NB_FAN) + ' fans'
break
case 'album':
this.topResult.primaryText = topResult.ALB_TITLE
this.topResult.secondaryText = 'by ' + topResult.ART_NAME + ' - ' + topResult.NUMBER_TRACK + ' tracks'
break
case 'playlist':
this.topResult.primaryText = topResult.TITLE
this.topResult.secondaryText = 'by ' + topResult.PARENT_USERNAME + ' - ' + topResult.NB_SONG + ' tracks'
break
default:
this.topResult.primaryText = ''
this.topResult.secondaryText = ''
break
}
}
},
watch: {
results(newRes, oldRes) {
console.log('new', newRes)
console.log('old', oldRes)
this.getTopResultImgURL(newRes)
this.getTopResultButtonURL(newRes)
this.getTopResultText(newRes)
}
},
mounted() {
socket.on('mainSearch', this.handleMainSearch)
}
}
</script>
<style>
.artists > :not(:last-child)::after {
content: ' ';
}
</style>

64
public/js/app/components/search-tab/ThePlaylistSearch.vue
View File

@ -1,64 +0,0 @@
<template>
<div id="playlist_search" class="search_tabcontent">
<div v-if="results.data.length == 0">
<h1>No Playlists found</h1>
</div>
<div v-else class="release_grid">
<div v-for="release in results.data" class="release">
<div class="cover_container">
<img
class="rounded coverart"
v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'"
/>
<div
role="button"
aria-label="download"
v-on:contextmenu="openQualityModal(event)"
v-on:click="addToQueue(event)"
v-bind:data-link="'https://www.deezer.com/playlist/'+release.PLAYLIST_ID"
class="download_overlay"
>
<i class="material-icons">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.TITLE }}</p>
<p class="secondary-text">{{ release.NB_SONG+' tracks' }}</p>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data: () => ({
type: 'PLAYLIST',
nb: 20,
query: '',
results: {
data: [],
next: 0,
total: 0
}
}),
methods: {
addToQueue: function(e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function(e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
},
handleMainSearch(result) {
this.results = result.PLAYLIST
this.query = result.QUERY
}
},
mounted() {
socket.on('mainSearch', this.handleMainSearch)
}
}
</script>
<style>
</style>

79
public/js/app/components/search-tab/TheTrackSearch.vue
View File

@ -1,79 +0,0 @@
<template>
<div id="track_search" class="search_tabcontent">
<div v-if="results.data.length === 0">
<h1>No Tracks found</h1>
</div>
<table v-else class="tracks_table">
<tr>
<th style="width: 48px;"></th>
<th>Title</th>
<th>Artists</th>
<th>Album</th>
<th>
<i class="material-icons">timer</i>
</th>
<th style="width: 56px;"></th>
</tr>
<tr v-for="track in results.data" class="track_row">
<td style="width: 48px; text-align: center;">
<img
class="rounded coverart"
v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"
/>
</td>
<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
<td class="breakline">
<span v-for="artist in track.ARTISTS">{{artist.ART_NAME}}</span>
</td>
<td class="breakline">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td>
<td
role="button"
aria-label="download"
v-on:contextmenu="openQualityModal(event)"
v-on:click="addToQueue(event)"
v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID"
style="width: 56px; text-align: center;"
class="clickable"
>
<i class="material-icons">get_app</i>
</td>
</tr>
</table>
</div>
</template>
<script>
module.exports = {
data: () => ({
type: 'TRACK',
nb: 40,
query: '',
results: {
data: [],
next: 0,
total: 0
}
}),
methods: {
addToQueue: function(e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function(e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
},
handleMainSearch(result) {
this.results = result.TRACK
this.query = result.QUERY
}
},
mounted() {
socket.on('mainSearch', this.handleMainSearch)
}
}
</script>
<style>
</style>

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

@ -0,0 +1,39 @@
// 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')
}

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

@ -15,36 +15,38 @@ function search(type) {
socket.emit('search', { socket.emit('search', {
term: query, term: query,
type: type, type: type,
start: MainSearch.results[type+"Tab"].next, start: MainSearch.results[type + 'Tab'].next,
nb: 30 nb: 30
}) })
} }
function scrolledSearch(type) { function scrolledSearch(type) {
query = MainSearch.results.query query = MainSearch.results.query
if (MainSearch.results[type+"Tab"].next < MainSearch.results[type+"Tab"].total) { if (MainSearch.results[type + 'Tab'].next < MainSearch.results[type + 'Tab'].total) {
socket.emit('search', { socket.emit('search', {
term: query, term: query,
type: type, type: type,
start: MainSearch.results[type+"Tab"].next, start: MainSearch.results[type + 'Tab'].next,
nb: 30 nb: 30
}) })
} }
} }
function searchUpadate(result) { function searchUpdate(result) {
let next = 0 let next = 0
if (result.next) next = parseInt(result.next.match(/index=(\d*)/)[1]) if (result.next) next = parseInt(result.next.match(/index=(\d*)/)[1])
else next = result.total 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'].total != result.total)
if (MainSearch.results[result.type+"Tab"].next != next) { MainSearch.results[result.type + 'Tab'].total = result.total
MainSearch.results[result.type+"Tab"].next = next if (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'].next = next
MainSearch.results[result.type + 'Tab'].data = MainSearch.results[result.type + 'Tab'].data.concat(result.data)
} }
MainSearch.results[result.type+"Tab"].loaded = true MainSearch.results[result.type + 'Tab'].loaded = true
} }
socket.on('search', function (result) { socket.on('search', function (result) {
searchUpadate(result) searchUpdate(result)
}) })
function clickElement(button) { function clickElement(button) {
@ -52,17 +54,17 @@ function clickElement(button) {
} }
function sendAddToQueue(url, bitrate = null) { function sendAddToQueue(url, bitrate = null) {
if (url.indexOf(";") != -1){ if (url.indexOf(';') != -1) {
urls = url.split(";") urls = url.split(';')
urls.forEach(url=>{ urls.forEach(url => {
socket.emit('addToQueue', { url: url, bitrate: bitrate }) socket.emit('addToQueue', { url: url, bitrate: bitrate })
}) })
}else if(url != ""){ } else if (url != '') {
socket.emit('addToQueue', { url: url, bitrate: bitrate }) socket.emit('addToQueue', { url: url, bitrate: bitrate })
} }
} }
let MainSearch = new Vue({ const MainSearch = new Vue({
el: '#search_tab', el: '#search_tab',
data: { data: {
names: { names: {
@ -112,26 +114,34 @@ let MainSearch = new Vue({
changeSearchTab(section) { changeSearchTab(section) {
if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab') if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
}, },
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)}, addToQueue: function (e) {
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)} e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
openQualityModal(e.currentTarget.dataset.link)
}
} }
}) })
console.log(MainSearch)
// Search section // Search section
$("#searchbar").keyup(function(e){ $('#searchbar').keyup(function (e) {
if(e.keyCode == 13){ if (e.keyCode == 13) {
let term = this.value let term = this.value
if (isValidURL(term)){ if (isValidURL(term)) {
if (e.ctrlKey){ if (e.ctrlKey) {
openQualityModal(term); openQualityModal(term)
}else{ } else {
sendAddToQueue(term); sendAddToQueue(term)
} }
}else{ } else {
if (term != MainSearch.query || main_selected == 'search_tab'){ if (term != MainSearch.query || main_selected == 'search_tab') {
document.getElementById("search_tab_content").style.display = "none"; document.getElementById('search_tab_content').style.display = 'none'
socket.emit("mainSearch", {term: term}); socket.emit('mainSearch', { term: term })
}else{ } else {
document.getElementById('search_all_tab').click() document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block' document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click() document.getElementById('main_search_tablink').click()
@ -141,13 +151,13 @@ $("#searchbar").keyup(function(e){
}) })
function mainSearchHandler(result) { function mainSearchHandler(result) {
let resetObj = {data: [], next: 0, total: 0, loaded: false} let resetObj = { data: [], next: 0, total: 0, loaded: false }
MainSearch.results.allTab = result MainSearch.results.allTab = result
MainSearch.results.query = result.QUERY MainSearch.results.query = result.QUERY
MainSearch.results.trackTab = {...resetObj} MainSearch.results.trackTab = { ...resetObj }
MainSearch.results.albumTab = {...resetObj} MainSearch.results.albumTab = { ...resetObj }
MainSearch.results.artistTab = {...resetObj} MainSearch.results.artistTab = { ...resetObj }
MainSearch.results.playlistTab = {...resetObj} MainSearch.results.playlistTab = { ...resetObj }
document.getElementById('search_all_tab').click() document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block' document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click() document.getElementById('main_search_tablink').click()

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

@ -66,7 +66,7 @@ function backTab() {
* according to clicked icon. * according to clicked icon.
* Uses event delegation * Uses event delegation
* @param {Event} event * @param {Event} event
* @since ?.?.? * @since 0.1.0
*/ */
function handleSidebarClick(event) { function handleSidebarClick(event) {
let targetID = event.target.id let targetID = event.target.id

5
public/js/app/v-app.js
View File

@ -1,5 +0,0 @@
new Vue({
components: {
'app': httpVueLoader('./public/js/app/components/App.vue')
}
}).$mount('#v-app');