From 3d142efc5445809cef6a5b563d96866a7cb8d8c2 Mon Sep 17 00:00:00 2001
From: RemiSaurel <r.saurel5@gmail.com>
Date: Mon, 29 Aug 2022 11:52:43 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8#8=20-=20Play=20/=20Pause=20and=20Mute?=
 =?UTF-8?q?=20/=20Unmute=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/YtbPlayer.vue | 53 +++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/components/YtbPlayer.vue b/src/components/YtbPlayer.vue
index f0dd2e7..08883db 100644
--- a/src/components/YtbPlayer.vue
+++ b/src/components/YtbPlayer.vue
@@ -2,8 +2,11 @@
   <div id="ytb-container">
     <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>
@@ -26,35 +29,50 @@ 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) {
+    setMuteState() {
+      if (this.muted) {
+        player.unMute();
+        player.setVolume(15);
+      } else {
+        player.mute();
+      }
+
+      this.muted = !this.muted;
+    },
+    loadVideoFromApi(id) {
       player.loadVideoById(id);
     },
     loadApi() {
@@ -64,13 +82,16 @@ export default {
           videoId: "XDh0JcxrbPM",
           playerVars: {
             'autoplay': 1,
-            'mute': 1
+            'mute': 1,
+            'rel': 0,
+            'showInfo': 0
           },
           events: {
             onStateChange: window.onPlayerStateChange
           }
         });
-        document.getElementById("player").style.width = "100%";
+        let player_id = document.getElementById("player")
+        player_id.style.width = "100%";
       };
 
       window.onPlayerStateChange = (event) => {