diff --git a/src/App.vue b/src/App.vue
index 6821c36..d5da5b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,12 +9,9 @@
-
@@ -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 {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- height: 60px;
+#player-spacer {
+ height: 80px;
}
-#player-spacer {
- height: 60px;
-}
diff --git a/src/components/SpotifyPlayer.vue b/src/components/SpotifyPlayer.vue
new file mode 100644
index 0000000..22e3c4f
--- /dev/null
+++ b/src/components/SpotifyPlayer.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 399332b..3c72a15 100644
--- a/src/store/index.js
+++ b/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: {},
diff --git a/src/views/Collection.vue b/src/views/Collection.vue
index a2f8501..4393c5b 100644
--- a/src/views/Collection.vue
+++ b/src/views/Collection.vue
@@ -9,7 +9,8 @@
-
+
@@ -18,7 +19,9 @@
- Play
+
+ Play
+
@@ -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() {
diff --git a/src/views/Item.vue b/src/views/Item.vue
index d4e7c2b..189ea6d 100644
--- a/src/views/Item.vue
+++ b/src/views/Item.vue
@@ -16,11 +16,15 @@
Artist: {{ songInfo.artist }}
+
Album: {{ songInfo.album }}
+
Title: {{ songInfo.title }}