diff --git a/data/waveforms/5f89a551-45a2-4845-8385-081c08c040e4.svg b/data/waveforms/5f89a551-45a2-4845-8385-081c08c040e4.svg new file mode 100644 index 0000000..22135ba --- /dev/null +++ b/data/waveforms/5f89a551-45a2-4845-8385-081c08c040e4.svg @@ -0,0 +1,203 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/components/Player.tsx b/frontend/src/components/Player.tsx index 98e6596..3653cf9 100644 --- a/frontend/src/components/Player.tsx +++ b/frontend/src/components/Player.tsx @@ -163,171 +163,193 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose const progress = duration > 0 ? (currentTime / duration) * 100 : 0 const displayTitle = clip.title || clip.prompt + const marqueeDuration = Math.max(6, displayTitle.length * 0.3) return ( -
-
- {/* Play/Pause */} - - - {/* Stop */} - - - {/* Restart — ISO skip backwards to beginning */} - - - {/* Repeat — ISO repeat indefinitely with glowing toggle */} - - - {/* Time + Scrubber */} -
- - {formatTime(currentTime)} - - -
-
- {/* Scrubber handle */} -
-
- - - {formatTime(duration)} - -
- - {/* Track info with artwork */} -
-
- { - // Fallback to treble clef on error - const target = e.target as HTMLImageElement - target.style.display = 'none' - const parent = target.parentElement - if (parent) { - parent.innerHTML = `𝄞` - } - }} - /> -
-

{displayTitle}

-
- - {/* Volume */} -
+ <> + +
+
+ {/* Play/Pause */} - + + {/* Stop */} + + + {/* Restart — ISO skip backwards to beginning */} + + + {/* Repeat — ISO repeat indefinitely with glowing toggle */} + + + {/* Time + Scrubber */} +
+ + {formatTime(currentTime)} + + +
+
+ {/* Scrubber handle */} +
+
+ + + {formatTime(duration)} + +
+ + {/* Track info with artwork */} +
+
+ { + // Fallback to treble clef on error + const target = e.target as HTMLImageElement + target.style.display = 'none' + const parent = target.parentElement + if (parent) { + parent.innerHTML = `𝄞` + } + }} + /> +
+ {/* Marquee scrolling track name */} +
+
+ {displayTitle} + + {displayTitle} +
+
+
+ + {/* Volume */} +
+ + +
+ + {/* Close */} +
- {/* Close */} - +
- -
+ ) }