MyFavMirrors
/
owntone-server
mirror of https://github.com/owntone/owntone-server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] Provide similar style between podcast, audiobook, and album pages 

The podcast page is now similar to the audiobook or album pages. Thus, making the UI a bit more coherent.
This commit is contained in:
Alain Nussbaumer 2023-07-26 16:12:21 +02:00
parent c20c80b757
commit 60015e1da2
4 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web-src/src/components/ProgressBar.vue
View File

@ -1,7 +1,7 @@
<template>
<div
v-if="width > 0"
class="progress-bar mt-2"
class="progress-bar"
:style="{ width: width_percent }"
/>
</template>

4
web-src/src/mystyles.scss
View File

@ -5,7 +5,7 @@
.progress-bar {
background-color: $info;
border-radius: 9999px;
border-radius: 2px;
height: 4px;
}
@ -14,7 +14,7 @@
}
.media.with-progress {
margin-top: 0px;
margin-top: 6px;
}
a.navbar-item {

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

@ -13,7 +13,7 @@
</a>
<a
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
@ -25,7 +25,7 @@
:artist="album.artist"
:album="album.name"
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
@click="show_album_details_modal = true"
@click="show_details_modal = true"
/>
</template>
<template #content>
@ -35,9 +35,9 @@
/>
<list-tracks :tracks="tracks" :uris="album.uri" />
<modal-dialog-album
:show="show_album_details_modal"
:show="show_details_modal"
:album="album"
@close="show_album_details_modal = false"
@close="show_details_modal = false"
/>
</template>
</content-with-hero>
@ -68,7 +68,7 @@ const dataObject = {
export default {
name: 'PageAlbum',
components: { ContentWithHero, ListTracks, ModalDialogAlbum, CoverArtwork },
components: { ContentWithHero, CoverArtwork, ListTracks, ModalDialogAlbum },
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
@ -86,8 +86,8 @@ export default {
data() {
return {
album: {},
tracks: new GroupByList(),
show_album_details_modal: false
show_details_modal: false,
tracks: new GroupByList()
}
},
@ -99,7 +99,6 @@ export default {
params: { id: this.album.artist_id }
})
},
play() {
webapi.player_play_uri(this.album.uri, true)
}

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

@ -1,26 +1,34 @@
<template>
<div class="fd-page">
<content-with-heading>
<content-with-hero>
<template #heading-left>
<div class="title is-4" v-text="album.name" />
</template>
<template #heading-right>
<div class="buttons is-centered">
<h1 class="title is-5" v-text="album.name" />
<h2 class="subtitle is-6 has-text-weight-normal">&nbsp;</h2>
<div class="buttons fd-is-centered-mobile mt-5">
<a class="button is-small is-dark 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-light is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.podcast.play')" />
</a>
</div>
</template>
<template #heading-right>
<cover-artwork
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
@click="show_details_modal = true"
/>
</template>
<template #content>
<p
class="heading has-text-centered-mobile"
class="heading is-7 has-text-centered-mobile mt-5"
v-text="$t('page.podcast.track-count', { count: album.track_count })"
/>
<list-tracks
@ -53,12 +61,13 @@
</template>
</modal-dialog>
</template>
</content-with-heading>
</content-with-hero>
</div>
</template>
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ContentWithHero from '@/templates/ContentWithHero.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import { GroupByList } from '@/lib/GroupByList'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialog from '@/components/ModalDialog.vue'
@ -82,7 +91,8 @@ const dataObject = {
export default {
name: 'PagePodcast',
components: {
ContentWithHeading,
ContentWithHero,
CoverArtwork,
ListTracks,
ModalDialog,
ModalDialogAlbum
@ -104,10 +114,10 @@ export default {
data() {
return {
album: {},
tracks: new GroupByList(),
rss_playlist_to_remove: {},
show_details_modal: false,
show_remove_podcast_modal: false,
rss_playlist_to_remove: {}
tracks: new GroupByList()
}
},
@ -118,22 +128,25 @@ export default {
},
methods: {
play() {
webapi.player_play_uri(this.album.uri, false)
},
open_remove_podcast_dialog() {
webapi
.library_track_playlists(this.tracks.items[0].id)
.then(({ data }) => {
this.rss_playlist_to_remove = data.items.filter(
;[this.rss_playlist_to_remove] = data.items.filter(
(pl) => pl.type === 'rss'
)[0]
)
this.show_remove_podcast_modal = true
this.show_details_modal = false
})
},
play() {
webapi.player_play_uri(this.album.uri, false)
},
reload_tracks() {
webapi.library_podcast_episodes(this.album.id).then(({ data }) => {
this.tracks = new GroupByList(data.tracks)
})
},
remove_podcast() {
this.show_remove_podcast_modal = false
webapi
@ -141,12 +154,6 @@ export default {
.then(() => {
this.$router.replace({ name: 'podcasts' })
})
},
reload_tracks() {
webapi.library_podcast_episodes(this.album.id).then(({ data }) => {
this.tracks = new GroupByList(data.tracks)
})
}
}
}