feat: add volume and playback rate change notification feature to vid… (

#6473) * feat: add volume and playback rate change notification feature to video player * fix: update playback rate notification to reflect actual player rate * feat: change positioning and fix styling * feat: enhance volume message with icons indicating higher/lower/mute * fix: show mute icon when volume reaches 0 * feat: show message on mute/unmute * refactor: playback rate message calc * feat: add fading effect
FreeTubeApp · Dec 30, 2024 · b01abad · b01abad
1 parent 5401951
commit b01abad
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 3 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
@@ -91,6 +91,35 @@
   /* user-select is intentionally not disabled, so that you can select and copy the stats */
 }
 
+.valueChangePopup {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 1.1em;
+  background-color: rgb(0 0 0 / 70%);
+  color: #fff;
+  width: 85px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  z-index: 2;
+  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.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -1797,7 +1797,8 @@ 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)
 
       if (newValue < 0) {
         volumeBar.value = 0
@@ -1808,20 +1809,33 @@ export default defineComponent({
       }
 
       volumeBar.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }))
+
+      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)
     }
 
     /**
      * @param {number} step
      */
     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.
       if (newPlaybackRate > 0.07 && newPlaybackRate <= maxVideoPlaybackRate.value) {
         video_.playbackRate = newPlaybackRate
         video_.defaultPlaybackRate = newPlaybackRate
+
+        showValueChange(`${newPlaybackRateString}x`)
       }
     }
 
@@ -2047,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:
@@ -2814,6 +2833,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 +2875,10 @@ export default defineComponent({
       handleEnded,
       updateVolume,
       handleTimeupdate,
+
+      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
@@ -66,6 +66,18 @@
         <span>{{ $t('Video.Player.Stats.Dropped Frames / Total Frames', stats.frames) }}</span>
       </template>
     </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"

diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -112,6 +112,9 @@ import {
   faUsers,
   faUsersSlash,
   faWifi,
+  faVolumeHigh,
+  faVolumeLow,
+  faVolumeMute,
   faXmark
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -232,6 +235,9 @@ library.add(
   faUsers,
   faUsersSlash,
   faWifi,
+  faVolumeHigh,
+  faVolumeLow,
+  faVolumeMute,
   faXmark,
 
   // solid icons