[web] Renaming image control

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;

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 }

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() }

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 }
   }