Timeline playback controls — transport icons, loop/bounce/rewind

- Replace all text buttons with SVG icon buttons (skip-back, step-back,
  play-back, play, pause, step-forward, skip-end)
- Add rewind: separate play-backward button that flips direction
- Add loop mode button with submenu (Loop / Bounce / Off)
  - Loop wraps at boundaries; Bounce reflects direction (ping-pong)
- Start/end frames moved to flank the scrub slider as plain numbers
- New icons: play-back.svg, loop.svg (FA repeat), bounce.svg (FA exchange-alt)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-13 13:36:07 +08:00
parent c4bf9673a8
commit 9ec9761dd7
7 changed files with 215 additions and 51 deletions
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2021 Fonticons, Inc. --><path d="M0 168v-16c0-13.255 10.745-24 24-24h360V80c0-21.367 25.9-32 40.971-16.971l80 80c8.994 8.994 9.055 23.508 0 32.781l-80 80C409.956 271.748 384 261.641 384 240v-48H24c-13.255 0-24-10.745-24-24zm488 152H128v-48c0-21.591-25.993-31.806-40.971-16.971l-80 80c-9.055 9.273-8.994 23.787 0 32.781l80 80C102.1 463.93 128 453.686 128 432v-48h360c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24z"/></svg>

After

Width:  |  Height:  |  Size: 680 B