Added spotify player

src/views/Collection.vue

@@ -9,7 +9,8 @@
     <b-row v-else>
       <b-col class="my-4">
 
-        <b-table :items="tracklist" :fields="fields" hover borderless @row-clicked="rowClicked" tbody-tr-class="clickable-table-row-thing">
+        <b-table :items="tracklist" :fields="fields" hover borderless @row-clicked="rowClicked"
+                 tbody-tr-class="clickable-table-row-thing">
           <template #cell(cover_url)="data">
             <b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
                         v-if="!!data.item.cover_url_small"/>
@@ -18,7 +19,9 @@
 
           <template #cell(id)="data">
             <div class="text-right">
-              <b-button variant="success" :disabled="!data.item.spotify_id">Play</b-button>
+              <b-button variant="success" :disabled="!data.item.spotify_id" @click="startPlayer(data.item.spotify_id)">
+                Play
+              </b-button>
             </div>
           </template>
         </b-table>
@@ -60,6 +63,9 @@ export default {
   methods: {
     rowClicked(data) {
       this.$router.push({name: 'Item', params: {id: data.id}});
+    },
+    startPlayer(spotify_id) {
+      this.$store.dispatch('openPlayer', spotify_id);
     }
   },
   mounted() {

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>