gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-14 04:13:38 +01:00
Code Issues Actions 45 Packages Projects Releases Wiki Activity

refactor(video_player): extract more buttons into separate components

Browse Source
This commit is contained in:
Elian Doran 2026-03-10 19:45:42 +02:00
parent 42a05f411b
commit bccfa7956c
No known key found for this signature in database
1 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
apps/client/src/widgets/type_widgets/file/Video.tsx
View File

@ -55,23 +55,6 @@ export default function VideoPreview({ note }: { note: FNote }) {
});
}, [playing]);
const togglePlayback = () => {
const video = videoRef.current;
if (!video) return;
if (video.paused) {
video.play();
} else {
video.pause();
}
};
const skip = (seconds: number) => {
const video = videoRef.current;
if (!video) return;
video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
};
return (
<div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} onClick={onWrapperClick} onMouseMove={showControlsTemporarily}>
<video
@ -90,22 +73,9 @@ export default function VideoPreview({ note }: { note: FNote }) {
<PlaybackSpeed videoRef={videoRef} />
</div>
<div className="center">
<ActionButton
icon="bx bx-rewind"
text="Back 10s"
onClick={() => skip(-10)}
/>
<ActionButton
className="play-button"
icon={playing ? "bx bx-pause" : "bx bx-play"}
text={playing ? "Pause" : "Play"}
onClick={togglePlayback}
/>
<ActionButton
icon="bx bx-fast-forward"
text="Forward 30s"
onClick={() => skip(30)}
/>
<SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text="Back 10s" />
<PlayPauseButton videoRef={videoRef} playing={playing} />
<SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text="Forward 30s" />
</div>
<div className="right">
<VolumeControl videoRef={videoRef} />
@ -117,6 +87,40 @@ export default function VideoPreview({ note }: { note: FNote }) {
);
}
function PlayPauseButton({ videoRef, playing }: { videoRef: RefObject<HTMLVideoElement>, playing: boolean }) {
const togglePlayback = () => {
const video = videoRef.current;
if (!video) return;
if (video.paused) {
video.play();
} else {
video.pause();
}
};
return (
<ActionButton
className="play-button"
icon={playing ? "bx bx-pause" : "bx bx-play"}
text={playing ? "Pause" : "Play"}
onClick={togglePlayback}
/>
);
}
function SkipButton({ videoRef, seconds, icon, text }: { videoRef: RefObject<HTMLVideoElement>, seconds: number, icon: string, text: string }) {
const skip = () => {
const video = videoRef.current;
if (!video) return;
video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
};
return (
<ActionButton icon={icon} text={text} onClick={skip} />
);
}
function SeekBar({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0);