mirror of
https://github.com/owntone/owntone-server.git
synced 2025-11-09 13:39:47 -05:00
Merge forked-daapd-web into forked-daapd
This commit is contained in:
chme
ejurgensen
193
web-src/src/App.vue
Normal file
193
web-src/src/App.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<navbar-top />
|
||||
<vue-progress-bar class="fd-progress-bar" />
|
||||
<transition name="fade">
|
||||
<router-view v-show="!show_burger_menu" />
|
||||
</transition>
|
||||
<notifications v-show="!show_burger_menu" />
|
||||
<navbar-bottom v-show="!show_burger_menu" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavbarTop from '@/components/NavbarTop'
|
||||
import NavbarBottom from '@/components/NavbarBottom'
|
||||
import Notifications from '@/components/Notifications'
|
||||
import webapi from '@/webapi'
|
||||
import * as types from '@/store/mutation_types'
|
||||
import ReconnectingWebSocket from 'reconnectingwebsocket'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: { NavbarTop, NavbarBottom, Notifications },
|
||||
template: '<App/>',
|
||||
|
||||
data () {
|
||||
return {
|
||||
token_timer_id: 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
show_burger_menu () {
|
||||
return this.$store.state.show_burger_menu
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.connect()
|
||||
|
||||
// Start the progress bar on app start
|
||||
this.$Progress.start()
|
||||
|
||||
// Hook the progress bar to start before we move router-view
|
||||
this.$router.beforeEach((to, from, next) => {
|
||||
if (to.meta.show_progress) {
|
||||
if (to.meta.progress !== undefined) {
|
||||
let meta = to.meta.progress
|
||||
this.$Progress.parseMeta(meta)
|
||||
}
|
||||
this.$Progress.start()
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
// hook the progress bar to finish after we've finished moving router-view
|
||||
this.$router.afterEach((to, from) => {
|
||||
if (to.meta.show_progress) {
|
||||
this.$Progress.finish()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
connect: function () {
|
||||
this.$store.dispatch('add_notification', { text: 'Connecting to forked-daapd', type: 'info', topic: 'connection', timeout: 2000 })
|
||||
|
||||
webapi.config().then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_CONFIG, data)
|
||||
this.$store.commit(types.HIDE_SINGLES, data.hide_singles)
|
||||
document.title = data.library_name
|
||||
|
||||
this.open_ws()
|
||||
this.$Progress.finish()
|
||||
}).catch(() => {
|
||||
this.$store.dispatch('add_notification', { text: 'Failed to connect to forked-daapd', type: 'danger', topic: 'connection' })
|
||||
})
|
||||
},
|
||||
|
||||
open_ws: function () {
|
||||
if (this.$store.state.config.websocket_port <= 0) {
|
||||
this.$store.dispatch('add_notification', { text: 'Missing websocket port', type: 'danger' })
|
||||
return
|
||||
}
|
||||
|
||||
const vm = this
|
||||
|
||||
var socket = new ReconnectingWebSocket(
|
||||
'ws://' + window.location.hostname + ':' + vm.$store.state.config.websocket_port,
|
||||
'notify',
|
||||
{ reconnectInterval: 5000 }
|
||||
)
|
||||
|
||||
socket.onopen = function () {
|
||||
vm.$store.dispatch('add_notification', { text: 'Connection to server established', type: 'primary', topic: 'connection', timeout: 2000 })
|
||||
socket.send(JSON.stringify({ notify: ['update', 'player', 'options', 'outputs', 'volume', 'spotify'] }))
|
||||
|
||||
vm.update_outputs()
|
||||
vm.update_player_status()
|
||||
vm.update_library_stats()
|
||||
vm.update_queue()
|
||||
vm.update_spotify()
|
||||
}
|
||||
socket.onclose = function () {
|
||||
// vm.$store.dispatch('add_notification', { text: 'Connection closed', type: 'danger', timeout: 2000 })
|
||||
}
|
||||
socket.onerror = function () {
|
||||
vm.$store.dispatch('add_notification', { text: 'Connection lost. Reconnecting ...', type: 'danger', topic: 'connection' })
|
||||
}
|
||||
socket.onmessage = function (response) {
|
||||
var data = JSON.parse(response.data)
|
||||
if (data.notify.includes('update')) {
|
||||
vm.update_library_stats()
|
||||
}
|
||||
if (data.notify.includes('player') || data.notify.includes('options') || data.notify.includes('volume')) {
|
||||
vm.update_player_status()
|
||||
}
|
||||
if (data.notify.includes('outputs') || data.notify.includes('volume')) {
|
||||
vm.update_outputs()
|
||||
}
|
||||
if (data.notify.includes('queue')) {
|
||||
vm.update_queue()
|
||||
}
|
||||
if (data.notify.includes('spotify')) {
|
||||
vm.update_spotify()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
update_library_stats: function () {
|
||||
webapi.library_stats().then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_LIBRARY_STATS, data)
|
||||
})
|
||||
webapi.library_count('media_kind is audiobook').then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_LIBRARY_AUDIOBOOKS_COUNT, data)
|
||||
})
|
||||
webapi.library_count('media_kind is podcast').then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_LIBRARY_PODCASTS_COUNT, data)
|
||||
})
|
||||
},
|
||||
|
||||
update_outputs: function () {
|
||||
webapi.outputs().then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_OUTPUTS, data.outputs)
|
||||
})
|
||||
},
|
||||
|
||||
update_player_status: function () {
|
||||
webapi.player_status().then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
|
||||
})
|
||||
},
|
||||
|
||||
update_queue: function () {
|
||||
webapi.queue().then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_QUEUE, data)
|
||||
})
|
||||
},
|
||||
|
||||
update_spotify: function () {
|
||||
webapi.spotify().then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_SPOTIFY, data)
|
||||
|
||||
if (this.token_timer_id > 0) {
|
||||
console.log('clear old timer: ' + this.token_timer_id)
|
||||
window.clearTimeout(this.token_timer_id)
|
||||
this.token_timer_id = 0
|
||||
}
|
||||
if (data.webapi_token_expires_in > 0 && data.webapi_token) {
|
||||
this.token_timer_id = window.setTimeout(this.update_spotify, 1000 * data.webapi_token_expires_in)
|
||||
console.log('new timer: ' + this.token_timer_id + ', expires in ' + data.webapi_token_expires_in + ' seconds')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
this.$store.commit(types.SHOW_BURGER_MENU, false)
|
||||
},
|
||||
'show_burger_menu' () {
|
||||
if (this.show_burger_menu) {
|
||||
document.querySelector('html').classList.add('is-clipped')
|
||||
} else {
|
||||
document.querySelector('html').classList.remove('is-clipped')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
101
web-src/src/components/ListItemAlbum.vue
Normal file
101
web-src/src/components/ListItemAlbum.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="open_album">
|
||||
<h1 class="title is-6">{{ album.name }}</h1>
|
||||
<h2 class="subtitle is-7 has-text-grey"><b>{{ album.artist }}</b></h2>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click="show_details_modal = true">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<modal-dialog :show="show_details_modal" @close="show_details_modal = false">
|
||||
<template slot="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open_album">{{ album.name }}</a>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p v-if="album.artist && media_kind !== 'audiobook'">
|
||||
<span class="heading">Album artist</span>
|
||||
<a class="title is-6 has-text-link" @click="open_artist">{{ album.artist }}</a>
|
||||
</p>
|
||||
<p v-if="album.artist && media_kind === 'audiobook'">
|
||||
<span class="heading">Album artist</span>
|
||||
<span class="title is-6">{{ album.artist }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Tracks</span>
|
||||
<span class="title is-6">{{ album.track_count }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
<span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ListItemAlbum',
|
||||
components: { ModalDialog },
|
||||
|
||||
props: ['album', 'media_kind'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.album.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
queue_add: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_add(this.album.uri).then(() =>
|
||||
this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
|
||||
)
|
||||
},
|
||||
|
||||
open_album: function () {
|
||||
this.show_details_modal = false
|
||||
if (this.media_kind === 'podcast') {
|
||||
this.$router.push({ path: '/podcasts/' + this.album.id })
|
||||
} else if (this.media_kind === 'audiobook') {
|
||||
this.$router.push({ path: '/audiobooks/' + this.album.id })
|
||||
} else {
|
||||
this.$router.push({ path: '/music/albums/' + this.album.id })
|
||||
}
|
||||
},
|
||||
|
||||
open_artist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/artists/' + this.album.artist_id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
85
web-src/src/components/ListItemArtist.vue
Normal file
85
web-src/src/components/ListItemArtist.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
|
||||
<h1 class="title is-6">{{ artist.name }}</h1>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click="show_details_modal = true">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<modal-dialog :show="show_details_modal" @close="show_details_modal = false">
|
||||
<template slot="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open_artist">{{ artist.name }}</a>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading">Albums</span>
|
||||
<span class="title is-6">{{ artist.album_count }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Tracks</span>
|
||||
<span class="title is-6">{{ artist.track_count }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
<span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PartArtist',
|
||||
components: { ModalDialog },
|
||||
|
||||
props: ['artist'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.artist.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
queue_add: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_add(this.artist.uri).then(() =>
|
||||
this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
|
||||
)
|
||||
},
|
||||
|
||||
open_artist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/artists/' + this.artist.id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
81
web-src/src/components/ListItemPlaylist.vue
Normal file
81
web-src/src/components/ListItemPlaylist.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="open_playlist">
|
||||
<h1 class="title is-6">{{ playlist.name }}</h1>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click="show_details_modal = true">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<modal-dialog :show="show_details_modal" @close="show_details_modal = false">
|
||||
<template slot="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open_playlist">{{ playlist.name }}</a>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading">Path</span>
|
||||
<span class="title is-6">{{ playlist.path }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
<span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PartPlaylist',
|
||||
components: { ModalDialog },
|
||||
|
||||
props: ['playlist'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.playlist.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
queue_add: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_add(this.playlist.uri).then(() =>
|
||||
this.$store.dispatch('add_notification', { text: 'Playlist appended to queue', type: 'info', timeout: 2000 })
|
||||
)
|
||||
},
|
||||
|
||||
open_playlist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/playlists/' + this.playlist.id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
117
web-src/src/components/ListItemQueueItem.vue
Normal file
117
web-src/src/components/ListItemQueueItem.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="media" v-if="is_next || !show_only_next_items">
|
||||
<!---->
|
||||
<div class="media-left" v-if="edit_mode">
|
||||
<span class="icon has-text-grey fd-is-movable handle"><i class="mdi mdi-drag-horizontal mdi-18px"></i></span>
|
||||
</div>
|
||||
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="play">
|
||||
<h1 class="title is-6" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next }">{{ item.title }}</h1>
|
||||
<h2 class="subtitle is-7" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next, 'has-text-grey': is_next && item.id !== state.item_id }"><b>{{ item.artist }}</b></h2>
|
||||
<h2 class="subtitle is-7" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next, 'has-text-grey': is_next && item.id !== state.item_id }">{{ item.album }}</h2>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a v-on:click="remove" v-if="item.id !== state.item_id && edit_mode">
|
||||
<span class="icon has-text-grey"><i class="mdi mdi-delete mdi-18px"></i></span>
|
||||
</a>
|
||||
<a @click="show_details_modal = true" v-if="!edit_mode">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<modal-dialog v-if="!edit_mode" :show="show_details_modal" @close="show_details_modal = false">
|
||||
<template slot="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
{{ item.artist }}
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading">Album</span>
|
||||
<span class="title is-6">{{ item.album }}</span>
|
||||
</p>
|
||||
<p v-if="item.album_artist">
|
||||
<span class="heading">Album artist</span>
|
||||
<span class="title is-6">{{ item.album_artist }}</span>
|
||||
</p>
|
||||
<p v-if="item.year > 0">
|
||||
<span class="heading">Year</span>
|
||||
<span class="title is-6">{{ item.year }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Genre</span>
|
||||
<span class="title is-6">{{ item.genre }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Track / Disc</span>
|
||||
<span class="title is-6">{{ item.track_number }} / {{ item.disc_number }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Length</span>
|
||||
<span class="title is-6">{{ item.length_ms | duration }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Path</span>
|
||||
<span class="title is-6">{{ item.path }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="remove">
|
||||
<span class="icon"><i class="mdi mdi-delete mdi-18px"></i></span> <span>Remove</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PartQueueItem',
|
||||
components: { ModalDialog },
|
||||
|
||||
props: ['item', 'position', 'current_position', 'show_only_next_items', 'edit_mode'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
state () {
|
||||
return this.$store.state.player
|
||||
},
|
||||
|
||||
is_next () {
|
||||
return this.current_position < 0 || this.position >= this.current_position
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
remove: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_remove(this.item.id)
|
||||
},
|
||||
|
||||
play: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.player_playid(this.item.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
142
web-src/src/components/ListItemTrack.vue
Normal file
142
web-src/src/components/ListItemTrack.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="play">
|
||||
<h1 class="title is-6">{{ track.title }}</h1>
|
||||
<h2 class="subtitle is-7 has-text-grey"><b>{{ track.artist }}</b></h2>
|
||||
<h2 class="subtitle is-7 has-text-grey">{{ track.album }}</h2>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click="show_details_modal = true">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<modal-dialog :show="show_details_modal" @close="show_details_modal = false">
|
||||
<template slot="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
{{ track.title }}
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
{{ track.artist }}
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading">Album</span>
|
||||
<a class="title is-6 has-text-link" @click="open_album">{{ track.album }}</a>
|
||||
</p>
|
||||
<p v-if="track.album_artist && track.media_kind !== 'audiobook'">
|
||||
<span class="heading">Album artist</span>
|
||||
<a class="title is-6 has-text-link" @click="open_artist">{{ track.album_artist }}</a>
|
||||
</p>
|
||||
<p v-if="track.date_released">
|
||||
<span class="heading">Release date</span>
|
||||
<span class="title is-6">{{ track.date_released | time('L')}}</span>
|
||||
</p>
|
||||
<p v-else-if="track.year > 0">
|
||||
<span class="heading">Year</span>
|
||||
<span class="title is-6">{{ track.year }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Genre</span>
|
||||
<span class="title is-6">{{ track.genre }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Track / Disc</span>
|
||||
<span class="title is-6">{{ track.track_number }} / {{ track.disc_number }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Length</span>
|
||||
<span class="title is-6">{{ track.length_ms | duration }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Path</span>
|
||||
<span class="title is-6">{{ track.path }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Type</span>
|
||||
<span class="title is-6">{{ track.media_kind }} - {{ track.data_kind }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Added at</span>
|
||||
<span class="title is-6">{{ track.time_added | time('L LT')}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
<span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play_track">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PartTrack',
|
||||
components: { ModalDialog },
|
||||
|
||||
props: ['track', 'position', 'context_uri'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.context_uri).then(() =>
|
||||
webapi.player_playpos(this.position)
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
play_track: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.track.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
queue_add: function () {
|
||||
this.show_details_modal = false
|
||||
webapi.queue_add(this.track.uri).then(() =>
|
||||
this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
|
||||
)
|
||||
},
|
||||
|
||||
open_album: function () {
|
||||
this.show_details_modal = false
|
||||
if (this.track.media_kind === 'podcast') {
|
||||
this.$router.push({ path: '/podcasts/' + this.track.album_id })
|
||||
} else if (this.track.media_kind === 'audiobook') {
|
||||
this.$router.push({ path: '/audiobooks/' + this.track.album_id })
|
||||
} else {
|
||||
this.$router.push({ path: '/music/albums/' + this.track.album_id })
|
||||
}
|
||||
},
|
||||
|
||||
open_artist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/artists/' + this.track.album_artist_id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
23
web-src/src/components/ModalDialog.vue
Normal file
23
web-src/src/components/ModalDialog.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<transition name="fade">
|
||||
<div class="modal is-active" v-if="show">
|
||||
<div class="modal-background" @click="$emit('close')"></div>
|
||||
<div class="modal-content fd-modal-card">
|
||||
<slot name="modal-content"></slot>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ModalDialog',
|
||||
props: [ 'show' ]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
73
web-src/src/components/NavBarItemOutput.vue
Normal file
73
web-src/src/components/NavBarItemOutput.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="navbar-item">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left fd-expanded">
|
||||
<div class="level-item" style="flex-grow: 0;">
|
||||
<span class="icon fd-has-action" :class="{ 'has-text-grey-light': !output.selected }" v-on:click="set_enabled"><i class="mdi mdi-18px" v-bind:class="type_class"></i></span>
|
||||
</div>
|
||||
<div class="level-item fd-expanded">
|
||||
<div class="fd-expanded">
|
||||
<p class="heading" :class="{ 'has-text-grey-light': !output.selected }">{{ output.name }}</p>
|
||||
<range-slider
|
||||
class="slider fd-has-action"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
:disabled="!output.selected"
|
||||
:value="volume"
|
||||
@change="set_volume" >
|
||||
</range-slider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RangeSlider from 'vue-range-slider'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'NavBarItemOutput',
|
||||
components: { RangeSlider },
|
||||
|
||||
props: [ 'output' ],
|
||||
|
||||
computed: {
|
||||
type_class () {
|
||||
if (this.output.type === 'AirPlay') {
|
||||
return 'mdi-airplay'
|
||||
} else if (this.output.type === 'fifo') {
|
||||
return 'mdi-pipe'
|
||||
} else {
|
||||
return 'mdi-server'
|
||||
}
|
||||
},
|
||||
|
||||
volume () {
|
||||
return this.output.selected ? this.output.volume : 0
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play_next: function () {
|
||||
webapi.player_next()
|
||||
},
|
||||
|
||||
set_volume: function (newVolume) {
|
||||
webapi.player_output_volume(this.output.id, newVolume)
|
||||
},
|
||||
|
||||
set_enabled: function () {
|
||||
const values = {
|
||||
'selected': !this.output.selected
|
||||
}
|
||||
webapi.output_update(this.output.id, values)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
43
web-src/src/components/NavbarBottom.vue
Normal file
43
web-src/src/components/NavbarBottom.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<nav class="navbar is-dark is-fixed-bottom" role="navigation" aria-label="player controls">
|
||||
<div class="navbar-brand fd-expanded">
|
||||
<router-link to="/" class="navbar-item" active-class="is-active" exact>
|
||||
<span class="icon"><i class="mdi mdi-24px mdi-playlist-play"></i></span>
|
||||
</router-link>
|
||||
<router-link to="/now-playing" class="navbar-item is-expanded is-clipped" active-class="is-active" exact>
|
||||
<div>
|
||||
<p class="is-size-7 fd-is-text-clipped">
|
||||
<strong>{{ now_playing.title }}</strong><br>
|
||||
{{ now_playing.artist }}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
<player-button-play-pause class="navbar-item fd-margin-left-auto" icon_style="mdi-36px"></player-button-play-pause>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlayerButtonPlayPause from './PlayerButtonPlayPause'
|
||||
|
||||
export default {
|
||||
name: 'NavbarBottom',
|
||||
components: { PlayerButtonPlayPause },
|
||||
|
||||
data () {
|
||||
return { }
|
||||
},
|
||||
|
||||
computed: {
|
||||
state () {
|
||||
return this.$store.state.player
|
||||
},
|
||||
now_playing () {
|
||||
return this.$store.getters.now_playing
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
172
web-src/src/components/NavbarTop.vue
Normal file
172
web-src/src/components/NavbarTop.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<router-link to="/playlists" class="navbar-item" active-class="is-active">
|
||||
<span class="icon"><i class="mdi mdi-library-music"></i></span>
|
||||
</router-link>
|
||||
<router-link to="/music" class="navbar-item" active-class="is-active">
|
||||
<span class="icon"><i class="mdi mdi-music"></i></span>
|
||||
</router-link>
|
||||
<router-link to="/podcasts" class="navbar-item" active-class="is-active" v-if="podcasts.tracks > 0">
|
||||
<span class="icon"><i class="mdi mdi-microphone"></i></span>
|
||||
</router-link>
|
||||
<router-link to="/audiobooks" class="navbar-item" active-class="is-active" v-if="audiobooks.tracks > 0">
|
||||
<span class="icon"><i class="mdi mdi-book-open-variant"></i></span>
|
||||
</router-link>
|
||||
<router-link to="/search" class="navbar-item" active-class="is-active">
|
||||
<span class="icon"><i class="mdi mdi-magnify"></i></span>
|
||||
</router-link>
|
||||
|
||||
<div class="navbar-burger" @click="update_show_burger_menu" :class="{ 'is-active': show_burger_menu }">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-menu" :class="{ 'is-active': show_burger_menu }">
|
||||
<div class="navbar-start">
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop">Volume</span></a>
|
||||
|
||||
<div class="navbar-dropdown is-right">
|
||||
<div class="navbar-item">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left fd-expanded">
|
||||
<div class="level-item" style="flex-grow: 0;">
|
||||
<span class="icon"><i class="mdi mdi-18px mdi-volume-high"></i></span>
|
||||
</div>
|
||||
<div class="level-item fd-expanded">
|
||||
<div class="fd-expanded">
|
||||
<p class="heading">Volume</p>
|
||||
<range-slider
|
||||
class="slider fd-has-action"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
:value="player.volume"
|
||||
@change="set_volume">
|
||||
</range-slider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="navbar-divider">
|
||||
<nav-bar-item-output v-for="output in outputs" :key="output.id" :output="output"></nav-bar-item-output>
|
||||
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="buttons has-addons">
|
||||
<player-button-previous class="button"></player-button-previous>
|
||||
<player-button-play-pause class="button"></player-button-play-pause>
|
||||
<player-button-next class="button"></player-button-next>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="buttons has-addons">
|
||||
<player-button-repeat class="button is-light"></player-button-repeat>
|
||||
<player-button-shuffle class="button is-light"></player-button-shuffle>
|
||||
<player-button-consume class="button is-light"></player-button-consume>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop">Settings</span></a>
|
||||
|
||||
<div class="navbar-dropdown is-right">
|
||||
<a class="navbar-item" href="/admin.html">Admin</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" v-on:click="open_about">
|
||||
<div>
|
||||
<p class="title is-7">forked-daapd</p>
|
||||
<p class="subtitle is-7">{{ config.version }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
import NavBarItemOutput from './NavBarItemOutput'
|
||||
import PlayerButtonPlayPause from './PlayerButtonPlayPause'
|
||||
import PlayerButtonNext from './PlayerButtonNext'
|
||||
import PlayerButtonPrevious from './PlayerButtonPrevious'
|
||||
import PlayerButtonShuffle from './PlayerButtonShuffle'
|
||||
import PlayerButtonConsume from './PlayerButtonConsume'
|
||||
import PlayerButtonRepeat from './PlayerButtonRepeat'
|
||||
import RangeSlider from 'vue-range-slider'
|
||||
import * as types from '@/store/mutation_types'
|
||||
|
||||
export default {
|
||||
name: 'NavbarTop',
|
||||
components: { NavBarItemOutput, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
|
||||
|
||||
data () {
|
||||
return {
|
||||
search_query: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
outputs () {
|
||||
return this.$store.state.outputs
|
||||
},
|
||||
|
||||
player () {
|
||||
return this.$store.state.player
|
||||
},
|
||||
|
||||
config () {
|
||||
return this.$store.state.config
|
||||
},
|
||||
|
||||
library () {
|
||||
return this.$store.state.library
|
||||
},
|
||||
|
||||
audiobooks () {
|
||||
return this.$store.state.audiobooks_count
|
||||
},
|
||||
|
||||
podcasts () {
|
||||
return this.$store.state.podcasts_count
|
||||
},
|
||||
|
||||
show_burger_menu () {
|
||||
return this.$store.state.show_burger_menu
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
update_show_burger_menu: function () {
|
||||
this.$store.commit(types.SHOW_BURGER_MENU, !this.show_burger_menu)
|
||||
},
|
||||
|
||||
set_volume: function (newVolume) {
|
||||
webapi.player_volume(newVolume)
|
||||
},
|
||||
|
||||
open_about: function () {
|
||||
this.$store.commit(types.SHOW_BURGER_MENU, false)
|
||||
this.$router.push({ path: '/about' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
52
web-src/src/components/Notifications.vue
Normal file
52
web-src/src/components/Notifications.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<section class="fd-notifications">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-half">
|
||||
<div class="notification has-shadow " v-for="notification in notifications" :key="notification.id" :class="['notification', notification.type ? `is-${notification.type}` : '']">
|
||||
<button class="delete" v-on:click="remove(notification)"></button>
|
||||
{{ notification.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as types from '@/store/mutation_types'
|
||||
|
||||
export default {
|
||||
name: 'Notifications',
|
||||
components: { },
|
||||
|
||||
data () {
|
||||
return { showNav: false }
|
||||
},
|
||||
|
||||
computed: {
|
||||
notifications () {
|
||||
return this.$store.state.notifications.list
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
remove: function (notification) {
|
||||
this.$store.commit(types.DELETE_NOTIFICATION, notification)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fd-notifications {
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
z-index: 20000;
|
||||
width: 100%;
|
||||
}
|
||||
.fd-notifications .notification {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
</style>
|
||||
28
web-src/src/components/PlayerButtonConsume.vue
Normal file
28
web-src/src/components/PlayerButtonConsume.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<a v-on:click="toggle_consume_mode" v-bind:class="{ 'is-warning': is_consume }">
|
||||
<span class="icon"><i class="mdi mdi-fire"></i></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PlayerButtonConsume',
|
||||
|
||||
computed: {
|
||||
is_consume () {
|
||||
return this.$store.state.player.consume
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle_consume_mode: function () {
|
||||
webapi.player_consume(!this.is_consume)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
22
web-src/src/components/PlayerButtonNext.vue
Normal file
22
web-src/src/components/PlayerButtonNext.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<a v-on:click="play_next">
|
||||
<span class="icon"><i class="mdi mdi-skip-forward"></i></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PlayerButtonNext',
|
||||
|
||||
methods: {
|
||||
play_next: function () {
|
||||
webapi.player_next()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
34
web-src/src/components/PlayerButtonPlayPause.vue
Normal file
34
web-src/src/components/PlayerButtonPlayPause.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<a v-on:click="toggle_play_pause">
|
||||
<span class="icon"><i class="mdi" v-bind:class="[icon_style, { 'mdi-play': !is_playing, 'mdi-pause': is_playing }]"></i></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PlayerButtonPlayPause',
|
||||
|
||||
props: ['icon_style'],
|
||||
|
||||
computed: {
|
||||
is_playing () {
|
||||
return this.$store.state.player.state === 'play'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle_play_pause: function () {
|
||||
if (this.is_playing) {
|
||||
webapi.player_pause()
|
||||
} else {
|
||||
webapi.player_play()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
22
web-src/src/components/PlayerButtonPrevious.vue
Normal file
22
web-src/src/components/PlayerButtonPrevious.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<a v-on:click="play_previous">
|
||||
<span class="icon"><i class="mdi mdi-skip-backward"></i></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PlayerButtonPrevious',
|
||||
|
||||
methods: {
|
||||
play_previous: function () {
|
||||
webapi.player_previous()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
44
web-src/src/components/PlayerButtonRepeat.vue
Normal file
44
web-src/src/components/PlayerButtonRepeat.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<a v-on:click="toggle_repeat_mode" v-bind:class="{ 'is-warning': !is_repeat_off }">
|
||||
<span class="icon"><i class="mdi" v-bind:class="{ 'mdi-repeat': is_repeat_all, 'mdi-repeat-once': is_repeat_single, 'mdi-repeat-off': is_repeat_off }"></i></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PlayerButtonRepeat',
|
||||
|
||||
data () {
|
||||
return { }
|
||||
},
|
||||
|
||||
computed: {
|
||||
is_repeat_all () {
|
||||
return this.$store.state.player.repeat === 'all'
|
||||
},
|
||||
is_repeat_single () {
|
||||
return this.$store.state.player.repeat === 'single'
|
||||
},
|
||||
is_repeat_off () {
|
||||
return !this.is_repeat_all && !this.is_repeat_single
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle_repeat_mode: function () {
|
||||
if (this.is_repeat_all) {
|
||||
webapi.player_repeat('single')
|
||||
} else if (this.is_repeat_single) {
|
||||
webapi.player_repeat('off')
|
||||
} else {
|
||||
webapi.player_repeat('all')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
28
web-src/src/components/PlayerButtonShuffle.vue
Normal file
28
web-src/src/components/PlayerButtonShuffle.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<a v-on:click="toggle_shuffle_mode" v-bind:class="{ 'is-warning': is_shuffle }">
|
||||
<span class="icon"><i class="mdi" v-bind:class="{ 'mdi-shuffle': is_shuffle, 'mdi-shuffle-disabled': !is_shuffle }"></i></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PlayerButtonShuffle',
|
||||
|
||||
computed: {
|
||||
is_shuffle () {
|
||||
return this.$store.state.player.shuffle
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle_shuffle_mode: function () {
|
||||
webapi.player_shuffle(!this.is_shuffle)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
105
web-src/src/components/SpotifyListItemAlbum.vue
Normal file
105
web-src/src/components/SpotifyListItemAlbum.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="open_album">
|
||||
<h1 class="title is-6">{{ album.name }}</h1>
|
||||
<h2 class="subtitle is-7 has-text-grey"><b>{{ album.artists[0].name }}</b></h2>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click="show_details">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<transition name="fade">
|
||||
<div class="modal is-active" v-if="show_details_modal">
|
||||
<div class="modal-background" @click="hide_details"></div>
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open_album">{{ album.name }}</a>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading">Album artist</span>
|
||||
<a class="title is-6 has-text-link" @click="open_artist">{{ album.artists[0].name }}</a>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Release date</span>
|
||||
<span class="title is-6">{{ album.release_date }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Type</span>
|
||||
<span class="title is-6">{{ album.album_type }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
<span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyListItemAlbum',
|
||||
|
||||
props: ['album'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.album.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
queue_add: function () {
|
||||
webapi.queue_add(this.album.uri).then(
|
||||
// this.$store.commit(types.ADD_NOTIFICATION, { text: 'Album tracks appended to queue', timeout: 0 })
|
||||
this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 3000 })
|
||||
)
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
show_details: function () {
|
||||
this.show_details_modal = true
|
||||
},
|
||||
|
||||
hide_details: function () {
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
open_album: function () {
|
||||
this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
|
||||
},
|
||||
|
||||
open_artist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
95
web-src/src/components/SpotifyListItemArtist.vue
Normal file
95
web-src/src/components/SpotifyListItemArtist.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
|
||||
<h1 class="title is-6">{{ artist.name }}</h1>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click="show_details">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<transition name="fade">
|
||||
<div class="modal is-active" v-if="show_details_modal">
|
||||
<div class="modal-background" @click="hide_details"></div>
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open_artist">{{ artist.name }}</a>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading">Popularity / Followers</span>
|
||||
<span class="title is-6">{{ artist.popularity }} / {{ artist.followers.total }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Genres</span>
|
||||
<span class="title is-6">{{ artist.genres.join(', ') }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
<span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyListItemArtist',
|
||||
|
||||
props: ['artist'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.artist.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
queue_add: function () {
|
||||
webapi.queue_add(this.artist.uri).then(() =>
|
||||
this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
|
||||
)
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
show_details: function () {
|
||||
this.show_details_modal = true
|
||||
},
|
||||
|
||||
hide_details: function () {
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
open_artist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
100
web-src/src/components/SpotifyListItemPlaylist.vue
Normal file
100
web-src/src/components/SpotifyListItemPlaylist.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="open_playlist">
|
||||
<h1 class="title is-6">{{ playlist.name }}</h1>
|
||||
<h2 class="subtitle is-7">{{ playlist.owner.display_name }}</h2>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click="show_details">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<transition name="fade">
|
||||
<div class="modal is-active" v-if="show_details_modal">
|
||||
<div class="modal-background" @click="hide_details"></div>
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open_playlist">{{ playlist.name }}</a>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading">Owner</span>
|
||||
<span class="title is-6">{{ playlist.owner.display_name }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Tracks</span>
|
||||
<span class="title is-6">{{ playlist.tracks.total }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Path</span>
|
||||
<span class="title is-6">{{ playlist.uri }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
<span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyListItemPlaylist',
|
||||
|
||||
props: ['playlist'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.playlist.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
queue_add: function () {
|
||||
webapi.queue_add(this.playlist.uri).then(() =>
|
||||
this.$store.dispatch('add_notification', { text: 'Playlist appended to queue', type: 'info', timeout: 2000 })
|
||||
)
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
show_details: function () {
|
||||
this.show_details_modal = true
|
||||
},
|
||||
|
||||
hide_details: function () {
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
open_playlist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/spotify/playlists/' + this.playlist.owner.id + '/' + this.playlist.id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
120
web-src/src/components/SpotifyListItemTrack.vue
Normal file
120
web-src/src/components/SpotifyListItemTrack.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-content fd-has-action is-clipped" v-on:click="play">
|
||||
<h1 class="title is-6">{{ track.name }}</h1>
|
||||
<h2 class="subtitle is-7 has-text-grey"><b>{{ track.artists[0].name }}</b></h2>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a @click="show_details">
|
||||
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
||||
</a>
|
||||
<transition name="fade">
|
||||
<div class="modal is-active" v-if="show_details_modal">
|
||||
<div class="modal-background" @click="hide_details"></div>
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
{{ track.name }}
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
{{ track.artists[0].name }}
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading">Album</span>
|
||||
<a class="title is-6 has-text-link" @click="open_album">{{ album.name }}</a>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Album artist</span>
|
||||
<a class="title is-6 has-text-link" @click="open_artist">{{ album.artists[0].name }}</a>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Release date</span>
|
||||
<span class="title is-6">{{ album.release_date }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Track / Disc</span>
|
||||
<span class="title is-6">{{ track.track_number }} / {{ track.disc_number }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Length</span>
|
||||
<span class="title is-6">{{ track.duration_ms | duration }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading">Path</span>
|
||||
<span class="title is-6">{{ track.uri }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
<span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
|
||||
</a>
|
||||
<a class="card-footer-item has-text-dark" @click="play">
|
||||
<span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyListItemTrack',
|
||||
|
||||
props: ['track', 'position', 'album', 'context_uri'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.context_uri).then(() =>
|
||||
webapi.player_playpos(this.position)
|
||||
)
|
||||
)
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
queue_add: function () {
|
||||
webapi.queue_add(this.track.uri).then(() =>
|
||||
this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
|
||||
)
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
show_details: function () {
|
||||
this.show_details_modal = true
|
||||
},
|
||||
|
||||
hide_details: function () {
|
||||
this.show_details_modal = false
|
||||
},
|
||||
|
||||
open_album: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
|
||||
},
|
||||
|
||||
open_artist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
53
web-src/src/components/TabsMusic.vue
Normal file
53
web-src/src/components/TabsMusic.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<section class="section fd-tabs-section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="tabs is-centered is-small">
|
||||
<ul>
|
||||
<router-link tag="li" to="/music/browse" active-class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="mdi mdi-web"></i></span>
|
||||
<span class="">Browse</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" to="/music/artists" active-class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="mdi mdi-artist"></i></span>
|
||||
<span class="">Artists</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" to="/music/albums" active-class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="mdi mdi-album"></i></span>
|
||||
<span class="">Albums</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" to="/music/spotify" v-if="spotify_enabled" active-class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="mdi mdi-spotify"></i></span>
|
||||
<span class="">Spotify</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TabsMusic',
|
||||
|
||||
computed: {
|
||||
spotify_enabled () {
|
||||
return this.$store.state.spotify.webapi_token_valid
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
41
web-src/src/components/TabsSearch.vue
Normal file
41
web-src/src/components/TabsSearch.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<section class="section fd-tabs-section" v-if="spotify_enabled">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="tabs is-centered is-small is-toggle is-toggle-rounded">
|
||||
<ul>
|
||||
<router-link tag="li" :to="{ path: '/search/library', query: $route.query }" active-class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="mdi mdi-library-books"></i></span>
|
||||
<span class="">Library</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" :to="{ path: '/search/spotify', query: $route.query }" active-class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="mdi mdi-spotify"></i></span>
|
||||
<span class="">Spotify</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TabsSearch',
|
||||
|
||||
computed: {
|
||||
spotify_enabled () {
|
||||
return this.$store.state.spotify.webapi_token_valid
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
26
web-src/src/filter/index.js
Normal file
26
web-src/src/filter/index.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import Vue from 'vue'
|
||||
import moment from 'moment'
|
||||
import momentDurationFormatSetup from 'moment-duration-format'
|
||||
|
||||
momentDurationFormatSetup(moment)
|
||||
Vue.filter('duration', function (value, format) {
|
||||
if (format) {
|
||||
return moment.duration(value).format(format)
|
||||
}
|
||||
return moment.duration(value).format('hh:*mm:ss')
|
||||
})
|
||||
|
||||
Vue.filter('time', function (value, format) {
|
||||
if (format) {
|
||||
return moment(value).format(format)
|
||||
}
|
||||
return moment(value).format()
|
||||
})
|
||||
|
||||
Vue.filter('timeFromNow', function (value, withoutSuffix) {
|
||||
return moment(value).fromNow(withoutSuffix)
|
||||
})
|
||||
|
||||
Vue.filter('number', function (value) {
|
||||
return value.toLocaleString()
|
||||
})
|
||||
23
web-src/src/main.js
Normal file
23
web-src/src/main.js
Normal file
@@ -0,0 +1,23 @@
|
||||
// The Vue build version to load with the `import` command
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import { router } from './router'
|
||||
import store from './store'
|
||||
import './filter'
|
||||
import './progress'
|
||||
import 'bulma/css/bulma.css'
|
||||
import 'mdi/css/materialdesignicons.css'
|
||||
import 'vue-range-slider/dist/vue-range-slider.css'
|
||||
import './mystyles.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
101
web-src/src/mystyles.css
Normal file
101
web-src/src/mystyles.css
Normal file
@@ -0,0 +1,101 @@
|
||||
|
||||
.slider {
|
||||
min-width: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
.range-slider-fill {
|
||||
background-color: hsl(0, 0%, 21%);
|
||||
}
|
||||
|
||||
a.navbar-item {
|
||||
outline: 0;
|
||||
line-height: 1.5;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.fd-expanded {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.fd-margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fd-has-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fd-is-movable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.fd-is-text-clipped {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fd-tabs-section {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.fd-progress-bar {
|
||||
top: 52px !important;
|
||||
}
|
||||
|
||||
.sortable-chosen .media-right {
|
||||
visibility: hidden;
|
||||
}
|
||||
.sortable-ghost h1, .sortable-ghost h2 {
|
||||
color: hsl(348, 100%, 61%) !important;
|
||||
}
|
||||
|
||||
.media:first-of-type {
|
||||
padding-top: 17px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Transition effect */
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .4s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Now playing progress bar */
|
||||
.fd-progress-now-playing {
|
||||
}
|
||||
.seek-slider {
|
||||
min-width: 250px;
|
||||
max-width: 500px;
|
||||
width: 100% !important;
|
||||
}
|
||||
.seek-slider .range-slider-fill {
|
||||
background-color: hsl(171, 100%, 41%);
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
.seek-slider .range-slider-knob {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: hsl(171, 100%, 41%);
|
||||
border-color: hsl(171, 100%, 41%);
|
||||
}
|
||||
|
||||
/* Add a little bit of spacing between title and subtitle */
|
||||
.title:not(.is-spaced) + .subtitle {
|
||||
margin-top: -1.3rem !important;
|
||||
}
|
||||
.title:not(.is-spaced) + .subtitle + .subtitle {
|
||||
margin-top: -1.3rem !important;
|
||||
}
|
||||
|
||||
/* Only scroll content if modal contains a card component */
|
||||
.fd-modal-card {
|
||||
overflow: visible;
|
||||
}
|
||||
.fd-modal-card .card-content {
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow: auto;
|
||||
}
|
||||
116
web-src/src/pages/PageAbout.vue
Normal file
116
web-src/src/pages/PageAbout.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths has-text-centered-mobile">
|
||||
<p class="heading"><b>forked-daapd</b> - version {{ config.version }}</p>
|
||||
<h1 class="title is-4">{{ config.library_name }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="content">
|
||||
<nav class="level is-mobile">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<h2 class="title is-5">Library</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="level-right">
|
||||
<a class="button is-small is-outlined is-link" :class="{ 'is-loading': library.updating }" @click="update">Update</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Artists</th>
|
||||
<td class="has-text-right">{{ library.artists | number }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Albums</th>
|
||||
<td class="has-text-right">{{ library.albums | number }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Tracks</th>
|
||||
<td class="has-text-right">{{ library.songs | number }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total playtime</th>
|
||||
<td class="has-text-right">{{ library.db_playtime * 1000 | duration('y [years], d [days], h [hours], m [minutes]') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Library updated</th>
|
||||
<td class="has-text-right">{{ library.updated_at | timeFromNow }} <span class="has-text-grey">({{ library.updated_at | time('MMM Do, h:mm') }})</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Uptime</th>
|
||||
<td class="has-text-right">{{ library.started_at | timeFromNow(true) }} <span class="has-text-grey">({{ library.started_at | time('MMM Do, h:mm') }})</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="content has-text-centered-mobile">
|
||||
<p class="is-size-7">Compiled with support for {{ config.buildoptions | join }}.</p>
|
||||
<p class="is-size-7"><a href="https://github.com/chme/forked-daapd-web">Web interface</a> v{{ version }} built with <a href="http://bulma.io">Bulma</a>, <a href="https://materialdesignicons.com/">Material Design Icons</a>, <a href="https://vuejs.org/">Vue.js</a>, <a href="https://github.com/mzabriskie/axios">axios</a> and <a href="https://github.com/chme/forked-daapd-web/network/dependencies">more</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'PageAbout',
|
||||
|
||||
data () {
|
||||
return {
|
||||
'version': process.env.V2
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
config () {
|
||||
return this.$store.state.config
|
||||
},
|
||||
library () {
|
||||
return this.$store.state.library
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
update: function () {
|
||||
webapi.library_update()
|
||||
}
|
||||
},
|
||||
|
||||
filters: {
|
||||
join: function (array) {
|
||||
return array.join(', ')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
72
web-src/src/pages/PageAlbum.vue
Normal file
72
web-src/src/pages/PageAlbum.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<div class="title is-4">{{ album.name }}</div>
|
||||
<a class="title is-4 has-text-link has-text-weight-normal" @click="open_artist">{{ album.artist }}</a>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-play"></i>
|
||||
</span>
|
||||
<span>Play</span>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
|
||||
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri"></list-item-track>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import ListItemTrack from '@/components/ListItemTrack'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const albumData = {
|
||||
load: function (to) {
|
||||
return Promise.all([
|
||||
webapi.library_album(to.params.album_id),
|
||||
webapi.library_album_tracks(to.params.album_id)
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.album = response[0].data
|
||||
vm.tracks = response[1].data.items
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageAlbum',
|
||||
mixins: [ LoadDataBeforeEnterMixin(albumData) ],
|
||||
components: { ContentWithHeading, ListItemTrack },
|
||||
|
||||
data () {
|
||||
return {
|
||||
album: {},
|
||||
tracks: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open_artist: function () {
|
||||
this.show_details_modal = false
|
||||
this.$router.push({ path: '/music/artists/' + this.album.artist_id })
|
||||
},
|
||||
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.album.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
69
web-src/src/pages/PageAlbums.vue
Normal file
69
web-src/src/pages/PageAlbums.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<tabs-music></tabs-music>
|
||||
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Albums</p>
|
||||
<p class="heading">{{ albums.total }} albums</p>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-numeric-1-box-multiple-outline"></i>
|
||||
</span>
|
||||
<span>Hide singles</span>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-album v-for="album in albums.items" :key="album.id" :album="album" v-if="!hide_singles || album.track_count > 2"></list-item-album>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import ListItemAlbum from '@/components/ListItemAlbum'
|
||||
import webapi from '@/webapi'
|
||||
import * as types from '@/store/mutation_types'
|
||||
|
||||
const albumsData = {
|
||||
load: function (to) {
|
||||
return webapi.library_albums()
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.albums = response.data
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageAlbums',
|
||||
mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
|
||||
components: { ContentWithHeading, TabsMusic, ListItemAlbum },
|
||||
|
||||
data () {
|
||||
return {
|
||||
albums: {}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hide_singles () {
|
||||
return this.$store.state.hide_singles
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
update_hide_singles: function (e) {
|
||||
this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
51
web-src/src/pages/PageArtist.vue
Normal file
51
web-src/src/pages/PageArtist.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">{{ artist.name }}</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<p class="heading has-text-centered-mobile">{{ artist.album_count }} albums | {{ artist.track_count }} tracks</p>
|
||||
<list-item-album v-for="album in albums.items" :key="album.id" :album="album"></list-item-album>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import ListItemAlbum from '@/components/ListItemAlbum'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const artistData = {
|
||||
load: function (to) {
|
||||
return Promise.all([
|
||||
webapi.library_artist(to.params.artist_id),
|
||||
webapi.library_albums(to.params.artist_id)
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.artist = response[0].data
|
||||
vm.albums = response[1].data
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageArtist',
|
||||
mixins: [ LoadDataBeforeEnterMixin(artistData) ],
|
||||
components: { ContentWithHeading, ListItemAlbum },
|
||||
|
||||
data () {
|
||||
return {
|
||||
artist: {},
|
||||
albums: {}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
69
web-src/src/pages/PageArtists.vue
Normal file
69
web-src/src/pages/PageArtists.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<tabs-music></tabs-music>
|
||||
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Artists</p>
|
||||
<p class="heading">{{ artists.total }} artists</p>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-numeric-1-box-multiple-outline"></i>
|
||||
</span>
|
||||
<span>Hide singles</span>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist" v-if="!hide_singles || artist.track_count > (artist.album_count * 2)"></list-item-artist>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import ListItemArtist from '@/components/ListItemArtist'
|
||||
import webapi from '@/webapi'
|
||||
import * as types from '@/store/mutation_types'
|
||||
|
||||
const artistsData = {
|
||||
load: function (to) {
|
||||
return webapi.library_artists()
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.artists = response.data
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageArtists',
|
||||
mixins: [ LoadDataBeforeEnterMixin(artistsData) ],
|
||||
components: { ContentWithHeading, TabsMusic, ListItemArtist },
|
||||
|
||||
data () {
|
||||
return {
|
||||
artists: {}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hide_singles () {
|
||||
return this.$store.state.hide_singles
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
update_hide_singles: function (e) {
|
||||
this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
67
web-src/src/pages/PageAudiobook.vue
Normal file
67
web-src/src/pages/PageAudiobook.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<div class="title is-4">{{ album.name }}</div>
|
||||
<div class="title is-4 has-text-grey has-text-weight-normal">{{ album.artist }}</div>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-play"></i>
|
||||
</span>
|
||||
<span>Play</span>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
|
||||
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri"></list-item-track>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import ListItemTrack from '@/components/ListItemTrack'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const albumData = {
|
||||
load: function (to) {
|
||||
return Promise.all([
|
||||
webapi.library_album(to.params.album_id),
|
||||
webapi.library_album_tracks(to.params.album_id)
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.album = response[0].data
|
||||
vm.tracks = response[1].data.items
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageAudiobook',
|
||||
mixins: [ LoadDataBeforeEnterMixin(albumData) ],
|
||||
components: { ContentWithHeading, ListItemTrack },
|
||||
|
||||
data () {
|
||||
return {
|
||||
album: {},
|
||||
tracks: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.album.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
45
web-src/src/pages/PageAudiobooks.vue
Normal file
45
web-src/src/pages/PageAudiobooks.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Audiobooks</p>
|
||||
<p class="heading">{{ albums.total }} audiobooks</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-album v-for="album in albums.items" :key="album.id" :album="album" :media_kind="'audiobook'"></list-item-album>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import ListItemAlbum from '@/components/ListItemAlbum'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const albumsData = {
|
||||
load: function (to) {
|
||||
return webapi.library_audiobooks()
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.albums = response.data
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageAudiobooks',
|
||||
mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
|
||||
components: { ContentWithHeading, ListItemAlbum },
|
||||
|
||||
data () {
|
||||
return {
|
||||
albums: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
86
web-src/src/pages/PageBrowse.vue
Normal file
86
web-src/src/pages/PageBrowse.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<tabs-music></tabs-music>
|
||||
|
||||
<!-- Recently added -->
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Recently added</p>
|
||||
<p class="heading">albums</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-album v-for="album in recently_added.items" :key="album.id" :album="album"></list-item-album>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_browse('recently_added')">Show more</a>
|
||||
</p>
|
||||
</nav>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
|
||||
<!-- Recently played -->
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Recently played</p>
|
||||
<p class="heading">tracks</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri"></list-item-track>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_browse('recently_played')">Show more</a>
|
||||
</p>
|
||||
</nav>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import ListItemAlbum from '@/components/ListItemAlbum'
|
||||
import ListItemTrack from '@/components/ListItemTrack'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const browseData = {
|
||||
load: function (to) {
|
||||
return Promise.all([
|
||||
webapi.search({ type: 'album', expression: 'time_added after 8 weeks ago having track_count > 3 order by time_added desc', limit: 3 }),
|
||||
webapi.search({ type: 'track', expression: 'time_played after 8 weeks ago order by time_played desc', limit: 3 })
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.recently_added = response[0].data.albums
|
||||
vm.recently_played = response[1].data.tracks
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageBrowse',
|
||||
mixins: [ LoadDataBeforeEnterMixin(browseData) ],
|
||||
components: { ContentWithHeading, TabsMusic, ListItemAlbum, ListItemTrack },
|
||||
|
||||
data () {
|
||||
return {
|
||||
recently_added: {},
|
||||
recently_played: {}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open_browse: function (type) {
|
||||
this.$router.push({ path: '/music/browse/' + type })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
52
web-src/src/pages/PageBrowseRecentlyAdded.vue
Normal file
52
web-src/src/pages/PageBrowseRecentlyAdded.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
<tabs-music></tabs-music>
|
||||
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Recently added</p>
|
||||
<p class="heading">albums</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-album v-for="album in recently_added.items" :key="album.id" :album="album"></list-item-album>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import ListItemAlbum from '@/components/ListItemAlbum'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const browseData = {
|
||||
load: function (to) {
|
||||
return webapi.search({
|
||||
type: 'album',
|
||||
expression: 'time_added after 8 weeks ago having track_count > 3 order by time_added desc',
|
||||
limit: 50
|
||||
})
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.recently_added = response.data.albums
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageBrowseType',
|
||||
mixins: [ LoadDataBeforeEnterMixin(browseData) ],
|
||||
components: { ContentWithHeading, TabsMusic, ListItemAlbum },
|
||||
|
||||
data () {
|
||||
return {
|
||||
recently_added: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
52
web-src/src/pages/PageBrowseRecentlyPlayed.vue
Normal file
52
web-src/src/pages/PageBrowseRecentlyPlayed.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
<tabs-music></tabs-music>
|
||||
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Recently played</p>
|
||||
<p class="heading">tracks</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri"></list-item-track>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import ListItemTrack from '@/components/ListItemTrack'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const browseData = {
|
||||
load: function (to) {
|
||||
return webapi.search({
|
||||
type: 'track',
|
||||
expression: 'time_played after 8 weeks ago order by time_played desc',
|
||||
limit: 50
|
||||
})
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.recently_played = response.data.tracks
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageBrowseType',
|
||||
mixins: [ LoadDataBeforeEnterMixin(browseData) ],
|
||||
components: { ContentWithHeading, TabsMusic, ListItemTrack },
|
||||
|
||||
data () {
|
||||
return {
|
||||
recently_played: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
118
web-src/src/pages/PageNowPlaying.vue
Normal file
118
web-src/src/pages/PageNowPlaying.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="heading">NOW PLAYING</p>
|
||||
<h1 class="title is-3">
|
||||
{{ now_playing.title }}
|
||||
</h1>
|
||||
<h2 class="title is-5">
|
||||
{{ now_playing.artist }}
|
||||
</h2>
|
||||
<h3 class="subtitle is-5">
|
||||
{{ now_playing.album }}
|
||||
</h3>
|
||||
<p class="control has-text-centered fd-progress-now-playing">
|
||||
<range-slider
|
||||
class="seek-slider fd-has-action"
|
||||
min="0"
|
||||
:max="state.item_length_ms"
|
||||
:value="item_progress_ms"
|
||||
:disabled="state.state === 'stop'"
|
||||
step="1000"
|
||||
@change="seek" >
|
||||
</range-slider>
|
||||
</p>
|
||||
<p class="content">
|
||||
<span>{{ item_progress_ms | duration }} / {{ now_playing.length_ms | duration }}</span>
|
||||
</p>
|
||||
<p class="control has-text-centered">
|
||||
<player-button-previous class="button is-medium"></player-button-previous>
|
||||
<player-button-play-pause class="button is-medium" icon_style="mdi-36px"></player-button-play-pause>
|
||||
<player-button-next class="button is-medium"></player-button-next>
|
||||
<player-button-repeat class="button is-medium is-light"></player-button-repeat>
|
||||
<player-button-shuffle class="button is-medium is-light"></player-button-shuffle>
|
||||
<player-button-consume class="button is-medium is-light"></player-button-consume>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause'
|
||||
import PlayerButtonNext from '@/components/PlayerButtonNext'
|
||||
import PlayerButtonPrevious from '@/components/PlayerButtonPrevious'
|
||||
import PlayerButtonShuffle from '@/components/PlayerButtonShuffle'
|
||||
import PlayerButtonConsume from '@/components/PlayerButtonConsume'
|
||||
import PlayerButtonRepeat from '@/components/PlayerButtonRepeat'
|
||||
import RangeSlider from 'vue-range-slider'
|
||||
import webapi from '@/webapi'
|
||||
import * as types from '@/store/mutation_types'
|
||||
|
||||
export default {
|
||||
name: 'PageNowPlaying',
|
||||
components: { PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
|
||||
|
||||
data () {
|
||||
return {
|
||||
item_progress_ms: 0,
|
||||
interval_id: 0
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.item_progress_ms = this.state.item_progress_ms
|
||||
webapi.player_status().then(({ data }) => {
|
||||
this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
|
||||
if (this.state.state === 'play') {
|
||||
this.interval_id = window.setInterval(this.tick, 1000)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
if (this.interval_id > 0) {
|
||||
window.clearTimeout(this.interval_id)
|
||||
this.interval_id = 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
state () {
|
||||
return this.$store.state.player
|
||||
},
|
||||
now_playing () {
|
||||
return this.$store.getters.now_playing
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
tick: function () {
|
||||
this.item_progress_ms += 1000
|
||||
},
|
||||
|
||||
seek: function (newPosition) {
|
||||
webapi.player_seek(newPosition).catch(() => {
|
||||
this.item_progress_ms = this.state.item_progress_ms
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'state' () {
|
||||
if (this.interval_id > 0) {
|
||||
window.clearTimeout(this.interval_id)
|
||||
this.interval_id = 0
|
||||
}
|
||||
this.item_progress_ms = this.state.item_progress_ms
|
||||
if (this.state.state === 'play') {
|
||||
this.interval_id = window.setInterval(this.tick, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
66
web-src/src/pages/PagePlaylist.vue
Normal file
66
web-src/src/pages/PagePlaylist.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<div class="title is-4">{{ playlist.name }}</div>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-play"></i>
|
||||
</span>
|
||||
<span>Play</span>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<p class="heading has-text-centered-mobile">{{ tracks.length }} tracks</p>
|
||||
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="playlist.uri"></list-item-track>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import ListItemTrack from '@/components/ListItemTrack'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const playlistData = {
|
||||
load: function (to) {
|
||||
return Promise.all([
|
||||
webapi.library_playlist(to.params.playlist_id),
|
||||
webapi.library_playlist_tracks(to.params.playlist_id)
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.playlist = response[0].data
|
||||
vm.tracks = response[1].data.items
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PagePlaylist',
|
||||
mixins: [ LoadDataBeforeEnterMixin(playlistData) ],
|
||||
components: { ContentWithHeading, ListItemTrack },
|
||||
|
||||
data () {
|
||||
return {
|
||||
playlist: {},
|
||||
tracks: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.playlist.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
44
web-src/src/pages/PagePlaylists.vue
Normal file
44
web-src/src/pages/PagePlaylists.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Playlists</p>
|
||||
<p class="heading">{{ playlists.total }} playlists</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist"></list-item-playlist>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import ListItemPlaylist from '@/components/ListItemPlaylist'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const playlistsData = {
|
||||
load: function (to) {
|
||||
return webapi.library_playlists()
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.playlists = response.data
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PagePlaylists',
|
||||
mixins: [ LoadDataBeforeEnterMixin(playlistsData) ],
|
||||
components: { ContentWithHeading, TabsMusic, ListItemPlaylist },
|
||||
|
||||
data () {
|
||||
return {
|
||||
playlists: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
66
web-src/src/pages/PagePodcast.vue
Normal file
66
web-src/src/pages/PagePodcast.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<div class="title is-4">{{ album.name }}</div>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-play"></i>
|
||||
</span>
|
||||
<span>Play</span>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
|
||||
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri"></list-item-track>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import ListItemTrack from '@/components/ListItemTrack'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const albumData = {
|
||||
load: function (to) {
|
||||
return Promise.all([
|
||||
webapi.library_album(to.params.album_id),
|
||||
webapi.library_album_tracks(to.params.album_id)
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.album = response[0].data
|
||||
vm.tracks = response[1].data.items
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PagePodcast',
|
||||
mixins: [ LoadDataBeforeEnterMixin(albumData) ],
|
||||
components: { ContentWithHeading, ListItemTrack },
|
||||
|
||||
data () {
|
||||
return {
|
||||
album: {},
|
||||
tracks: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.album.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
45
web-src/src/pages/PagePodcasts.vue
Normal file
45
web-src/src/pages/PagePodcasts.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Podcasts</p>
|
||||
<p class="heading">{{ albums.total }} podcasts</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-album v-for="album in albums.items" :key="album.id" :album="album" :media_kind="'podcast'"></list-item-album>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import ListItemAlbum from '@/components/ListItemAlbum'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
const albumsData = {
|
||||
load: function (to) {
|
||||
return webapi.library_podcasts()
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.albums = response.data
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PagePodcasts',
|
||||
mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
|
||||
components: { ContentWithHeading, ListItemAlbum },
|
||||
|
||||
data () {
|
||||
return {
|
||||
albums: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
108
web-src/src/pages/PageQueue.vue
Normal file
108
web-src/src/pages/PageQueue.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="heading">{{ queue.count }} tracks</p>
|
||||
<p class="title is-4">Queue</p>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<div class="buttons is-centered">
|
||||
<a class="button is-small" :class="{ 'is-info': show_only_next_items }" @click="update_show_next_items">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-arrow-collapse-down"></i>
|
||||
</span>
|
||||
<span>Hide previous</span>
|
||||
</a>
|
||||
<!--
|
||||
<a class="button" :class="{ 'is-info': edit_mode }" @click="edit_mode = !edit_mode">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-content-save"></i>
|
||||
</span>
|
||||
<span>Save</span>
|
||||
</a>
|
||||
-->
|
||||
<a class="button is-small" :class="{ 'is-info': edit_mode }" @click="edit_mode = !edit_mode">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-pencil"></i>
|
||||
</span>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
<a class="button is-small" @click="queue_clear">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-delete-empty"></i>
|
||||
</span>
|
||||
<span>Clear</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<draggable v-model="queue_items" :options="{handle:'.handle'}" @end="move_item">
|
||||
<list-item-queue-item v-for="(item, index) in queue_items"
|
||||
:key="item.id" :item="item" :position="index"
|
||||
:current_position="current_position"
|
||||
:show_only_next_items="show_only_next_items"
|
||||
:edit_mode="edit_mode"></list-item-queue-item>
|
||||
</draggable>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import ListItemQueueItem from '@/components/ListItemQueueItem'
|
||||
import webapi from '@/webapi'
|
||||
import * as types from '@/store/mutation_types'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'PageQueue',
|
||||
components: { ContentWithHeading, ListItemQueueItem, draggable },
|
||||
|
||||
data () {
|
||||
return {
|
||||
edit_mode: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
state () {
|
||||
return this.$store.state.player
|
||||
},
|
||||
queue () {
|
||||
return this.$store.state.queue
|
||||
},
|
||||
queue_items: {
|
||||
get () { return this.$store.state.queue.items },
|
||||
set (value) { /* Do nothing? Send move request in @end event */ }
|
||||
},
|
||||
current_position () {
|
||||
const nowPlaying = this.$store.getters.now_playing
|
||||
return nowPlaying === undefined || nowPlaying.position === undefined ? -1 : this.$store.getters.now_playing.position
|
||||
},
|
||||
show_only_next_items () {
|
||||
return this.$store.state.show_only_next_items
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
queue_clear: function () {
|
||||
webapi.queue_clear()
|
||||
},
|
||||
|
||||
update_show_next_items: function (e) {
|
||||
this.$store.commit(types.SHOW_ONLY_NEXT_ITEMS, !this.show_only_next_items)
|
||||
},
|
||||
|
||||
move_item: function (e) {
|
||||
var oldPosition = !this.show_only_next_items ? e.oldIndex : e.oldIndex + this.current_position
|
||||
var item = this.queue_items[oldPosition]
|
||||
var newPosition = item.position + (e.newIndex - e.oldIndex)
|
||||
if (newPosition !== oldPosition) {
|
||||
webapi.queue_move(item.id, newPosition)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
260
web-src/src/pages/PageSearch.vue
Normal file
260
web-src/src/pages/PageSearch.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Search field + recent searches -->
|
||||
<section class="section fd-tabs-section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<form v-on:submit.prevent="new_search">
|
||||
<div class="field">
|
||||
<p class="control is-expanded has-icons-left">
|
||||
<input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field">
|
||||
<span class="icon is-left">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
<div class="tags" style="margin-top: 16px;">
|
||||
<a class="tag" v-for="recent_search in recent_searches" :key="recent_search" @click="open_recent_search(recent_search)">{{ recent_search }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<tabs-search></tabs-search>
|
||||
|
||||
<!-- Tracks -->
|
||||
<content-with-heading v-if="show_tracks">
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Tracks</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-track v-for="track in tracks.items" :key="track.id" :track="track" :position="0" :context_uri="track.uri"></list-item-track>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav v-if="show_all_tracks_button" class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_search_tracks">Show all {{ tracks.total }} tracks</a>
|
||||
</p>
|
||||
</nav>
|
||||
<p v-if="!tracks.total">No results</p>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
|
||||
<!-- Artists -->
|
||||
<content-with-heading v-if="show_artists">
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Artists</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist"></list-item-artist>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav v-if="show_all_artists_button" class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_search_artists">Show all {{ artists.total }} artists</a>
|
||||
</p>
|
||||
</nav>
|
||||
<p v-if="!artists.total">No results</p>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
|
||||
<!-- Albums -->
|
||||
<content-with-heading v-if="show_albums">
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Albums</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-album v-for="album in albums.items" :key="album.id" :album="album"></list-item-album>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav v-if="show_all_albums_button" class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_search_albums">Show all {{ albums.total }} albums</a>
|
||||
</p>
|
||||
</nav>
|
||||
<p v-if="!albums.total">No results</p>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
|
||||
<!-- Playlists -->
|
||||
<content-with-heading v-if="show_playlists">
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Playlists</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist"></list-item-playlist>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav v-if="show_all_playlists_button" class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_search_playlists">Show all {{ playlists.total }} playlists</a>
|
||||
</p>
|
||||
</nav>
|
||||
<p v-if="!playlists.total">No results</p>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsSearch from '@/components/TabsSearch'
|
||||
import ListItemTrack from '@/components/ListItemTrack'
|
||||
import ListItemArtist from '@/components/ListItemArtist'
|
||||
import ListItemAlbum from '@/components/ListItemAlbum'
|
||||
import ListItemPlaylist from '@/components/ListItemPlaylist'
|
||||
import webapi from '@/webapi'
|
||||
import * as types from '@/store/mutation_types'
|
||||
|
||||
export default {
|
||||
name: 'PageSearch',
|
||||
components: { ContentWithHeading, TabsSearch, ListItemTrack, ListItemArtist, ListItemAlbum, ListItemPlaylist },
|
||||
|
||||
data () {
|
||||
return {
|
||||
search_query: '',
|
||||
tracks: { items: [], total: 0 },
|
||||
artists: { items: [], total: 0 },
|
||||
albums: { items: [], total: 0 },
|
||||
playlists: { items: [], total: 0 }
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
recent_searches () {
|
||||
return this.$store.state.recent_searches
|
||||
},
|
||||
|
||||
show_tracks () {
|
||||
return this.$route.query.type && this.$route.query.type.includes('track')
|
||||
},
|
||||
show_all_tracks_button () {
|
||||
return this.tracks.total > this.tracks.items.length
|
||||
},
|
||||
|
||||
show_artists () {
|
||||
return this.$route.query.type && this.$route.query.type.includes('artist')
|
||||
},
|
||||
show_all_artists_button () {
|
||||
return this.artists.total > this.artists.items.length
|
||||
},
|
||||
|
||||
show_albums () {
|
||||
return this.$route.query.type && this.$route.query.type.includes('album')
|
||||
},
|
||||
show_all_albums_button () {
|
||||
return this.albums.total > this.albums.items.length
|
||||
},
|
||||
|
||||
show_playlists () {
|
||||
return this.$route.query.type && this.$route.query.type.includes('playlist')
|
||||
},
|
||||
show_all_playlists_button () {
|
||||
return this.playlists.total > this.playlists.items.length
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
search: function (route) {
|
||||
if (!route.query.query || route.query.query === '') {
|
||||
this.search_query = ''
|
||||
this.$refs.search_field.focus()
|
||||
return
|
||||
}
|
||||
|
||||
var searchParams = {
|
||||
'type': route.query.type,
|
||||
'query': route.query.query,
|
||||
'media_kind': 'music'
|
||||
}
|
||||
|
||||
if (route.query.limit) {
|
||||
searchParams.limit = route.query.limit
|
||||
searchParams.offset = route.query.offset
|
||||
}
|
||||
|
||||
webapi.search(searchParams).then(({ data }) => {
|
||||
this.tracks = data.tracks ? data.tracks : { items: [], total: 0 }
|
||||
this.artists = data.artists ? data.artists : { items: [], total: 0 }
|
||||
this.albums = data.albums ? data.albums : { items: [], total: 0 }
|
||||
this.playlists = data.playlists ? data.playlists : { items: [], total: 0 }
|
||||
|
||||
this.$store.commit(types.ADD_RECENT_SEARCH, searchParams.query)
|
||||
})
|
||||
},
|
||||
|
||||
new_search: function () {
|
||||
if (!this.search_query) {
|
||||
return
|
||||
}
|
||||
|
||||
this.$router.push({ path: '/search/library',
|
||||
query: {
|
||||
type: 'track,artist,album,playlist',
|
||||
query: this.search_query,
|
||||
limit: 3,
|
||||
offset: 0
|
||||
}
|
||||
})
|
||||
this.$refs.search_field.blur()
|
||||
},
|
||||
|
||||
open_search_tracks: function () {
|
||||
this.$router.push({ path: '/search/library',
|
||||
query: {
|
||||
type: 'track',
|
||||
query: this.$route.query.query
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
open_search_artists: function () {
|
||||
this.$router.push({ path: '/search/library',
|
||||
query: {
|
||||
type: 'artist',
|
||||
query: this.$route.query.query
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
open_search_albums: function () {
|
||||
this.$router.push({ path: '/search/library',
|
||||
query: {
|
||||
type: 'album',
|
||||
query: this.$route.query.query
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
open_search_playlists: function () {
|
||||
this.$router.push({ path: '/search/library',
|
||||
query: {
|
||||
type: 'playlist',
|
||||
query: this.$route.query.query
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
open_recent_search: function (query) {
|
||||
this.search_query = query
|
||||
this.new_search()
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.search(this.$route)
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
this.search(to)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
71
web-src/src/pages/SpotifyPageAlbum.vue
Normal file
71
web-src/src/pages/SpotifyPageAlbum.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<div class="title is-4">{{ album.name }}</div>
|
||||
<a class="title is-4 has-text-link has-text-weight-normal" @click="open_artist">{{ album.artists[0].name }}</a>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-play"></i>
|
||||
</span>
|
||||
<span>Play</span>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<p class="heading has-text-centered-mobile">{{ album.tracks.total }} tracks</p>
|
||||
<spotify-list-item-track v-for="(track, index) in album.tracks.items" :key="track.id" :track="track" :position="index" :album="album" :context_uri="album.uri"></spotify-list-item-track>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
|
||||
import store from '@/store'
|
||||
import webapi from '@/webapi'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
|
||||
const albumData = {
|
||||
load: function (to) {
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
|
||||
return spotifyApi.getAlbum(to.params.album_id)
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.album = response
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PageAlbum',
|
||||
mixins: [ LoadDataBeforeEnterMixin(albumData) ],
|
||||
components: { ContentWithHeading, SpotifyListItemTrack },
|
||||
|
||||
data () {
|
||||
return {
|
||||
album: {}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open_artist: function () {
|
||||
this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
|
||||
},
|
||||
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.album.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
this.show_details_modal = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
82
web-src/src/pages/SpotifyPageArtist.vue
Normal file
82
web-src/src/pages/SpotifyPageArtist.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">{{ artist.name }}</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<p class="heading has-text-centered-mobile">{{ total }} albums</p>
|
||||
<spotify-list-item-album v-for="album in albums" :key="album.id" :album="album"></spotify-list-item-album>
|
||||
<infinite-loading v-if="offset < total" @infinite="load_next"><span slot="no-more">.</span></infinite-loading>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
|
||||
import store from '@/store'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import InfiniteLoading from 'vue-infinite-loading'
|
||||
|
||||
const artistData = {
|
||||
load: function (to) {
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
|
||||
return Promise.all([
|
||||
spotifyApi.getArtist(to.params.artist_id),
|
||||
spotifyApi.getArtistAlbums(to.params.artist_id, { limit: 50, offset: 0, include_groups: 'album,single' })
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.artist = response[0]
|
||||
|
||||
vm.albums = []
|
||||
vm.total = 0
|
||||
vm.offset = 0
|
||||
vm.append_albums(response[1])
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'SpotifyPageArtist',
|
||||
mixins: [ LoadDataBeforeEnterMixin(artistData) ],
|
||||
components: { ContentWithHeading, SpotifyListItemAlbum, InfiniteLoading },
|
||||
|
||||
data () {
|
||||
return {
|
||||
artist: {},
|
||||
albums: [],
|
||||
total: 0,
|
||||
offset: 0
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
load_next: function ($state) {
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
|
||||
spotifyApi.getArtistAlbums(this.artist.id, { limit: 50, offset: this.offset, include_groups: 'album,single' }).then(data => {
|
||||
this.append_albums(data, $state)
|
||||
})
|
||||
},
|
||||
|
||||
append_albums: function (data, $state) {
|
||||
this.albums = this.albums.concat(data.items)
|
||||
this.total = data.total
|
||||
this.offset += data.limit
|
||||
|
||||
if ($state) {
|
||||
$state.loaded()
|
||||
if (this.offset >= this.total) {
|
||||
$state.complete()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
95
web-src/src/pages/SpotifyPageBrowse.vue
Normal file
95
web-src/src/pages/SpotifyPageBrowse.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<tabs-music></tabs-music>
|
||||
|
||||
<!-- New Releases -->
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">New Releases</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album"></spotify-list-item-album>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav class="level">
|
||||
<p class="level-item">
|
||||
<router-link to="/music/spotify/new-releases" class="button is-light is-small is-rounded">
|
||||
Show more
|
||||
</router-link>
|
||||
</p>
|
||||
</nav>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
|
||||
<!-- Featured Playlists -->
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Featured Playlists</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav class="level">
|
||||
<p class="level-item">
|
||||
<router-link to="/music/spotify/featured-playlists" class="button is-light is-small is-rounded">
|
||||
Show more
|
||||
</router-link>
|
||||
</p>
|
||||
</nav>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
|
||||
import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
|
||||
import store from '@/store'
|
||||
import * as types from '@/store/mutation_types'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
|
||||
const browseData = {
|
||||
load: function (to) {
|
||||
if (store.state.spotify_new_releases.length > 0 && store.state.spotify_featured_playlists.length > 0) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
|
||||
return Promise.all([
|
||||
spotifyApi.getNewReleases({ country: store.state.spotify.webapi_country, limit: 50 }),
|
||||
spotifyApi.getFeaturedPlaylists({ country: store.state.spotify.webapi_country, limit: 50 })
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
if (response) {
|
||||
store.commit(types.SPOTIFY_NEW_RELEASES, response[0].albums.items)
|
||||
store.commit(types.SPOTIFY_FEATURED_PLAYLISTS, response[1].playlists.items)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'SpotifyPageBrowse',
|
||||
mixins: [ LoadDataBeforeEnterMixin(browseData) ],
|
||||
components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyListItemPlaylist },
|
||||
|
||||
computed: {
|
||||
new_releases () {
|
||||
return this.$store.state.spotify_new_releases.slice(0, 3)
|
||||
},
|
||||
|
||||
featured_playlists () {
|
||||
return this.$store.state.spotify_featured_playlists.slice(0, 3)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
57
web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
Normal file
57
web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<tabs-music></tabs-music>
|
||||
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Featured Playlists</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
|
||||
import store from '@/store'
|
||||
import * as types from '@/store/mutation_types'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
|
||||
const browseData = {
|
||||
load: function (to) {
|
||||
if (store.state.spotify_featured_playlists.length > 0) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
|
||||
spotifyApi.getFeaturedPlaylists({ country: store.state.spotify.webapi_country, limit: 50 })
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
if (response) {
|
||||
store.commit(types.SPOTIFY_FEATURED_PLAYLISTS, response.playlists.items)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'SpotifyPageBrowseFeaturedPlaylists',
|
||||
mixins: [ LoadDataBeforeEnterMixin(browseData) ],
|
||||
components: { ContentWithHeading, TabsMusic, SpotifyListItemPlaylist },
|
||||
|
||||
computed: {
|
||||
featured_playlists () {
|
||||
return this.$store.state.spotify_featured_playlists
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
57
web-src/src/pages/SpotifyPageBrowseNewReleases.vue
Normal file
57
web-src/src/pages/SpotifyPageBrowseNewReleases.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<tabs-music></tabs-music>
|
||||
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">New Releases</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album"></spotify-list-item-album>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsMusic from '@/components/TabsMusic'
|
||||
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
|
||||
import store from '@/store'
|
||||
import * as types from '@/store/mutation_types'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
|
||||
const browseData = {
|
||||
load: function (to) {
|
||||
if (store.state.spotify_new_releases.length > 0) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
|
||||
return spotifyApi.getNewReleases({ country: store.state.spotify.webapi_country, limit: 50 })
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
if (response) {
|
||||
store.commit(types.SPOTIFY_NEW_RELEASES, response.albums.items)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'SpotifyPageBrowseNewReleases',
|
||||
mixins: [ LoadDataBeforeEnterMixin(browseData) ],
|
||||
components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum },
|
||||
|
||||
computed: {
|
||||
new_releases () {
|
||||
return this.$store.state.spotify_new_releases
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
99
web-src/src/pages/SpotifyPagePlaylist.vue
Normal file
99
web-src/src/pages/SpotifyPagePlaylist.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<content-with-heading>
|
||||
<template slot="heading-left">
|
||||
<div class="title is-4">{{ playlist.name }}</div>
|
||||
</template>
|
||||
<template slot="heading-right">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-play"></i>
|
||||
</span>
|
||||
<span>Play</span>
|
||||
</a>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<p class="heading has-text-centered-mobile">{{ playlist.tracks.total }} tracks</p>
|
||||
<spotify-list-item-track v-for="(item, index) in tracks" :key="item.track.id" :track="item.track" :album="item.track.album" :position="index" :context_uri="playlist.uri"></spotify-list-item-track>
|
||||
<infinite-loading v-if="offset < total" @infinite="load_next"><span slot="no-more">.</span></infinite-loading>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
|
||||
import store from '@/store'
|
||||
import webapi from '@/webapi'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import InfiniteLoading from 'vue-infinite-loading'
|
||||
|
||||
const playlistData = {
|
||||
load: function (to) {
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(store.state.spotify.webapi_token)
|
||||
return Promise.all([
|
||||
spotifyApi.getPlaylist(to.params.user_id, to.params.playlist_id),
|
||||
spotifyApi.getPlaylistTracks(to.params.user_id, to.params.playlist_id, { limit: 50, offset: 0 })
|
||||
])
|
||||
},
|
||||
|
||||
set: function (vm, response) {
|
||||
vm.playlist = response[0]
|
||||
vm.tracks = []
|
||||
vm.total = 0
|
||||
vm.offset = 0
|
||||
vm.append_tracks(response[1])
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'SpotifyPagePlaylist',
|
||||
mixins: [ LoadDataBeforeEnterMixin(playlistData) ],
|
||||
components: { ContentWithHeading, SpotifyListItemTrack, InfiniteLoading },
|
||||
|
||||
data () {
|
||||
return {
|
||||
playlist: {},
|
||||
tracks: [],
|
||||
total: 0,
|
||||
offset: 0
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
load_next: function ($state) {
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
|
||||
spotifyApi.getPlaylistTracks(this.playlist.owner.id, this.playlist.id, { limit: 50, offset: this.offset }).then(data => {
|
||||
this.append_tracks(data, $state)
|
||||
})
|
||||
},
|
||||
|
||||
append_tracks: function (data, $state) {
|
||||
this.tracks = this.tracks.concat(data.items)
|
||||
this.total = data.total
|
||||
this.offset += data.limit
|
||||
|
||||
if ($state) {
|
||||
$state.loaded()
|
||||
if (this.offset >= this.total) {
|
||||
$state.complete()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
play: function () {
|
||||
webapi.queue_clear().then(() =>
|
||||
webapi.queue_add(this.playlist.uri).then(() =>
|
||||
webapi.player_play()
|
||||
)
|
||||
)
|
||||
this.show_details_modal = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
342
web-src/src/pages/SpotifyPageSearch.vue
Normal file
342
web-src/src/pages/SpotifyPageSearch.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Search field + recent searches -->
|
||||
<section class="section fd-tabs-section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<form v-on:submit.prevent="new_search">
|
||||
<div class="field">
|
||||
<p class="control is-expanded has-icons-left">
|
||||
<input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field">
|
||||
<span class="icon is-left">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
<div class="tags" style="margin-top: 16px;">
|
||||
<a class="tag" v-for="recent_search in recent_searches" :key="recent_search" @click="open_recent_search(recent_search)">{{ recent_search }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<tabs-search></tabs-search>
|
||||
|
||||
<!-- Tracks -->
|
||||
<content-with-heading v-if="show_tracks">
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Tracks</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<spotify-list-item-track v-for="track in tracks.items" :key="track.id" :track="track" :album="track.album" :position="0" :context_uri="track.uri"></spotify-list-item-track>
|
||||
<infinite-loading v-if="query.type === 'track'" @infinite="search_tracks_next"><span slot="no-more">.</span></infinite-loading>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav v-if="show_all_tracks_button" class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_search_tracks">Show all {{ tracks.total }} tracks</a>
|
||||
</p>
|
||||
</nav>
|
||||
<p v-if="!tracks.total">No results</p>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
|
||||
<!-- Artists -->
|
||||
<content-with-heading v-if="show_artists">
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Artists</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<spotify-list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist"></spotify-list-item-artist>
|
||||
<infinite-loading v-if="query.type === 'artist'" @infinite="search_artists_next"><span slot="no-more">.</span></infinite-loading>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav v-if="show_all_artists_button" class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_search_artists">Show all {{ artists.total }} artists</a>
|
||||
</p>
|
||||
</nav>
|
||||
<p v-if="!artists.total">No results</p>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
|
||||
<!-- Albums -->
|
||||
<content-with-heading v-if="show_albums">
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Albums</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<spotify-list-item-album v-for="album in albums.items" :key="album.id" :album="album"></spotify-list-item-album>
|
||||
<infinite-loading v-if="query.type === 'album'" @infinite="search_albums_next"><span slot="no-more">.</span></infinite-loading>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav v-if="show_all_albums_button" class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_search_albums">Show all {{ albums.total }} albums</a>
|
||||
</p>
|
||||
</nav>
|
||||
<p v-if="!albums.total">No results</p>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
|
||||
<!-- Playlists -->
|
||||
<content-with-heading v-if="show_playlists">
|
||||
<template slot="heading-left">
|
||||
<p class="title is-4">Playlists</p>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<spotify-list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
|
||||
<infinite-loading v-if="query.type === 'playlist'" @infinite="search_playlists_next"><span slot="no-more">.</span></infinite-loading>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<nav v-if="show_all_playlists_button" class="level">
|
||||
<p class="level-item">
|
||||
<a class="button is-light is-small is-rounded" v-on:click="open_search_playlists">Show all {{ playlists.total }} playlists</a>
|
||||
</p>
|
||||
</nav>
|
||||
<p v-if="!playlists.total">No results</p>
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||
import TabsSearch from '@/components/TabsSearch'
|
||||
import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
|
||||
import SpotifyListItemArtist from '@/components/SpotifyListItemArtist'
|
||||
import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
|
||||
import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import webapi from '@/webapi'
|
||||
import * as types from '@/store/mutation_types'
|
||||
import InfiniteLoading from 'vue-infinite-loading'
|
||||
|
||||
export default {
|
||||
name: 'SpotifyPageSearch',
|
||||
components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, InfiniteLoading },
|
||||
|
||||
data () {
|
||||
return {
|
||||
search_query: '',
|
||||
tracks: { items: [], total: 0 },
|
||||
artists: { items: [], total: 0 },
|
||||
albums: { items: [], total: 0 },
|
||||
playlists: { items: [], total: 0 },
|
||||
|
||||
query: {},
|
||||
search_param: {}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
recent_searches () {
|
||||
return this.$store.state.recent_searches
|
||||
},
|
||||
|
||||
show_tracks () {
|
||||
return this.$route.query.type && this.$route.query.type.includes('track')
|
||||
},
|
||||
show_all_tracks_button () {
|
||||
return this.tracks.total > this.tracks.items.length
|
||||
},
|
||||
|
||||
show_artists () {
|
||||
return this.$route.query.type && this.$route.query.type.includes('artist')
|
||||
},
|
||||
show_all_artists_button () {
|
||||
return this.artists.total > this.artists.items.length
|
||||
},
|
||||
|
||||
show_albums () {
|
||||
return this.$route.query.type && this.$route.query.type.includes('album')
|
||||
},
|
||||
show_all_albums_button () {
|
||||
return this.albums.total > this.albums.items.length
|
||||
},
|
||||
|
||||
show_playlists () {
|
||||
return this.$route.query.type && this.$route.query.type.includes('playlist')
|
||||
},
|
||||
show_all_playlists_button () {
|
||||
return this.playlists.total > this.playlists.items.length
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
reset: function () {
|
||||
this.tracks = { items: [], total: 0 }
|
||||
this.artists = { items: [], total: 0 }
|
||||
this.albums = { items: [], total: 0 }
|
||||
this.playlists = { items: [], total: 0 }
|
||||
},
|
||||
|
||||
search: function () {
|
||||
this.reset()
|
||||
|
||||
// If no search query present reset and focus search field
|
||||
if (!this.query.query || this.query.query === '') {
|
||||
this.search_query = ''
|
||||
this.$refs.search_field.focus()
|
||||
return
|
||||
}
|
||||
|
||||
this.search_param.limit = this.query.limit ? this.query.limit : 50
|
||||
this.search_param.offset = this.query.offset ? this.query.offset : 0
|
||||
|
||||
this.$store.commit(types.ADD_RECENT_SEARCH, this.query.query)
|
||||
|
||||
if (this.query.type.includes(',')) {
|
||||
this.search_all()
|
||||
}
|
||||
},
|
||||
|
||||
spotify_search: function () {
|
||||
return webapi.spotify().then(({ data }) => {
|
||||
this.search_param.market = data.webapi_country
|
||||
|
||||
var spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(data.webapi_token)
|
||||
|
||||
return spotifyApi.search(this.query.query, this.query.type.split(','), this.search_param)
|
||||
})
|
||||
},
|
||||
|
||||
search_all: function () {
|
||||
this.spotify_search().then(data => {
|
||||
this.tracks = data.tracks ? data.tracks : { items: [], total: 0 }
|
||||
this.artists = data.artists ? data.artists : { items: [], total: 0 }
|
||||
this.albums = data.albums ? data.albums : { items: [], total: 0 }
|
||||
this.playlists = data.playlists ? data.playlists : { items: [], total: 0 }
|
||||
})
|
||||
},
|
||||
|
||||
search_tracks_next: function ($state) {
|
||||
this.spotify_search().then(data => {
|
||||
this.tracks.items = this.tracks.items.concat(data.tracks.items)
|
||||
this.tracks.total = data.tracks.total
|
||||
this.search_param.offset += data.tracks.limit
|
||||
|
||||
$state.loaded()
|
||||
if (this.search_param.offset >= this.tracks.total) {
|
||||
$state.complete()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
search_artists_next: function ($state) {
|
||||
this.spotify_search().then(data => {
|
||||
this.artists.items = this.artists.items.concat(data.artists.items)
|
||||
this.artists.total = data.artists.total
|
||||
this.search_param.offset += data.artists.limit
|
||||
|
||||
$state.loaded()
|
||||
if (this.search_param.offset >= this.artists.total) {
|
||||
$state.complete()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
search_albums_next: function ($state) {
|
||||
this.spotify_search().then(data => {
|
||||
this.albums.items = this.albums.items.concat(data.albums.items)
|
||||
this.albums.total = data.albums.total
|
||||
this.search_param.offset += data.albums.limit
|
||||
|
||||
$state.loaded()
|
||||
if (this.search_param.offset >= this.albums.total) {
|
||||
$state.complete()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
search_playlists_next: function ($state) {
|
||||
this.spotify_search().then(data => {
|
||||
this.playlists.items = this.playlists.items.concat(data.playlists.items)
|
||||
this.playlists.total = data.playlists.total
|
||||
this.search_param.offset += data.playlists.limit
|
||||
|
||||
$state.loaded()
|
||||
if (this.search_param.offset >= this.playlists.total) {
|
||||
$state.complete()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
new_search: function () {
|
||||
if (!this.search_query) {
|
||||
return
|
||||
}
|
||||
|
||||
this.$router.push({ path: '/search/spotify',
|
||||
query: {
|
||||
type: 'track,artist,album,playlist',
|
||||
query: this.search_query,
|
||||
limit: 3,
|
||||
offset: 0
|
||||
}
|
||||
})
|
||||
this.$refs.search_field.blur()
|
||||
},
|
||||
|
||||
open_search_tracks: function () {
|
||||
this.$router.push({ path: '/search/spotify',
|
||||
query: {
|
||||
type: 'track',
|
||||
query: this.$route.query.query
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
open_search_artists: function () {
|
||||
this.$router.push({ path: '/search/spotify',
|
||||
query: {
|
||||
type: 'artist',
|
||||
query: this.$route.query.query
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
open_search_albums: function () {
|
||||
this.$router.push({ path: '/search/spotify',
|
||||
query: {
|
||||
type: 'album',
|
||||
query: this.$route.query.query
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
open_search_playlists: function () {
|
||||
this.$router.push({ path: '/search/spotify',
|
||||
query: {
|
||||
type: 'playlist',
|
||||
query: this.$route.query.query
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
open_recent_search: function (query) {
|
||||
this.search_query = query
|
||||
this.new_search()
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.query = this.$route.query
|
||||
this.search()
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
this.query = to.query
|
||||
this.search()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
17
web-src/src/pages/mixin.js
Normal file
17
web-src/src/pages/mixin.js
Normal file
@@ -0,0 +1,17 @@
|
||||
|
||||
export const LoadDataBeforeEnterMixin = function (dataObject) {
|
||||
return {
|
||||
beforeRouteEnter (to, from, next) {
|
||||
dataObject.load(to).then((response) => {
|
||||
next(vm => dataObject.set(vm, response))
|
||||
})
|
||||
},
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
const vm = this
|
||||
dataObject.load(to).then((response) => {
|
||||
dataObject.set(vm, response)
|
||||
next()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
8
web-src/src/progress/index.js
Normal file
8
web-src/src/progress/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import Vue from 'vue'
|
||||
import VueProgressBar from 'vue-progressbar'
|
||||
|
||||
Vue.use(VueProgressBar, {
|
||||
color: 'hsl(204, 86%, 53%)',
|
||||
failedColor: 'red',
|
||||
height: '1px'
|
||||
})
|
||||
202
web-src/src/router/index.js
Normal file
202
web-src/src/router/index.js
Normal file
@@ -0,0 +1,202 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import store from '@/store'
|
||||
import * as types from '@/store/mutation_types'
|
||||
import PageQueue from '@/pages/PageQueue'
|
||||
import PageNowPlaying from '@/pages/PageNowPlaying'
|
||||
import PageBrowse from '@/pages/PageBrowse'
|
||||
import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded'
|
||||
import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed'
|
||||
import PageArtists from '@/pages/PageArtists'
|
||||
import PageArtist from '@/pages/PageArtist'
|
||||
import PageAlbums from '@/pages/PageAlbums'
|
||||
import PageAlbum from '@/pages/PageAlbum'
|
||||
import PagePodcasts from '@/pages/PagePodcasts'
|
||||
import PagePodcast from '@/pages/PagePodcast'
|
||||
import PageAudiobooks from '@/pages/PageAudiobooks'
|
||||
import PageAudiobook from '@/pages/PageAudiobook'
|
||||
import PagePlaylists from '@/pages/PagePlaylists'
|
||||
import PagePlaylist from '@/pages/PagePlaylist'
|
||||
import PageSearch from '@/pages/PageSearch'
|
||||
import PageAbout from '@/pages/PageAbout'
|
||||
import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse'
|
||||
import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases'
|
||||
import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists'
|
||||
import SpotifyPageArtist from '@/pages/SpotifyPageArtist'
|
||||
import SpotifyPageAlbum from '@/pages/SpotifyPageAlbum'
|
||||
import SpotifyPagePlaylist from '@/pages/SpotifyPagePlaylist'
|
||||
import SpotifyPageSearch from '@/pages/SpotifyPageSearch'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
export const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'PageQueue',
|
||||
component: PageQueue
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: PageAbout
|
||||
},
|
||||
{
|
||||
path: '/now-playing',
|
||||
name: 'Now playing',
|
||||
component: PageNowPlaying
|
||||
},
|
||||
{
|
||||
path: '/music',
|
||||
redirect: '/music/browse'
|
||||
},
|
||||
{
|
||||
path: '/music/browse',
|
||||
name: 'Browse',
|
||||
component: PageBrowse,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/browse/recently_added',
|
||||
name: 'Browse Recently Added',
|
||||
component: PageBrowseRecentlyAdded,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/browse/recently_played',
|
||||
name: 'Browse Recently Played',
|
||||
component: PageBrowseRecentlyPlayed,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/artists',
|
||||
name: 'Artists',
|
||||
component: PageArtists,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/artists/:artist_id',
|
||||
name: 'Artist',
|
||||
component: PageArtist,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/albums',
|
||||
name: 'Albums',
|
||||
component: PageAlbums,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/albums/:album_id',
|
||||
name: 'Album',
|
||||
component: PageAlbum,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/podcasts',
|
||||
name: 'Podcasts',
|
||||
component: PagePodcasts,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/podcasts/:album_id',
|
||||
name: 'Podcast',
|
||||
component: PagePodcast,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/audiobooks',
|
||||
name: 'Audiobooks',
|
||||
component: PageAudiobooks,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/audiobooks/:album_id',
|
||||
name: 'Audiobook',
|
||||
component: PageAudiobook,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/playlists',
|
||||
name: 'Playlists',
|
||||
component: PagePlaylists,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/playlists/:playlist_id',
|
||||
name: 'Playlist',
|
||||
component: PagePlaylist,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
redirect: '/search/library'
|
||||
},
|
||||
{
|
||||
path: '/search/library',
|
||||
name: 'Search Library',
|
||||
component: PageSearch
|
||||
},
|
||||
{
|
||||
path: '/music/spotify',
|
||||
name: 'Spotify',
|
||||
component: SpotifyPageBrowse,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/spotify/new-releases',
|
||||
name: 'Spotify Browse New Releases',
|
||||
component: SpotifyPageBrowseNewReleases,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/spotify/featured-playlists',
|
||||
name: 'Spotify Browse Featured Playlists',
|
||||
component: SpotifyPageBrowseFeaturedPlaylists,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/spotify/artists/:artist_id',
|
||||
name: 'Spotify Artist',
|
||||
component: SpotifyPageArtist,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/spotify/albums/:album_id',
|
||||
name: 'Spotify Album',
|
||||
component: SpotifyPageAlbum,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/music/spotify/playlists/:user_id/:playlist_id',
|
||||
name: 'Spotify Playlist',
|
||||
component: SpotifyPagePlaylist,
|
||||
meta: { show_progress: true }
|
||||
},
|
||||
{
|
||||
path: '/search/spotify',
|
||||
name: 'Spotify Search',
|
||||
component: SpotifyPageSearch
|
||||
}
|
||||
],
|
||||
scrollBehavior (to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve(savedPosition)
|
||||
}, 500)
|
||||
})
|
||||
} else {
|
||||
return { x: 0, y: 0 }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (store.state.show_burger_menu) {
|
||||
store.commit(types.SHOW_BURGER_MENU, false)
|
||||
next(false)
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
154
web-src/src/store/index.js
Normal file
154
web-src/src/store/index.js
Normal file
@@ -0,0 +1,154 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import * as types from './mutation_types'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
config: {
|
||||
'websocket_port': 0,
|
||||
'version': '',
|
||||
'buildoptions': [ ]
|
||||
},
|
||||
library: {
|
||||
'artists': 0,
|
||||
'albums': 0,
|
||||
'songs': 0,
|
||||
'db_playtime': 0,
|
||||
'updating': false
|
||||
},
|
||||
audiobooks_count: { },
|
||||
podcasts_count: { },
|
||||
outputs: [ ],
|
||||
player: {
|
||||
'state': 'stop',
|
||||
'repeat': 'off',
|
||||
'consume': false,
|
||||
'shuffle': false,
|
||||
'volume': 0,
|
||||
'item_id': 0,
|
||||
'item_length_ms': 0,
|
||||
'item_progress_ms': 0
|
||||
},
|
||||
queue: {
|
||||
'version': 0,
|
||||
'count': 0,
|
||||
'items': [ ]
|
||||
},
|
||||
spotify: {},
|
||||
|
||||
spotify_new_releases: [],
|
||||
spotify_featured_playlists: [],
|
||||
|
||||
notifications: {
|
||||
'next_id': 1,
|
||||
'list': []
|
||||
},
|
||||
recent_searches: [],
|
||||
|
||||
hide_singles: false,
|
||||
show_only_next_items: false,
|
||||
show_burger_menu: false
|
||||
},
|
||||
|
||||
getters: {
|
||||
now_playing: state => {
|
||||
var item = state.queue.items.find(function (item) {
|
||||
return item.id === state.player.item_id
|
||||
})
|
||||
return (item === undefined) ? {} : item
|
||||
}
|
||||
},
|
||||
|
||||
mutations: {
|
||||
[types.UPDATE_CONFIG] (state, config) {
|
||||
state.config = config
|
||||
},
|
||||
[types.UPDATE_LIBRARY_STATS] (state, libraryStats) {
|
||||
state.library = libraryStats
|
||||
},
|
||||
[types.UPDATE_LIBRARY_AUDIOBOOKS_COUNT] (state, count) {
|
||||
state.audiobooks_count = count
|
||||
},
|
||||
[types.UPDATE_LIBRARY_PODCASTS_COUNT] (state, count) {
|
||||
state.podcasts_count = count
|
||||
},
|
||||
[types.UPDATE_OUTPUTS] (state, outputs) {
|
||||
state.outputs = outputs
|
||||
},
|
||||
[types.UPDATE_PLAYER_STATUS] (state, playerStatus) {
|
||||
state.player = playerStatus
|
||||
},
|
||||
[types.UPDATE_QUEUE] (state, queue) {
|
||||
state.queue = queue
|
||||
},
|
||||
[types.UPDATE_SPOTIFY] (state, spotify) {
|
||||
state.spotify = spotify
|
||||
},
|
||||
[types.SPOTIFY_NEW_RELEASES] (state, newReleases) {
|
||||
state.spotify_new_releases = newReleases
|
||||
},
|
||||
[types.SPOTIFY_FEATURED_PLAYLISTS] (state, featuredPlaylists) {
|
||||
state.spotify_featured_playlists = featuredPlaylists
|
||||
},
|
||||
[types.ADD_NOTIFICATION] (state, notification) {
|
||||
if (notification.topic) {
|
||||
var index = state.notifications.list.findIndex(elem => elem.topic === notification.topic)
|
||||
if (index >= 0) {
|
||||
state.notifications.list.splice(index, 1, notification)
|
||||
return
|
||||
}
|
||||
}
|
||||
state.notifications.list.push(notification)
|
||||
},
|
||||
[types.DELETE_NOTIFICATION] (state, notification) {
|
||||
const index = state.notifications.list.indexOf(notification)
|
||||
|
||||
if (index !== -1) {
|
||||
state.notifications.list.splice(index, 1)
|
||||
}
|
||||
},
|
||||
[types.ADD_RECENT_SEARCH] (state, query) {
|
||||
var index = state.recent_searches.findIndex(elem => elem === query)
|
||||
if (index >= 0) {
|
||||
state.recent_searches.splice(index, 1)
|
||||
}
|
||||
|
||||
state.recent_searches.splice(0, 0, query)
|
||||
|
||||
if (state.recent_searches.length > 5) {
|
||||
state.recent_searches.pop()
|
||||
}
|
||||
},
|
||||
[types.HIDE_SINGLES] (state, hideSingles) {
|
||||
state.hide_singles = hideSingles
|
||||
},
|
||||
[types.SHOW_ONLY_NEXT_ITEMS] (state, showOnlyNextItems) {
|
||||
state.show_only_next_items = showOnlyNextItems
|
||||
},
|
||||
[types.SHOW_BURGER_MENU] (state, showBurgerMenu) {
|
||||
state.show_burger_menu = showBurgerMenu
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
add_notification ({ commit, state }, notification) {
|
||||
const newNotification = {
|
||||
'id': state.notifications.next_id++,
|
||||
'type': notification.type,
|
||||
'text': notification.text,
|
||||
'topic': notification.topic,
|
||||
'timeout': notification.timeout
|
||||
}
|
||||
|
||||
commit(types.ADD_NOTIFICATION, newNotification)
|
||||
|
||||
if (notification.timeout > 0) {
|
||||
setTimeout(() => {
|
||||
commit(types.DELETE_NOTIFICATION, newNotification)
|
||||
}, notification.timeout)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
19
web-src/src/store/mutation_types.js
Normal file
19
web-src/src/store/mutation_types.js
Normal file
@@ -0,0 +1,19 @@
|
||||
export const UPDATE_CONFIG = 'UPDATE_CONFIG'
|
||||
export const UPDATE_LIBRARY_STATS = 'UPDATE_LIBRARY_STATS'
|
||||
export const UPDATE_LIBRARY_AUDIOBOOKS_COUNT = 'UPDATE_LIBRARY_AUDIOBOOKS_COUNT'
|
||||
export const UPDATE_LIBRARY_PODCASTS_COUNT = 'UPDATE_LIBRARY_PODCASTS_COUNT'
|
||||
export const UPDATE_OUTPUTS = 'UPDATE_OUTPUTS'
|
||||
export const UPDATE_PLAYER_STATUS = 'UPDATE_PLAYER_STATUS'
|
||||
export const UPDATE_QUEUE = 'UPDATE_QUEUE'
|
||||
export const UPDATE_SPOTIFY = 'UPDATE_SPOTIFY'
|
||||
|
||||
export const SPOTIFY_NEW_RELEASES = 'SPOTIFY_NEW_RELEASES'
|
||||
export const SPOTIFY_FEATURED_PLAYLISTS = 'SPOTIFY_FEATURED_PLAYLISTS'
|
||||
|
||||
export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'
|
||||
export const DELETE_NOTIFICATION = 'DELETE_NOTIFICATION'
|
||||
export const ADD_RECENT_SEARCH = 'ADD_RECENT_SEARCH'
|
||||
|
||||
export const HIDE_SINGLES = 'HIDE_SINGLES'
|
||||
export const SHOW_ONLY_NEXT_ITEMS = 'SHOW_ONLY_NEXT_ITEMS'
|
||||
export const SHOW_BURGER_MENU = 'SHOW_BURGER_MENU'
|
||||
35
web-src/src/templates/ContentWithHeading.vue
Normal file
35
web-src/src/templates/ContentWithHeading.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item has-text-centered-mobile">
|
||||
<div>
|
||||
<slot name="heading-left"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="level-right has-text-centered-mobile">
|
||||
<slot name="heading-right"></slot>
|
||||
</div>
|
||||
</nav>
|
||||
<slot name="content"></slot>
|
||||
<div style="margin-top: 16px;">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
162
web-src/src/webapi/index.js
Normal file
162
web-src/src/webapi/index.js
Normal file
@@ -0,0 +1,162 @@
|
||||
import axios from 'axios'
|
||||
import store from '@/store'
|
||||
|
||||
axios.interceptors.response.use(function (response) {
|
||||
return response
|
||||
}, function (error) {
|
||||
store.dispatch('add_notification', { text: 'Request failed (status: ' + error.request.status + ' ' + error.request.statusText + ', url: ' + error.request.responseURL + ')', type: 'danger' })
|
||||
return Promise.reject(error)
|
||||
})
|
||||
|
||||
export default {
|
||||
config () {
|
||||
return axios.get('/api/config')
|
||||
},
|
||||
|
||||
library_stats () {
|
||||
return axios.get('/api/library')
|
||||
},
|
||||
|
||||
library_update () {
|
||||
return axios.get('/api/update')
|
||||
},
|
||||
|
||||
library_count (expression) {
|
||||
return axios.get('/api/library/count?expression=' + expression)
|
||||
},
|
||||
|
||||
queue () {
|
||||
return axios.get('/api/queue')
|
||||
},
|
||||
|
||||
queue_clear () {
|
||||
return axios.put('/api/queue/clear')
|
||||
},
|
||||
|
||||
queue_remove (itemId) {
|
||||
return axios.delete('/api/queue/items/' + itemId)
|
||||
},
|
||||
|
||||
queue_move (itemId, newPosition) {
|
||||
return axios.put('/api/queue/items/' + itemId + '?new_position=' + newPosition)
|
||||
},
|
||||
|
||||
queue_add (uri) {
|
||||
return axios.post('/api/queue/items/add?uris=' + uri)
|
||||
},
|
||||
|
||||
player_status () {
|
||||
return axios.get('/api/player')
|
||||
},
|
||||
|
||||
player_play () {
|
||||
return axios.put('/api/player/play')
|
||||
},
|
||||
|
||||
player_playpos (position) {
|
||||
return axios.put('/api/player/play?position=' + position)
|
||||
},
|
||||
|
||||
player_playid (itemId) {
|
||||
return axios.put('/api/player/play?item_id=' + itemId)
|
||||
},
|
||||
|
||||
player_pause () {
|
||||
return axios.put('/api/player/pause')
|
||||
},
|
||||
|
||||
player_next () {
|
||||
return axios.put('/api/player/next')
|
||||
},
|
||||
|
||||
player_previous () {
|
||||
return axios.put('/api/player/previous')
|
||||
},
|
||||
|
||||
player_shuffle (newState) {
|
||||
var shuffle = newState ? 'true' : 'false'
|
||||
return axios.put('/api/player/shuffle?state=' + shuffle)
|
||||
},
|
||||
|
||||
player_consume (newState) {
|
||||
var consume = newState ? 'true' : 'false'
|
||||
return axios.put('/api/player/consume?state=' + consume)
|
||||
},
|
||||
|
||||
player_repeat (newRepeatMode) {
|
||||
return axios.put('/api/player/repeat?state=' + newRepeatMode)
|
||||
},
|
||||
|
||||
player_volume (volume) {
|
||||
return axios.put('/api/player/volume?volume=' + volume)
|
||||
},
|
||||
|
||||
player_output_volume (outputId, outputVolume) {
|
||||
return axios.put('/api/player/volume?volume=' + outputVolume + '&output_id=' + outputId)
|
||||
},
|
||||
|
||||
player_seek (newPosition) {
|
||||
return axios.put('/api/player/seek?position_ms=' + newPosition)
|
||||
},
|
||||
|
||||
outputs () {
|
||||
return axios.get('/api/outputs')
|
||||
},
|
||||
|
||||
output_update (outputId, output) {
|
||||
return axios.put('/api/outputs/' + outputId, output)
|
||||
},
|
||||
|
||||
library_artists () {
|
||||
return axios.get('/api/library/artists?media_kind=music')
|
||||
},
|
||||
|
||||
library_artist (artistId) {
|
||||
return axios.get('/api/library/artists/' + artistId)
|
||||
},
|
||||
|
||||
library_albums (artistId) {
|
||||
if (artistId) {
|
||||
return axios.get('/api/library/artists/' + artistId + '/albums')
|
||||
}
|
||||
return axios.get('/api/library/albums?media_kind=music')
|
||||
},
|
||||
|
||||
library_album (albumId) {
|
||||
return axios.get('/api/library/albums/' + albumId)
|
||||
},
|
||||
|
||||
library_album_tracks (albumId) {
|
||||
return axios.get('/api/library/albums/' + albumId + '/tracks')
|
||||
},
|
||||
|
||||
library_podcasts () {
|
||||
return axios.get('/api/library/albums?media_kind=podcast')
|
||||
},
|
||||
|
||||
library_audiobooks () {
|
||||
return axios.get('/api/library/albums?media_kind=audiobook')
|
||||
},
|
||||
|
||||
library_playlists () {
|
||||
return axios.get('/api/library/playlists')
|
||||
},
|
||||
|
||||
library_playlist (playlistId) {
|
||||
return axios.get('/api/library/playlists/' + playlistId)
|
||||
},
|
||||
|
||||
library_playlist_tracks (playlistId) {
|
||||
return axios.get('/api/library/playlists/' + playlistId + '/tracks')
|
||||
},
|
||||
|
||||
search (searchParams) {
|
||||
return axios.get('/api/search', {
|
||||
params: searchParams
|
||||
})
|
||||
},
|
||||
|
||||
spotify () {
|
||||
return axios.get('/api/spotify')
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user