fix: play/pause button size consistency, add a real volume slider

the play/pause button had no fixed width, so swapping the single-character play glyph for the two-character pause glyph (with the fonts normal spacing between them) visibly widened the button. now a fixed 2.4ch width with tightened tracking on the pause state.\n\nmute only ever toggled — there was no way to set a level. added a small click/drag bar next to it (same interaction as the scrub bar), synced with the video elements own volume/muted state via the volumechange event so it stays correct regardless of how its changed.
2026-08-15 11:44:14 +00:00
parent 46aff56577
commit 11660ac63d
3 changed files with 37 additions and 2 deletions
@@ -39,6 +39,7 @@
        <div class="player__scrub"><div class="player__fill"></div></div>
        <span class="player__time">00:00 / 00:00</span>
        <button class="player__mute" type="button" aria-label="mute">vol</button>
+        <div class="player__vol" aria-label="volume"><div class="player__volfill"></div></div>
        <button class="player__full" type="button" aria-label="fullscreen">⛶</button>
      </div>
    </div>