gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-22 08:13:46 +01:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

chore(video): use dropdown for volume control

Browse Source
This commit is contained in:
Elian Doran 2026-03-21 10:03:32 +02:00
parent ff0fb4bcfd
commit 4f08389f80
No known key found for this signature in database
3 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/translations/en/translation.json
View File

@ -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",

12
apps/client/src/widgets/type_widgets/file/MediaPlayer.css
View File

@ -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;
}
}

51
apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
View File

@ -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>
);
}