Merge pull request #9 from RemiSaurel/dev

✨#8 - Fix

src/components/YtbPlayer.vue

@@ -1,19 +1,26 @@
 <template>
   <div id="ytb-container">
-    <div class="ytb" v-show="displayYoutube">
-      <iframe width="100%" height="360" src="https://www.youtube-nocookie.com/embed/XDh0JcxrbPM?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-              id="youtube_video">
-      </iframe>
-    </div>
+    <div class="ytb" v-show="displayYoutube" id="player"></div>
     <div class="params">
-      <button @click="prevPlaylist" >⏮</button>
+      <button @click="prevPlaylist">⏮</button>
+      <button @click="pausePlayPlaylist">⏯</button>
       <button @click="nextPlaylist" @keydown.shift="easterEgg" id="next">⏭</button>
+      <button @click="setMuteState" v-if="!muted">🔇</button>
+      <button @click="setMuteState" v-else>🔊</button>
     </div>
   </div>
 </template>
 
 <script>
+function setupYtbApi() {
+  const tag = document.createElement("script");
+  tag.id = "iframe-demo";
+  tag.src = "https://www.youtube.com/iframe_api";
+  const [firstScriptTag] = document.getElementsByTagName("script");
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+}
+
+let player;
 
 export default {
   name: "YtbPlayer",
@@ -22,41 +29,83 @@ export default {
       displayYoutube: true,
       livesId: [],
       easterEggs: [],
-      easterEggsSongsId:-1,
-      songId: 0
+      easterEggsSongsId: -1,
+      songId: 0,
+      muted: true
     }
   },
   methods: {
-    readFileAndStore()
-    {
+    readFileAndStore() {
       let lofi = require("../data/lofi.json");
       this.livesId = lofi.id;
       this.easterEggs = lofi.easterEggs;
     },
-    nextPlaylist()
-    {
+    nextPlaylist() {
       this.songId++ === this.livesId.length - 1 ? this.songId = 0 : this.songId;
       let id = this.livesId[this.songId];
-      this.changeYtbSrc(id)
+      this.loadVideoFromApi(id)
     },
-    prevPlaylist()
-    {
-      --this.songId === -1 ? this.songId = this.livesId.length - 1: this.songId;
+    prevPlaylist() {
+      --this.songId === -1 ? this.songId = this.livesId.length - 1 : this.songId;
       let id = this.livesId[this.songId];
-      this.changeYtbSrc(id)
+      this.loadVideoFromApi(id)
+    },
+    pausePlayPlaylist() {
+      if (player.getPlayerState() === 1) {
+        player.pauseVideo();
+      } else {
+        player.playVideo();
+      }
     },
     easterEgg() {
       this.easterEggsSongsId++ === this.easterEggs.length - 1 ? this.easterEggsSongsId = 0 : this.easterEggsSongsId;
       let id = this.easterEggs[this.easterEggsSongsId];
-      this.changeYtbSrc(id)
+      this.loadVideoFromApi(id)
     },
-    changeYtbSrc(id) {
-      let ytb = document.getElementById("youtube_video")
-      ytb.src = "https://www.youtube.com/embed/" + id + "?autoplay=1";
+    setMuteState() {
+      if (this.muted) {
+        player.unMute();
+        player.setVolume(15);
+      } else {
+        player.mute();
+      }
+
+      this.muted = !this.muted;
+    },
+    loadVideoFromApi(id) {
+      player.loadVideoById(id);
+    },
+    loadApi() {
+      window.onYouTubeIframeAPIReady = () => {
+        // eslint-disable-next-line no-unused-vars
+        player = new window.YT.Player("player", {
+          videoId: "XDh0JcxrbPM",
+          playerVars: {
+            'autoplay': 1,
+            'mute': 1,
+            'rel': 0,
+            'showInfo': 0
+          },
+          events: {
+            onStateChange: window.onPlayerStateChange
+          }
+        });
+        let player_id = document.getElementById("player")
+        player_id.style.width = "100%";
+      };
+
+      window.onPlayerStateChange = (event) => {
+        if (event.data === 0) {
+          this.nextPlaylist()
+        }
+      };
+
     }
   },
   created() {
     this.readFileAndStore();
+    setupYtbApi();
+    this.loadApi();
   }
 }
 </script>

src/data/lofi.json

@@ -5,7 +5,6 @@
     "7NOSDKb0HlU",
     "-5KAN9_CzSA",
     "jfKfPfyJRdk",
-    
     "GDQnA1LVCWA",
     "-pzxY5DtZIQ",
     "Mu3BfD6wmPg",