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

Added open tab functions to all elements

Browse Source 
Made tabbed function work properly
This commit is contained in:
RemixDev 2020-04-18 15:42:00 +02:00
parent b23aff9834
commit 162cf0d799
6 changed files with 35 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/index.html
View File

@ -37,7 +37,7 @@
<div v-if="(section != 'TOP_RESULT' && results[section].data.length > 0) || (results[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" v-on:click="window[results.TOP_RESULT[0].__TYPE__.toLowerCase()+'View'](event)" v-bind:data-id="results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : ''">
<div v-if="section == 'TOP_RESULT'" class="top_result clickable" v-on:click="window[results.TOP_RESULT[0].__TYPE__.toLowerCase()+'View'](event)" v-bind:data-id="results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : ''">
<div class="cover_container">
<img v-bind:src="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + results.TOP_RESULT[0].ART_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + results.TOP_RESULT[0].ALB_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'https://e-cdns-images.dzcdn.net/images/'+ results.TOP_RESULT[0].PICTURE_TYPE +'/' + results.TOP_RESULT[0].PLAYLIST_PICTURE :'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'"
v-bind:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
@ -54,15 +54,15 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
<tr v-for="track in results.TRACK.data.slice(0, 6)" class="track_row">
<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
<td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
<td class="breakline">{{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>
</tr>
</table>
</div>
<div v-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only">
<div v-for="release in results[section].data.slice(0, 10)" class="release" v-on:click="window[section.toLowerCase()+'View'](event)" v-bind:data-id="section == 'ARTIST' ? release.ART_ID : section == 'ALBUM' ? release.ALB_ID : section == 'PLAYLIST' ? release.PLAYLIST_ID : ''">
<div v-for="release in results[section].data.slice(0, 10)" class="release clickable" v-on:click="window[section.toLowerCase()+'View'](event)" v-bind:data-id="section == 'ARTIST' ? release.ART_ID : section == 'ALBUM' ? release.ALB_ID : section == 'PLAYLIST' ? release.PLAYLIST_ID : ''">
<div 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>
@ -94,8 +94,8 @@ <h1>No Tracks found</h1>
<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 class="breakline"><span class="clickable" v-on:click="artistView(event)" v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.ALB_ID">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td>
<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
</tr>
@ -107,7 +107,7 @@ <h1>No Tracks found</h1>
<h1>No Albums found</h1>
</div>
<div class="release_grid" v-if="results.data.length > 0">
<div v-for="release in results.data" class="release">
<div v-for="release in results.data" 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://www.deezer.com/album/'+release.ALB_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
@ -123,7 +123,7 @@ <h1>No Albums found</h1>
<h1>No Artists found</h1>
</div>
<div class="release_grid" v-if="results.data.length > 0">
<div v-for="release in results.data" class="release">
<div v-for="release in results.data" 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://www.deezer.com/artist/'+release.ART_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
@ -139,7 +139,7 @@ <h1>No Artists found</h1>
<h1>No Playlists found</h1>
</div>
<div class="release_grid" v-if="results.data.length > 0">
<div v-for="release in results.data" class="release">
<div v-for="release in results.data" 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://www.deezer.com/playlist/'+release.PLAYLIST_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
@ -421,8 +421,8 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
<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>{{ track.artist.name }}</td>
<td v-if="type == 'Playlist'">{{ track.album.title }}</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>

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

@ -106,7 +106,6 @@ socket.on('logging_in', function () {
})
socket.on('logged_in', function (data) {
console.log(data)
switch (data.status) {
case 1:
case 3:
@ -168,7 +167,6 @@ var settingsTab = new Vue({
})
socket.on("init_settings", function(settings, credentials){
console.log(settings,credentials)
loadSettings(settings, credentials)
toast("Settings loaded!", 'settings')
})

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

@ -3,7 +3,6 @@ var queue = []
var queueComplete = []
socket.on('init_downloadQueue', function (data) {
console.log(data)
if (data.queueComplete.length) {
data.queueComplete.forEach(item => {
addToQueue(data.queueList[item])

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

@ -23,7 +23,6 @@ function scrolledSearch(vueTab) {
}
function searchUpadate(result) {
console.log(result)
vueTab = null
switch (result.type) {
case 'TRACK':
@ -179,8 +178,6 @@ $("#searchbar").keyup(function(e){
sendAddToQueue(term);
}
}else{
console.log( term );
if (term != MainSearch.results.QUERY || main_selected == 'search_tab'){
document.getElementById("search_tab_content").style.display = "none";
socket.emit("mainSearch", {term: term});

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

@ -87,48 +87,45 @@ var tracklistTab = new Vue({
}
})
function artistView(ev){
console.log("ARTIST")
let id = ev.currentTarget.dataset.id
function resetArtistTab(){
artistTab.title = "Loading..."
artistTab.image = ""
artistTab.type = ""
artistTab.currentTab = ''
artistTab.sortKey = 'release_date'
artistTab.sortOrder = 'desc'
artistTab.link = 'https://deezer.com/artist/'+id
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){
console.log("ALBUM")
tracklistTab.title = "Loading..."
tracklistTab.image = ""
tracklistTab.metadata = ""
tracklistTab.label = ""
tracklistTab.release_date = ""
tracklistTab.explicit = false
tracklistTab.type = ""
tracklistTab.head = []
tracklistTab.body = []
let id = ev.currentTarget.dataset.id
resetTracklistTab()
socket.emit('getTracklist', {type: 'album', id: id})
showTab('album', id)
}
function playlistView(ev){
console.log("PLAYLIST")
tracklistTab.title = "Loading..."
tracklistTab.image = ""
tracklistTab.metadata = ""
tracklistTab.label = ""
tracklistTab.release_date = ""
tracklistTab.explicit = false
tracklistTab.type = ""
tracklistTab.head = []
tracklistTab.body = []
let id = ev.currentTarget.dataset.id
resetTracklistTab()
socket.emit('getTracklist', {type: 'playlist', id: id})
showTab('playlist', id)
}
@ -162,7 +159,6 @@ socket.on('show_album', function(data){
tracklistTab.metadata = `${data.artist.name} • ${data.tracks.length} songs`
tracklistTab.release_date = data.release_date.substring(0,10)
tracklistTab.image = data.cover_xl
console.log(data.tracks)
tracklistTab.head = [
{title: '<i class="material-icons">music_note</i>', width: "24px"},
{title: '#'},

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

@ -4,7 +4,6 @@ var windows_stack = []
var currentStack = {}
function changeTab(evt, section, tabName) {
console.log({ evt, section, tabName })
windows_stack = []
currentStack = {}
var i, tabcontent, tablinks
@ -55,6 +54,9 @@ function backTab() {
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)
}
}