Player?

frontend/components/player/Player.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="conatiner">
+    <h1>Player</h1>
+    <YouTube
+      @end="end('youtube')"
+      @pause="pause('youtube')"
+      @play="play('youtube')"
+      @buffering="buffering('youtube')"
+    />
+  </div>
+</template>
+
+
+<script>
+import store from "@/store";
+import YouTube from "@/components/player/YouTube";
+
+export default {
+  components: {
+    YouTube,
+  },
+  data() {
+    return {
+      done: false,
+      player: undefined
+    };
+  },
+  methods: {
+    play: function(source) {},
+    pause: function(source) {},
+    end: function(source) {},
+    buffering: function(source) {}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>

frontend/components/player/SoundCloud.vue

@@ -0,0 +1,3 @@
+<template>
+    <div></div>
+</template>

frontend/components/player/YouTube.vue

@@ -0,0 +1,166 @@
+<template>
+  <div id="youtubePlayer"></div>
+</template>
+
+<script>
+import store from "@/store";
+
+export default {
+  data() {
+    return {
+      initialLoad: true,
+      player: null,
+      playerReady: false,
+      currentPlaying: {},
+      currentIsThis: false
+    };
+  },
+  computed: {
+    nowPlaying: {
+      get: function() {
+        return store.getters["playerModule/nowPlaying"];
+      }
+    },
+    playerState: {
+      get: function() {
+        if (!this.currentIsThis) {
+          return this.PLAYER_STATES.PAUSED;
+        }
+        return store.getters["playerModule/playerState"];
+      },
+      set: function(state) {
+        if (!this.currentIsThis) {
+          return;
+        }
+        store.dispatch("playerModule/setPlayerState");
+      }
+    },
+    PLAYER_STATES: function() {
+      return store.getters["playerModule/PLAYER_STATES"];
+    },
+    channelSettings: function() {
+      return store.getters["playerModule/channelSettings"];
+    }
+  },
+  watch: {
+    nowPlaying: function(nowPlaying) {
+      this.currentIsThis = false;
+      if (nowPlaying.source != "youtube") {
+        return;
+      }
+      if (!this.playerReady) {
+        return;
+      }
+      this.currentIsThis = true;
+
+      if (this.player == null) {
+        this.createYoutubeObjectWithId(this.nowPlaying.id);
+      } else {
+        if (this.currentPlaying.id != nowPlaying.id) {
+          try {
+            this.player.loadVideoById(nowPlaying.id, {
+              start: nowPlaying.seek,
+              end: nowPlaying.end
+            });
+          } catch (e) {}
+        } else {
+          this.player.seekTo(nowPlaying.seek);
+        }
+        this.currentPlaying = nowPlaying;
+      }
+    },
+    playerState: function(state) {
+      if (!this.currentIsThis) {
+        return;
+      }
+      if (state === this.PLAYER_STATES.PLAYING) {
+        this.player.playVideo();
+      } else if (state === this.PLAYER_STATES.PAUSED) {
+        this.player.pauseVideo();
+      } else if (state === this.PLAYER_STATES.ENDED) {
+        this.player.stopVideo();
+      }
+    }
+  },
+  beforeMount() {
+    this.loadYoutubeIframe();
+  },
+  methods: {
+    loadYoutubeIframe() {
+      window.onYouTubeIframeAPIReady = this.onYouTubeIframeAPIReady;
+      const tag = document.createElement("script");
+      tag.src = "https://www.youtube.com/iframe_api";
+      const firstScriptTag = document.getElementsByTagName("script")[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    },
+    onYouTubeIframeAPIReady() {
+      this.playerReady = true;
+      if (
+        this.nowPlaying != undefined &&
+        this.nowPlaying.id != undefined &&
+        this.player == null
+      ) {
+        this.createYoutubeObjectWithId(this.nowPlaying.id);
+      }
+    },
+    createYoutubeObjectWithId(id) {
+      if (this.player == null) {
+        this.player = new YT.Player("youtubePlayer", {
+          videoId: id,
+          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();
+    },
+    checkForInitialLoadAndSeek() {
+      if (!this.initialLoad) {
+        return;
+      }
+      this.initialLoad = false;
+      this.player.seekTo(this.nowPlaying.seek);
+    },
+    onPlayerStateChange(event) {
+      console.log("event change", event);
+      if (event.data === this.PLAYER_STATES.PLAYING) {
+        console.log("playing");
+        this.checkForInitialLoadAndSeek();
+      } else if (event.data === this.PLAYER_STATES.ENDED) {
+        console.log("ended");
+        this.$root.$options.methods.songEnd();
+      } else if (event.data === this.PLAYER_STATES.UNSTARTED) {
+        console.log("not started");
+      } else if (event.data === this.PLAYER_STATES.BUFFERING) {
+        console.log("buffering");
+      }
+    },
+    errorHandler(error) {
+      console.log("error handling youtube player. Error:", error);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+#player {
+  width: 100vw !important;
+  height: 60vh;
+}
+</style>

frontend/mixins/Socket.js

@@ -0,0 +1,81 @@
+import store from "@/store";
+import io from "socket.io-client";
+
+export default {
+  data() {
+    return {
+      socket: null,
+      alreadyCreated: false
+    };
+  },
+  created() {
+    if (this.alreadyCreated) {
+      console.log("we already exist");
+      return;
+    }
+    this.socket = io("localhost:8080");
+    console.log("mounted");
+    this.addListeners();
+    this.alreadyCreated = true;
+  },
+  computed: {
+    nowPlaying: function() {
+      return store.getters["playerModule/nowPlaying"];
+    },
+    channel: function() {
+      return store.getters["playerModule/channel"];
+    }
+  },
+  methods: {
+    emitToBackend(event, msg) {
+      this.socket.emit(event, msg);
+    },
+    songEnd() {
+      this.socket.emit("end", { id: this.nowPlaying, channel: this.channel });
+    },
+    getPosition() {
+      this.socket.emit("pos", { channel: this.channel });
+    },
+    addListeners() {
+      this.socket.on("channel", msg => {
+        console.log("list", msg);
+        if (msg.type == "list") {
+          store.dispatch("playerModule/setPlaylist", msg.playlist);
+        }
+      });
+
+      this.socket.on("conf", msg => {
+        console.log("conf", msg);
+        if (msg.length == 1) {
+          store.dispatch("playerModule/setChannelSettings", msg[0]);
+        }
+      });
+      this.socket.on("np", msg => {
+        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;
+
+        store.dispatch("playerModule/setNowPlaying", nowPlaying);
+        store.dispatch("playerModule/setChannelSettings", channelSettings);
+      });
+
+      this.socket.on("update_required", msg => {
+        console.log("update required");
+      });
+      this.socket.on("connect", msg => {
+        this.socket.emit("list", {
+          version: 6,
+          channel: this.channel
+        });
+      });
+    }
+  }
+};