Added spotify player

src/App.vue

@@ -9,12 +9,9 @@
 
     <div id="footer">
       <footer-nav/>
-      <div id="player-spacer" v-if="$store.state.playerActive"></div>
     </div>
 
-    <div id="player-holder" v-if="$store.state.playerActive">
+    <spotify-player/>
-      asdasdasdasdasd
-    </div>
 
   </div>
   <div id="app-loader" v-else>
@@ -26,13 +23,15 @@
 import FooterNav from "@/components/FooterNav";
 import Navbar from "@/components/Navbar";
 import BigChungusLoader from "@/components/BigChungusLoader";
+import SpotifyPlayer from "@/components/SpotifyPlayer";
 
 export default {
   name: "Login",
   components: {
     Navbar,
     FooterNav,
-    BigChungusLoader
+    BigChungusLoader,
+    SpotifyPlayer
   },
   created() {
     // The basic app is created... Currently showing a loading screen (as soon as mounted)
@@ -98,15 +97,8 @@ export default {
   margin: 45vh auto 0 auto;
 }
 
-#player-holder {
+#player-spacer {
-  position: fixed;
+  height: 80px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 60px;
 }
 
-#player-spacer {
-  height: 60px;
-}
 </style>

src/components/SpotifyPlayer.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div id="player-spacer" v-if="$store.state.playerActive"></div>
+    <div id="player-holder" v-if="$store.state.playerActive">
+      <b-button variant="danger" id="player-close-btn" size="sm" squared @click="closePlayer">×</b-button>
+      <iframe :src="$store.state.playerUrl" width="100%" height="80px" frameborder="0" allowtransparency="true"
+              allow="encrypted-media"></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SpotifyPlayer",
+  methods: {
+    closePlayer() {
+      this.$store.dispatch('closePlayer');
+    }
+  }
+}
+</script>
+
+<style scoped>
+#player-holder {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 80px;
+  background-color: black;
+}
+
+#player-close-btn {
+  top: -22.97px;
+  right: 0;
+  position: absolute;
+  padding: 0 6px;
+}
+
+</style>

src/store/index.js

@@ -9,7 +9,8 @@ export default new Vuex.Store({
             name: null
         },
         appReady: false,
-        playerActive: false
+        playerActive: false,
+        playerUrl: ""
     },
     mutations: {
         storeUserData(state, username) {
@@ -17,8 +18,15 @@ export default new Vuex.Store({
         },
         setAppReady(state) {
             state.appReady = true;
+        },
+        openPlayer(state, spotify_id) {
+            const id_parts = spotify_id.split(":");
+            state.playerUrl = `https://open.spotify.com/embed/${id_parts[1]}/${id_parts[2]}`;
+            state.playerActive = true;
+        },
+        closePlayer(state) {
+            state.playerActive = false;
         }
-
     },
     actions: {
         storeUserData({commit}, username) {
@@ -26,6 +34,12 @@ export default new Vuex.Store({
         },
         setAppReady({commit}) {
             commit('setAppReady');
+        },
+        openPlayer({commit}, spotify_id) {
+            commit('openPlayer', spotify_id);
+        },
+        closePlayer({commit}) {
+            commit('closePlayer');
         }
     },
     modules: {},

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>