From 7f044372faa881988be9bb0811048546feceb961 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Thu, 19 Dec 2024 18:49:51 +0000
Subject: [PATCH] 18:17:14 +Mai | ed: volume bar is bad design 18:17:26  &ed |
 what's wrong with it 18:17:38 +Mai | that you don't know it's the volume bar
 before you try it 18:17:46  &ed | oh 18:17:48  &ed | yeah i guess 18:17:54
 +Mai | especially when it's at 100 18:18:00  &ed | how do i fix it tho
 18:19:50 +Mai | you could add an icon that's also a mute button (to not make
 it a useless icon) 18:22:38  &ed | i'll make the volume text always visible
 and include a speaker icon before it 18:23:53 +Mai | that is better at least

---
 copyparty/web/browser.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 560c4b18..baf6da7e 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -3064,6 +3064,7 @@ var vbar = (function () {
 		can = r.can.can;
 		ctx = r.can.ctx;
 		ctx.font = '.7em sans-serif';
+		ctx.fontVariantCaps = 'small-caps';
 		w = r.can.w;
 		h = r.can.h;
 		r.draw();
@@ -3089,18 +3090,18 @@ var vbar = (function () {
 		ctx.fillStyle = grad2; ctx.fillRect(0, 0, w, h);
 		ctx.fillStyle = grad1; ctx.fillRect(0, 0, w * mp.vol, h);
 
-		if (Date.now() - lastv > 1000)
-			return;
+		var vt = 'volume ' + Math.floor(mp.vol * 100),
+			tw = ctx.measureText(vt).width,
+			x = w * mp.vol - tw - 8,
+			li = dy;
 
-		var vt = Math.floor(mp.vol * 100),
-			tw = ctx.measureText(vt).width;
-
-		var li = dy;
-		if (mp.vol < 0.05)
+		if (mp.vol < 0.5) {
+			x += tw + 16;
 			li = !li;
+		}
 
 		ctx.fillStyle = li ? '#fff' : '#210';
-		ctx.fillText(vt, Math.max(4, w * mp.vol - tw - 8), h / 3 * 2);
+		ctx.fillText(vt, x, h / 3 * 2);
 
 		clearTimeout(untext);
 		untext = setTimeout(r.draw, 1000);