Channel?

2025-10-29 18:00:23 +00:00 · 2019-11-18 17:30:17 +01:00
parent f9f03b0e03
commit 868a9a8614
10 changed files with 940 additions and 1238 deletions
--- a/config/webpack.config.dev.js
+++ b/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
    }
--- a/frontend/components/Player.vue
+++ b/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>
--- a/frontend/components/Styleguide.vue
+++ b/frontend/components/Styleguide.vue
@@ -27,4 +27,7 @@ export default {


 <style lang="scss" scoped>
+div {
+  background: #2d2d2d;
+}
 </style>
--- a/frontend/components/playlist/Playlist.vue
+++ b/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() {
-    try {
-      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");
+    playlist: function() {
+      return store.getters["playerModule/playlist"];
    }
  },
  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;
--- a/frontend/components/playlist/Song.vue
+++ b/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">
-      <div class="text-truncate-inner">{{ title }}</div>
+    <v-card-text class="white--text text-truncate text-no-wrap song-title">
+      <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;
 }

--- a/frontend/main.js
+++ b/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,
--- a/frontend/modules/playerModule.js
+++ b/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);
    }
  }
+};
--- a/frontend/routes.js
+++ b/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',
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
-    "mongojs": "^2.6.0",
+    "mongodb": "^3.3.4",
+    "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",