pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
timestamp near thumbnail
+17
-6
+12
-1
src/components/player/atoms/ProgressBar.tsx
+12
-1
src/components/player/atoms/ProgressBar.tsx
···
11
11
import { useProgressBar } from "@/hooks/useProgressBar";
12
12
import { nearestImageAt } from "@/stores/player/slices/thumbnails";
13
13
import { usePlayerStore } from "@/stores/player/store";
14
+
import { durationExceedsHour, formatSeconds } from "@/utils/formatSeconds";
14
15
15
16
function ThumbnailDisplay(props: { at: number }) {
16
17
const thumbnailImages = usePlayerStore((s) => s.thumbnails.images);
···
19
20
}, [thumbnailImages, props.at]);
20
21
21
22
if (!currentThumbnail) return null;
22
-
return <img src={currentThumbnail.data} className="h-12 -translate-x-1/2" />;
23
+
return (
24
+
<div className="flex flex-col items-center -translate-x-1/2">
25
+
<img
26
+
src={currentThumbnail.data}
27
+
className="h-24 border rounded-xl border-gray-800"
28
+
/>
29
+
<p className="text-center">
30
+
{formatSeconds(props.at, durationExceedsHour(props.at))}
31
+
</p>
32
+
</div>
33
+
);
23
34
}
24
35
25
36
function useMouseHoverPosition(barRef: RefObject<HTMLDivElement>) {
+1
-5
src/components/player/atoms/Time.tsx
+1
-5
src/components/player/atoms/Time.tsx
···
3
3
import { VideoPlayerButton } from "@/components/player/internals/Button";
4
4
import { VideoPlayerTimeFormat } from "@/stores/player/slices/interface";
5
5
import { usePlayerStore } from "@/stores/player/store";
6
-
import { formatSeconds } from "@/utils/formatSeconds";
7
-
8
-
function durationExceedsHour(secs: number): boolean {
9
-
return secs > 60 * 60;
10
-
}
6
+
import { durationExceedsHour, formatSeconds } from "@/utils/formatSeconds";
11
7
12
8
export function Time(props: { short?: boolean }) {
13
9
const timeFormat = usePlayerStore((s) => s.interface.timeFormat);