Made a channel page

frontend/mixins/Socket.js

@@ -4,7 +4,6 @@ import io from "socket.io-client";
 export default {
   data() {
     return {
-      socket: null,
       alreadyCreated: false
     };
   },
@@ -15,6 +14,7 @@ export default {
     }
     this.socket = io("localhost:8080");
     console.log("mounted");
+    console.log(this.socket);
     this.addListeners();
     this.alreadyCreated = true;
   },
@@ -24,23 +24,70 @@ export default {
     },
     channel: function() {
       return store.getters["playerModule/channel"];
+    },
+    socket: {
+      set: function(socket) {
+        store.dispatch("socketModule/setSocket", socket);
+      },
+      get: function() {
+        console.log(store);
+        return store.getters["socketModule/socket"];
+      }
     }
   },
   methods: {
     emitToBackend(event, msg) {
-      this.socket.emit(event, msg);
+      store.getters["socketModule/socket"].emit(event, msg);
     },
     songEnd() {
-      this.socket.emit("end", { id: this.nowPlaying, channel: this.channel });
+      const nowPlaying = store.getters["playerModule/nowPlaying"];
+      const channel = store.getters["playerModule/channel"];
+      store.getters["socketModule/socket"].emit("end", {
+        id: nowPlaying.id,
+        channel: channel
+      });
     },
     getPosition() {
-      this.socket.emit("pos", { channel: this.channel });
+      store.getters["socketModule/socket"].emit("pos", {
+        channel: store.getters["playerModule/channel"]
+      });
+    },
+    vote(id) {
+      store.getters["socketModule/socket"].emit("vote", {
+        channel: store.getters["playerModule/channel"],
+        id: id,
+        type: "pos"
+      });
     },
     addListeners() {
+      console.log(this.socket);
       this.socket.on("channel", msg => {
         console.log("list", msg);
         if (msg.type == "list") {
+          msg.playlist.sort(
+            predicate(
+              {
+                name: "votes",
+                reverse: true
+              },
+              {
+                name: "added",
+                reverse: false
+              },
+              {
+                name: "title",
+                reverse: false
+              }
+            )
+          );
           store.dispatch("playerModule/setPlaylist", msg.playlist);
+        } else if (msg.type == "vote") {
+          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);
         }
       });
 
@@ -51,24 +98,57 @@ export default {
         }
       });
       this.socket.on("np", 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);
+        }
+
+        playlist.sort(
+          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);
       });
 
       this.socket.on("update_required", msg => {
-        console.log("update required");
+        console.log("update required", msg);
       });
       this.socket.on("connect", msg => {
         this.socket.emit("list", {
@@ -79,3 +159,64 @@ export default {
     }
   }
 };
+
+function predicate() {
+  var fields = [],
+    n_fields = arguments.length,
+    field,
+    name,
+    cmp;
+
+  var default_cmp = function(a, b) {
+      if (a == undefined) a = 0;
+      if (b == undefined) b = 0;
+      if (a === b) return 0;
+      return a < b ? -1 : 1;
+    },
+    getCmpFunc = function(primer, reverse) {
+      var dfc = default_cmp,
+        // closer in scope
+        cmp = default_cmp;
+      if (primer) {
+        cmp = function(a, b) {
+          return dfc(primer(a), primer(b));
+        };
+      }
+      if (reverse) {
+        return function(a, b) {
+          return -1 * cmp(a, b);
+        };
+      }
+      return cmp;
+    };
+
+  // preprocess sorting options
+  for (var i = 0; i < n_fields; i++) {
+    field = arguments[i];
+    if (typeof field === "string") {
+      name = field;
+      cmp = default_cmp;
+    } else {
+      name = field.name;
+      cmp = getCmpFunc(field.primer, field.reverse);
+    }
+    fields.push({
+      name: name,
+      cmp: cmp
+    });
+  }
+
+  // final comparison function
+  return function(A, B) {
+    var name, result;
+    for (var i = 0; i < n_fields; i++) {
+      result = 0;
+      field = fields[i];
+      name = field.name;
+
+      result = field.cmp(A[name], B[name]);
+      if (result !== 0) break;
+    }
+    return result;
+  };
+}