danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: setup tracklist with rest api

This commit is contained in:
Roberto Tonino 2021-03-12 20:26:45 +01:00
parent b2b85fb84e
commit 1743878a14
5 changed files with 88 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
public/js/bundle.js
View File

@ -34602,16 +34602,9 @@ function formatArtistReleases(artistReleases) {
} }
function getArtistData(artistID) { function getArtistData(artistID) {
socket.emit('getTracklist', { return fetchData('getTracklist', {
type: 'artist', type: 'artist',
id: artistID id: artistID
});
return new Promise((resolve, reject) => {
socket.on('show_artist', data => {
socket.off('show_artist');
resolve(data);
});
}) })
} }
@ -36296,7 +36289,6 @@ async function refreshFavorites({ isInitial = false }) {
const spotifyPlaylists = await fetchData('getUserSpotifyPlaylists', { const spotifyPlaylists = await fetchData('getUserSpotifyPlaylists', {
spotifyUser: store.getters.getSpotifyUser.id spotifyUser: store.getters.getSpotifyUser.id
}); });
console.log({ spotifyPlaylists });
favoriteSpotifyPlaylists.value = spotifyPlaylists; favoriteSpotifyPlaylists.value = spotifyPlaylists;
} }
} }
@ -45530,9 +45522,9 @@ var script$t = {
} }
}, },
mounted() { mounted() {
socket.on('show_album', this.showAlbum); EventBus.$on('showAlbum', this.showAlbum);
socket.on('show_playlist', this.showPlaylist); EventBus.$on('showPlaylist', this.showPlaylist);
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist); EventBus.$on('showSpotifyPlaylist', this.showSpotifyPlaylist);
}, },
methods: { methods: {
playPausePreview, playPausePreview,
@ -45551,17 +45543,17 @@ var script$t = {
}, },
toggleAll(e) { toggleAll(e) {
this.body.forEach(item => { this.body.forEach(item => {
if (item.type == 'track') { if (item.type === 'track') {
item.selected = e.currentTarget.checked; item.selected = e.currentTarget.checked;
} }
}); });
}, },
selectedLinks() { selectedLinks() {
var selected = []; const selected = [];
if (this.body) { if (this.body) {
this.body.forEach(item => { this.body.forEach(item => {
if (item.type == 'track' && item.selected) if (item.type === 'track' && item.selected)
selected.push(this.type == 'spotifyPlaylist' ? item.uri : item.link); selected.push(this.type === 'spotifyPlaylist' ? item.uri : item.link);
}); });
} }
return selected.join(';') return selected.join(';')
@ -45875,11 +45867,11 @@ var __vue_render__$v = function() {
staticClass: staticClass:
"table__cell--medium table__cell--center clickable", "table__cell--medium table__cell--center clickable",
attrs: { attrs: {
tag: "td",
to: { to: {
name: "Artist", name: "Artist",
params: { id: track.artist.id } params: { id: track.artist.id }
} },
tag: "td"
} }
}, },
[ [
@ -45898,11 +45890,11 @@ var __vue_render__$v = function() {
staticClass: staticClass:
"table__cell--medium table__cell--center clickable", "table__cell--medium table__cell--center clickable",
attrs: { attrs: {
tag: "td",
to: { to: {
name: "Album", name: "Album",
params: { id: track.album.id } params: { id: track.album.id }
} },
tag: "td"
} }
}, },
[ [
@ -46375,38 +46367,45 @@ const router = new VueRouter({
}); });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
let getTracklistParams = null;
switch (to.name) { switch (to.name) {
case 'Tracklist': case 'Tracklist': {
getTracklistParams = { // const getTracklistParams = {
type: to.params.type, // type: to.params.type,
id: to.params.id // id: to.params.id
}; // }
console.warn('This should never happen.');
break break
case 'Album': }
getTracklistParams = { case 'Album': {
const getTracklistParams = {
type: 'album', type: 'album',
id: to.params.id id: to.params.id
}; };
fetchData('getTracklist', getTracklistParams).then(albumData => {
EventBus.$emit('showAlbum', albumData);
});
break break
case 'Playlist': }
getTracklistParams = { case 'Playlist': {
const getTracklistParams = {
type: 'playlist', type: 'playlist',
id: to.params.id id: to.params.id
}; };
fetchData('getTracklist', getTracklistParams).then(playlistData => {
EventBus.$emit('showPlaylist', playlistData);
});
break break
case 'Spotify Playlist': }
getTracklistParams = { case 'Spotify Playlist': {
const getTracklistParams = {
type: 'spotifyplaylist', type: 'spotifyplaylist',
id: to.params.id id: to.params.id
}; };
fetchData('getTracklist', getTracklistParams).then(spotifyPlaylistData => {
EventBus.$emit('showSpotifyPlaylist', spotifyPlaylistData);
});
break break
} }
if (getTracklistParams) {
socket.emit('getTracklist', getTracklistParams);
fetchData('getTracklist', getTracklistParams);
} }
next(); next();

46
src/components/pages/Tracklist.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="relative fixed-footer bg-background-main image-header" ref="root"> <div ref="root" class="relative fixed-footer bg-background-main image-header">
<header <header
:style="{ :style="{
'background-image': 'background-image':
@ -30,7 +30,7 @@
<i class="material-icons">timer</i> <i class="material-icons">timer</i>
</th> </th>
<th class="table__icon table__cell--center clickable"> <th class="table__icon table__cell--center clickable">
<input @click="toggleAll" class="selectAll" type="checkbox" /> <input class="selectAll" type="checkbox" @click="toggleAll" />
</th> </th>
</tr> </tr>
</thead> </thead>
@ -41,15 +41,15 @@
<td class="table__cell--x-small table__cell--center"> <td class="table__cell--x-small table__cell--center">
<div class="table__cell-content table__cell-content--vertical-center"> <div class="table__cell-content table__cell-content--vertical-center">
<i <i
class="material-icons" v-on="{ click: track.preview ? playPausePreview : false }"
:class="{ :class="{
preview_playlist_controls: track.preview, preview_playlist_controls: track.preview,
'cursor-pointer': track.preview, 'cursor-pointer': track.preview,
disabled: !track.preview disabled: !track.preview
}" }"
v-on="{ click: track.preview ? playPausePreview : false }"
:data-preview="track.preview" :data-preview="track.preview"
:title="$t('globals.play_hint')" :title="$t('globals.play_hint')"
class="material-icons"
> >
play_arrow play_arrow
</i> </i>
@ -70,28 +70,28 @@
</div> </div>
</td> </td>
<router-link <router-link
tag="td"
class="table__cell--medium table__cell--center clickable"
:to="{ name: 'Artist', params: { id: track.artist.id } }" :to="{ name: 'Artist', params: { id: track.artist.id } }"
class="table__cell--medium table__cell--center clickable"
tag="td"
> >
{{ track.artist.name }} {{ track.artist.name }}
</router-link> </router-link>
<router-link <router-link
tag="td"
v-if="type === 'playlist'" v-if="type === 'playlist'"
class="table__cell--medium table__cell--center clickable"
:to="{ name: 'Album', params: { id: track.album.id } }" :to="{ name: 'Album', params: { id: track.album.id } }"
class="table__cell--medium table__cell--center clickable"
tag="td"
> >
{{ track.album.title }} {{ track.album.title }}
</router-link> </router-link>
<td <td
class="table__cell--center"
:class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }" :class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }"
class="table__cell--center"
> >
{{ convertDuration(track.duration) }} {{ convertDuration(track.duration) }}
</td> </td>
<td class="table__icon table__cell--center"> <td class="table__icon table__cell--center">
<input class="clickable" type="checkbox" v-model="track.selected" /> <input v-model="track.selected" class="clickable" type="checkbox" />
</td> </td>
</tr> </tr>
<tr v-else-if="track.type == 'disc_separator'" class="table__row-no-highlight" style="opacity: 0.54"> <tr v-else-if="track.type == 'disc_separator'" class="table__row-no-highlight" style="opacity: 0.54">
@ -112,14 +112,14 @@
<td> <td>
<i <i
v-if="track.preview_url" v-if="track.preview_url"
@click="playPausePreview"
class="material-icons"
:class="{ :class="{
preview_playlist_controls: track.preview_url, preview_playlist_controls: track.preview_url,
'cursor-pointer': track.preview_url 'cursor-pointer': track.preview_url
}" }"
:data-preview="track.preview_url" :data-preview="track.preview_url"
:title="$t('globals.play_hint')" :title="$t('globals.play_hint')"
class="material-icons"
@click="playPausePreview"
> >
play_arrow play_arrow
</i> </i>
@ -133,17 +133,17 @@
<td>{{ track.artists[0].name }}</td> <td>{{ track.artists[0].name }}</td>
<td>{{ track.album.name }}</td> <td>{{ track.album.name }}</td>
<td>{{ convertDuration(Math.floor(track.duration_ms / 1000)) }}</td> <td>{{ convertDuration(Math.floor(track.duration_ms / 1000)) }}</td>
<td><input class="clickable" type="checkbox" v-model="track.selected" /></td> <td><input v-model="track.selected" class="clickable" type="checkbox" /></td>
</tr> </tr>
</template> </template>
</tbody> </tbody>
</table> </table>
<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span> <span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
<footer class="bg-background-main"> <footer class="bg-background-main">
<button class="mr-2 btn btn-primary" @click.stop="addToQueue" :data-link="link"> <button :data-link="link" class="mr-2 btn btn-primary" @click.stop="addToQueue">
{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }} {{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
</button> </button>
<button class="flex items-center btn btn-primary" @click.stop="addToQueue" :data-link="selectedLinks()"> <button :data-link="selectedLinks()" class="flex items-center btn btn-primary" @click.stop="addToQueue">
{{ $t('tracklist.downloadSelection') }}<i class="ml-2 material-icons">file_download</i> {{ $t('tracklist.downloadSelection') }}<i class="ml-2 material-icons">file_download</i>
</button> </button>
</footer> </footer>
@ -156,6 +156,7 @@ import { socket } from '@/utils/socket'
import { sendAddToQueue } from '@/utils/downloads' import { sendAddToQueue } from '@/utils/downloads'
import Utils from '@/utils/utils' import Utils from '@/utils/utils'
import { playPausePreview } from '@components/globals/TheTrackPreview.vue' import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
import EventBus from '@/utils/EventBus'
export default { export default {
data() { data() {
@ -172,9 +173,9 @@ export default {
} }
}, },
mounted() { mounted() {
socket.on('show_album', this.showAlbum) EventBus.$on('showAlbum', this.showAlbum)
socket.on('show_playlist', this.showPlaylist) EventBus.$on('showPlaylist', this.showPlaylist)
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist) EventBus.$on('showSpotifyPlaylist', this.showSpotifyPlaylist)
}, },
methods: { methods: {
playPausePreview, playPausePreview,
@ -193,17 +194,17 @@ export default {
}, },
toggleAll(e) { toggleAll(e) {
this.body.forEach(item => { this.body.forEach(item => {
if (item.type == 'track') { if (item.type === 'track') {
item.selected = e.currentTarget.checked item.selected = e.currentTarget.checked
} }
}) })
}, },
selectedLinks() { selectedLinks() {
var selected = [] const selected = []
if (this.body) { if (this.body) {
this.body.forEach(item => { this.body.forEach(item => {
if (item.type == 'track' && item.selected) if (item.type === 'track' && item.selected)
selected.push(this.type == 'spotifyPlaylist' ? item.uri : item.link) selected.push(this.type === 'spotifyPlaylist' ? item.uri : item.link)
}) })
} }
return selected.join(';') return selected.join(';')
@ -305,4 +306,3 @@ export default {
} }
} }
</script> </script>

11
src/data/artist.js
View File

@ -1,5 +1,5 @@
import { socket } from '@/utils/socket'
import { getPropertyWithFallback } from '@/utils/utils' import { getPropertyWithFallback } from '@/utils/utils'
import { fetchData } from '@/utils/api'
export function formatArtistData(artistData) { export function formatArtistData(artistData) {
return { return {
@ -36,15 +36,8 @@ function formatArtistReleases(artistReleases) {
} }
export function getArtistData(artistID) { export function getArtistData(artistID) {
socket.emit('getTracklist', { return fetchData('getTracklist', {
type: 'artist', type: 'artist',
id: artistID id: artistID
}) })
return new Promise((resolve, reject) => {
socket.on('show_artist', data => {
socket.off('show_artist')
resolve(data)
})
})
} }

45
src/router.js
View File

@ -1,6 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import { socket } from '@/utils/socket'
// Pages // Pages
//import About from '@components/pages/About.vue' //import About from '@components/pages/About.vue'
@ -16,6 +15,7 @@ import Search from '@components/pages/Search.vue'
import Settings from '@components/pages/Settings.vue' import Settings from '@components/pages/Settings.vue'
import Tracklist from '@components/pages/Tracklist.vue' import Tracklist from '@components/pages/Tracklist.vue'
import { fetchData } from '@/utils/api' import { fetchData } from '@/utils/api'
import EventBus from '@/utils/EventBus'
Vue.use(VueRouter) Vue.use(VueRouter)
@ -126,43 +126,50 @@ const router = new VueRouter({
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
let getTracklistParams = null
switch (to.name) { switch (to.name) {
case 'Tracklist': case 'Tracklist': {
getTracklistParams = { // const getTracklistParams = {
type: to.params.type, // type: to.params.type,
id: to.params.id // id: to.params.id
} // }
console.warn('This should never happen.')
break break
case 'Album': }
getTracklistParams = { case 'Album': {
const getTracklistParams = {
type: 'album', type: 'album',
id: to.params.id id: to.params.id
} }
fetchData('getTracklist', getTracklistParams).then(albumData => {
EventBus.$emit('showAlbum', albumData)
})
break break
case 'Playlist': }
getTracklistParams = { case 'Playlist': {
const getTracklistParams = {
type: 'playlist', type: 'playlist',
id: to.params.id id: to.params.id
} }
fetchData('getTracklist', getTracklistParams).then(playlistData => {
EventBus.$emit('showPlaylist', playlistData)
})
break break
case 'Spotify Playlist': }
getTracklistParams = { case 'Spotify Playlist': {
const getTracklistParams = {
type: 'spotifyplaylist', type: 'spotifyplaylist',
id: to.params.id id: to.params.id
} }
fetchData('getTracklist', getTracklistParams).then(spotifyPlaylistData => {
EventBus.$emit('showSpotifyPlaylist', spotifyPlaylistData)
})
break break
}
default: default:
break break
} }
if (getTracklistParams) {
socket.emit('getTracklist', getTracklistParams)
fetchData('getTracklist', getTracklistParams)
}
next() next()
}) })

1
src/use/favorites.js
View File

@ -30,7 +30,6 @@ async function refreshFavorites({ isInitial = false }) {
const spotifyPlaylists = await fetchData('getUserSpotifyPlaylists', { const spotifyPlaylists = await fetchData('getUserSpotifyPlaylists', {
spotifyUser: store.getters.getSpotifyUser.id spotifyUser: store.getters.getSpotifyUser.id
}) })
console.log({ spotifyPlaylists })
favoriteSpotifyPlaylists.value = spotifyPlaylists favoriteSpotifyPlaylists.value = spotifyPlaylists
} }
} }