Added spotify player

src/views/Item.vue

@@ -16,11 +16,15 @@
         </div>
         <div class="my-3">
           <p><b>Artist:</b> {{ songInfo.artist }} </p>
+          <hr class="info-separator">
           <p><b>Album:</b> {{ songInfo.album }}</p>
+          <hr class="info-separator">
           <p><b>Title:</b> {{ songInfo.title }}</p>
         </div>
         <div class="my-3">
-          <b-button variant="success" :disabled="!songInfo.spotify_id">Play!</b-button>
+          <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">Play!</b-button>
+
         </div>
       </b-col>
     </b-row>
@@ -52,6 +56,21 @@ export default {
     }).catch(({text}) => {
       this.$showToast(text);
     });
+  },
+  methods: {
+    startPlayer() {
+      this.$store.dispatch('openPlayer', this.songInfo.spotify_id);
+    }
+  },
+  computed: {
+    spotifyLink() {
+      if (this.songInfo.spotify_id) {
+        const id_parts = this.songInfo.spotify_id.split(":");
+        return `https://open.spotify.com/${id_parts[1]}/${id_parts[2]}`;
+      } else {
+        return "";
+      }
+    }
   }
 }
 </script>
@@ -61,4 +80,9 @@ export default {
   max-width: 100%;
   width: 25vh;
 }
+
+hr.info-separator {
+  width: 30vh;
+  margin-left: 0;
+}
 </style>