Channel?

config/webpack.config.dev.js

@@ -34,7 +34,7 @@ const webpackConfig = merge(commonConfig(true), {
     historyApiFallback: true,
     hot: true,
     overlay: true,
-    port: 8080,
+    port: 8000,
     stats: {
       normal: true
     }

frontend/components/Player.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="conatiner">
-    <h1>Player</h1>
-    <div id="player"></div>
-  </div>
-</template>
-
-
-<script>
-export default {
-  data() {
-    return {
-      done: false,
-      player: undefined
-    }
-  },
-  beforeMount() {
-    this.loadYoutubeIframe()
-  },
-  watch: {
-    done: function(val) {
-      console.log('done changed to:', val)
-      if (val === true) {
-        this.player.playVideo();
-      }
-    }
-  },
-  methods: {
-    loadYoutubeIframe() {
-      // const tag = this.$refs.player;
-      const tag = document.createElement('script');
-      tag.src = 'https://www.youtube.com/iframe_api';
-      const firstScriptTag = document.getElementsByTagName('script')[0]
-      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-      const that = this;
-      // setTimeout(() => that.onYouTubeIframeAPIReady(), 2000);
-      window.onYouTubeIframeAPIReady = this.onYouTubeIframeAPIReady
-    },
-    onYouTubeIframeAPIReady() {
-      console.log('we are loaded and ready to fucking go!')
-      this.player = new YT.Player('player', {
-        videoId: 'SJOgTMP8cs4',
-        playerVars: {
-          rel: "0",
-          autoplay: 1,
-          wmode: "transparent",
-          controls: "0",
-          fs: "0",
-          iv_load_policy: "3",
-          theme: "light",
-          color: "white",
-          showinfo: 0
-        },
-        events: {
-          onReady: this.onPlayerReady,
-          onStateChange: this.onPlayerStateChange,
-          onError: this.errorHandler
-        }
-      });
-    },
-    onPlayerReady(event) {
-      console.log('event from onPlayerReady', event)
-      event.target.playVideo();
-    },
-    onPlayerStateChange(event) {
-      console.log('on player changed')
-      if (event.data === YT.PlayerState.PLAYING && !this.done) {
-        this.done = true
-      }
-    },
-    errorHandler(error) {
-      console.log('error handling youtube player. Error:', error)
-    }
-  }
-}
-</script>
-
-
-<style lang="scss">
-#player {
-  width: 100vw !important;
-  height: 60vh;
-}
-</style>
-
-<style lang="scss" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-}
-
-</style>

frontend/components/Styleguide.vue

@@ -27,4 +27,7 @@ export default {
 
 
 <style lang="scss" scoped>
+div {
+  background: #2d2d2d;
+}
 </style>

frontend/components/playlist/Playlist.vue

@@ -33,13 +33,14 @@
 </template>
 
 <script>
+import store from "@/store";
 import Song from "@/components/playlist/Song";
 import ContextMenu from "@/components/playlist/ContextMenu";
 
 export default {
   components: {
     Song,
-    ContextMenu
+    ContextMenu,
   },
   computed: {
     paginatedList: function() {
@@ -56,21 +57,9 @@ export default {
     },
     pages: function() {
       return Math.ceil(this.playlist.length / this.perPage);
-    }
     },
-  async beforeMount() {
+    playlist: function() {
-    try {
+      return store.getters["playerModule/playlist"];
-      const request = await fetch("https://zoff.me/api/list/summér", {
-        method: "POST"
-      });
-      const playlist = await request.json();
-      if (this.playlist.error == true) {
-        console.error(this.playlist.error);
-        return;
-      }
-      this.playlist = playlist.results;
-    } catch (e) {
-      alert("TIMEOUT");
     }
   },
   methods: {
@@ -110,7 +99,6 @@ export default {
       contextOnElement: {},
       page: 0,
       perPage: 10,
-      playlist: []
     };
   }
 };
@@ -118,10 +106,19 @@ export default {
 
 <style scoped lang="scss">
 .playlist-conatiner {
-  background-color: #2d2d2d;
+  background-color: inherit;
   padding-top: 5px;
   margin:auto;
   width: 100%;
+  background: #2d2d2d;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  
+
+  & .playlist-element {
+    height: 100%;;
+  }
 
   .pagination-buttons {
     display: flex;

frontend/components/playlist/Song.vue

@@ -6,8 +6,8 @@
   >
     <v-img class="white--text align-end song-image" :src="thumbnail"></v-img>
 
-    <v-card-text class="text--primary text-truncate text-no-wrap song-title">
+    <v-card-text class="white--text text-truncate text-no-wrap song-title">
-      <div class="text-truncate-inner">{{ title }}</div>
+      <div class="white--text text-truncate-inner">{{ title }}</div>
 
       <div>{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
     </v-card-text>
@@ -92,11 +92,14 @@ export default {
   display: flex;
   flex-direction: row;
   box-shadow: 0px 0px 2px #000000;
+  background: #FFFFFF20;
   border-radius: 5px;
   margin: 5px 5px;
   cursor: pointer;
   margin-left: 8px;
   width: calc(100% - 16px);
+  color: white;
+  height: auto;
 
   & .song-context-button {
     width: 10%;
@@ -120,6 +123,7 @@ export default {
   flex-direction: column;
   justify-content: space-around;
   border-top-right-radius: 0;
+  color: white !important;
   border-bottom-right-radius: 0 !important;
 }
 

frontend/main.js

@@ -3,12 +3,14 @@ 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 App from './App.vue'
 
 Vue.use(VueRouter)
 
 new Vue({
+  mixins:[Socket],
   vuetify,
   el: '#app',
   router,

frontend/modules/playerModule.js

@@ -1,21 +1,117 @@
+
 export default {
   namespaced: true,
   state: {
-    player: undefined
+    player: undefined,
+    playlist: [],
+    authenticatedAdmin: false,
+    channelSettings: null,
+    clientSettings: null,
+    nowPlaying: null,
+    userSuggested: [],
+    externalSuggested: [],
+    PLAYER_STATES: {
+      BUFFERING: 3,
+      CUED: 5,
+      ENDED: 0,
+      PAUSED: 2,
+      PLAYING: 1,
+      UNSTARTED: -1
+    },
+    socket: null,
+    channel: "summér"
   },
   getters: {
-    player: (state) => {
+    channel: state => {
+      return state.channel;
+    },
+    socket: state => {
+      return state.socket
+    },
+    PLAYER_STATES: state => {
+      return state.PLAYER_STATES;
+    },
+    authenticatedAdmin: state => {
+      return state.authenticatedAdmin;
+    },
+    playlist: state => {
+      return state.playlist;
+    },
+    channelSettings: state => {
+      return state.channelSettings;
+    },
+    clientSettings: state => {
+      return state.clientSettings;
+    },
+    nowPlaying: state => {
+      return state.nowPlaying;
+    },
+    userSuggested: state => {
+      return state.userSuggested;
+    },
+    externalSuggested: state => {
+      return state.externalSuggested;
+    },
+    player: state => {
       return state.player;
     }
   },
   mutations: {
+    SET_CHANNEL: (state, channel) => {
+      state.channel = channel;
+    },
+    SET_AUTHENTICATED_ADMIN: (state, authenticatedAdmin) => {
+      state.authenticatedAdmin = authenticatedAdmin;
+    },
+    SET_PLAYLIST: (state, playlist) => {
+      state.playlist = playlist;
+    },
+    SET_CHANNEL_SETTINGS: (state, channelSettings) => {
+      state.channelSettings = channelSettings;
+    },
+    SET_CLIENT_SETTINGS: (state, clientSettings) => {
+      state.clientSettings = clientSettings;
+    },
+    SET_NOW_PLAYING: (state, nowPlaying) => {
+      state.nowPlaying = nowPlaying;
+    },
+    SET_USER_SUGGESTED: (state, userSuggested) => {
+      state.userSuggested = userSuggested;
+    },
+    SET_EXTERNAL_SUGGESTED: (state, externalSuggested) => {
+      state.externalSuggested = externalSuggested;
+    },
     SET_PLAYER: (state, player) => {
       state.player = player;
     }
   },
-  actios: {
+  actions: {
+    setChannel({ commit }, channel) {
+      commit("SET_CHANNEL", channel.toLowerCase());
+    },
+    setAuthenticatedAdmin({ commit }, authenticatedAdmin) {
+      commit("SET_AUTHENTICATED_ADMIN", authenticatedAdmin);
+    },
+    setPlaylist({ commit }, playlist) {
+      commit("SET_PLAYLIST", playlist);
+    },
+    setChannelSettings({ commit }, channelSettings) {
+      commit("SET_CHANNEL_SETTINGS", channelSettings);
+    },
+    setClientSettings({ commit }, clientSettings) {
+      commit("SET_CLIENT_SETTINGS", clientSettings);
+    },
+    setNowPlaying({ commit }, nowPlaying) {
+      commit("SET_NOW_PLAYING", nowPlaying);
+    },
+    setUserSuggested({ commit }, userSuggested) {
+      commit("SET_USER_SUGGESTED", userSuggested);
+    },
+    setExternalSuggested({ commit }, externalSuggested) {
+      commit("SET_EXTERNAL_SUGGESTED", externalSuggested);
+    },
     setPlayer({ commit }, player) {
-      commit('SET_PLAYER', player)
+      commit("SET_PLAYER", player);
     }
   }
-}
+};

frontend/routes.js

@@ -7,13 +7,19 @@ let routes = [
   {
     name: 'player',
     path: '/player',
-    component: (resolve) => require(['./components/Player.vue'], resolve)
+    component: (resolve) => require(['./components/player/Player.vue'], resolve)
   },
   {
     name: 'styleguide',
     path: '/styleguide',
     component: (resolve) => require(['./components/Styleguide.vue'], resolve)
   },
+
+  {
+    name: 'playlist',
+    path: '/playlist',
+    component: (resolve) => require(['./components/playlist/Playlist.vue'], resolve)
+  },
   // {
   //   name: '404',
   //   path: '/404',

package.json

@@ -31,7 +31,7 @@
     "babel-loader": "~8.0",
     "compression-webpack-plugin": "~2.0",
     "cross-env": "~5.2",
-    "css-loader": "~0.28",
+    "css-loader": "^3.2.0",
     "deepmerge": "^4.2.2",
     "fibers": "^4.0.2",
     "friendly-errors-webpack-plugin": "~1.7",
@@ -49,7 +49,7 @@
     "vue-style-loader": "~4.1",
     "vue-template-compiler": "~2.6",
     "webpack": "~4.29",
-    "webpack-bundle-analyzer": "~3.0",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "~3.2",
     "webpack-dev-server": "~3.1",
     "webpack-hot-middleware": "~2.24",
@@ -63,7 +63,7 @@
     "body-parser": "^1.18.3",
     "color-thief-jimp": "^2.0.2",
     "compression": "^1.7.3",
-    "connect-mongo": "^2.0.3",
+    "connect-mongo": "^3.1.2",
     "cookie-parser": "^1.4.4",
     "cors": "^2.8.5",
     "express": "^4.16.4",
@@ -78,8 +78,8 @@
     "gulp-uglify-es": "^1.0.4",
     "helmet": "^3.21.1",
     "jimp": "^0.2.28",
-    "mongodb": "^2.2.36",
+    "mongodb": "^3.3.4",
-    "mongojs": "^2.6.0",
+    "mongojs": "^3.1.0",
     "mongojs-paginate": "^1.2.0",
     "mongoose": "^5.4.18",
     "mpromise": "^0.5.5",
@@ -90,6 +90,7 @@
     "referrer-policy": "^1.1.0",
     "request": "^2.88.0",
     "socket.io": "^2.2.0",
+    "socket.io-client": "^2.3.0",
     "socket.io-redis": "^5.2.0",
     "sticky-session": "^1.1.2",
     "uniqid": "5.0.3",