Made a channel page

frontend/components/Channel.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div class="parallel-containers">
+      <Player class="player" />
+      <Playlist class="playlist" />
+    </div>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import Player from "@/components/player/Player";
+import Playlist from "@/components/playlist/Playlist";
+
+export default {
+  components: {
+    Player,
+    Playlist
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.parallel-containers {
+  display: flex;
+  flex-direction: row;
+
+  & .player {
+    width: 100%;
+  }
+  & .playlist {
+    width: 40vw;
+  }
+}
+</style>

frontend/components/player/Player.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="conatiner">
-    <h1>Player</h1>
     <YouTube
       @end="end('youtube')"
       @pause="pause('youtube')"
@@ -17,7 +16,7 @@ import YouTube from "@/components/player/YouTube";
 
 export default {
   components: {
-    YouTube,
+    YouTube
   },
   data() {
     return {

frontend/components/player/YouTube.vue

@@ -12,7 +12,9 @@ export default {
       player: null,
       playerReady: false,
       currentPlaying: {},
-      currentIsThis: false
+      currentIsThis: false,
+      gettingPosition: false,
+      wasPaused: false
     };
   },
   computed: {
@@ -56,8 +58,10 @@ export default {
       if (this.player == null) {
         this.createYoutubeObjectWithId(this.nowPlaying.id);
       } else {
+        console.log("new np", this.currentPlaying.id, nowPlaying.id);
         if (this.currentPlaying.id != nowPlaying.id) {
           try {
+            console.log("loading");
             this.player.loadVideoById(nowPlaying.id, {
               start: nowPlaying.seek,
               end: nowPlaying.end
@@ -65,6 +69,7 @@ export default {
           } catch (e) {}
         } else {
           this.player.seekTo(nowPlaying.seek);
+          console.log("seeking");
         }
         this.currentPlaying = nowPlaying;
       }
@@ -128,7 +133,14 @@ export default {
     },
     onPlayerReady(event) {
       console.log("event from onPlayerReady", event);
+
+      this.player.setVolume(0);
       event.target.playVideo();
+      setInterval(() => {
+        console.log(
+          this.player.getCurrentTime() + " - " + this.player.getDuration()
+        );
+      }, 1000);
     },
     checkForInitialLoadAndSeek() {
       if (!this.initialLoad) {
@@ -142,6 +154,10 @@ export default {
       if (event.data === this.PLAYER_STATES.PLAYING) {
         console.log("playing");
         this.checkForInitialLoadAndSeek();
+        if (this.wasPaused) {
+          this.wasPaused = false;
+          this.$root.$options.methods.getPosition();
+        }
       } else if (event.data === this.PLAYER_STATES.ENDED) {
         console.log("ended");
         this.$root.$options.methods.songEnd();
@@ -149,6 +165,9 @@ export default {
         console.log("not started");
       } else if (event.data === this.PLAYER_STATES.BUFFERING) {
         console.log("buffering");
+      } else if (event.data === this.PLAYER_STATES.PAUSED) {
+        console.log("pasued");
+        this.wasPaused = true;
       }
     },
     errorHandler(error) {
@@ -159,8 +178,8 @@ export default {
 </script>
 
 <style lang="scss">
-#player {
+#youtubePlayer {
-  width: 100vw !important;
+  width: 100% !important;
-  height: 60vh;
+  height: 100%;
 }
 </style>

frontend/components/playlist/Playlist.vue

@@ -16,7 +16,7 @@
     <div class="pagination-buttons">
       <v-btn text @click="firstPage" :disabled="disabledPrev" class="first"><</v-btn>
       <v-btn text @click="prevPage" :disabled="disabledPrev">previous</v-btn>
-      <span>{{ page + 1 }} / {{ pages }}</span>
+      <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>
     </div>
@@ -40,14 +40,13 @@ import ContextMenu from "@/components/playlist/ContextMenu";
 export default {
   components: {
     Song,
-    ContextMenu,
+    ContextMenu
   },
   computed: {
     paginatedList: function() {
-      return this.playlist.slice(
+      return this.playlist
-        this.page * this.perPage,
+        .filter(song => !song.now_playing)
-        (1 + this.page) * this.perPage
+        .slice(this.page * this.perPage, (1 + this.page) * this.perPage);
-      );
     },
     disabledPrev: function() {
       return this.page == 0;
@@ -98,7 +97,7 @@ export default {
       contextMenuOpen: false,
       contextOnElement: {},
       page: 0,
-      perPage: 10,
+      perPage: 12
     };
   }
 };
@@ -108,23 +107,28 @@ export default {
 .playlist-conatiner {
   background-color: inherit;
   padding-top: 5px;
-  margin:auto;
+  margin: auto;
   width: 100%;
   background: #2d2d2d;
   height: 100vh;
   display: flex;
   flex-direction: column;
+  position: relative;
 
-
+  // & .playlist-element {
-  & .playlist-element {
+  //   height: 100%;
-    height: 100%;;
+  // }
-  }
 
   .pagination-buttons {
     display: flex;
     justify-content: space-between;
     color: white;
     padding: 10px 0;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    margin: auto;
 
     & span {
       display: flex;
@@ -133,7 +137,7 @@ export default {
     }
 
     & button {
-      width: 35%;
+      width: 20%;
       height: 30px;
       background: transparent;
       color: white;

frontend/components/playlist/Song.vue

@@ -75,6 +75,8 @@ export default {
       if (e.target.className === "more-info-button") {
         return;
       }
+
+      this.$root.$options.methods.vote(this.id);
       console.log("Clicked on song with info", this.title, this.id);
     }
   }
@@ -92,7 +94,7 @@ export default {
   display: flex;
   flex-direction: row;
   box-shadow: 0px 0px 2px #000000;
-  background: #FFFFFF20;
+  background: #ffffff20;
   border-radius: 5px;
   margin: 5px 5px;
   cursor: pointer;

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

frontend/modules/playerModule.js

@@ -1,4 +1,3 @@
-
 export default {
   namespaced: true,
   state: {
@@ -18,16 +17,12 @@ export default {
       PLAYING: 1,
       UNSTARTED: -1
     },
-    socket: null,
     channel: "summér"
   },
   getters: {
     channel: state => {
       return state.channel;
     },
-    socket: state => {
-      return state.socket
-    },
     PLAYER_STATES: state => {
       return state.PLAYER_STATES;
     },

frontend/modules/socketModule.js

@@ -0,0 +1,21 @@
+export default {
+  namespaced: true,
+  state: {
+    socket: null
+  },
+  getters: {
+    socket: state => {
+      return state.socket;
+    }
+  },
+  mutations: {
+    SET_SOCKET: (state, socket) => {
+      state.socket = socket;
+    }
+  },
+  actions: {
+    setSocket({ commit }, socket) {
+      commit("SET_SOCKET", socket);
+    }
+  }
+};

frontend/routes.js

@@ -1,25 +1,31 @@
-import Vue from 'vue'
+import Vue from "vue";
-import VueRouter from 'vue-router';
+import VueRouter from "vue-router";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 let routes = [
   {
-    name: 'player',
+    name: "player",
-    path: '/player',
+    path: "/player",
-    component: (resolve) => require(['./components/player/Player.vue'], resolve)
+    component: resolve => require(["./components/player/Player.vue"], resolve)
   },
   {
-    name: 'styleguide',
+    name: "styleguide",
-    path: '/styleguide',
+    path: "/styleguide",
-    component: (resolve) => require(['./components/Styleguide.vue'], resolve)
+    component: resolve => require(["./components/Styleguide.vue"], resolve)
   },
 
   {
-    name: 'playlist',
+    name: "playlist",
-    path: '/playlist',
+    path: "/playlist",
-    component: (resolve) => require(['./components/playlist/Playlist.vue'], resolve)
+    component: resolve =>
+      require(["./components/playlist/Playlist.vue"], resolve)
   },
+  {
+    name: "channel",
+    path: "/channel",
+    component: resolve => require(["./components/Channel.vue"], resolve)
+  }
   // {
   //   name: '404',
   //   path: '/404',
@@ -27,11 +33,11 @@ let routes = [
   // }
 ];
 
-const router =  new VueRouter({
+const router = new VueRouter({
-  mode: 'hash',
+  mode: "hash",
-  base: '/',
+  base: "/",
   routes,
-  linkActiveClass: 'is-active'
+  linkActiveClass: "is-active"
 });
 
 export default router;

frontend/store.js

@@ -1,14 +1,16 @@
-import Vue from 'vue';
+import Vue from "vue";
-import Vuex from 'vuex';
+import Vuex from "vuex";
 
-import playerModule from '@/modules/playerModule';
+import playerModule from "@/modules/playerModule";
+import socketModule from "@/modules/socketModule";
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
   modules: {
-    playerModule
+    playerModule,
+    socketModule
   }
-})
+});
 
 export default store;