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 24 Packages Projects Releases Wiki Activity

feat(video_player): add full screen button

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

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

@ -14,8 +14,10 @@ function formatTime(seconds: number): string {
}
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;
@ -34,8 +36,25 @@ 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 className="video-preview-wrapper">
<div ref={wrapperRef} className="video-preview-wrapper">
<video
ref={videoRef}
class="video-preview"
@ -69,6 +88,11 @@ 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}
/>
</div>
</div>
</div>