Video player improvements (#8992)

apps/client/src/translations/en/translation.json

@@ -1036,6 +1036,25 @@
     "file_preview_not_available": "File preview is not available for this file format.",
     "too_big": "The preview only shows the first {{maxNumChars}} characters of the file for performance reasons. Download the file and open it externally to be able to see the entire content."
   },
+  "video": {
+    "play": "Play (Space)",
+    "pause": "Pause (Space)",
+    "back-10s": "Back 10s (Left arrow key)",
+    "forward-30s": "Forward 30s",
+    "mute": "Mute (M)",
+    "unmute": "Unmute (M)",
+    "playback-speed": "Playback speed",
+    "loop": "Loop",
+    "disable-loop": "Disable loop",
+    "rotate": "Rotate",
+    "picture-in-picture": "Picture-in-picture",
+    "exit-picture-in-picture": "Exit picture-in-picture",
+    "fullscreen": "Fullscreen (F)",
+    "exit-fullscreen": "Exit fullscreen",
+    "unsupported-format": "Video preview is not available for this file format.",
+    "zoom-to-fit": "Zoom to fill",
+    "zoom-reset": "Reset zoom to fill"
+  },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
     "start_session_button": "Start protected session",

apps/client/src/widgets/type_widgets/File.css

@@ -24,8 +24,7 @@
     margin: 10px;
 }
 
-.note-detail-file > .pdf-preview,
-.note-detail-file > .video-preview {
+.note-detail-file > .pdf-preview {
     width: 100%;
     height: 100%;
     flex-grow: 100;
@@ -38,4 +37,4 @@
     right: 15px;
     width: calc(100% - 30px);
     transform: translateY(-50%);
-}
+}

apps/client/src/widgets/type_widgets/File.tsx

@@ -6,6 +6,7 @@ import { getUrlForDownload } from "../../services/open";
 import Alert from "../react/Alert";
 import { useNoteBlob } from "../react/hooks";
 import PdfPreview from "./file/Pdf";
+import VideoPreview from "./file/Video";
 import { TypeWidgetProps } from "./type_widget";
 
 const TEXT_MAX_NUM_CHARS = 5000;
@@ -42,17 +43,6 @@ function TextPreview({ content }: { content: string }) {
     );
 }
 
-function VideoPreview({ note }: { note: FNote }) {
-    return (
-        <video
-            class="video-preview"
-            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-            datatype={note?.mime}
-            controls
-        />
-    );
-}
-
 function AudioPreview({ note }: { note: FNote }) {
     return (
         <audio

apps/client/src/widgets/type_widgets/file/Video.css

@@ -0,0 +1,114 @@
+.note-detail-file > .video-preview-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-color: black;
+
+    .video-preview {
+        background-color: black;
+        width: 100%;
+        height: 100%;
+    }
+
+    &.controls-hidden {
+        cursor: pointer;
+
+        .video-preview-controls {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    .video-preview-controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 1.25em;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+        background: rgba(0, 0, 0, 0.5);
+        color: white;
+        --icon-button-hover-color: white;
+        --icon-button-hover-background: rgba(255, 255, 255, 0.2);
+        opacity: 1;
+        transition: opacity 300ms ease;
+
+        .video-buttons-row {
+            display: flex;
+
+            > * {
+                flex: 1;
+                align-items: center;
+                gap: 0.5em;
+                display: flex;
+            }
+
+            .spacer {
+                width: var(--icon-button-size, 32px);
+                height: var(--icon-button-size, 32px);
+            }
+
+            .center {
+                justify-content: center;
+            }
+
+            .right {
+                display: flex;
+                justify-content: flex-end;
+            }
+
+            .play-button {
+                --icon-button-size: 48px;
+            }
+        }
+    }
+
+    .video-seekbar-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+    }
+
+    .video-trackbar {
+        flex: 1;
+        cursor: pointer;
+    }
+
+    .video-time {
+        font-size: 0.85em;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+    }
+
+    .video-volume-row {
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+    }
+
+    .video-volume-slider {
+        width: 80px;
+        cursor: pointer;
+    }
+
+    .speed-dropdown {
+        position: relative;
+
+        .tn-icon {
+            transform: translateY(-10%);
+        }
+
+        .video-speed-label {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            transform: translateY(15%);
+            text-align: center;
+            font-size: 0.6rem;
+            font-variant-numeric: tabular-nums;
+        }
+    }
+}

apps/client/src/widgets/type_widgets/file/Video.tsx

@@ -0,0 +1,514 @@
+import "./Video.css";
+
+import { RefObject } from "preact";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
+import { getUrlForDownload } from "../../../services/open";
+import ActionButton from "../../react/ActionButton";
+import Dropdown from "../../react/Dropdown";
+import Icon from "../../react/Icon";
+import NoItems from "../../react/NoItems";
+
+function formatTime(seconds: number): string {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+const AUTO_HIDE_DELAY = 3000;
+
+export default function VideoPreview({ note }: { note: FNote }) {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const [playing, setPlaying] = useState(false);
+    const [error, setError] = useState(false);
+    const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
+
+    useEffect(() => setError(false), [note.noteId]);
+    const onError = useCallback(() => setError(true), []);
+
+    const togglePlayback = useCallback(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        if (video.paused) {
+            video.play();
+        } else {
+            video.pause();
+        }
+    }, []);
+
+    const onVideoClick = useCallback((e: MouseEvent) => {
+        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
+        togglePlayback();
+    }, [togglePlayback]);
+
+    const onKeyDown = useCallback((e: KeyboardEvent) => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        switch (e.key) {
+            case " ":
+                e.preventDefault();
+                togglePlayback();
+                flashControls();
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                video.currentTime = Math.max(0, video.currentTime - (e.ctrlKey ? 60 : 10));
+                flashControls();
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                video.currentTime = Math.min(video.duration, video.currentTime + (e.ctrlKey ? 60 : 10));
+                flashControls();
+                break;
+            case "f":
+            case "F":
+                e.preventDefault();
+                if (document.fullscreenElement) {
+                    document.exitFullscreen();
+                } else {
+                    wrapperRef.current?.requestFullscreen();
+                }
+                break;
+            case "m":
+            case "M":
+                e.preventDefault();
+                video.muted = !video.muted;
+                flashControls();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                video.volume = Math.min(1, video.volume + 0.05);
+                flashControls();
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                video.volume = Math.max(0, video.volume - 0.05);
+                flashControls();
+                break;
+            case "Home":
+                e.preventDefault();
+                video.currentTime = 0;
+                flashControls();
+                break;
+            case "End":
+                e.preventDefault();
+                video.currentTime = video.duration;
+                flashControls();
+                break;
+        }
+    }, [togglePlayback, flashControls]);
+
+    if (error) {
+        return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format")} />;
+    }
+
+    return (
+        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
+            <video
+                ref={videoRef}
+                class="video-preview"
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                datatype={note?.mime}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+                onError={onError}
+            />
+
+            <div className="video-preview-controls">
+                <SeekBar videoRef={videoRef} />
+                <div class="video-buttons-row">
+                    <div className="left">
+                        <PlaybackSpeed videoRef={videoRef} />
+                        <RotateButton videoRef={videoRef} />
+                    </div>
+                    <div className="center">
+                        <div className="spacer" />
+                        <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
+                        <PlayPauseButton videoRef={videoRef} playing={playing} />
+                        <SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
+                        <LoopButton videoRef={videoRef} />
+                    </div>
+                    <div className="right">
+                        <VolumeControl videoRef={videoRef} />
+                        <ZoomToFitButton videoRef={videoRef} />
+                        <PictureInPictureButton videoRef={videoRef} />
+                        <FullscreenButton targetRef={wrapperRef} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {
+    const [visible, setVisible] = useState(true);
+    const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const scheduleHide = useCallback(() => {
+        clearTimeout(hideTimerRef.current);
+        if (videoRef.current && !videoRef.current.paused) {
+            hideTimerRef.current = setTimeout(() => setVisible(false), AUTO_HIDE_DELAY);
+        }
+    }, []);
+
+    const onMouseMove = useCallback(() => {
+        setVisible(true);
+        scheduleHide();
+    }, [scheduleHide]);
+
+    // Hide immediately when playback starts, show when paused.
+    useEffect(() => {
+        if (playing) {
+            setVisible(false);
+        } else {
+            clearTimeout(hideTimerRef.current);
+            setVisible(true);
+        }
+        return () => clearTimeout(hideTimerRef.current);
+    }, [playing, scheduleHide]);
+
+    return { visible, onMouseMove, flash: onMouseMove };
+}
+
+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 ? t("video.pause") : t("video.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);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        const onTimeUpdate = () => setCurrentTime(video.currentTime);
+        const onDurationChange = () => setDuration(video.duration);
+
+        video.addEventListener("timeupdate", onTimeUpdate);
+        video.addEventListener("durationchange", onDurationChange);
+        return () => {
+            video.removeEventListener("timeupdate", onTimeUpdate);
+            video.removeEventListener("durationchange", onDurationChange);
+        };
+    }, []);
+
+    const onSeek = (e: Event) => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.currentTime = parseFloat((e.target as HTMLInputElement).value);
+    };
+
+    return (
+        <div class="video-seekbar-row">
+            <span class="video-time">{formatTime(currentTime)}</span>
+            <input
+                type="range"
+                class="video-trackbar"
+                min={0}
+                max={duration || 0}
+                step={0.1}
+                value={currentTime}
+                onInput={onSeek}
+            />
+            <span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
+        </div>
+    );
+}
+
+function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [volume, setVolume] = useState(() => videoRef.current?.volume ?? 1);
+    const [muted, setMuted] = useState(() => videoRef.current?.muted ?? false);
+
+    // Sync state when the video element changes volume externally.
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        setVolume(video.volume);
+        setMuted(video.muted);
+
+        const onVolumeChange = () => {
+            setVolume(video.volume);
+            setMuted(video.muted);
+        };
+        video.addEventListener("volumechange", onVolumeChange);
+        return () => video.removeEventListener("volumechange", onVolumeChange);
+    }, []);
+
+    const onVolumeChange = (e: Event) => {
+        const video = videoRef.current;
+        if (!video) return;
+        const val = parseFloat((e.target as HTMLInputElement).value);
+        video.volume = val;
+        setVolume(val);
+        if (val > 0 && video.muted) {
+            video.muted = false;
+            setMuted(false);
+        }
+    };
+
+    const toggleMute = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.muted = !video.muted;
+        setMuted(video.muted);
+    };
+
+    return (
+        <div class="video-volume-row">
+            <ActionButton
+                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
+                text={muted ? t("video.unmute") : t("video.mute")}
+                onClick={toggleMute}
+            />
+            <input
+                type="range"
+                class="video-volume-slider"
+                min={0}
+                max={1}
+                step={0.05}
+                value={muted ? 0 : volume}
+                onInput={onVolumeChange}
+            />
+        </div>
+    );
+}
+
+const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
+
+function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [speed, setSpeed] = useState(() => videoRef.current?.playbackRate ?? 1);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        setSpeed(video.playbackRate);
+
+        const onRateChange = () => setSpeed(video.playbackRate);
+        video.addEventListener("ratechange", onRateChange);
+        return () => video.removeEventListener("ratechange", onRateChange);
+    }, []);
+
+    const selectSpeed = (rate: number) => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.playbackRate = rate;
+        setSpeed(rate);
+    };
+
+    return (
+        <Dropdown
+            iconAction
+            hideToggleArrow
+            buttonClassName="speed-dropdown"
+            text={<>
+                <Icon icon="bx bx-tachometer" />
+                <span class="video-speed-label">{speed}x</span>
+            </>}
+            title={t("video.playback-speed")}
+        >
+            {PLAYBACK_SPEEDS.map((rate) => (
+                <li key={rate}>
+                    <button
+                        class={`dropdown-item ${rate === speed ? "active" : ""}`}
+                        onClick={() => selectSpeed(rate)}
+                    >
+                        {rate}x
+                    </button>
+                </li>
+            ))}
+        </Dropdown>
+    );
+}
+
+function LoopButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [loop, setLoop] = useState(() => videoRef.current?.loop ?? false);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        setLoop(video.loop);
+
+        const observer = new MutationObserver(() => setLoop(video.loop));
+        observer.observe(video, { attributes: true, attributeFilter: ["loop"] });
+        return () => observer.disconnect();
+    }, []);
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.loop = !video.loop;
+        setLoop(video.loop);
+    };
+
+    return (
+        <ActionButton
+            className={loop ? "active" : ""}
+            icon="bx bx-repeat"
+            text={loop ? t("video.disable-loop") : t("video.loop")}
+            onClick={toggle}
+        />
+    );
+}
+
+function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [rotation, setRotation] = useState(0);
+
+    const rotate = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        const next = (rotation + 90) % 360;
+        setRotation(next);
+
+        const isSideways = next === 90 || next === 270;
+        if (isSideways) {
+            // Scale down so the rotated video fits within its container.
+            const container = video.parentElement;
+            if (container) {
+                const ratio = container.clientWidth / container.clientHeight;
+                video.style.transform = `rotate(${next}deg) scale(${1 / ratio})`;
+            } else {
+                video.style.transform = `rotate(${next}deg)`;
+            }
+        } else {
+            video.style.transform = next === 0 ? "" : `rotate(${next}deg)`;
+        }
+    };
+
+    return (
+        <ActionButton
+            icon="bx bx-rotate-right"
+            text={t("video.rotate")}
+            onClick={rotate}
+        />
+    );
+}
+
+function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [fitted, setFitted] = useState(false);
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        const next = !fitted;
+        video.style.objectFit = next ? "cover" : "";
+        setFitted(next);
+    };
+
+    return (
+        <ActionButton
+            className={fitted ? "active" : ""}
+            icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
+            text={fitted ? t("video.zoom-reset") : t("video.zoom-to-fit")}
+            onClick={toggle}
+        />
+    );
+}
+
+function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [active, setActive] = useState(false);
+    // The standard PiP API is only supported in Chromium-based browsers.
+    // Firefox uses its own proprietary PiP implementation.
+    const supported = "requestPictureInPicture" in HTMLVideoElement.prototype;
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !supported) return;
+
+        const onEnter = () => setActive(true);
+        const onLeave = () => setActive(false);
+
+        video.addEventListener("enterpictureinpicture", onEnter);
+        video.addEventListener("leavepictureinpicture", onLeave);
+        return () => {
+            video.removeEventListener("enterpictureinpicture", onEnter);
+            video.removeEventListener("leavepictureinpicture", onLeave);
+        };
+    }, [supported]);
+
+    if (!supported) return null;
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        } else {
+            video.requestPictureInPicture();
+        }
+    };
+
+    return (
+        <ActionButton
+            icon={active ? "bx bx-exit" : "bx bx-window-open"}
+            text={active ? t("video.exit-picture-in-picture") : t("video.picture-in-picture")}
+            onClick={toggle}
+        />
+    );
+}
+
+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 ? t("video.exit-fullscreen") : t("video.fullscreen")}
+            onClick={toggleFullscreen}
+        />
+    );
+}