123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
/**
|
|
* PlayerPage — single-pane audio now-playing view.
|
|
*
|
|
* Audio transport (play/pause, next/prev, seek) is handled globally by the
|
|
* Shell router (P/N/B/</>). This page renders a single rich pane showing the
|
|
* current episode, waveform, and playback controls. Panes/swipe do nothing
|
|
* (PaneCount=1).
|
|
*/
|
|
|
|
import { Show } from "solid-js";
|
|
import { PlaybackControls } from "./PlaybackControls";
|
|
import { RealtimeWaveform } from "./RealtimeWaveform";
|
|
import { useAudio } from "@/hooks/useAudio";
|
|
import { useAppStore } from "@/stores/app";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
import { useNavigation } from "@/context/NavigationContext";
|
|
|
|
export const PlayerPaneCount = 1;
|
|
|
|
export function PlayerPage() {
|
|
const audio = useAudio();
|
|
const { theme } = useTheme();
|
|
const nav = useNavigation();
|
|
const muted = () => theme.muted || theme.text;
|
|
|
|
// Single pane — always active.
|
|
const isActive = () => true;
|
|
const border = () => theme.accent;
|
|
|
|
const progressPercent = () => {
|
|
const d = audio.duration();
|
|
if (d <= 0) return 0;
|
|
return Math.min(100, Math.round((audio.position() / d) * 100));
|
|
};
|
|
|
|
const formatTime = (seconds: number) => {
|
|
const m = Math.floor(seconds / 60);
|
|
const s = Math.floor(seconds % 60);
|
|
return `${m}:${String(s).padStart(2, "0")}`;
|
|
};
|
|
|
|
return (
|
|
<box flexDirection="column" width="100%" height="100%">
|
|
{/* ── pane 0: now playing ─────────────────────────────────────────── */}
|
|
<box height={1} paddingLeft={1} backgroundColor={theme.background}>
|
|
<text fg={theme.textSecondary}>Player</text>
|
|
</box>
|
|
<scrollbox
|
|
height="100%"
|
|
focused={isActive()}
|
|
border
|
|
borderColor={border()}
|
|
backgroundColor={theme.background}
|
|
>
|
|
<box flexDirection="column" gap={1} padding={1}>
|
|
<box flexDirection="row" justifyContent="space-between">
|
|
<text fg={theme.text}>
|
|
<strong>Now Playing</strong>
|
|
</text>
|
|
<text fg={muted()}>
|
|
{formatTime(audio.position())} / {formatTime(audio.duration())} (
|
|
{progressPercent()}%)
|
|
</text>
|
|
</box>
|
|
|
|
<Show when={audio.error()}>
|
|
{(err) => <text fg={theme.error}>{err()}</text>}
|
|
</Show>
|
|
|
|
<Show
|
|
when={audio.currentEpisode()}
|
|
fallback={
|
|
<box padding={1}>
|
|
<text fg={muted()}>No episode loaded.</text>
|
|
</box>
|
|
}
|
|
>
|
|
{(ep) => (
|
|
<box flexDirection="column" gap={1}>
|
|
<text fg={theme.text}>
|
|
<strong>{ep().title}</strong>
|
|
</text>
|
|
<text fg={muted()}>
|
|
{ep().description?.slice(0, 500) ??
|
|
"No description available."}
|
|
</text>
|
|
|
|
<RealtimeWaveform
|
|
visualizerConfig={(() => {
|
|
const viz = useAppStore().state().settings.visualizer;
|
|
return {
|
|
bars: viz.bars,
|
|
noiseReduction: viz.noiseReduction,
|
|
lowCutOff: viz.lowCutOff,
|
|
highCutOff: viz.highCutOff,
|
|
};
|
|
})()}
|
|
/>
|
|
</box>
|
|
)}
|
|
</Show>
|
|
|
|
<PlaybackControls
|
|
isPlaying={audio.isPlaying()}
|
|
volume={audio.volume()}
|
|
speed={audio.speed()}
|
|
backendName={audio.backendName()}
|
|
hasAudioUrl={!!audio.currentEpisode()?.audioUrl}
|
|
onToggle={audio.togglePlayback}
|
|
onPrev={() => audio.seek(0)}
|
|
onNext={() => audio.seek(audio.currentEpisode()?.duration ?? 0)}
|
|
onSpeedChange={(s: number) => audio.setSpeed(s)}
|
|
onVolumeChange={(v: number) => audio.setVolume(v)}
|
|
/>
|
|
|
|
<box height={1} />
|
|
<text fg={muted()}>{"P play/pause N next B prev </ seek"}</text>
|
|
</box>
|
|
</scrollbox>
|
|
</box>
|
|
);
|
|
}
|