pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Use 12 hour clock + add box around time (#58)
* Use 12 hour clock + box around time
* Fix ref
+24
-11
+11
-10
src/components/player/atoms/ProgressBar.tsx
+11
-10
src/components/player/atoms/ProgressBar.tsx
···
37
37
});
38
38
}, [props.at]);
39
39
40
+
// Keep time label width consistent and avoid recomputing
41
+
const formattedTime = useMemo(
42
+
() => formatSeconds(Math.max(props.at, 0), durationExceedsHour(props.at)),
43
+
[props.at],
44
+
);
45
+
const transformX =
46
+
offsets.offscreenLeft > 0 ? offsets.offscreenLeft : -offsets.offscreenRight;
47
+
40
48
if (!props.show) return null;
41
49
42
50
return (
···
45
53
<div ref={ref}>
46
54
<div
47
55
style={{
48
-
transform: `translateX(${
49
-
offsets.offscreenLeft > 0
50
-
? offsets.offscreenLeft
51
-
: -offsets.offscreenRight
52
-
}px)`,
56
+
transform: `translateX(${transformX}px)`,
53
57
}}
54
58
>
55
59
{currentThumbnail && (
···
58
62
className="h-24 border rounded-xl border-gray-800"
59
63
/>
60
64
)}
61
-
<p className="text-center mt-1">
62
-
{formatSeconds(
63
-
Math.max(props.at, 0),
64
-
durationExceedsHour(props.at),
65
-
)}
65
+
<p className="mt-1 mx-auto text-center border rounded-xl border-gray-800 px-3 py-1 backdrop-blur-lg bg-black bg-opacity-20 w-max">
66
+
{formattedTime}
66
67
</p>
67
68
</div>
68
69
</div>
+6
-1
src/components/player/atoms/Time.tsx
+6
-1
src/components/player/atoms/Time.tsx
···
4
4
import { VideoPlayerTimeFormat } from "@/stores/player/slices/interface";
5
5
import { usePlayerStore } from "@/stores/player/store";
6
6
import { durationExceedsHour, formatSeconds } from "@/utils/formatSeconds";
7
+
import { uses12HourClock } from "@/utils/uses12HourClock";
7
8
8
9
export function Time(props: { short?: boolean }) {
9
10
const timeFormat = usePlayerStore((s) => s.interface.timeFormat);
···
63
64
timeLeft,
64
65
duration,
65
66
formatParams: {
66
-
timeFinished: { hour: "numeric", minute: "numeric" },
67
+
timeFinished: {
68
+
hour: "numeric",
69
+
minute: "numeric",
70
+
hour12: uses12HourClock(),
71
+
},
67
72
},
68
73
})}
69
74
</span>
+7
src/utils/uses12HourClock.ts
+7
src/utils/uses12HourClock.ts