From a57448a41155ad8800960a8ced53d7c675dcc906 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sat, 15 Jun 2024 13:57:23 +0200
Subject: [PATCH] feat: show volume after changing via shortcut

---
 src/components/VideoPlayer.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index 1e41125c..b3650093 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -40,6 +40,14 @@
             <i class="i-fa6-solid:gauge-high h-25 w-25 p-5" />
             <span v-text="$refs.videoEl.playbackRate" />
         </div>
+        <div
+            v-if="showCurrentVolume"
+            class="text-l absolute left-1/2 top-1/2 flex flex-col transform items-center gap-6 rounded-8 bg-white/80 px-8 py-4 -translate-x-1/2 -translate-y-1/2 .dark:bg-dark-700/80"
+        >
+            <i v-if="$refs.videoEl.volume > 0" class="i-fa6-solid:volume-high h-25 w-25 p-5" />
+            <i v-else class="i-fa6-solid:volume-xmark h-25 w-25 p-5" />
+            <span v-text="Math.round($refs.videoEl.volume * 100) / 100" />
+        </div>
     </div>
 
     <ModalComponent v-if="showSpeedModal" @close="showSpeedModal = false">
@@ -95,6 +103,8 @@ export default {
             showSpeedModal: false,
             showCurrentSpeed: false,
             hideCurrentSpeed: null,
+            showCurrentVolume: false,
+            hideCurrentVolume: null,
             playbackSpeedInput: null,
             currentTime: 0,
             seekbarPadding: 2,
@@ -167,11 +177,11 @@ export default {
                             e.preventDefault();
                             break;
                         case "up":
-                            videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
+                            self.adjustPlaybackVolume(videoEl.volume + 0.05);
                             e.preventDefault();
                             break;
                         case "down":
-                            videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
+                            self.adjustPlaybackVolume(videoEl.volume - 0.05);
                             e.preventDefault();
                             break;
                         case "left":
@@ -693,6 +703,14 @@ export default {
             this.showCurrentSpeed = true;
             this.hideCurrentSpeed = window.setTimeout(() => (this.showCurrentSpeed = false), 1500);
         },
+        adjustPlaybackVolume(newVolume) {
+            const normalizedVolume = Math.min(1, Math.max(0, newVolume));
+            this.$refs.videoEl.volume = normalizedVolume;
+            if (this.hideCurrentVolume) window.clearTimeout(this.hideCurrentVolume);
+            this.showCurrentVolume = false;
+            this.showCurrentVolume = true;
+            this.hideCurrentVolume = window.setTimeout(() => (this.showCurrentVolume = false), 1500);
+        },
         setSpeedFromInput() {
             try {
                 const newSpeed = Number(this.playbackSpeedInput);