Channel?

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;
 }