MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-03-03 15:20:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Use "button" tag instead of "a" tag

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-03-01 22:03:28 +01:00
parent ad2ec2252f
commit 43f4a23b1e
24 changed files with 317 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
htdocs/assets/index.js
View File

File diff suppressed because one or more lines are too long

22
web-src/src/components/ControlButton.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<button
class="button is-small is-rounded"
:disabled="disabled"
@click="handler"
>
<mdicon v-if="icon" class="icon" :name="icon" size="16" />
<span v-if="label" v-text="$t(label)" />
</button>
</template>
<script>
export default {
name: 'ControlButton',
props: {
disabled: { default: false, type: Boolean },
handler: { required: true, type: Function },
icon: { default: '', type: String },
label: { default: '', type: String }
}
}
</script>

4
web-src/src/components/ControlMainVolume.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="media is-align-items-center mb-0">
<div class="media-left">
<a class="button is-small" @click="toggle">
<button class="button is-small" @click="toggle">
<mdicon class="icon" :name="icon" />
</a>
</button>
</div>
<div class="media-content">
<div class="is-size-7 is-uppercase" v-text="$t('navigation.volume')" />

4
web-src/src/components/ControlOutputVolume.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="media is-align-items-center mb-0">
<div class="media-left">
<a
<button
class="button is-small"
:class="{ 'has-text-grey-light': !output.selected }"
@click="toggle"
>
<mdicon class="icon" :name="icon" :title="output.type" />
</a>
</button>
</div>
<div class="media-content">
<div

4
web-src/src/components/ControlStreamVolume.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="media is-align-items-center mb-0">
<div class="media-left">
<a
<button
class="button is-small"
:class="{
'has-text-grey-light': !playing && !loading,
@ -10,7 +10,7 @@
@click="togglePlay"
>
<mdicon class="icon" name="broadcast" />
</a>
</button>
</div>
<div class="media-content is-align-items-center">
<div class="is-flex" :class="{ 'has-text-grey-light': !playing }">

10
web-src/src/components/ModalDialogPlayable.vue
View File

@ -4,12 +4,11 @@
<list-properties :item="item">
<template v-if="buttons.length" #buttons>
<div class="buttons">
<a
<control-button
v-for="button in buttons"
:key="button.label"
class="button is-small is-rounded"
@click="button.handler"
v-text="$t(button.label)"
:handler="button.handler"
label="button.label"
/>
</div>
</template>
@ -19,13 +18,14 @@
</template>
<script>
import ControlButton from '@/components/ControlButton.vue'
import ListProperties from '@/components/ListProperties.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogPlayable',
components: { ListProperties, ModalDialog },
components: { ControlButton, ListProperties, ModalDialog },
props: {
buttons: { default: () => [], type: Array },
item: { required: true, type: Object },

22
web-src/src/pages/PageAbout.vue
View File

@ -11,19 +11,13 @@
</div>
</div>
<div class="level-right">
<div v-if="libraryStore.updating">
<a
class="button is-small is-rounded is-loading"
v-text="$t('page.about.update')"
/>
</div>
<div v-else>
<a
class="button is-small is-rounded"
@click="showUpdateDialog()"
v-text="$t('page.about.update')"
/>
</div>
<control-button
:class="{ 'is-loading': libraryStore.updating }"
:disabled="libraryStore.updating"
:handler="showUpdateDialog"
icon="refresh"
label="page.about.update"
/>
</div>
</nav>
<div
@ -105,12 +99,14 @@
</template>
<script>
import ControlButton from '@/components/ControlButton.vue'
import { useConfigurationStore } from '@/stores/configuration'
import { useLibraryStore } from '@/stores/library'
import { useUIStore } from '@/stores/ui'
export default {
name: 'PageAbout',
components: { ControlButton },
setup() {
return {
configurationStore: useConfigurationStore(),

30
web-src/src/pages/PageAlbum.vue
View File

@ -11,16 +11,12 @@
v-text="$t('count.tracks', { count: album.track_count })"
/>
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.album.shuffle')" />
</a>
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<control-button
:handler="play"
icon="shuffle"
label="page.album.shuffle"
/>
<control-button :handler="showDetails" icon="dots-horizontal" />
</div>
</template>
<template #heading-right>
@ -29,7 +25,7 @@
:artist="album.artist"
:album="album.name"
class="is-clickable is-medium"
@click="show_details_modal = true"
@click="showDetails"
/>
</template>
<template #content>
@ -46,6 +42,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListTracks from '@/components/ListTracks.vue'
@ -74,7 +71,13 @@ const dataObject = {
export default {
name: 'PageAlbum',
components: { ContentWithHero, ControlImage, ListTracks, ModalDialogAlbum },
components: {
ContentWithHero,
ControlButton,
ControlImage,
ListTracks,
ModalDialogAlbum
},
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
next((vm) => dataObject.set(vm, response))
@ -97,6 +100,9 @@ export default {
},
play() {
webapi.player_play_uri(this.album.uri, true)
},
showDetails() {
this.show_details_modal = true
}
}
}

23
web-src/src/pages/PageAlbumSpotify.vue
View File

@ -11,16 +11,12 @@
v-text="$t('count.tracks', { count: album.tracks.total })"
/>
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.spotify.album.shuffle')" />
</a>
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<control-button
:handler="play"
icon="shuffle"
label="page.spotify.album.shuffle"
/>
<control-button :handler="showDetails" icon="dots-horizontal" />
</div>
</template>
<template #heading-right>
@ -29,7 +25,7 @@
:artist="album.artists[0].name"
:album="album.name"
class="is-clickable is-medium"
@click="show_details_modal = true"
@click="showDetails"
/>
</template>
<template #content>
@ -46,6 +42,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlImage from '@/components/ControlImage.vue'
import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
@ -70,6 +67,7 @@ export default {
name: 'PageAlbumSpotify',
components: {
ContentWithHero,
ControlButton,
ControlImage,
ListTracksSpotify,
ModalDialogAlbumSpotify
@ -107,6 +105,9 @@ export default {
play() {
this.show_details_modal = false
webapi.player_play_uri(this.album.uri, true)
},
showDetails() {
this.show_details_modal = true
}
}
}

21
web-src/src/pages/PageArtist.vue
View File

@ -45,16 +45,12 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.artist.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:handler="play"
icon="shuffle"
label="page.artist.shuffle"
/>
</div>
</template>
<template #content>
@ -71,6 +67,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import ControlSwitch from '@/components/ControlSwitch.vue'
import { GroupedList } from '@/lib/GroupedList'
@ -98,6 +95,7 @@ export default {
name: 'PageArtist',
components: {
ContentWithHeading,
ControlButton,
ControlDropdown,
ControlSwitch,
ListAlbums,
@ -168,6 +166,9 @@ export default {
this.albums.items.map((item) => item.uri).join(),
true
)
},
showDetails() {
this.show_details_modal = true
}
}
}

21
web-src/src/pages/PageArtistSpotify.vue
View File

@ -10,16 +10,12 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.spotify.artist.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:handler="play"
icon="shuffle"
label="page.spotify.artist.shuffle"
/>
</div>
</template>
<template #content>
@ -51,6 +47,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
@ -88,6 +85,7 @@ export default {
name: 'PageArtistSpotify',
components: {
ContentWithHeading,
ControlButton,
ListAlbumsSpotify,
ModalDialogArtistSpotify,
VueEternalLoading
@ -136,6 +134,9 @@ export default {
play() {
this.show_album_details_modal = false
webapi.player_play_uri(this.artist.uri, true)
},
showDetails() {
this.show_details_modal = true
}
}
}

21
web-src/src/pages/PageArtistTracks.vue
View File

@ -46,16 +46,12 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.artist.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:handler="play"
icon="shuffle"
label="page.artist.shuffle"
/>
</div>
</template>
<template #content>
@ -72,6 +68,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import ControlSwitch from '@/components/ControlSwitch.vue'
import { GroupedList } from '@/lib/GroupedList'
@ -100,6 +97,7 @@ export default {
name: 'PageArtistTracks',
components: {
ContentWithHeading,
ControlButton,
ControlDropdown,
ControlSwitch,
IndexButtonList,
@ -178,6 +176,9 @@ export default {
this.tracks_list.items.map((item) => item.uri).join(),
true
)
},
showDetails() {
this.show_details_modal = true
}
}
}

30
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -11,16 +11,12 @@
v-text="$t('count.tracks', { count: album.track_count })"
/>
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.audiobooks.album.play')" />
</a>
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<control-button
:handler="play"
icon="play"
label="page.audiobooks.album.play"
/>
<control-button :handler="showDetails" icon="dots-horizontal" />
</div>
</template>
<template #heading-right>
@ -29,7 +25,7 @@
:artist="album.artist"
:album="album.name"
class="is-clickable is-medium"
@click="show_details_modal = true"
@click="showDetails"
/>
</template>
<template #content>
@ -47,6 +43,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListTracks from '@/components/ListTracks.vue'
@ -69,7 +66,13 @@ const dataObject = {
export default {
name: 'PageAudiobooksAlbum',
components: { ContentWithHero, ControlImage, ListTracks, ModalDialogAlbum },
components: {
ContentWithHero,
ControlButton,
ControlImage,
ListTracks,
ModalDialogAlbum
},
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
next((vm) => dataObject.set(vm, response))
@ -92,6 +95,9 @@ export default {
},
play() {
webapi.player_play_uri(this.album.uri, false)
},
showDetails() {
this.show_details_modal = true
}
}
}

28
web-src/src/pages/PageAudiobooksArtist.vue
View File

@ -10,16 +10,13 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.audiobooks.artist.play')" />
</a>
<control-button :handle="showDetails" icon="dots-horizontal" />
<control-button
:handle="play"
icon="play"
label="page.audiobooks.artist.play"
/>
/>
</div>
</template>
<template #content>
@ -36,6 +33,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListAlbums from '@/components/ListAlbums.vue'
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
@ -56,7 +54,12 @@ const dataObject = {
export default {
name: 'PageAudiobooksArtist',
components: { ContentWithHeading, ListAlbums, ModalDialogArtist },
components: {
ContentWithHeading,
ControlButton,
ListAlbums,
ModalDialogArtist
},
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
next((vm) => dataObject.set(vm, response))
@ -75,6 +78,9 @@ export default {
this.albums.items.map((item) => item.uri).join(),
false
)
},
showDetails() {
this.show_details_modal = true
}
}
}

21
web-src/src/pages/PageComposerAlbums.vue
View File

@ -14,16 +14,12 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.composer.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:handler="play"
icon="shuffle"
label="page.composer.shuffle"
/>
</div>
</template>
<template #content>
@ -40,6 +36,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListAlbums from '@/components/ListAlbums.vue'
import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
@ -63,6 +60,7 @@ export default {
name: 'PageComposerAlbums',
components: {
ContentWithHeading,
ControlButton,
ListAlbums,
ModalDialogComposer
},
@ -92,6 +90,9 @@ export default {
},
play() {
webapi.player_play_expression(this.expression, true)
},
showDetails() {
this.show_details_modal = true
}
}
}

21
web-src/src/pages/PageComposerTracks.vue
View File

@ -29,16 +29,12 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.composer.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:handler="play"
icon="shuffle"
label="page.composer.shuffle"
/>
</div>
</template>
<template #content>
@ -55,6 +51,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import { GroupedList } from '@/lib/GroupedList'
import IndexButtonList from '@/components/IndexButtonList.vue'
@ -81,6 +78,7 @@ export default {
name: 'PageComposerTracks',
components: {
ContentWithHeading,
ControlButton,
ControlDropdown,
IndexButtonList,
ListTracks,
@ -136,6 +134,9 @@ export default {
},
play() {
webapi.player_play_expression(this.expression, true)
},
showDetails() {
this.show_details_modal = true
}
}
}

17
web-src/src/pages/PageFiles.vue
View File

@ -6,16 +6,8 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.files.play')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button :handler="play" icon="play" label="page.files.play" />
</div>
</template>
<template #content>
@ -38,6 +30,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListDirectories from '@/components/ListDirectories.vue'
import ListPlaylists from '@/components/ListPlaylists.vue'
@ -78,6 +71,7 @@ export default {
name: 'PageFiles',
components: {
ContentWithHeading,
ControlButton,
ListDirectories,
ListPlaylists,
ListTracks,
@ -125,6 +119,9 @@ export default {
play() {
webapi.player_play_expression(this.expression, false)
},
showDetails() {
this.show_details_modal = true
},
transform(path) {
return { name: path.slice(path.lastIndexOf('/') + 1), path }
}

21
web-src/src/pages/PageGenreAlbums.vue
View File

@ -17,16 +17,12 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.genre.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:handler="play"
icon="shuffle"
label="page.genre.shuffle"
/>
</div>
</template>
<template #content>
@ -44,6 +40,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import IndexButtonList from '@/components/IndexButtonList.vue'
import ListAlbums from '@/components/ListAlbums.vue'
@ -69,6 +66,7 @@ export default {
name: 'PageGenreAlbums',
components: {
ContentWithHeading,
ControlButton,
IndexButtonList,
ListAlbums,
ModalDialogGenre
@ -100,6 +98,9 @@ export default {
`genre is "${this.genre.name}" and media_kind is ${this.media_kind}`,
true
)
},
showDetails() {
this.show_details_modal = true
}
}
}

21
web-src/src/pages/PageGenreTracks.vue
View File

@ -29,16 +29,12 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.genre.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:handler="play"
icon="shuffle"
label="page.genre.shuffle"
/>
</div>
</template>
<template #content>
@ -56,6 +52,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import { GroupedList } from '@/lib/GroupedList'
import IndexButtonList from '@/components/IndexButtonList.vue'
@ -82,6 +79,7 @@ export default {
name: 'PageGenreTracks',
components: {
ContentWithHeading,
ControlButton,
ControlDropdown,
IndexButtonList,
ListTracks,
@ -140,6 +138,9 @@ export default {
},
play() {
webapi.player_play_expression(this.expression, true)
},
showDetails() {
this.show_details_modal = true
}
}
}

28
web-src/src/pages/PagePlaylistTracks.vue
View File

@ -10,16 +10,13 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.playlist.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:disabled="tracks.count === 0"
:handler="play"
icon="shuffle"
label="page.playlist.shuffle"
/>
</div>
</template>
<template #content>
@ -37,6 +34,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
@ -58,7 +56,12 @@ const dataObject = {
export default {
name: 'PagePlaylistTracks',
components: { ContentWithHeading, ListTracks, ModalDialogPlaylist },
components: {
ContentWithHeading,
ControlButton,
ListTracks,
ModalDialogPlaylist
},
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
@ -86,6 +89,9 @@ export default {
methods: {
play() {
webapi.player_play_uri(this.uris, true)
},
showDetails() {
this.show_details_modal = true
}
}
}

22
web-src/src/pages/PagePlaylistTracksSpotify.vue
View File

@ -10,16 +10,13 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
class="button is-small is-rounded"
@click="show_playlist_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.spotify.playlist.shuffle')" />
</a>
<control-button :handler="showDetails" icon="dots-horizontal" />
<control-button
:disabled="playlist.tracks.total === 0"
:handler="play"
icon="shuffle"
label="page.spotify.playlist.shuffle"
/>
</div>
</template>
<template #content>
@ -48,6 +45,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
@ -84,6 +82,7 @@ export default {
name: 'PagePlaylistTracksSpotify',
components: {
ContentWithHeading,
ControlButton,
ListTracksSpotify,
ModalDialogPlaylistSpotify,
VueEternalLoading
@ -145,6 +144,9 @@ export default {
play() {
this.show_details_modal = false
webapi.player_play_uri(this.playlist.uri, true)
},
showDetails() {
this.show_playlist_details_modal = true
}
}
}

23
web-src/src/pages/PagePodcast.vue
View File

@ -11,16 +11,12 @@
v-text="$t('count.tracks', { count: album.track_count })"
/>
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.podcast.play')" />
</a>
<a
class="button is-small is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<control-button
:handler="play"
icon="play"
label="page.podcast.play"
/>
<control-button :handler="showDetails" icon="dots-horizontal" />
</div>
</template>
<template #heading-right>
@ -29,7 +25,7 @@
:artist="album.artist"
:album="album.name"
class="is-clickable is-medium"
@click="show_details_modal = true"
@click="showDetails"
/>
</template>
<template #content>
@ -71,6 +67,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListTracks from '@/components/ListTracks.vue'
@ -96,6 +93,7 @@ export default {
name: 'PagePodcast',
components: {
ContentWithHero,
ControlButton,
ControlImage,
ListTracks,
ModalDialog,
@ -160,6 +158,9 @@ export default {
.then(() => {
this.$router.replace({ name: 'podcasts' })
})
},
showDetails() {
this.show_details_modal = true
}
}
}

35
web-src/src/pages/PagePodcasts.vue
View File

@ -6,10 +6,11 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a class="button is-small is-rounded" @click="mark_all_played">
<mdicon class="icon" name="pencil" size="16" />
<span v-text="$t('page.podcasts.mark-all-played')" />
</a>
<control-button
:handler="mark_all_played"
icon="pencil"
label="page.podcasts.mark-all-played"
/>
</div>
</template>
<template #content>
@ -30,21 +31,17 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<a
<control-button
v-if="rss.tracks > 0"
class="button is-small is-rounded"
@click="update_rss"
>
<mdicon class="icon" name="refresh" size="16" />
<span v-text="$t('page.podcasts.update')" />
</a>
<a
class="button is-small is-rounded"
@click="open_add_podcast_dialog"
>
<mdicon class="icon" name="rss" size="16" />
<span v-text="$t('page.podcasts.add')" />
</a>
:handler="update_rss"
icon="refresh"
label="page.podcasts.update"
/>
<control-button
:handler="open_add_podcast_dialog"
icon="rss"
label="page.podcasts.add"
/>
</div>
</template>
<template #content>
@ -65,6 +62,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListAlbums from '@/components/ListAlbums.vue'
import ListTracks from '@/components/ListTracks.vue'
@ -91,6 +89,7 @@ export default {
name: 'PagePodcasts',
components: {
ContentWithHeading,
ControlButton,
ListAlbums,
ListTracks,
ModalDialogAddRss

65
web-src/src/pages/PageQueue.vue
View File

@ -10,47 +10,37 @@
</template>
<template #heading-right>
<div class="buttons is-centered">
<button
class="button is-small is-rounded"
<control-button
:handler="update_show_next_items"
:class="{ 'is-dark': show_only_next_items }"
@click="update_show_next_items"
>
<mdicon class="icon" name="eye-off-outline" size="16" />
<span v-text="$t('page.queue.hide-previous')" />
</button>
<button
class="button is-small is-rounded"
@click="open_add_stream_dialog"
>
<mdicon class="icon" name="web" size="16" />
<span v-text="$t('page.queue.add-stream')" />
</button>
<button
class="button is-small is-rounded"
icon="eye-off-outline"
label="page.queue.hide-previous"
/>
<control-button
:handler="open_add_stream_dialog"
icon="web"
label="page.queue.add-stream"
/>
<control-button
:class="{ 'is-dark': edit_mode }"
:disabled="queue_items.length === 0"
@click="edit_mode = !edit_mode"
>
<mdicon class="icon" name="pencil" size="16" />
<span v-text="$t('page.queue.edit')" />
</button>
<button
class="button is-small is-rounded"
:handler="toggleEdit"
icon="pencil"
label="page.queue.edit"
/>
<control-button
:disabled="queue_items.length === 0"
@click="queue_clear"
>
<mdicon class="icon" name="delete-empty" size="16" />
<span v-text="$t('page.queue.clear')" />
</button>
<button
:handler="queue_clear"
icon="delete-empty"
label="page.queue.clear"
/>
<control-button
v-if="is_queue_save_allowed"
class="button is-small is-rounded"
:disabled="queue_items.length === 0"
@click="save_dialog"
>
<mdicon class="icon" name="download" size="16" />
<span v-text="$t('page.queue.save')" />
</button>
:handler="save_dialog"
icon="download"
label="page.queue.save"
/>
</div>
</template>
<template #content>
@ -102,6 +92,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ListItemQueueItem from '@/components/ListItemQueueItem.vue'
import ModalDialogAddStream from '@/components/ModalDialogAddStream.vue'
import ModalDialogPlaylistSave from '@/components/ModalDialogPlaylistSave.vue'
@ -117,6 +108,7 @@ export default {
name: 'PageQueue',
components: {
ContentWithHeading,
ControlButton,
ListItemQueueItem,
ModalDialogAddStream,
ModalDialogPlaylistSave,
@ -200,6 +192,9 @@ export default {
this.show_pls_save_modal = true
}
},
toggleEdit() {
this.edit_mode = !this.edit_mode
},
update_show_next_items() {
this.uiStore.show_only_next_items = !this.uiStore.show_only_next_items
}