From c321ee99c541e4c936b1c001af2cff581853dc7f Mon Sep 17 00:00:00 2001
From: marcsello <punkosdmarcell@rocketmail.com>
Date: Fri, 27 Nov 2020 00:13:29 +0100
Subject: [PATCH] added zoom for cover arts

---
 src/components/ExpandableImage.vue | 53 ++++++++++++++++++++++++++++++
 src/views/Item.vue                 | 18 ++++++----
 2 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ExpandableImage.vue

diff --git a/src/components/ExpandableImage.vue b/src/components/ExpandableImage.vue
new file mode 100644
index 0000000..78ace62
--- /dev/null
+++ b/src/components/ExpandableImage.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+
+    <b-modal id="expanded-image-holder" footerClass="border-0" centered :title="text" size="lg" v-model="expanded">
+      <template slot="modal-footer"><span/></template>
+      <div class="text-center">
+      <b-img-lazy blank-src="@/assets/music_placeholder.png"
+                  :src="src"
+                  id="the-image-itself-expanded"
+      />
+      </div>
+    </b-modal>
+
+    <div @click="expanded = true" id="image-holder">
+      <b-img-lazy blank-src="@/assets/music_placeholder.png"
+                  :src="src"
+                  id="the-image-itself"
+      />
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ExpandableImage",
+  props: {
+    src: String,
+    text: String
+  },
+  data() {
+    return {
+      expanded: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+#image-holder {
+  cursor: zoom-in;
+  width: inherit;
+}
+
+#image-holder img {
+  width: inherit;
+}
+
+#the-image-itself-expanded {
+  max-width: 100%;
+  max-height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Item.vue b/src/views/Item.vue
index 682de8a..0cea6e4 100644
--- a/src/views/Item.vue
+++ b/src/views/Item.vue
@@ -14,10 +14,7 @@
     <b-row v-else>
       <b-col class="my-4">
         <div>
-          <b-img-lazy blank-src="@/assets/music_placeholder.png"
-                      :src="songInfo.cover_url || '@/assets/music_placeholder.png'"
-                      id="cover-art"
-          />
+          <expandable-image :src="songInfo.cover_url" id="cover-art" :text="coverArtTitle"/>
         </div>
         <div class="my-3">
           <p><b>Artist:</b> {{ songInfo.artist }} </p>
@@ -28,7 +25,7 @@
         </div>
         <div class="my-3">
           <b-button :disabled="!songInfo.spotify_id" :href="spotifyLink" target="_blank">Open on Spotify!</b-button>&nbsp;
-          <b-button variant="success" :disabled="!songInfo.spotify_id" @click="startPlayer"><b-icon icon="play-fill"/>  Play!</b-button>
+          <b-button variant="success" :disabled="!songInfo.spotify_id" @click="startPlayer"><b-icon icon="play-fill"/>  Play</b-button>
 
         </div>
       </b-col>
@@ -38,11 +35,13 @@
 
 <script>
 import BigChungusLoader from "@/components/BigChungusLoader";
+import ExpandableImage from "@/components/ExpandableImage";
 
 export default {
   name: "Item",
   components: {
-    BigChungusLoader
+    BigChungusLoader,
+    ExpandableImage
   },
   data() {
     return {
@@ -75,6 +74,13 @@ export default {
       } else {
         return "";
       }
+    },
+    coverArtTitle() {
+      // TODO: do better
+      if (this.songInfo.artist && this.songInfo.album ) {
+        return this.songInfo.artist + ' - ' + this.songInfo.album;
+      }
+      return this.songInfo.album || this.songInfo.artist || this.songInfo.title;
     }
   },
   filters: {