fix(ui): remove extra playback controls

web/index.html

@@ -318,7 +318,7 @@
           <canvas class="wave" aria-hidden="true"></canvas>
           <span class="wave-tip"></span>
         </div>
-        <div class="player-controls"><button type="button" class="play-toggle" aria-label="pause"><svg aria-hidden="true"><use href="#i-pause"/></svg></button><div class="seek-controls"><input class="seek" type="range" min="0" max="0" value="0" step="1" aria-label="seek track" disabled><div class="time"><span class="cur">0:00</span><button type="button" class="to-drop" title="jump to the next marked drop (d)">drop <svg><use href="#i-down"/></svg></button><span class="counts"></span><span class="dur"></span></div></div></div>
+        <div class="time"><span class="cur">0:00</span><button type="button" class="to-drop" title="jump to the next marked drop (d)">drop <svg><use href="#i-down"/></svg></button><span class="counts"></span><span class="dur"></span></div>
       </div>
       <nav class="actions">
         <button type="button" class="act like" title="like (l)" aria-label="like"><span class="ring"><svg><use href="#i-heart"/></svg></span><span class="n saves"></span></button>

web/src/cards.ts

@@ -7,7 +7,6 @@ import { WaveComments } from "./comments";
 
 export interface CardActions {
   like(card: Card): void;
-  togglePlayback(card: Card): void;
   share(card: Card): void;
   next(card: Card): void;
   follow(card: Card): void;
@@ -191,9 +190,6 @@ export class Card {
     $(".comments").textContent = compact(t.comments);
 
     $(".like").addEventListener("click", () => this.actions.like(this));
-    $(".play-toggle").addEventListener("click", () => this.actions.togglePlayback(this));
-    const seek = $<HTMLInputElement>(".seek");
-    seek.addEventListener("input", () => { if (this.actions.canSeek(this)) this.actions.seek(this, Number(seek.value)); });
     $(".share").addEventListener("click", () => this.actions.share(this));
     $(".next").addEventListener("click", () => this.actions.next(this));
     $(".follow").addEventListener("click", () => this.actions.follow(this));
@@ -254,21 +250,6 @@ export class Card {
   setTime(seconds: number): void {
     const cur = this.el?.querySelector(".cur");
     if (cur) cur.textContent = fmtTime(seconds);
-    const seek = this.el?.querySelector<HTMLInputElement>(".seek");
-    if (seek) {
-      const duration = this.actions.duration(this);
-      seek.disabled = !this.actions.canSeek(this) || !Number.isFinite(duration);
-      seek.max = String(Number.isFinite(duration) ? duration : 0);
-      seek.value = String(seconds);
-      seek.setAttribute("aria-valuetext", `${fmtTime(seconds)} of ${fmtTime(Number.isFinite(duration) ? duration : 0)}`);
-    }
-  }
-
-  setPlaying(playing: boolean): void {
-    const button = this.el?.querySelector<HTMLButtonElement>(".play-toggle");
-    if (!button) return;
-    button.setAttribute("aria-label", playing ? "pause" : "play");
-    button.querySelector("use")?.setAttribute("href", playing ? "#i-pause" : "#i-play");
   }
 
   private lastProgress = 0;

web/src/main.ts

@@ -224,7 +224,6 @@ function activate(idx: number): void {
   const card = cards[idx];
   if (pager.index !== idx) pager.go(idx, { instant: true });
   card.element().classList.add("current");
-  card.setPlaying(false);
   card.setTime(0);
   visual.attach(card);
   if (waveComments) card.loadComments();
@@ -285,7 +284,6 @@ upNext.addEventListener("click", () => go(active + 1));
 
 const actions: CardActions = {
   like: (c) => setLike(c, !c.liked),
-  togglePlayback: (c) => { if (c === current() && started) player.toggle(); },
   share: (c) => share(c),
   next: (c) => go(cards.indexOf(c) + 1),
   follow: (c) => setFollow(c, !c.track.followed),
@@ -438,12 +436,10 @@ player.on("ended", () => {
 
 player.on("play", () => {
   current()?.el?.classList.remove("paused");
-  current()?.setPlaying(true);
   visual.start();
   if ("mediaSession" in navigator) navigator.mediaSession.playbackState = "playing";
 });
 player.on("pause", () => {
-  current()?.setPlaying(false);
   if (!player.audio.ended) current()?.el?.classList.add("paused");
   current()?.el?.classList.remove("buffering");
   if ("mediaSession" in navigator) navigator.mediaSession.playbackState = "paused";

web/src/style.css

@@ -643,12 +643,6 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
 
 .wave-wrap { position: relative; width: 100%; margin-top: 0.6rem; }
 .wave { display: block; width: 100%; height: 64px; cursor: pointer; touch-action: none; }
-.player-controls { display: flex; align-items: center; gap: 0.75rem; width: 100%; }
-.play-toggle { flex: none; width: 2.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center; border-radius: 8px; background: var(--fg); color: #111; }
-.play-toggle svg { width: 1.35rem; height: 1.35rem; }
-.seek-controls { min-width: 0; flex: 1; }
-.seek { display: block; width: 100%; height: 1rem; margin: 0 0 0.2rem; accent-color: var(--accent); cursor: pointer; }
-.seek:disabled { opacity: 0.5; cursor: default; }
 .wave-tip {
   position: absolute;
   bottom: calc(100% + 4px);