mirror of
https://github.com/owntone/owntone-server.git
synced 2025-02-28 13:59:18 -05:00
[web] Streamline name of component properties to prepare for refactoring
This commit is contained in:
Alain Nussbaumer
parent
33d28b085f
commit
30aee058bf
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<template v-for="album in albums" :key="album.itemId">
|
||||
<template v-for="album in items" :key="album.itemId">
|
||||
<div v-if="!album.isItem" class="mt-6 mb-5 py-2">
|
||||
<span
|
||||
:id="'index_' + album.index"
|
||||
@ -8,7 +8,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="album.isItem"
|
||||
v-else
|
||||
class="media is-align-items-center"
|
||||
@click="open_album(album.item)"
|
||||
>
|
||||
@ -78,17 +78,17 @@ export default {
|
||||
name: 'ListAlbums',
|
||||
components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
|
||||
props: {
|
||||
albums: { required: true, type: Object },
|
||||
items: { required: true, type: Object },
|
||||
media_kind: { default: '', type: String }
|
||||
},
|
||||
emits: ['play-count-changed', 'podcast-deleted'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
show_details_modal: false,
|
||||
rss_playlist_to_remove: {},
|
||||
selected_album: {},
|
||||
show_remove_podcast_modal: false,
|
||||
rss_playlist_to_remove: {}
|
||||
show_details_modal: false,
|
||||
show_remove_podcast_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
@ -101,7 +101,7 @@ export default {
|
||||
},
|
||||
|
||||
media_kind_resolved() {
|
||||
return this.media_kind ? this.media_kind : this.selected_album.media_kind
|
||||
return this.media_kind || this.selected_album.media_kind
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<template v-for="artist in artists" :key="artist.itemId">
|
||||
<template v-for="artist in items" :key="artist.itemId">
|
||||
<div v-if="!artist.isItem" class="mt-6 mb-5 py-2">
|
||||
<div class="media-content is-clipped">
|
||||
<span
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="artist.isItem"
|
||||
v-else
|
||||
class="media is-align-items-center"
|
||||
@click="open_artist(artist.item)"
|
||||
>
|
||||
@ -40,7 +40,7 @@ export default {
|
||||
name: 'ListArtists',
|
||||
components: { ModalDialogArtist },
|
||||
props: {
|
||||
artists: { required: true, type: Object }
|
||||
items: { required: true, type: Object }
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<template v-for="composer in composers" :key="composer.itemId">
|
||||
<template v-for="composer in items" :key="composer.itemId">
|
||||
<div v-if="!composer.isItem" class="mt-6 mb-5 py-2">
|
||||
<div class="media-content is-clipped">
|
||||
<span
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="composer.isItem"
|
||||
v-else
|
||||
class="media is-align-items-center"
|
||||
@click="open_composer(composer.item)"
|
||||
>
|
||||
@ -40,13 +40,13 @@ export default {
|
||||
name: 'ListComposers',
|
||||
components: { ModalDialogComposer },
|
||||
props: {
|
||||
composers: { required: true, type: Object }
|
||||
items: { required: true, type: Object }
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show_details_modal: false,
|
||||
selected_composer: {}
|
||||
selected_composer: {},
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<template v-for="genre in genres" :key="genre.itemId">
|
||||
<template v-for="genre in items" :key="genre.itemId">
|
||||
<div v-if="!genre.isItem" class="mt-6 mb-5 py-2">
|
||||
<div class="media-content is-clipped">
|
||||
<span
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="genre.isItem"
|
||||
v-else
|
||||
class="media is-align-items-center"
|
||||
@click="open_genre(genre.item)"
|
||||
>
|
||||
@ -41,28 +41,28 @@ export default {
|
||||
name: 'ListGenres',
|
||||
components: { ModalDialogGenre },
|
||||
props: {
|
||||
genres: { required: true, type: Object },
|
||||
items: { required: true, type: Object },
|
||||
media_kind: { required: true, type: String }
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show_details_modal: false,
|
||||
selected_genre: {}
|
||||
selected_genre: {},
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open_dialog(genre) {
|
||||
this.selected_genre = genre
|
||||
this.show_details_modal = true
|
||||
},
|
||||
open_genre(genre) {
|
||||
this.$router.push({
|
||||
name: 'genre-albums',
|
||||
params: { name: genre.name },
|
||||
query: { media_kind: this.media_kind }
|
||||
})
|
||||
},
|
||||
open_dialog(genre) {
|
||||
this.selected_genre = genre
|
||||
this.show_details_modal = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,16 +4,14 @@
|
||||
<slot name="artwork" />
|
||||
</div>
|
||||
<div class="media-content is-clickable is-clipped">
|
||||
<h1 class="title is-6" v-text="album.name" />
|
||||
<h1 class="title is-6" v-text="item.name" />
|
||||
<h2
|
||||
class="subtitle is-7 has-text-grey has-text-weight-bold"
|
||||
v-text="album.artists[0].name"
|
||||
v-text="item.artists[0]?.name"
|
||||
/>
|
||||
<h2
|
||||
class="subtitle is-7 has-text-grey"
|
||||
v-text="
|
||||
[album.album_type, $filters.date(album.release_date)].join(', ')
|
||||
"
|
||||
v-text="[item.album_type, $filters.date(item.release_date)].join(', ')"
|
||||
/>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
@ -25,7 +23,7 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListItemAlbumSpotify',
|
||||
props: { album: { required: true, type: Object } }
|
||||
props: { item: { required: true, type: Object } }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
v-for="playlist in playlists"
|
||||
v-for="playlist in items"
|
||||
:key="playlist.itemId"
|
||||
class="media is-align-items-center"
|
||||
@click="open_playlist(playlist.item)"
|
||||
@ -32,16 +32,28 @@ import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
|
||||
export default {
|
||||
name: 'ListPlaylists',
|
||||
components: { ModalDialogPlaylist },
|
||||
props: { playlists: { required: true, type: Object } },
|
||||
props: { items: { required: true, type: Object } },
|
||||
|
||||
data() {
|
||||
return {
|
||||
show_details_modal: false,
|
||||
selected_playlist: {}
|
||||
selected_playlist: {},
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
icon_name(playlist) {
|
||||
if (playlist.type === 'folder') {
|
||||
return 'folder'
|
||||
} else if (playlist.type === 'rss') {
|
||||
return 'rss'
|
||||
}
|
||||
return 'music-box-multiple'
|
||||
},
|
||||
open_dialog(playlist) {
|
||||
this.selected_playlist = playlist
|
||||
this.show_details_modal = true
|
||||
},
|
||||
open_playlist(playlist) {
|
||||
if (playlist.type === 'folder') {
|
||||
this.$router.push({
|
||||
@ -54,20 +66,6 @@ export default {
|
||||
params: { id: playlist.id }
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
open_dialog(playlist) {
|
||||
this.selected_playlist = playlist
|
||||
this.show_details_modal = true
|
||||
},
|
||||
|
||||
icon_name(playlist) {
|
||||
if (playlist.type === 'folder') {
|
||||
return 'folder'
|
||||
} else if (playlist.type === 'rss') {
|
||||
return 'rss'
|
||||
}
|
||||
return 'music-box-multiple'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<template v-for="track in tracks" :key="track.itemId">
|
||||
<template v-for="track in items" :key="track.itemId">
|
||||
<div v-if="!track.isItem" class="mt-6 mb-5 py-2">
|
||||
<span
|
||||
:id="'index_' + track.index"
|
||||
@ -63,17 +63,17 @@ export default {
|
||||
components: { ModalDialogTrack },
|
||||
props: {
|
||||
expression: { default: '', type: String },
|
||||
items: { required: true, type: Object },
|
||||
show_icon: Boolean,
|
||||
show_progress: Boolean,
|
||||
tracks: { required: true, type: Object },
|
||||
uris: { default: '', type: String }
|
||||
},
|
||||
emits: ['play-count-changed'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
show_details_modal: false,
|
||||
selected_track: {}
|
||||
selected_track: {},
|
||||
show_details_modal: false
|
||||
}
|
||||
},
|
||||
|
||||
@ -82,19 +82,18 @@ export default {
|
||||
this.selected_track = track
|
||||
this.show_details_modal = true
|
||||
},
|
||||
|
||||
play_track(track) {
|
||||
if (this.uris) {
|
||||
webapi.player_play_uri(
|
||||
this.uris,
|
||||
false,
|
||||
this.tracks.items.indexOf(track)
|
||||
this.items.items.indexOf(track)
|
||||
)
|
||||
} else if (this.expression) {
|
||||
webapi.player_play_expression(
|
||||
this.expression,
|
||||
false,
|
||||
this.tracks.items.indexOf(track)
|
||||
this.items.items.indexOf(track)
|
||||
)
|
||||
} else {
|
||||
webapi.player_play_uri(track.uri, false)
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
v-text="$filters.date(album.date_released)"
|
||||
/>
|
||||
</p>
|
||||
<p v-else-if="album.year > 0">
|
||||
<p v-else-if="album.year">
|
||||
<span class="heading" v-text="$t('dialog.album.year')" />
|
||||
<span class="title is-6" v-text="album.year" />
|
||||
</p>
|
||||
@ -133,7 +133,7 @@ export default {
|
||||
|
||||
computed: {
|
||||
media_kind_resolved() {
|
||||
return this.media_kind ? this.media_kind : this.album.media_kind
|
||||
return this.media_kind || this.album.media_kind
|
||||
}
|
||||
},
|
||||
|
||||
@ -192,14 +192,6 @@ export default {
|
||||
this.$emit('play-count-changed')
|
||||
this.$emit('close')
|
||||
})
|
||||
},
|
||||
|
||||
artwork_loaded() {
|
||||
this.artwork_visible = true
|
||||
},
|
||||
|
||||
artwork_error() {
|
||||
this.artwork_visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
class="heading has-text-centered-mobile mt-5"
|
||||
v-text="$t('page.album.track-count', { count: album.track_count })"
|
||||
/>
|
||||
<list-tracks :tracks="tracks" :uris="album.uri" />
|
||||
<list-tracks :items="tracks" :uris="album.uri" />
|
||||
<modal-dialog-album
|
||||
:show="show_details_modal"
|
||||
:album="album"
|
||||
@ -45,9 +45,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHero from '@/templates/ContentWithHero.vue'
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ListTracks from '@/components/ListTracks.vue'
|
||||
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</template>
|
||||
<template #heading-right />
|
||||
<template #content>
|
||||
<list-albums :albums="albums" />
|
||||
<list-albums :items="albums" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
@ -64,9 +64,9 @@
|
||||
|
||||
<script>
|
||||
import * as types from '@/store/mutation_types'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import ControlDropdown from '@/components/ControlDropdown.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListAlbums from '@/components/ListAlbums.vue'
|
||||
import TabsMusic from '@/components/TabsMusic.vue'
|
||||
@ -119,7 +119,7 @@ export default {
|
||||
id: 2,
|
||||
name: this.$t('page.albums.sort.recently-added'),
|
||||
options: {
|
||||
criteria: [{ field: 'time_added', type: Date, order: -1 }],
|
||||
criteria: [{ field: 'time_added', order: -1, type: Date }],
|
||||
index: { field: 'time_added', type: Date }
|
||||
}
|
||||
},
|
||||
@ -127,7 +127,7 @@ export default {
|
||||
id: 3,
|
||||
name: this.$t('page.albums.sort.recently-released'),
|
||||
options: {
|
||||
criteria: [{ field: 'date_released', type: Date, order: -1 }],
|
||||
criteria: [{ field: 'date_released', order: -1, type: Date }],
|
||||
index: { field: 'date_released', type: Date }
|
||||
}
|
||||
},
|
||||
@ -170,20 +170,6 @@ export default {
|
||||
|
||||
return this.albums_list
|
||||
},
|
||||
|
||||
selected_grouping_option_id: {
|
||||
get() {
|
||||
return this.$store.state.albums_sort
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit(types.ALBUMS_SORT, value)
|
||||
}
|
||||
},
|
||||
|
||||
spotify_enabled() {
|
||||
return this.$store.state.spotify.webapi_token_valid
|
||||
},
|
||||
|
||||
hide_singles: {
|
||||
get() {
|
||||
return this.$store.state.hide_singles
|
||||
@ -192,7 +178,6 @@ export default {
|
||||
this.$store.commit(types.HIDE_SINGLES, value)
|
||||
}
|
||||
},
|
||||
|
||||
hide_spotify: {
|
||||
get() {
|
||||
return this.$store.state.hide_spotify
|
||||
@ -200,6 +185,17 @@ export default {
|
||||
set(value) {
|
||||
this.$store.commit(types.HIDE_SPOTIFY, value)
|
||||
}
|
||||
},
|
||||
selected_grouping_option_id: {
|
||||
get() {
|
||||
return this.$store.state.albums_sort
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit(types.ALBUMS_SORT, value)
|
||||
}
|
||||
},
|
||||
spotify_enabled() {
|
||||
return this.$store.state.spotify.webapi_token_valid
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
v-text="$t('page.artist.track-count', { count: track_count })"
|
||||
/>
|
||||
</p>
|
||||
<list-albums :albums="albums" />
|
||||
<list-albums :items="albums" />
|
||||
<modal-dialog-artist
|
||||
:show="show_details_modal"
|
||||
:artist="artist"
|
||||
@ -72,9 +72,9 @@
|
||||
|
||||
<script>
|
||||
import * as types from '@/store/mutation_types'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import ControlDropdown from '@/components/ControlDropdown.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ListAlbums from '@/components/ListAlbums.vue'
|
||||
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
|
||||
import webapi from '@/webapi'
|
||||
@ -117,8 +117,8 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
artist: {},
|
||||
albums_list: new GroupedList(),
|
||||
artist: {},
|
||||
grouping_options: [
|
||||
{
|
||||
id: 1,
|
||||
@ -181,7 +181,6 @@ export default {
|
||||
params: { id: this.artist.id }
|
||||
})
|
||||
},
|
||||
|
||||
play() {
|
||||
webapi.player_play_uri(
|
||||
this.albums.items.map((a) => a.uri).join(','),
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<list-item-album-spotify
|
||||
v-for="album in albums"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
:item="album"
|
||||
@click="open_album(album)"
|
||||
>
|
||||
<template v-if="is_visible_artwork" #artwork>
|
||||
@ -157,6 +157,17 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
append_albums(data) {
|
||||
this.albums = this.albums.concat(data.items)
|
||||
this.total = data.total
|
||||
this.offset += data.limit
|
||||
},
|
||||
artwork_url(album) {
|
||||
if (album.images && album.images.length > 0) {
|
||||
return album.images[0].url
|
||||
}
|
||||
return ''
|
||||
},
|
||||
load_next({ loaded }) {
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
|
||||
@ -171,35 +182,19 @@ export default {
|
||||
loaded(data.items.length, PAGE_SIZE)
|
||||
})
|
||||
},
|
||||
|
||||
append_albums(data) {
|
||||
this.albums = this.albums.concat(data.items)
|
||||
this.total = data.total
|
||||
this.offset += data.limit
|
||||
},
|
||||
|
||||
play() {
|
||||
this.show_album_details_modal = false
|
||||
webapi.player_play_uri(this.artist.uri, true)
|
||||
},
|
||||
|
||||
open_album(album) {
|
||||
this.$router.push({
|
||||
name: 'music-spotify-album',
|
||||
params: { id: album.id }
|
||||
})
|
||||
},
|
||||
|
||||
open_dialog(album) {
|
||||
this.selected_album = album
|
||||
this.show_album_details_modal = true
|
||||
},
|
||||
|
||||
artwork_url(album) {
|
||||
if (album.images && album.images.length > 0) {
|
||||
return album.images[0].url
|
||||
}
|
||||
return ''
|
||||
play() {
|
||||
this.show_album_details_modal = false
|
||||
webapi.player_play_uri(this.artist.uri, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
v-text="$t('page.artist.track-count', { count: tracks.count })"
|
||||
/>
|
||||
</p>
|
||||
<list-tracks :tracks="tracks" :uris="track_uris" />
|
||||
<list-tracks :items="tracks" :uris="track_uris" />
|
||||
<modal-dialog-artist
|
||||
:show="show_details_modal"
|
||||
:artist="artist"
|
||||
@ -73,9 +73,9 @@
|
||||
|
||||
<script>
|
||||
import * as types from '@/store/mutation_types'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import ControlDropdown from '@/components/ControlDropdown.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListTracks from '@/components/ListTracks.vue'
|
||||
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
|
||||
@ -168,6 +168,9 @@ export default {
|
||||
spotify_enabled() {
|
||||
return this.$store.state.spotify.webapi_token_valid
|
||||
},
|
||||
track_uris() {
|
||||
return this.tracks_list.items.map((a) => a.uri).join(',')
|
||||
},
|
||||
tracks() {
|
||||
const grouping = this.grouping_options.find(
|
||||
(o) => o.id === this.selected_grouping_option_id
|
||||
@ -177,9 +180,6 @@ export default {
|
||||
]
|
||||
this.tracks_list.group(grouping.options)
|
||||
return this.tracks_list
|
||||
},
|
||||
track_uris() {
|
||||
return this.tracks_list.items.map((a) => a.uri).join(',')
|
||||
}
|
||||
},
|
||||
|
||||
@ -191,7 +191,6 @@ export default {
|
||||
params: { id: this.artist.id }
|
||||
})
|
||||
},
|
||||
|
||||
play() {
|
||||
webapi.player_play_uri(
|
||||
this.tracks_list.items.map((a) => a.uri).join(','),
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</template>
|
||||
<template #heading-right />
|
||||
<template #content>
|
||||
<list-artists :artists="artists" />
|
||||
<list-artists :items="artists" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
@ -64,9 +64,9 @@
|
||||
|
||||
<script>
|
||||
import * as types from '@/store/mutation_types'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import ControlDropdown from '@/components/ControlDropdown.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListArtists from '@/components/ListArtists.vue'
|
||||
import TabsMusic from '@/components/TabsMusic.vue'
|
||||
@ -133,7 +133,6 @@ export default {
|
||||
if (!this.artists_list) {
|
||||
return []
|
||||
}
|
||||
|
||||
const grouping = this.grouping_options.find(
|
||||
(o) => o.id === this.selected_grouping_option_id
|
||||
)
|
||||
@ -143,23 +142,8 @@ export default {
|
||||
(artist) => !this.hide_spotify || artist.data_kind !== 'spotify'
|
||||
]
|
||||
this.artists_list.group(grouping.options)
|
||||
|
||||
return this.artists_list
|
||||
},
|
||||
|
||||
selected_grouping_option_id: {
|
||||
get() {
|
||||
return this.$store.state.artists_sort
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit(types.ARTISTS_SORT, value)
|
||||
}
|
||||
},
|
||||
|
||||
spotify_enabled() {
|
||||
return this.$store.state.spotify.webapi_token_valid
|
||||
},
|
||||
|
||||
hide_singles: {
|
||||
get() {
|
||||
return this.$store.state.hide_singles
|
||||
@ -168,7 +152,6 @@ export default {
|
||||
this.$store.commit(types.HIDE_SINGLES, value)
|
||||
}
|
||||
},
|
||||
|
||||
hide_spotify: {
|
||||
get() {
|
||||
return this.$store.state.hide_spotify
|
||||
@ -176,6 +159,17 @@ export default {
|
||||
set(value) {
|
||||
this.$store.commit(types.HIDE_SPOTIFY, value)
|
||||
}
|
||||
},
|
||||
selected_grouping_option_id: {
|
||||
get() {
|
||||
return this.$store.state.artists_sort
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit(types.ARTISTS_SORT, value)
|
||||
}
|
||||
},
|
||||
spotify_enabled() {
|
||||
return this.$store.state.spotify.webapi_token_valid
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
})
|
||||
"
|
||||
/>
|
||||
<list-tracks :tracks="tracks" :uris="album.uri" />
|
||||
<list-tracks :items="tracks" :uris="album.uri" />
|
||||
<modal-dialog-album
|
||||
:show="show_details_modal"
|
||||
:album="album"
|
||||
@ -104,7 +104,6 @@ export default {
|
||||
params: { id: this.album.artist_id }
|
||||
})
|
||||
},
|
||||
|
||||
play() {
|
||||
webapi.player_play_uri(this.album.uri, false)
|
||||
}
|
||||
|
||||
@ -13,15 +13,15 @@
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<list-albums :albums="albums" />
|
||||
<list-albums :items="albums" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListAlbums from '@/components/ListAlbums.vue'
|
||||
import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
|
||||
@ -42,10 +42,10 @@ const dataObject = {
|
||||
export default {
|
||||
name: 'PageAudiobooksAlbums',
|
||||
components: {
|
||||
TabsAudiobooks,
|
||||
ContentWithHeading,
|
||||
IndexButtonList,
|
||||
ListAlbums
|
||||
ListAlbums,
|
||||
TabsAudiobooks
|
||||
},
|
||||
|
||||
beforeRouteEnter(to, from, next) {
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
})
|
||||
"
|
||||
/>
|
||||
<list-albums :albums="albums" />
|
||||
<list-albums :items="albums" />
|
||||
<modal-dialog-artist
|
||||
:show="show_details_modal"
|
||||
:artist="artist"
|
||||
|
||||
@ -14,15 +14,15 @@
|
||||
</template>
|
||||
<template #heading-right />
|
||||
<template #content>
|
||||
<list-artists :artists="artists" />
|
||||
<list-artists :items="artists" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListArtists from '@/components/ListArtists.vue'
|
||||
import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
|
||||
@ -44,9 +44,9 @@ export default {
|
||||
name: 'PageAudiobooksArtists',
|
||||
components: {
|
||||
ContentWithHeading,
|
||||
TabsAudiobooks,
|
||||
IndexButtonList,
|
||||
ListArtists
|
||||
ListArtists,
|
||||
TabsAudiobooks
|
||||
},
|
||||
|
||||
beforeRouteEnter(to, from, next) {
|
||||
|
||||
@ -13,15 +13,15 @@
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<list-genres :genres="genres" :media_kind="'audiobook'" />
|
||||
<list-genres :items="genres" :media_kind="'audiobook'" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListGenres from '@/components/ListGenres.vue'
|
||||
import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<list-albums :albums="albums" />
|
||||
<list-albums :items="albums" />
|
||||
<modal-dialog-composer
|
||||
:show="show_details_modal"
|
||||
:composer="composer"
|
||||
@ -102,7 +102,6 @@ export default {
|
||||
params: { name: this.composer.name }
|
||||
})
|
||||
},
|
||||
|
||||
play() {
|
||||
webapi.player_play_expression(
|
||||
`composer is "${this.composer.name}" and media_kind is music`,
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<list-tracks :tracks="tracks" :expression="expression" />
|
||||
<list-tracks :items="tracks" :expression="expression" />
|
||||
<modal-dialog-composer
|
||||
:show="show_details_modal"
|
||||
:composer="composer"
|
||||
@ -61,9 +61,9 @@
|
||||
|
||||
<script>
|
||||
import * as types from '@/store/mutation_types'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import ControlDropdown from '@/components/ControlDropdown.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListTracks from '@/components/ListTracks.vue'
|
||||
import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
|
||||
@ -158,7 +158,6 @@ export default {
|
||||
params: { name: this.composer.name }
|
||||
})
|
||||
},
|
||||
|
||||
play() {
|
||||
webapi.player_play_expression(this.expression, true)
|
||||
}
|
||||
|
||||
@ -13,15 +13,15 @@
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<list-composers :composers="composers" />
|
||||
<list-composers :items="composers" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListComposers from '@/components/ListComposers.vue'
|
||||
import TabsMusic from '@/components/TabsMusic.vue'
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<list-directories :directories="dirs" />
|
||||
<list-playlists :playlists="playlists" />
|
||||
<list-playlists :items="playlists" />
|
||||
<list-tracks
|
||||
:tracks="tracks"
|
||||
:expression="play_expression"
|
||||
:items="tracks"
|
||||
:show_icon="true"
|
||||
/>
|
||||
<modal-dialog-directory
|
||||
@ -94,8 +94,8 @@ export default {
|
||||
return {
|
||||
dirs: [],
|
||||
playlists: new GroupedList(),
|
||||
tracks: new GroupedList(),
|
||||
show_details_modal: false
|
||||
show_details_modal: false,
|
||||
tracks: new GroupedList()
|
||||
}
|
||||
},
|
||||
|
||||
@ -106,7 +106,6 @@ export default {
|
||||
}
|
||||
return '/'
|
||||
},
|
||||
|
||||
play_expression() {
|
||||
return `path starts with "${this.current_directory}" order by path asc`
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
v-text="$t('page.genre.track-count', { count: genre.track_count })"
|
||||
/>
|
||||
</p>
|
||||
<list-albums :albums="albums" />
|
||||
<list-albums :items="albums" />
|
||||
<modal-dialog-genre
|
||||
:genre="genre"
|
||||
:media_kind="media_kind"
|
||||
@ -46,8 +46,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListAlbums from '@/components/ListAlbums.vue'
|
||||
import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
|
||||
@ -106,7 +106,6 @@ export default {
|
||||
query: { media_kind: this.media_kind }
|
||||
})
|
||||
},
|
||||
|
||||
play() {
|
||||
webapi.player_play_expression(
|
||||
`genre is "${this.genre.name}" and media_kind is ${this.media_kind}`,
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
v-text="$t('page.genre.track-count', { count: genre.track_count })"
|
||||
/>
|
||||
</p>
|
||||
<list-tracks :tracks="tracks" :expression="expression" />
|
||||
<list-tracks :items="tracks" :expression="expression" />
|
||||
<modal-dialog-genre
|
||||
:show="show_details_modal"
|
||||
:genre="genre"
|
||||
@ -56,9 +56,9 @@
|
||||
|
||||
<script>
|
||||
import * as types from '@/store/mutation_types'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import ControlDropdown from '@/components/ControlDropdown.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListTracks from '@/components/ListTracks.vue'
|
||||
import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
|
||||
|
||||
@ -13,15 +13,15 @@
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<list-genres :genres="genres" :media_kind="'music'" />
|
||||
<list-genres :items="genres" :media_kind="'music'" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import IndexButtonList from '@/components/IndexButtonList.vue'
|
||||
import ListGenres from '@/components/ListGenres.vue'
|
||||
import TabsMusic from '@/components/TabsMusic.vue'
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<p class="title is-4" v-text="$t('page.music.recently-added.title')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<list-albums :albums="recently_added" />
|
||||
<list-albums :items="recently_added" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<nav class="level">
|
||||
@ -27,7 +27,7 @@
|
||||
<p class="title is-4" v-text="$t('page.music.recently-played.title')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<list-tracks :tracks="recently_played" />
|
||||
<list-tracks :items="recently_played" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<nav class="level">
|
||||
@ -56,16 +56,16 @@ const dataObject = {
|
||||
load(to) {
|
||||
return Promise.all([
|
||||
webapi.search({
|
||||
type: 'album',
|
||||
expression:
|
||||
'time_added after 8 weeks ago and media_kind is music having track_count > 3 order by time_added desc',
|
||||
limit: 3
|
||||
limit: 3,
|
||||
type: 'album'
|
||||
}),
|
||||
webapi.search({
|
||||
type: 'track',
|
||||
expression:
|
||||
'time_played after 8 weeks ago and media_kind is music order by time_played desc',
|
||||
limit: 3
|
||||
limit: 3,
|
||||
type: 'track'
|
||||
})
|
||||
])
|
||||
},
|
||||
|
||||
@ -6,15 +6,15 @@
|
||||
<p class="title is-4" v-text="$t('page.music.recently-added.title')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<list-albums :albums="recently_added" />
|
||||
<list-albums :items="recently_added" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ListAlbums from '@/components/ListAlbums.vue'
|
||||
import TabsMusic from '@/components/TabsMusic.vue'
|
||||
import store from '@/store'
|
||||
@ -24,10 +24,10 @@ const dataObject = {
|
||||
load(to) {
|
||||
const limit = store.getters.settings_option_recently_added_limit
|
||||
return webapi.search({
|
||||
type: 'album',
|
||||
expression:
|
||||
'media_kind is music having track_count > 3 order by time_added desc',
|
||||
limit
|
||||
limit,
|
||||
type: 'album'
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<p class="title is-4" v-text="$t('page.music.recently-played.title')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<list-tracks :tracks="recently_played" />
|
||||
<list-tracks :items="recently_played" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
@ -22,10 +22,10 @@ import webapi from '@/webapi'
|
||||
const dataObject = {
|
||||
load(to) {
|
||||
return webapi.search({
|
||||
type: 'track',
|
||||
expression:
|
||||
'time_played after 8 weeks ago and media_kind is music order by time_played desc',
|
||||
limit: 50
|
||||
limit: 50,
|
||||
type: 'track'
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<list-item-album-spotify
|
||||
v-for="album in new_releases"
|
||||
:key="album.id"
|
||||
:album="album"
|
||||
:item="album"
|
||||
@click="open_album(album)"
|
||||
>
|
||||
<template v-if="is_visible_artwork" #artwork>
|
||||
|
||||
@ -14,15 +14,15 @@
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<list-playlists :playlists="playlists" />
|
||||
<list-playlists :items="playlists" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
|
||||
import { GroupedList } from '@/lib/GroupedList'
|
||||
import ListPlaylists from '@/components/ListPlaylists.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
class="heading has-text-centered-mobile"
|
||||
v-text="$t('page.playlist.track-count', { count: tracks.count })"
|
||||
/>
|
||||
<list-tracks :tracks="tracks" :uris="uris" />
|
||||
<list-tracks :items="tracks" :uris="uris" />
|
||||
<modal-dialog-playlist
|
||||
:show="show_details_modal"
|
||||
:playlist="playlist"
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<list-tracks
|
||||
:tracks="new_episodes"
|
||||
:items="new_episodes"
|
||||
:show_progress="true"
|
||||
@play-count-changed="reload_new_episodes"
|
||||
/>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<list-tracks :tracks="tracks" />
|
||||
<list-tracks :items="tracks" />
|
||||
</template>
|
||||
</content-with-heading>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user