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

Started working on album tab

Browse Source
This commit is contained in:
RemixDev 2020-04-18 11:17:39 +02:00
parent 83a0fb252f
commit 683cf30927
3 changed files with 70 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/modules/stackedTabs.css
View File

@ -1,4 +1,4 @@
#artist_tab header{
.image_header header{
background-position: 0% 35%;
background-size: cover;
padding: 220px 24px 8px;

48
public/index.html
View File

@ -364,7 +364,7 @@ <h1>Settings</h1>
<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
<div id="artist_tab" class="main_tabcontent fixed_footer">
<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+'\')' }">
<h1>{{ title }}</h1>
<div class="fab right"><i class="material-icons">get_app</i></div>
@ -385,18 +385,16 @@ <h1>{{ title }}</h1>
</tr>
</thead>
<tbody>
<template v-for="release in showTable">
<tr>
<td class="inline-flex">
<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>
{{release.title}}
<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>
</tr>
</template>
<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>
{{release.title}}
<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>
</tr>
</tbody>
</table>
@ -405,13 +403,33 @@ <h1>{{ title }}</h1>
</footer>
</div>
<div id="tracklist_tab" class="main_tabcontent fixed_footer">
<header>
<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+'\')' }">
<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>
<table>
<thead>
<tr>
<th v-for="data in head" v-html="data.title"></th>
</tr>
</thead>
<tbody>
<tr v-for="track in body">
<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>{{ convertDuration(track.duration) }}</td>
<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
</tr>
</tbody>
</table>
<footer>
<button v-bind:data-link="link">Download {{ type }}</button>
<button>Download selection<i class="material-icons right">file_download</i></button>
<button onclick="backTab()">Back</button>
</footer>
</div>

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

@ -67,7 +67,14 @@ var tracklistTab = new Vue({
},
methods: {
addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)},
toggleAll: function(e){
tracklistTab.body.forEach((item) => {
if (item.type == 'track'){
item.selected = e.currentTarget.checked
}
});
}
}
})
@ -122,7 +129,7 @@ socket.on('show_artist', function(data){
artistTab.image = data.picture_xl
artistTab.type = "Artist"
artistTab.link = `https://www.deezer.com/artist/${data.id}`
artistTab.currentTab = Object.keys(data.data)[0]
artistTab.currentTab = Object.keys(data.releases)[0]
artistTab.sortKey = 'release_date'
artistTab.sortOrder = 'desc'
artistTab.head = [
@ -130,9 +137,34 @@ socket.on('show_artist', function(data){
{title: 'Release Date', sortKey: "release_date"},
{title: '', width: "56px"}
]
if (_.isEmpty(data.data)){
if (_.isEmpty(data.releases)){
artistTab.body = null
}else{
artistTab.body = data.data
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
console.log(data.tracks)
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" id="selectAll"><span></span>', width: "24px"}
]
if (_.isEmpty(data.tracks)){
tracklistTab.body = null
}else{
tracklistTab.body = data.tracks
}
})