mirror of
https://github.com/owntone/owntone-server.git
synced 2025-11-07 04:42:58 -05:00
Merge forked-daapd-web into forked-daapd
This commit is contained in:
chme
ejurgensen
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>
|
||||
Reference in New Issue
Block a user