From 60015e1da2d9d87bcf8fe10174543c9d9c621c03 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 26 Jul 2023 16:12:21 +0200
Subject: [PATCH] [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.
---
 web-src/src/components/ProgressBar.vue |  2 +-
 web-src/src/mystyles.scss              |  4 +-
 web-src/src/pages/PageAlbum.vue        | 15 +++---
 web-src/src/pages/PagePodcast.vue      | 63 ++++++++++++++------------
 4 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/web-src/src/components/ProgressBar.vue b/web-src/src/components/ProgressBar.vue
index 9d2512ab..2060ffe2 100644
--- a/web-src/src/components/ProgressBar.vue
+++ b/web-src/src/components/ProgressBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="width > 0"
-    class="progress-bar mt-2"
+    class="progress-bar"
     :style="{ width: width_percent }"
   />
 </template>
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 533bc230..3d559e19 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -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 {
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 1f5ebc96..41f00961 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -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)
     }
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index cb8fb452..17e20078 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -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)
-      })
     }
   }
 }