Mike/PodTui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: playback controls block now wraps

Browse Source
This commit is contained in:
Michael Freno
2026-08-11 07:24:59 -04:00
parent 0c3506beb5
commit c0252fc9b8
1 changed files with 56 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/pages/Player/PlaybackControls.tsx
View File

@@ -14,70 +14,81 @@ type PlaybackControlsProps = {
onSpeedChange: (value: number) => void; onSpeedChange: (value: number) => void;
}; };
const BACKEND_LABELS: Record<BackendName, string> = {
mpv: "mpv",
none: "none",
};
export function PlaybackControls(props: PlaybackControlsProps) { export function PlaybackControls(props: PlaybackControlsProps) {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<box <box
flexDirection="row" flexDirection="row"
flexWrap="wrap"
gap={1} gap={1}
alignItems="center" alignItems="center"
justifyContent="center"
border border
padding={1} padding={1}
borderColor={theme.border} borderColor={theme.border}
> >
<box {/* transport buttons — wrap as a unit, centered on their own line */}
border <box flexDirection="row" gap={1} alignItems="center" flexShrink={0}>
padding={0} <box
onMouseDown={props.onPrev} border
borderColor={theme.border} padding={0}
> onMouseDown={props.onPrev}
<text fg={theme.primary}>[Prev]</text> borderColor={theme.border}
>
<text fg={theme.primary} wrapMode="none">[Prev]</text>
</box>
<box
border
padding={0}
onMouseDown={props.onToggle}
borderColor={theme.border}
>
<text fg={theme.primary} wrapMode="none">{props.isPlaying ? "[Pause]" : "[Play]"}</text>
</box>
<box
border
padding={0}
onMouseDown={props.onNext}
borderColor={theme.border}
>
<text fg={theme.primary} wrapMode="none">[Next]</text>
</box>
</box> </box>
{/* status group — always follows the buttons; wrap point is here */}
<box <box
border flexDirection="row"
padding={0} gap={1}
onMouseDown={props.onToggle} alignItems="center"
borderColor={theme.border} marginLeft={2}
flexShrink={0}
> >
<text fg={theme.primary}>{props.isPlaying ? "[Pause]" : "[Play]"}</text>
</box>
<box
border
padding={0}
onMouseDown={props.onNext}
borderColor={theme.border}
>
<text fg={theme.primary}>[Next]</text>
</box>
<box flexDirection="row" gap={1} marginLeft={2}>
<text fg={theme.textMuted}>Vol</text> <text fg={theme.textMuted}>Vol</text>
<text fg={theme.text}>{Math.round(props.volume * 100)}%</text> <text fg={theme.text}>{Math.round(props.volume * 100)}%</text>
<text fg={theme.textMuted}>↑↓</text> <text fg={theme.textMuted}>↑↓</text>
</box>
<box flexDirection="row" gap={1} marginLeft={2}>
<text fg={theme.textMuted}>Speed</text>
<text fg={theme.text}>{props.speed}x</text>
<text fg={theme.textMuted}>s</text>
</box>
{props.backendName && props.backendName !== "none" && (
<box flexDirection="row" gap={1} marginLeft={2}> <box flexDirection="row" gap={1} marginLeft={2}>
<text fg={theme.textMuted}>via</text> <text fg={theme.textMuted}>Speed</text>
<text fg={theme.primary}>{BACKEND_LABELS[props.backendName]}</text> <text fg={theme.text}>{props.speed}x</text>
<text fg={theme.textMuted}>s</text>
</box> </box>
)} </box>
{props.backendName === "none" && ( {/* audio warnings — wrap to their own (3rd) line when the row is tight */}
<box marginLeft={2}> {(props.backendName === "none" || props.hasAudioUrl === false) && (
<text fg={theme.warning}>No audio player found</text> <box
</box> flexDirection="row"
)} gap={1}
{props.hasAudioUrl === false && ( alignItems="center"
<box marginLeft={2}> flexShrink={0}
<text fg={theme.warning}>No audio URL</text> >
{props.backendName === "none" && (
<box marginLeft={2}>
<text fg={theme.warning}>No audio player found</text>
</box>
)}
{props.hasAudioUrl === false && (
<box marginLeft={2}>
<text fg={theme.warning}>No audio URL</text>
</box>
)}
</box> </box>
)} )}
</box> </box>