From eca8f40afc1bd2db72a7f0e1c978c9c930e7e6ce Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 15 Feb 2025 22:55:01 +0100
Subject: [PATCH] [web] Renaming image control

---
 .../{CoverArtwork.vue => ControlImage.vue}    | 22 ++++--------------
 web-src/src/components/ListAlbums.vue         |  6 ++---
 web-src/src/components/ListAlbumsSpotify.vue  |  6 ++---
 web-src/src/components/ListProperties.vue     |  6 ++---
 web-src/src/mystyles.scss                     | 11 ---------
 web-src/src/pages/PageAlbum.vue               |  9 +++-----
 web-src/src/pages/PageAlbumSpotify.vue        |  6 ++---
 web-src/src/pages/PageAudiobooksAlbum.vue     |  9 +++-----
 web-src/src/pages/PageNowPlaying.vue          | 13 +++--------
 web-src/src/pages/PagePodcast.vue             |  6 ++---
 web-src/src/templates/ContentWithHero.vue     | 23 ++++++++++++++++++-
 11 files changed, 51 insertions(+), 66 deletions(-)
 rename web-src/src/components/{CoverArtwork.vue => ControlImage.vue} (84%)

diff --git a/web-src/src/components/CoverArtwork.vue b/web-src/src/components/ControlImage.vue
similarity index 84%
rename from web-src/src/components/CoverArtwork.vue
rename to web-src/src/components/ControlImage.vue
index 45e83fd7..c9cc2073 100644
--- a/web-src/src/components/CoverArtwork.vue
+++ b/web-src/src/components/ControlImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <figure class="cover has-shadow">
+  <figure class="figure has-shadow">
     <img v-lazy="{ src: url, lifecycle }" @click="$emit('click')" />
   </figure>
 </template>
@@ -8,14 +8,13 @@
 import { renderSVG } from '@/lib/SVGRenderer'
 
 export default {
-  name: 'CoverArtwork',
+  name: 'ControlImage',
   props: {
     album: { default: '', type: String },
     artist: { default: '', type: String },
     url: { default: '', type: String }
   },
   emits: ['click'],
-
   data() {
     return {
       font: { family: 'sans-serif', weight: 'bold' },
@@ -27,22 +26,11 @@ export default {
       size: 600
     }
   },
-
-  computed: {
-    alt_text() {
-      return `${this.artist} - ${this.album}`
-    },
-
-    caption() {
-      return (this.album || this.artist || '').substring(0, 2)
-    }
-  },
-
   methods: {
     dataURI() {
       return renderSVG({
-        alternate: this.alt_text,
-        caption: this.caption,
+        alternate: `${this.artist} - ${this.album}`,
+        caption: (this.album || this.artist || '').substring(0, 2),
         font: this.font,
         size: this.size
       })
@@ -54,7 +42,7 @@ export default {
 <style lang="scss" scoped>
 @use 'bulma/sass/utilities/mixins';
 
-.cover {
+.figure {
   align-items: center;
   display: flex;
   justify-content: center;
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 4f446b27..256b279b 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -12,7 +12,7 @@
       class="media is-align-items-center is-clickable mb-0"
       @click="open(item.item)"
     >
-      <cover-artwork
+      <control-image
         v-if="settingsStore.show_cover_artwork_in_album_lists"
         :url="item.item.artwork_url"
         :artist="item.item.artist"
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import ControlImage from '@/components/ControlImage.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import { useSettingsStore } from '@/stores/settings'
@@ -77,7 +77,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ListAlbums',
-  components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
+  components: { ControlImage, ModalDialog, ModalDialogAlbum },
   props: {
     items: { required: true, type: Object },
     media_kind: { default: '', type: String }
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index 45789e67..c19f4d3b 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -4,7 +4,7 @@
       class="media is-align-items-center is-clickable mb-0"
       @click="open(item)"
     >
-      <cover-artwork
+      <control-image
         v-if="settingsStore.show_cover_artwork_in_album_lists"
         :url="item.images?.[0]?.url ?? ''"
         :artist="item.artist"
@@ -39,13 +39,13 @@
 </template>
 
 <script>
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import ControlImage from '@/components/ControlImage.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import { useSettingsStore } from '@/stores/settings'
 
 export default {
   name: 'ListAlbumsSpotify',
-  components: { CoverArtwork, ModalDialogAlbumSpotify },
+  components: { ControlImage, ModalDialogAlbumSpotify },
   props: { items: { required: true, type: Object } },
   setup() {
     return { settingsStore: useSettingsStore() }
diff --git a/web-src/src/components/ListProperties.vue b/web-src/src/components/ListProperties.vue
index ef0e17a7..804d5a2d 100644
--- a/web-src/src/components/ListProperties.vue
+++ b/web-src/src/components/ListProperties.vue
@@ -3,7 +3,7 @@
     <a v-if="item.handler" @click="item.handler" v-text="item.name"></a>
     <span v-else v-text="item.name" />
   </div>
-  <cover-artwork
+  <control-image
     v-if="item.image"
     :url="item.image"
     :artist="item.artist"
@@ -29,11 +29,11 @@
 </template>
 
 <script>
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import ControlImage from '@/components/ControlImage.vue'
 
 export default {
   name: 'ListProperties',
-  components: { CoverArtwork },
+  components: { ControlImage },
   props: {
     item: { required: true, type: Object }
   }
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index f56fbf78..aaae22e5 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -34,17 +34,6 @@
   }
 }
 
-.column {
-  &.has-cover {
-    @include mixins.mobile {
-      margin: auto;
-    }
-    @include mixins.tablet {
-      margin-right: 0;
-    }
-  }
-}
-
 .overlay-fullscreen {
   @extend .is-overlay;
   z-index: 25;
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index e949e979..da025b6a 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -20,7 +20,7 @@
         </div>
       </template>
       <template #heading-right>
-        <cover-artwork
+        <control-image
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
@@ -46,7 +46,7 @@
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import ControlImage from '@/components/ControlImage.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
@@ -74,14 +74,12 @@ const dataObject = {
 
 export default {
   name: 'PageAlbum',
-  components: { ContentWithHero, CoverArtwork, ListTracks, ModalDialogAlbum },
-
+  components: { ContentWithHero, ControlImage, ListTracks, ModalDialogAlbum },
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
       next((vm) => dataObject.set(vm, response))
     })
   },
-
   data() {
     return {
       album: {},
@@ -89,7 +87,6 @@ export default {
       tracks: new GroupedList()
     }
   },
-
   methods: {
     open_artist() {
       this.show_details_modal = false
diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index fa142144..7661f50d 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -20,7 +20,7 @@
         </div>
       </template>
       <template #heading-right>
-        <cover-artwork
+        <control-image
           :url="album.images?.[0]?.url ?? ''"
           :artist="album.artists[0].name"
           :album="album.name"
@@ -48,7 +48,7 @@
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import ControlImage from '@/components/ControlImage.vue'
 import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -72,7 +72,7 @@ export default {
   name: 'PageAlbumSpotify',
   components: {
     ContentWithHero,
-    CoverArtwork,
+    ControlImage,
     ListTracksSpotify,
     ModalDialogAlbumSpotify
   },
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index dfad4268..b89d4d18 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -20,7 +20,7 @@
         </div>
       </template>
       <template #heading-right>
-        <cover-artwork
+        <control-image
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
@@ -51,7 +51,7 @@
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import ControlImage from '@/components/ControlImage.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
@@ -73,14 +73,12 @@ const dataObject = {
 
 export default {
   name: 'PageAudiobooksAlbum',
-  components: { ContentWithHero, CoverArtwork, ListTracks, ModalDialogAlbum },
-
+  components: { ContentWithHero, ControlImage, ListTracks, ModalDialogAlbum },
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
       next((vm) => dataObject.set(vm, response))
     })
   },
-
   data() {
     return {
       album: {},
@@ -88,7 +86,6 @@ export default {
       tracks: new GroupedList()
     }
   },
-
   methods: {
     open_artist() {
       this.show_details_modal = false
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 0f0b9b75..268437a5 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -3,7 +3,7 @@
     <div class="hero-body is-flex is-align-items-center">
       <div class="container has-text-centered">
         <div v-if="track.id" class="mx-auto" style="max-width: 32rem">
-          <cover-artwork
+          <control-image
             :url="track.artwork_url"
             :artist="track.artist"
             :album="track.album"
@@ -54,8 +54,8 @@
 </template>
 
 <script>
+import ControlImage from '@/components/ControlImage.vue'
 import ControlSlider from '@/components/ControlSlider.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
 import LyricsPane from '@/components/LyricsPane.vue'
 import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
 import { useLyricsStore } from '@/stores/lyrics'
@@ -70,11 +70,10 @@ export default {
   name: 'PageNowPlaying',
   components: {
     ControlSlider,
-    CoverArtwork,
+    ControlImage,
     LyricsPane,
     ModalDialogQueueItem
   },
-
   setup() {
     return {
       lyricsStore: useLyricsStore(),
@@ -83,7 +82,6 @@ export default {
       settingsStore: useSettingsStore()
     }
   },
-
   data() {
     return {
       INTERVAL,
@@ -93,7 +91,6 @@ export default {
       show_details_modal: false
     }
   },
-
   computed: {
     composer() {
       if (this.settingsStore.show_composer_now_playing) {
@@ -140,7 +137,6 @@ export default {
         : this.$filters.durationInHours(this.track.length_ms)
     }
   },
-
   watch: {
     'playerStore.state'(newState) {
       if (this.interval_id > 0) {
@@ -152,7 +148,6 @@ export default {
       }
     }
   },
-
   created() {
     webapi.player_status().then(({ data }) => {
       this.playerStore.$state = data
@@ -161,14 +156,12 @@ export default {
       }
     })
   },
-
   unmounted() {
     if (this.interval_id > 0) {
       window.clearTimeout(this.interval_id)
       this.interval_id = 0
     }
   },
-
   methods: {
     end_dragging() {
       this.is_dragged = false
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index 03cd5f2b..1e096030 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -20,7 +20,7 @@
         </div>
       </template>
       <template #heading-right>
-        <cover-artwork
+        <control-image
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
@@ -71,7 +71,7 @@
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import ControlImage from '@/components/ControlImage.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
@@ -96,7 +96,7 @@ export default {
   name: 'PagePodcast',
   components: {
     ContentWithHero,
-    CoverArtwork,
+    ControlImage,
     ListTracks,
     ModalDialog,
     ModalDialogAlbum
diff --git a/web-src/src/templates/ContentWithHero.vue b/web-src/src/templates/ContentWithHero.vue
index 1f9fc4d9..a495d134 100644
--- a/web-src/src/templates/ContentWithHero.vue
+++ b/web-src/src/templates/ContentWithHero.vue
@@ -5,7 +5,7 @@
         <div class="columns is-centered">
           <div class="column is-four-fifths">
             <div class="columns is-flex-direction-row-reverse">
-              <div class="column has-cover">
+              <div class="column has-image">
                 <slot name="heading-right" />
               </div>
               <div
@@ -30,3 +30,24 @@
     </div>
   </section>
 </template>
+
+<script>
+export default {
+  name: 'ContentWithHero'
+}
+</script>
+
+<style lang="scss" scoped>
+@use 'bulma/sass/utilities/mixins';
+
+.column {
+  &.has-image {
+    @include mixins.mobile {
+      margin: auto;
+    }
+    @include mixins.tablet {
+      margin-right: 0;
+    }
+  }
+}
+</style>