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;

frontend/main.js

@@ -1,20 +1,46 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import vuetify from '@/plugins/vuetify' // path to vuetify export
-import router from './routes'
-import store from './store'
-import Socket from '@/mixins/Socket';
+import Vue from "vue";
+import VueRouter from "vue-router";
+import vuetify from "@/plugins/vuetify"; // path to vuetify export
+import router from "./routes";
+import store from "./store";
+import * as io from "socket.io-client";
+import VueSocketIO from "vue-socket.io";
 
-import App from './App.vue'
+import SortMixin from "@/mixins/SortMixin";
+import App from "./App.vue";
 
-Vue.use(VueRouter)
+Vue.mixin(SortMixin);
+Vue.use(VueRouter);
+Vue.use(
+  new VueSocketIO({
+    debug: true,
+    connection: io("http://localhost:8080"),
+    vuex: {
+      store,
+      actionPrefix: "SOCKET_",
+      mutationPrefix: "SOCKET_"
+    }
+  })
+);
 
 new Vue({
-  mixins:[Socket],
+  sockets: {
+    connect: function(msg) {
+      console.log("connected");
+      this.$socket.emit("list", {
+        version: 6,
+        channel: "summér"
+      });
+    },
+    channel: function(msg) {
+      console.log("channel-message", msg);
+    },
+    np: function(msg) {}
+  },
   vuetify,
-  el: '#app',
+  el: "#app",
   router,
   store,
   components: { App },
   render: h => h(App)
-})
+});

frontend/mixins/SortMixin.js

@@ -0,0 +1,64 @@
+export default {
+  methods: {
+    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;
+      };
+    }
+  }
+};

package-lock.json

@@ -13029,6 +13029,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz",
       "integrity": "sha512-utJ+QR3YlIC/6x6xq17UMXeAfxEvXA0VKD3PiSio7hBOZNusA1jXcbxZxVEfJunLp48oonjTepY8ORoIlRx/EQ=="
     },
+    "vue-socket.io": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/vue-socket.io/-/vue-socket.io-3.0.7.tgz",
+      "integrity": "sha512-dTo0Vr6jIziIax5/m+mY+iwzSBdH9ZgcUR0FkyfFNklBYvb6bdNbo5tJTydMh0DTZ8f+gK4Xl6Ihtnv6YIsulQ==",
+      "requires": {
+        "socket.io-client": "^2.1.1"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -96,6 +96,7 @@
     "uniqid": "5.0.3",
     "vue": "~2.6",
     "vue-router": "~3.0",
+    "vue-socket.io": "^3.0.7",
     "vuetify": "^2.1.10",
     "vuex": "^3.1.2"
   }