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

refactor(video_player): extract full screen to separate component

Browse Source
This commit is contained in:
Elian Doran 2026-03-10 19:29:00 +02:00
parent 2ce4d512e7
commit 2132c2ab38
No known key found for this signature in database
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,8 +17,6 @@ export default function VideoPreview({ note }: { note: FNote }) {
const wrapperRef = useRef<HTMLDivElement>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const [playing, setPlaying] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false);
const togglePlayback = () => {
const video = videoRef.current;
if (!video) return;
@ -36,22 +34,6 @@ export default function VideoPreview({ note }: { note: FNote }) {
video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
};
const toggleFullscreen = () => {
const wrapper = wrapperRef.current;
if (!wrapper) return;
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
wrapper.requestFullscreen();
}
};
useEffect(() => {
const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
document.addEventListener("fullscreenchange", onFullscreenChange);
return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
}, []);
return (
<div ref={wrapperRef} className="video-preview-wrapper">
@ -88,11 +70,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
</div>
<div className="right">
<VolumeControl videoRef={videoRef} />
<ActionButton
icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
text={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
onClick={toggleFullscreen}
/>
<FullscreenButton targetRef={wrapperRef} />
</div>
</div>
</div>
@ -184,3 +162,32 @@ function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
</div>
);
}
function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> }) {
const [isFullscreen, setIsFullscreen] = useState(false);
useEffect(() => {
const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
document.addEventListener("fullscreenchange", onFullscreenChange);
return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
}, []);
const toggleFullscreen = () => {
const target = targetRef.current;
if (!target) return;
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
target.requestFullscreen();
}
};
return (
<ActionButton
icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
text={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
onClick={toggleFullscreen}
/>
);
}