Merge branch 'vue-setup' of github.com:KevinMidboe/zoff into vue-setup

frontend/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <h1>hello world</h1>
-
     <router-view />
   </div>
-</template>
+</template>
+
+<style lang="scss">
+@import './styles/normalize';
+</style>

frontend/components/Player.vue

@@ -1,13 +1,93 @@
 <template>
-  <div>
+  <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/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import router from './routes'
-// import store from './store'
+import store from './store'
 
 import App from './App.vue'
 
@@ -10,7 +10,7 @@ Vue.use(VueRouter)
 new Vue({
   el: '#app',
   router,
-  // store,
+  store,
   components: { App },
   render: h => h(App)
 })

frontend/modules/playerModule.js

@@ -0,0 +1,21 @@
+export default {
+  namespaced: true,
+  state: {
+    player: undefined
+  },
+  getters: {
+    player: (state) => {
+      return state.player;
+    }
+  },
+  mutations: {
+    SET_PLAYER: (state, player) => {
+      state.player = player;
+    }
+  },
+  actios: {
+    setPlayer({ commit }, player) {
+      commit('SET_PLAYER', player)
+    }
+  }
+}

frontend/store.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import playerModule from '@/modules/playerModule';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules: {
+    playerModule
+  }
+})

frontend/styles/normalize.scss

@@ -0,0 +1,5 @@
+
+body {
+  margin: 0;
+  padding: 0;
+}