mirrors/deemix-webui
1
0
Fork 0
mirror of https://gitlab.com/RemixDev/deemix-webui.git synced 2024-12-28 18:36:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: setup tracklist with rest api

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

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

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

11
src/data/artist.js
View file

@ -1,5 +1,5 @@
import { socket } from '@/utils/socket'
import { getPropertyWithFallback } from '@/utils/utils'
import { fetchData } from '@/utils/api'
export function formatArtistData(artistData) {
return {
@ -36,15 +36,8 @@ function formatArtistReleases(artistReleases) {
}
export function getArtistData(artistID) {
socket.emit('getTracklist', {
return fetchData('getTracklist', {
type: 'artist',
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 VueRouter from 'vue-router'
import { socket } from '@/utils/socket'
// Pages
//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 Tracklist from '@components/pages/Tracklist.vue'
import { fetchData } from '@/utils/api'
import EventBus from '@/utils/EventBus'
Vue.use(VueRouter)
@ -126,43 +126,50 @@ const router = new VueRouter({
})
router.beforeEach((to, from, next) => {
let getTracklistParams = null
switch (to.name) {
case 'Tracklist':
getTracklistParams = {
type: to.params.type,
id: to.params.id
}
case 'Tracklist': {
// const getTracklistParams = {
// type: to.params.type,
// id: to.params.id
// }
console.warn('This should never happen.')
break
case 'Album':
getTracklistParams = {
}
case 'Album': {
const getTracklistParams = {
type: 'album',
id: to.params.id
}
fetchData('getTracklist', getTracklistParams).then(albumData => {
EventBus.$emit('showAlbum', albumData)
})
break
case 'Playlist':
getTracklistParams = {
}
case 'Playlist': {
const getTracklistParams = {
type: 'playlist',
id: to.params.id
}
fetchData('getTracklist', getTracklistParams).then(playlistData => {
EventBus.$emit('showPlaylist', playlistData)
})
break
case 'Spotify Playlist':
getTracklistParams = {
}
case 'Spotify Playlist': {
const getTracklistParams = {
type: 'spotifyplaylist',
id: to.params.id
}
fetchData('getTracklist', getTracklistParams).then(spotifyPlaylistData => {
EventBus.$emit('showSpotifyPlaylist', spotifyPlaylistData)
})
break
}
default:
break
}
if (getTracklistParams) {
socket.emit('getTracklist', getTracklistParams)
fetchData('getTracklist', getTracklistParams)
}
next()
})

1
src/use/favorites.js
View file

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