mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Frank Stellmacher
5231169a71
The mm:ss track-time formatter was hand-rolled in 11 places and the h:mm:ss total-duration formatter in 4 — extract two tested functions: - formatTrackTime(seconds, fallback='0:00') — m:ss, used for track / playback times. fallback param covers the '–' placeholder rows. - formatLongDuration(seconds) — h:mm:ss when >=1h, else m:ss, used for album / queue totals. Behaviour preserved per call site: the unified guard (!seconds || !isFinite || <0 -> fallback) produces identical output to every prior variant for all real inputs; SongRow keeps its '–' via the fallback arg. Removes the formatter exports from 6 componentHelpers files (playerBarHelpers / fullscreenPlayerHelpers deleted — they only exported the formatter) and 7 inline component copies. + formatDuration.test.ts
38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { Pause, Play, SkipBack, SkipForward } from 'lucide-react';
|
|
import { formatTrackTime } from '../../utils/format/formatDuration';
|
|
import type { MiniControlAction } from '../../utils/miniPlayerBridge';
|
|
|
|
interface Props {
|
|
isPlaying: boolean;
|
|
currentTime: number;
|
|
duration: number;
|
|
progress: number;
|
|
control: (action: MiniControlAction) => void;
|
|
}
|
|
|
|
export function MiniControls({ isPlaying, currentTime, duration, progress, control }: Props) {
|
|
return (
|
|
<div className="mini-player__bottom" data-tauri-drag-region="false">
|
|
<div className="mini-player__controls">
|
|
<button className="mini-player__btn" onClick={() => control('prev')} data-tauri-drag-region="false">
|
|
<SkipBack size={16} />
|
|
</button>
|
|
<button className="mini-player__btn mini-player__btn--primary" onClick={() => control('toggle')} data-tauri-drag-region="false">
|
|
{isPlaying ? <Pause size={18} /> : <Play size={18} />}
|
|
</button>
|
|
<button className="mini-player__btn" onClick={() => control('next')} data-tauri-drag-region="false">
|
|
<SkipForward size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mini-player__progress">
|
|
<div className="mini-player__progress-time">{formatTrackTime(currentTime)}</div>
|
|
<div className="mini-player__progress-track">
|
|
<div className="mini-player__progress-fill" style={{ width: `${progress}%` }} />
|
|
</div>
|
|
<div className="mini-player__progress-time">{formatTrackTime(duration)}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|