Some mixin and vue socketio

frontend/components/player/Player.vue

@@ -9,7 +9,6 @@
   </div>
 </template>
 
-
 <script>
 import store from "@/store";
 import YouTube from "@/components/player/YouTube";
@@ -24,7 +23,61 @@ export default {
       player: undefined
     };
   },
+  mounted() {
+    this.sockets.subscribe("np", msg => {
+      this.gotNewNowPlaying(msg);
+    });
+  },
   methods: {
+    gotNewNowPlaying: function(msg) {
+      console.log("got now playing");
+      const playlist = store.getters["playerModule/playlist"];
+      const currentPlaying = playlist.find(song => song.now_playing == true);
+      if (msg.np.length == 0) {
+        return;
+      }
+      if (msg.conf.length == 0) {
+        return;
+      }
+
+      let nowPlaying = msg.np[0];
+      let channelSettings = msg.conf[0];
+      let timeSinceStart =
+        msg.time - channelSettings.startTime + nowPlaying.start;
+      nowPlaying.seek = timeSinceStart;
+
+      const newNowPlaying = playlist.find(song => song.id == nowPlaying.id);
+      newNowPlaying.now_playing = true;
+      if (
+        currentPlaying != undefined &&
+        currentPlaying.id != newNowPlaying.id
+      ) {
+        currentPlaying.now_playing = false;
+        currentPlaying.added = channelSettings.startTime;
+        console.log(currentPlaying);
+      }
+      console.log(this.predicate);
+      playlist.sort(
+        this.predicate(
+          {
+            name: "votes",
+            reverse: true
+          },
+          {
+            name: "added",
+            reverse: false
+          },
+          {
+            name: "title",
+            reverse: false
+          }
+        )
+      );
+
+      store.dispatch("playerModule/setPlaylist", playlist);
+      store.dispatch("playerModule/setNowPlaying", nowPlaying);
+      store.dispatch("playerModule/setChannelSettings", channelSettings);
+    },
     play: function(source) {},
     pause: function(source) {},
     end: function(source) {},
@@ -38,4 +91,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>

frontend/components/playlist/Playlist.vue

@@ -14,11 +14,15 @@
       />
     </div>
     <div class="pagination-buttons">
-      <v-btn text @click="firstPage" :disabled="disabledPrev" class="first"><</v-btn>
+      <v-btn text @click="firstPage" :disabled="disabledPrev" class="first"
+        ><</v-btn
+      >
       <v-btn text @click="prevPage" :disabled="disabledPrev">previous</v-btn>
       <span>{{ page + 1 }}&nbsp;/&nbsp;{{ pages }}</span>
       <v-btn text @click="nextPage" :disabled="disabledNext">next</v-btn>
-      <v-btn text @click="lastPage" :disabled="disabledNext" class="last">></v-btn>
+      <v-btn text @click="lastPage" :disabled="disabledNext" class="last"
+        >></v-btn
+      >
     </div>
     <ContextMenu
       v-if="contextMenuOpen"
@@ -61,7 +65,48 @@ export default {
       return store.getters["playerModule/playlist"];
     }
   },
+  mounted() {
+    console.log(this.$socket);
+    this.sockets.subscribe("channel", msg => {
+      console.log("list", msg);
+      if (msg.type == "list") {
+        this.gotList(msg);
+      } else if (msg.type == "vote") {
+        this.voted(msg);
+      } else if (msg.type == "shuffle") {
+        this.gotList(msg);
+      }
+    });
+  },
   methods: {
+    gotList: function(msg) {
+      console.log(this);
+      msg.playlist.sort(
+        this.predicate(
+          {
+            name: "votes",
+            reverse: true
+          },
+          {
+            name: "added",
+            reverse: false
+          },
+          {
+            name: "title",
+            reverse: false
+          }
+        )
+      );
+      store.dispatch("playerModule/setPlaylist", msg.playlist);
+    },
+    voted: function(msg) {
+      const playlist = store.getters["playerModule/playlist"];
+      let songToUpdate = playlist.find(song => song.id == msg.value);
+      console.log(songToUpdate);
+      songToUpdate.votes += 1;
+      songToUpdate.added = msg.time;
+      store.dispatch("playerModule/setPlaylist", playlist);
+    },
     moreInfo: function(e, id) {
       e.preventDefault();
       this.contextOnElement = this.playlist.find(song => song.id == id);
@@ -150,4 +195,4 @@ export default {
     }
   }
 }
-</style>
+</style>

frontend/components/playlist/Song.vue

@@ -7,7 +7,7 @@
     <v-img class="white--text align-end song-image" :src="thumbnail"></v-img>
 
     <v-card-text class="white--text text-truncate text-no-wrap song-title">
-      <div class="white--text text-truncate-inner">{{ title }}</div>
+      <div class="white--text text-truncate text-no-wrap text-truncate-inner">{{ title }}</div>
 
       <div>{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
     </v-card-text>
@@ -85,7 +85,8 @@ export default {
 
 <style scoped lang="scss">
 .song-image {
-  width: 25%;
+  width: 120px;
+  height: 90px;
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   border-bottom-left-radius: 2.5px !important;