From 4f08389f8015eda7a7d23bf86ec23bd3ac7e85a6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 21 Mar 2026 10:03:32 +0200
Subject: [PATCH] chore(video): use dropdown for volume control

---
 .../src/translations/en/translation.json      |  1 +
 .../widgets/type_widgets/file/MediaPlayer.css | 12 ++++-
 .../widgets/type_widgets/file/MediaPlayer.tsx | 51 ++++++++++++-------
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 27891a02ab..f0b5e7a479 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1042,6 +1042,7 @@
     "pause": "Pause (Space)",
     "back-10s": "Back 10s (Left arrow key)",
     "forward-30s": "Forward 30s",
+    "volume": "Volume",
     "mute": "Mute (M)",
     "unmute": "Unmute (M)",
     "playback-speed": "Playback speed",
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
index d7e58a26eb..c3cd06f653 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
@@ -50,13 +50,21 @@
         }
     }
 
-    .media-volume-row {
+    .media-volume-dropdown-content {
         display: flex;
         align-items: center;
         gap: 0.25em;
+        padding: 0.5em;
+
+        .volume-mute-btn {
+            padding: 0.25em;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
 
         .media-volume-slider {
-            width: 80px;
+            width: 100px;
             cursor: pointer;
         }
     }
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 5518bcd263..55b3184725 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -102,30 +102,47 @@ export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
         }
     };
 
-    const toggleMute = () => {
+    const toggleMute = (e: MouseEvent) => {
+        e.stopPropagation();
         const media = mediaRef.current;
         if (!media) return;
         media.muted = !media.muted;
         setMuted(media.muted);
     };
 
+    const volumeIcon = muted || volume === 0
+        ? "bx bx-volume-mute"
+        : volume < 0.5
+            ? "bx bx-volume-low"
+            : "bx bx-volume-full";
+
     return (
-        <div class="media-volume-row">
-            <ActionButton
-                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
-                text={muted ? t("media.unmute") : t("media.mute")}
-                onClick={toggleMute}
-            />
-            <input
-                type="range"
-                class="media-volume-slider"
-                min={0}
-                max={1}
-                step={0.05}
-                value={muted ? 0 : volume}
-                onInput={onVolumeChange}
-            />
-        </div>
+        <Dropdown
+            iconAction
+            hideToggleArrow
+            buttonClassName="volume-dropdown"
+            text={<Icon icon={volumeIcon} />}
+            title={t("media.volume")}
+        >
+            <li class="media-volume-dropdown-content">
+                <button
+                    class="dropdown-item volume-mute-btn"
+                    onClick={toggleMute}
+                    title={muted ? t("media.unmute") : t("media.mute")}
+                >
+                    <Icon icon={volumeIcon} />
+                </button>
+                <input
+                    type="range"
+                    class="media-volume-slider"
+                    min={0}
+                    max={1}
+                    step={0.05}
+                    value={muted ? 0 : volume}
+                    onInput={onVolumeChange}
+                />
+            </li>
+        </Dropdown>
     );
 }