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 {
-  width: 100vw !important;
-  height: 60vh;
+#youtubePlayer {
+  width: 100% !important;
+  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(
-        this.page * this.perPage,
-        (1 + this.page) * this.perPage
-      );
+      return this.playlist
+        .filter(song => !song.now_playing)
+        .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 {
-    height: 100%;;
-  }
+  // & .playlist-element {
+  //   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;