diff --git a/web/static/app.js b/web/static/app.js index 36d189d..33d6ccf 100644 --- a/web/static/app.js +++ b/web/static/app.js @@ -256,6 +256,7 @@ function updateVolumeFill(muted) { } function updateMuteBtn(muted) { btnMute.textContent = muted ? SYM.volOff : SYM.volOn; + if (isLegacyIOS) { btnMute.style.fontSize = '16px'; btnMute.style.fontWeight = 'bold'; } btnMute.classList.toggle('muted', muted); } @@ -560,14 +561,33 @@ function scrollToCurrentTrack() { // ── Boot ────────────────────────────────────────────────────────────────────── // Replace emoji with legacy symbols on iOS 9 where the glyphs are missing. +// Centering is already handled by flex on .btn — we only set size/weight here. if (isLegacyIOS) { - $('btn-prev').textContent = SYM.prev; - $('btn-play').textContent = SYM.play; - $('btn-stop').textContent = SYM.stop; - $('btn-next').textContent = SYM.next; - $('btn-mute').textContent = SYM.volOn; - $('btn-show-playlist').textContent = SYM.playlist; - $('btn-kill').textContent = SYM.skip + ' Überspringen'; + // Helper: replace text and tune font so the symbol fills ~¾ of the button. + function legacySym(id, text, size, weight) { + var el = $(id); + el.textContent = text; + el.style.fontSize = size; + el.style.fontWeight = weight || 'bold'; + el.style.letterSpacing = '2px'; + } + + // Transport controls (btn-h = 64px): + // two-char symbols (<<, >>) → 26px bold; single-char (■) → 36px bold. + // ▶ is natively supported on iOS 9 and already 32px via .btn-play. + legacySym('btn-prev', SYM.prev, '26px'); // << + legacySym('btn-play', SYM.play, '36px'); // ▶ + legacySym('btn-stop', SYM.stop, '36px'); // ■ + legacySym('btn-next', SYM.next, '26px'); // >> + + // Volume mute (48px tall): short text, large and bold + legacySym('btn-mute', SYM.volOn, '16px'); + + // Playlist action button (52px tall) + legacySym('btn-show-playlist', SYM.playlist, '18px'); + + // Kill button: just drop the emoji, keep the label text + $('btn-kill').textContent = SYM.skip + ' Überspringen'; } connect();