From f9cb7edeb23e206e51fabc440a8ece272f297408 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 1 Oct 2026 21:02:23 +0000
Subject: [PATCH] Replace transport emoji with centred SVG icons and
 distinguish loop-one from repeat-list

---
 frontend/app.js      |  4 +++-
 frontend/index.html  | 12 ++++++------
 frontend/refresh.css |  8 ++++++++
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index b923ee3..c9a8f32 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1089,6 +1089,8 @@ function escapeHtml(s) {
     .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 }
 
+const ICON_PLAY = '<svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M9 5.5v13l10-6.5z"/></svg>';
+const ICON_PAUSE = '<svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg>';
 function fmtTime(sec) {
   if (!sec || !isFinite(sec)) return '0:00';
   sec = Math.floor(sec);
@@ -2393,7 +2395,7 @@ function wirePlayerEvents() {
 
 function updatePlayBtn() {
   Remote.changed();
-  els.playBtn.textContent = Player.master.paused ? '▶' : '⏸';
+  els.playBtn.innerHTML = Player.master.paused ? ICON_PLAY : ICON_PAUSE;
   $('miniPlayBtn').textContent = Player.master.paused ? '▶' : '⏸';
   const spBtn = $('servicePlayBtn');
   if (spBtn) spBtn.textContent = Player.master.paused ? '▶' : '⏸';
diff --git a/frontend/index.html b/frontend/index.html
index 807c489..145808f 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -171,18 +171,18 @@
               </div>
               <button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button>
               <div class="deck-main">
-                <button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)" aria-label="Shuffle">🔀</button>
-                <button id="prevBtn" class="ctrl" title="Previous" aria-label="Previous">⏮</button>
-                <button id="playBtn" class="ctrl play" title="Play/Pause" aria-label="Play or pause">▶</button>
-                <button id="nextBtn" class="ctrl" title="Next" aria-label="Next">⏭</button>
-                <button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)" aria-label="Repeat list">🔁</button>
+                <button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)" aria-label="Shuffle"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/></svg></button>
+                <button id="prevBtn" class="ctrl" title="Previous" aria-label="Previous"><svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><rect x="5" y="5" width="2.8" height="14" rx="1.2"/><path d="M19 5.5v13L9.5 12z"/></svg></button>
+                <button id="playBtn" class="ctrl play" title="Play/Pause" aria-label="Play or pause"><svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M9 5.5v13l10-6.5z"/></svg></button>
+                <button id="nextBtn" class="ctrl" title="Next" aria-label="Next"><svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><rect x="16.2" y="5" width="2.8" height="14" rx="1.2"/><path d="M5 5.5v13l9.5-6.5z"/></svg></button>
+                <button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)" aria-label="Repeat list"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 2l4 4-4 4M3 12v-2a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 12v2a4 4 0 0 1-4 4H3"/></svg></button>
               </div>
               <div class="deck-vol vol">
                 <button id="muteBtn" class="ctrl" title="Mute" aria-label="Mute">🔊</button>
                 <input id="volume" type="range" min="0" max="1" step="0.01" value="1" aria-label="Volume" />
               </div>
               <div class="dk-quick">
-                <button id="loopBtn" class="ctrl" title="Loop current video (L)">🔂</button>
+                <button id="loopBtn" class="ctrl" title="Loop this video (L)"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 2l4 4-4 4M3 12v-2a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 12v2a4 4 0 0 1-4 4H3M11 10.2l1.6-.9v5.4"/></svg></button>
                 <button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button>
                 <button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog"><span>⋯ More controls</span><small>Speed · Quality · A-B · Sleep</small></button>
               </div>
diff --git a/frontend/refresh.css b/frontend/refresh.css
index 86669a1..1897ed8 100644
--- a/frontend/refresh.css
+++ b/frontend/refresh.css
@@ -463,3 +463,11 @@
 .more-row.on .more-go { color: var(--accent-bright); }
 .more-row.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
 .more-sel { margin-left: auto; min-width: 96px; height: 38px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-1); color: var(--text); font: 700 14px var(--mono); }
+
+/* SVG transport icons: drawn on one grid so they centre exactly */
+#controls .ctrl svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+#controls .ctrl svg.fill { fill: currentColor; stroke: none; }
+#controls .deck-main .ctrl svg { width: 24px; height: 24px; }
+#controls .deck-main .ctrl.play svg { width: 34px; height: 34px; }
+#controls .deck-main .ctrl { display: grid; place-items: center; }
+#controls .ctrl.active svg { filter: drop-shadow(0 0 6px var(--accent-glow)); }