From cb898ca6e218987a415efa0ae8fa073eb180d86a Mon Sep 17 00:00:00 2001
From: kizey <ikizey@icloud.com>
Date: Sun, 29 Dec 2024 17:54:28 +0400
Subject: [PATCH 1/8] feat: add volume and playback rate change notification
 feature to video player

---
 .../ft-shaka-video-player.css                 | 18 ++++++++++++
 .../ft-shaka-video-player.js                  | 28 +++++++++++++++++++
 .../ft-shaka-video-player.vue                 | 10 +++++++
 src/renderer/main.js                          |  2 ++
 4 files changed, 58 insertions(+)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
index 7fc603f68c940..fcec77a377866 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
@@ -91,6 +91,24 @@
   /* user-select is intentionally not disabled, so that you can select and copy the stats */
 }
 
+.valueChangePopup {
+  position: absolute;
+  right: 20px;
+  bottom: calc(20px + 5%);
+  padding: 10px;
+  border-radius: 10px;
+  background-color: rgb(0 0 0 / 80%);
+  color: #fff;
+  pointer-events: none;
+  width: 85px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 1.1em;
+  opacity: 0.75;
+}
+
 .offlineWrapper {
   position: absolute;
   top: 20px;
diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
index bb9db24ade3ee..55093b24a948b 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -1808,6 +1808,8 @@ export default defineComponent({
       }
 
       volumeBar.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }))
+
+      showValueChange(`${Math.round(video.value.volume * 100)}%`, 'volume-high')
     }
 
     /**
@@ -1823,6 +1825,8 @@ export default defineComponent({
         video_.playbackRate = newPlaybackRate
         video_.defaultPlaybackRate = newPlaybackRate
       }
+
+      showValueChange(`${newPlaybackRate.toFixed(2)}x`)
     }
 
     function canSeek() {
@@ -2814,6 +2818,25 @@ export default defineComponent({
 
     // #endregion functions used by the watch page
 
+    const showValueChangePopup = ref(false)
+    const valueChangeMessage = ref('')
+    const valueChangeIcon = ref(null)
+    let valueChangeTimeout = null
+
+    function showValueChange(message, icon = null) {
+      valueChangeMessage.value = message
+      valueChangeIcon.value = icon
+      showValueChangePopup.value = true
+
+      if (valueChangeTimeout) {
+        clearTimeout(valueChangeTimeout)
+      }
+
+      valueChangeTimeout = setTimeout(() => {
+        showValueChangePopup.value = false
+      }, 2000)
+    }
+
     return {
       container,
       video,
@@ -2837,6 +2860,11 @@ export default defineComponent({
       handleEnded,
       updateVolume,
       handleTimeupdate,
+
+      showValueChange,
+      valueChangeMessage,
+      valueChangeIcon,
+      showValueChangePopup
     }
   }
 })
diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
index 6b2762e4e69c4..82b76c94724ce 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
@@ -66,6 +66,16 @@
         <span>{{ $t('Video.Player.Stats.Dropped Frames / Total Frames', stats.frames) }}</span>
       </template>
     </div>
+    <div
+      v-if="showValueChangePopup"
+      class="valueChangePopup"
+    >
+      <font-awesome-icon
+        v-if="valueChangeIcon"
+        :icon="['fas', `${valueChangeIcon}`]"
+      />
+      {{ valueChangeMessage }}
+    </div>
     <div
       v-if="showOfflineMessage"
       class="offlineWrapper"
diff --git a/src/renderer/main.js b/src/renderer/main.js
index bb6173c7b7345..8dc58540680e9 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -112,6 +112,7 @@ import {
   faUsers,
   faUsersSlash,
   faWifi,
+  faVolumeHigh,
   faXmark
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -232,6 +233,7 @@ library.add(
   faUsers,
   faUsersSlash,
   faWifi,
+  faVolumeHigh,
   faXmark,
 
   // solid icons

From 5627003bd3c6c34f451e84f9d39abc357ee76c22 Mon Sep 17 00:00:00 2001
From: kizey <ikizey@icloud.com>
Date: Sun, 29 Dec 2024 21:12:21 +0400
Subject: [PATCH 2/8] fix: update playback rate notification to reflect actual
 player rate

---
 .../ft-shaka-video-player/ft-shaka-video-player.js           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
index 55093b24a948b..706d6eadab9bb 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -1824,9 +1824,10 @@ export default defineComponent({
       if (newPlaybackRate > 0.07 && newPlaybackRate <= maxVideoPlaybackRate.value) {
         video_.playbackRate = newPlaybackRate
         video_.defaultPlaybackRate = newPlaybackRate
-      }
 
-      showValueChange(`${newPlaybackRate.toFixed(2)}x`)
+        const playerPlaybackRate = player.getPlaybackRate() + step
+        showValueChange(`${playerPlaybackRate.toFixed(2)}x`)
+      }
     }
 
     function canSeek() {

From 650528d03895cf8d21ba24ca3c224b9b49142678 Mon Sep 17 00:00:00 2001
From: kizey <ikizey@icloud.com>
Date: Sun, 29 Dec 2024 21:22:10 +0400
Subject: [PATCH 3/8] feat: change positioning and fix styling

---
 .../ft-shaka-video-player.css                     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
index fcec77a377866..791493b9686fa 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
@@ -93,20 +93,21 @@
 
 .valueChangePopup {
   position: absolute;
-  right: 20px;
-  bottom: calc(20px + 5%);
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
   padding: 10px;
-  border-radius: 10px;
-  background-color: rgb(0 0 0 / 80%);
+  border-radius: 5px;
+  font-size: 1.1em;
+  background-color: rgb(0 0 0 / 70%);
   color: #fff;
-  pointer-events: none;
   width: 85px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
-  font-size: 1.1em;
-  opacity: 0.75;
+  z-index: 2;
+  pointer-events: none;
 }
 
 .offlineWrapper {

From 53de8c88a8f9796f26a68e5f09a80ee150fd0c07 Mon Sep 17 00:00:00 2001
From: kizey <ikizey@icloud.com>
Date: Sun, 29 Dec 2024 21:41:50 +0400
Subject: [PATCH 4/8] feat: enhance volume message with icons indicating
 higher/lower/mute

---
 .../ft-shaka-video-player/ft-shaka-video-player.js    | 11 +++++++++--
 src/renderer/main.js                                  |  4 ++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
index 706d6eadab9bb..06a8dd93f1bba 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -1797,10 +1797,14 @@ export default defineComponent({
     function changeVolume(step) {
       const volumeBar = container.value.querySelector('.shaka-volume-bar')
 
-      const newValue = parseFloat(volumeBar.value) + (step * 100)
+      const oldValue = parseFloat(volumeBar.value)
+      const newValue = oldValue + (step * 100)
+
+      let messageIcon
 
       if (newValue < 0) {
         volumeBar.value = 0
+        messageIcon = 'volume-mute'
       } else if (newValue > 100) {
         volumeBar.value = 100
       } else {
@@ -1809,7 +1813,10 @@ export default defineComponent({
 
       volumeBar.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }))
 
-      showValueChange(`${Math.round(video.value.volume * 100)}%`, 'volume-high')
+      if (!messageIcon) {
+        messageIcon = newValue > oldValue ? 'volume-high' : 'volume-low'
+      }
+      showValueChange(`${Math.round(video.value.volume * 100)}%`, messageIcon)
     }
 
     /**
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 8dc58540680e9..4ebe674041915 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -113,6 +113,8 @@ import {
   faUsersSlash,
   faWifi,
   faVolumeHigh,
+  faVolumeLow,
+  faVolumeMute,
   faXmark
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -234,6 +236,8 @@ library.add(
   faUsersSlash,
   faWifi,
   faVolumeHigh,
+  faVolumeLow,
+  faVolumeMute,
   faXmark,
 
   // solid icons

From 757bc61b00bdf1ac0c9475681f56bb2fc66beaac Mon Sep 17 00:00:00 2001
From: kizey <ikizey@icloud.com>
Date: Mon, 30 Dec 2024 00:39:38 +0400
Subject: [PATCH 5/8] fix: show mute icon when volume reaches 0

---
 .../ft-shaka-video-player/ft-shaka-video-player.js   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
index 06a8dd93f1bba..6a1a363de5489 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -1800,11 +1800,8 @@ export default defineComponent({
       const oldValue = parseFloat(volumeBar.value)
       const newValue = oldValue + (step * 100)
 
-      let messageIcon
-
       if (newValue < 0) {
         volumeBar.value = 0
-        messageIcon = 'volume-mute'
       } else if (newValue > 100) {
         volumeBar.value = 100
       } else {
@@ -1813,8 +1810,13 @@ export default defineComponent({
 
       volumeBar.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }))
 
-      if (!messageIcon) {
-        messageIcon = newValue > oldValue ? 'volume-high' : 'volume-low'
+      let messageIcon
+      if (newValue <= 0) {
+        messageIcon = 'volume-mute'
+      } else if (newValue > 0 && newValue < oldValue) {
+        messageIcon = 'volume-low'
+      } else if (newValue > 0 && newValue > oldValue) {
+        messageIcon = 'volume-high'
       }
       showValueChange(`${Math.round(video.value.volume * 100)}%`, messageIcon)
     }

From 97517d3ae8355a93e9564afb0611e19dd544c2b1 Mon Sep 17 00:00:00 2001
From: kizey <ikizey@icloud.com>
Date: Mon, 30 Dec 2024 00:40:19 +0400
Subject: [PATCH 6/8] feat: show message on mute/unmute

---
 .../ft-shaka-video-player/ft-shaka-video-player.js         | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
index 6a1a363de5489..1bbce76ba75d2 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -2061,7 +2061,12 @@ export default defineComponent({
           // Toggle mute only if metakey is not pressed
           if (!event.metaKey) {
             event.preventDefault()
-            video_.muted = !video_.muted
+            const isMuted = !video_.muted
+            video_.muted = isMuted
+
+            const messageIcon = isMuted ? 'volume-mute' : 'volume-high'
+            const message = isMuted ? '0%' : `${Math.round(video_.volume * 100)}%`
+            showValueChange(message, messageIcon)
           }
           break
         case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.CAPTIONS:

From b40bb7c2075192388c1c43d3e3d6bad0c34fbc8b Mon Sep 17 00:00:00 2001
From: kizey <ikizey@icloud.com>
Date: Mon, 30 Dec 2024 03:28:58 +0400
Subject: [PATCH 7/8] refactor: playback rate message calc

---
 .../ft-shaka-video-player/ft-shaka-video-player.js         | 7 +++----
 .../ft-shaka-video-player/ft-shaka-video-player.vue        | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
index 1bbce76ba75d2..b0fe16ca32095 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -1826,7 +1826,8 @@ export default defineComponent({
      */
     function changePlayBackRate(step) {
       const video_ = video.value
-      const newPlaybackRate = parseFloat((video_.playbackRate + step).toFixed(2))
+      const newPlaybackRateString = (video_.playbackRate + step).toFixed(2)
+      const newPlaybackRate = parseFloat(newPlaybackRateString)
 
       // The following error is thrown if you go below 0.07:
       // The provided playback rate (0.05) is not in the supported playback range.
@@ -1834,8 +1835,7 @@ export default defineComponent({
         video_.playbackRate = newPlaybackRate
         video_.defaultPlaybackRate = newPlaybackRate
 
-        const playerPlaybackRate = player.getPlaybackRate() + step
-        showValueChange(`${playerPlaybackRate.toFixed(2)}x`)
+        showValueChange(`${newPlaybackRateString}x`)
       }
     }
 
@@ -2876,7 +2876,6 @@ export default defineComponent({
       updateVolume,
       handleTimeupdate,
 
-      showValueChange,
       valueChangeMessage,
       valueChangeIcon,
       showValueChangePopup
diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
index 82b76c94724ce..fff3853bdef18 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
@@ -72,7 +72,7 @@
     >
       <font-awesome-icon
         v-if="valueChangeIcon"
-        :icon="['fas', `${valueChangeIcon}`]"
+        :icon="['fas', valueChangeIcon]"
       />
       {{ valueChangeMessage }}
     </div>

From 2d2defdd609b4baa80dd2e78586cafe44f90a31e Mon Sep 17 00:00:00 2001
From: kizey <ikizey@icloud.com>
Date: Mon, 30 Dec 2024 03:53:49 +0400
Subject: [PATCH 8/8] feat: add fading effect

---
 .../ft-shaka-video-player.css                 | 10 +++++++++
 .../ft-shaka-video-player.vue                 | 22 ++++++++++---------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
index 791493b9686fa..f12e64ddf2605 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
@@ -110,6 +110,16 @@
   pointer-events: none;
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .offlineWrapper {
   position: absolute;
   top: 20px;
diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
index fff3853bdef18..bdc80bcb0d3cc 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue
@@ -66,16 +66,18 @@
         <span>{{ $t('Video.Player.Stats.Dropped Frames / Total Frames', stats.frames) }}</span>
       </template>
     </div>
-    <div
-      v-if="showValueChangePopup"
-      class="valueChangePopup"
-    >
-      <font-awesome-icon
-        v-if="valueChangeIcon"
-        :icon="['fas', valueChangeIcon]"
-      />
-      {{ valueChangeMessage }}
-    </div>
+    <Transition name="fade">
+      <div
+        v-if="showValueChangePopup"
+        class="valueChangePopup"
+      >
+        <font-awesome-icon
+          v-if="valueChangeIcon"
+          :icon="['fas', valueChangeIcon]"
+        />
+        {{ valueChangeMessage }}
+      </div>
+    </Transition>
     <div
       v-if="showOfflineMessage"
       class="offlineWrapper"