Channel?

frontend/components/Player.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="conatiner">
-    <h1>Player</h1>
-    <div id="player"></div>
-  </div>
-</template>
-
-
-<script>
-export default {
-  data() {
-    return {
-      done: false,
-      player: undefined
-    }
-  },
-  beforeMount() {
-    this.loadYoutubeIframe()
-  },
-  watch: {
-    done: function(val) {
-      console.log('done changed to:', val)
-      if (val === true) {
-        this.player.playVideo();
-      }
-    }
-  },
-  methods: {
-    loadYoutubeIframe() {
-      // const tag = this.$refs.player;
-      const tag = document.createElement('script');
-      tag.src = 'https://www.youtube.com/iframe_api';
-      const firstScriptTag = document.getElementsByTagName('script')[0]
-      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-      const that = this;
-      // setTimeout(() => that.onYouTubeIframeAPIReady(), 2000);
-      window.onYouTubeIframeAPIReady = this.onYouTubeIframeAPIReady
-    },
-    onYouTubeIframeAPIReady() {
-      console.log('we are loaded and ready to fucking go!')
-      this.player = new YT.Player('player', {
-        videoId: 'SJOgTMP8cs4',
-        playerVars: {
-          rel: "0",
-          autoplay: 1,
-          wmode: "transparent",
-          controls: "0",
-          fs: "0",
-          iv_load_policy: "3",
-          theme: "light",
-          color: "white",
-          showinfo: 0
-        },
-        events: {
-          onReady: this.onPlayerReady,
-          onStateChange: this.onPlayerStateChange,
-          onError: this.errorHandler
-        }
-      });
-    },
-    onPlayerReady(event) {
-      console.log('event from onPlayerReady', event)
-      event.target.playVideo();
-    },
-    onPlayerStateChange(event) {
-      console.log('on player changed')
-      if (event.data === YT.PlayerState.PLAYING && !this.done) {
-        this.done = true
-      }
-    },
-    errorHandler(error) {
-      console.log('error handling youtube player. Error:', error)
-    }
-  }
-}
-</script>
-
-
-<style lang="scss">
-#player {
-  width: 100vw !important;
-  height: 60vh;
-}
-</style>
-
-<style lang="scss" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-}
-
-</style>

frontend/components/Styleguide.vue

@@ -27,4 +27,7 @@ export default {
 
 
 <style lang="scss" scoped>
+div {
+  background: #2d2d2d;
+}
 </style>

frontend/components/playlist/Playlist.vue

@@ -33,13 +33,14 @@
 </template>
 
 <script>
+import store from "@/store";
 import Song from "@/components/playlist/Song";
 import ContextMenu from "@/components/playlist/ContextMenu";
 
 export default {
   components: {
     Song,
-    ContextMenu
+    ContextMenu,
   },
   computed: {
     paginatedList: function() {
@@ -56,21 +57,9 @@ export default {
     },
     pages: function() {
       return Math.ceil(this.playlist.length / this.perPage);
-    }
-  },
-  async beforeMount() {
-    try {
-      const request = await fetch("https://zoff.me/api/list/summér", {
-        method: "POST"
-      });
-      const playlist = await request.json();
-      if (this.playlist.error == true) {
-        console.error(this.playlist.error);
-        return;
-      }
-      this.playlist = playlist.results;
-    } catch (e) {
-      alert("TIMEOUT");
+    },
+    playlist: function() {
+      return store.getters["playerModule/playlist"];
     }
   },
   methods: {
@@ -110,7 +99,6 @@ export default {
       contextOnElement: {},
       page: 0,
       perPage: 10,
-      playlist: []
     };
   }
 };
@@ -118,10 +106,19 @@ export default {
 
 <style scoped lang="scss">
 .playlist-conatiner {
-  background-color: #2d2d2d;
+  background-color: inherit;
   padding-top: 5px;
   margin:auto;
   width: 100%;
+  background: #2d2d2d;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  
+
+  & .playlist-element {
+    height: 100%;;
+  }
 
   .pagination-buttons {
     display: flex;

frontend/components/playlist/Song.vue

@@ -6,8 +6,8 @@
   >
     <v-img class="white--text align-end song-image" :src="thumbnail"></v-img>
 
-    <v-card-text class="text--primary text-truncate text-no-wrap song-title">
-      <div class="text-truncate-inner">{{ title }}</div>
+    <v-card-text class="white--text text-truncate text-no-wrap song-title">
+      <div class="white--text text-truncate-inner">{{ title }}</div>
 
       <div>{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
     </v-card-text>
@@ -92,11 +92,14 @@ export default {
   display: flex;
   flex-direction: row;
   box-shadow: 0px 0px 2px #000000;
+  background: #FFFFFF20;
   border-radius: 5px;
   margin: 5px 5px;
   cursor: pointer;
   margin-left: 8px;
   width: calc(100% - 16px);
+  color: white;
+  height: auto;
 
   & .song-context-button {
     width: 10%;
@@ -120,6 +123,7 @@ export default {
   flex-direction: column;
   justify-content: space-around;
   border-top-right-radius: 0;
+  color: white !important;
   border-bottom-right-radius: 0 !important;
 }