fix: remove redundant time label from media controls
- Remove extra time display above buttons (already shown in waveform) - Simplify transport section structure - Keep buttons centered for clean UI
This commit is contained in:
@@ -561,21 +561,12 @@ export function SongPage() {
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
gap: 10,
|
||||||
gap: 8,
|
|
||||||
padding: "4px 0 12px",
|
padding: "4px 0 12px",
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Time display - moved above buttons */}
|
|
||||||
<span style={{ fontFamily: "monospace", fontSize: 12, color: "rgba(255,255,255,0.35)", marginBottom: 4 }}>
|
|
||||||
<span style={{ color: "#d8d8e0" }}>{formatTime(currentTime)}</span>
|
|
||||||
{isReady && duration > 0 ? ` / ${formatTime(duration)}` : ""}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* Button group - centered */}
|
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
|
||||||
{/* Skip back */}
|
{/* Skip back */}
|
||||||
<TransportButton onClick={() => seekTo(Math.max(0, currentTime - 30))} title="−30s">
|
<TransportButton onClick={() => seekTo(Math.max(0, currentTime - 30))} title="−30s">
|
||||||
<IconSkipBack />
|
<IconSkipBack />
|
||||||
@@ -609,8 +600,6 @@ export function SongPage() {
|
|||||||
<TransportButton onClick={() => seekTo(currentTime + 30)} title="+30s">
|
<TransportButton onClick={() => seekTo(currentTime + 30)} title="+30s">
|
||||||
<IconSkipFwd />
|
<IconSkipFwd />
|
||||||
</TransportButton>
|
</TransportButton>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user