+ {/* Left: Beat Metadata */}
+
+
+
+
+
+
+
+
+ {activeTrack.title}
+
+
+ 30s Clip
+
+
+
+ {activeTrack.producer.length > 12
+ ? `${activeTrack.producer.slice(0, 6)}…${activeTrack.producer.slice(-4)}`
+ : activeTrack.producer}
+
+
+
+
+ {/* Center: Controls & Waveform */}
+
+ {/* Control buttons */}
+
+ {/* Skip back 5s */}
+
+
+ {/* Play / Pause button */}
+
+
+ {/* Skip forward 5s */}
+
+
+ {/* Loop Toggle */}
+
+
+
+ {/* Waveform and Timers row */}
+
+
+ {formatTime(currentTime)}
+
+
+
+ {showWaveform ? (
+
+ ) : (
+
seekToRatio(parseFloat(e.target.value) / MAX_PREVIEW_DURATION)}
+ aria-label="Seek preview audio"
+ data-testid="audio-preview-seek-slider"
+ style={{ width: "100%", accentColor: "#facc15", cursor: "pointer" }}
+ />
+ )}
+
+
+
+ {formatTimeRemaining(duration - currentTime)}
+
+
+
+
+ {/* Right: Volume, Price, Quick Buy & Close */}
+
+ {/* Volume control */}
+
+
+
+ setVolume(parseFloat(e.target.value))}
+ aria-label="Preview volume"
+ data-testid="audio-preview-volume-slider"
+ style={{
+ width: 60,
+ accentColor: "#facc15",
+ cursor: "pointer",
+ height: 4,
+ }}
+ />
+
+
+ {/* Price tag */}
+ {effectivePrice > 0 && (
+
+ {effectivePrice} {tokenSymbol}
+
+ )}
+
+ {/* Quick Buy Button */}
+
+
+ {/* Close / Dismiss button */}
+
+
+
+