From 11660ac63d97734a135d87660988b1506763c42b Mon Sep 17 00:00:00 2001
From: kgva CMS <cms@karimgabrielevarano.xyz>
Date: Sat, 15 Aug 2026 11:44:14 +0000
Subject: [PATCH] fix: play/pause button size consistency, add a real volume
 slider
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 assets/css/custom.css         |  8 +++++++-
 assets/js/player.js           | 30 +++++++++++++++++++++++++++++-
 layouts/portfolio/single.html |  1 +
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 3c1d59f..df8ab75 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -476,9 +476,15 @@ footer a:hover,
 .player:not(.is-playing) .player__bar { opacity: 1; }
 .player__bar button { font: inherit; color: #fff; background: none; border: 0; padding: 0 0.4ch; line-height: 1; }
 .player__bar button:hover { background: #fff; color: #000; }
-.player__scrub { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; }
+/* fixed width + tightened tracking so ▶ and ❚❚ render as the same size
+   button instead of the pause glyph's two characters (with the font's
+   normal letter-spacing between them) widening it */
+.player__play { display: inline-flex; align-items: center; justify-content: center; width: 2.4ch; letter-spacing: -0.2em; }
+.player__scrub { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; cursor: pointer; }
 .player__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
 .player__time { white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
+.player__vol { width: 4ch; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; cursor: pointer; }
+.player__volfill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; }
 .player:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; }
 
 /* all images always in colour (selection drives what's shown, not hover) */
diff --git a/assets/js/player.js b/assets/js/player.js
index 1aef517..73bec1e 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -15,6 +15,8 @@
     var fill = root.querySelector(".player__fill");
     var time = root.querySelector(".player__time");
     var mute = root.querySelector(".player__mute");
+    var vol = root.querySelector(".player__vol");
+    var volFill = root.querySelector(".player__volfill");
     var full = root.querySelector(".player__full");
     if (!v) return;
 
@@ -51,7 +53,33 @@
       var r = scrub.getBoundingClientRect();
       if (v.duration) v.currentTime = ((e.clientX - r.left) / r.width) * v.duration;
     });
-    if (mute) mute.addEventListener("click", function () { v.muted = !v.muted; mute.textContent = v.muted ? "muted" : "vol"; });
+    // volume level, not just mute — click or drag the little bar next to
+    // the mute button, same interaction as the scrub bar
+    function syncVol() {
+      var level = v.muted ? 0 : v.volume;
+      if (volFill) volFill.style.width = (level * 100) + "%";
+      if (mute) mute.textContent = (v.muted || v.volume === 0) ? "muted" : "vol";
+    }
+    function setVolFromEvent(e) {
+      var r = vol.getBoundingClientRect();
+      var level = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
+      v.volume = level;
+      v.muted = level <= 0;
+    }
+    if (vol) {
+      vol.addEventListener("click", setVolFromEvent);
+      vol.addEventListener("mousedown", function (e) {
+        setVolFromEvent(e);
+        function onMove(ev) { setVolFromEvent(ev); }
+        function onUp() { document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); }
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+      });
+    }
+    v.addEventListener("volumechange", syncVol);
+    syncVol();
+
+    if (mute) mute.addEventListener("click", function () { v.muted = !v.muted; syncVol(); });
     if (full) full.addEventListener("click", function () {
       if (document.fullscreenElement) document.exitFullscreen();
       else if (root.requestFullscreen) root.requestFullscreen();
diff --git a/layouts/portfolio/single.html b/layouts/portfolio/single.html
index b6eecc2..9b0236c 100644
--- a/layouts/portfolio/single.html
+++ b/layouts/portfolio/single.html
@@ -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>