mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-21 22:15:40 +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
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { memo, useEffect, useRef } from 'react';
|
|
import { getPlaybackProgressSnapshot, subscribePlaybackProgress } from '../../store/playbackProgress';
|
|
import { formatTrackTime } from '../../utils/format/formatDuration';
|
|
|
|
/** Renders the playback clock without ever causing PlayerBar to re-render.
|
|
* Updates the DOM directly via an imperative store subscription. */
|
|
export const PlaybackTime = memo(function PlaybackTime({ className }: { className?: string }) {
|
|
const spanRef = useRef<HTMLSpanElement>(null);
|
|
useEffect(() => {
|
|
if (spanRef.current) {
|
|
spanRef.current.textContent = formatTrackTime(getPlaybackProgressSnapshot().currentTime);
|
|
}
|
|
return subscribePlaybackProgress(state => {
|
|
if (spanRef.current) spanRef.current.textContent = formatTrackTime(state.currentTime);
|
|
});
|
|
}, []);
|
|
return <span className={className} ref={spanRef} />;
|
|
});
|
|
|
|
/** Renders the remaining time (duration - currentTime) without causing PlayerBar
|
|
* to re-render. */
|
|
export const RemainingTime = memo(function RemainingTime({ duration, className }: { duration: number; className?: string }) {
|
|
const spanRef = useRef<HTMLSpanElement>(null);
|
|
useEffect(() => {
|
|
const updateRemaining = () => {
|
|
if (spanRef.current) {
|
|
const remaining = Math.max(0, duration - getPlaybackProgressSnapshot().currentTime);
|
|
spanRef.current.textContent = `-${formatTrackTime(remaining)}`;
|
|
}
|
|
};
|
|
updateRemaining();
|
|
return subscribePlaybackProgress(updateRemaining);
|
|
}, [duration]);
|
|
return <span className={className} ref={spanRef} />;
|
|
});
|