From 915d88b3ac27f93a1526a6218e4e7dfc32e81fed Mon Sep 17 00:00:00 2001 From: TerryM Date: Sun, 7 Jun 2026 19:56:17 +0800 Subject: [PATCH] feat(video): show filled white track left of the volume slider thumb Add a hard-stop linear-gradient background to the volume so the portion of the track left of the thumb is solid white while the right portion stays at the previous translucent white. The user can now see at a glance how loud the level is set, instead of only inferring it from the thumb position. --- src/components/messageStream/MessageInlineVideo.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/messageStream/MessageInlineVideo.tsx b/src/components/messageStream/MessageInlineVideo.tsx index becf2f7..a635a65 100644 --- a/src/components/messageStream/MessageInlineVideo.tsx +++ b/src/components/messageStream/MessageInlineVideo.tsx @@ -409,7 +409,9 @@ export function MessageInlineVideo({ )} {/* Always-visible inline straight-line volume slider (desktop only; - on touch devices users rely on the mute toggle + system volume). */} + on touch devices users rely on the mute toggle + system volume). + The left portion of the track is filled white via a hard-stop + gradient so the user can see the current level at a glance. */} e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()} aria-label="Volume" - className="hidden h-1 w-20 cursor-pointer appearance-none rounded-full bg-white/30 accent-white md:block" + style={{ + backgroundImage: `linear-gradient(to right, #ffffff 0%, #ffffff ${ + (isMuted ? 0 : volume) * 100 + }%, rgba(255,255,255,0.3) ${ + (isMuted ? 0 : volume) * 100 + }%, rgba(255,255,255,0.3) 100%)`, + }} + className="hidden h-1 w-20 cursor-pointer appearance-none rounded-full accent-white md:block" />