shelving/ui/block/Video.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
import { useEffect, useRef, useState } from "react";
import { getSpacingClass } from "../style/Spacing.js";
import { getWidthClass } from "../style/Width.js";
import { getClass, getModuleClass } from "../util/css.js";
import styles from "./Video.module.css";
/**
 * Video container element.
 * - Has a black background and a 16:9 aspect ratio.
 * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
 */
export function Video({ children, ...variants }) {
    const ref = useRef(null);
    return (_jsx("figure", { ref: ref, className: getClass(getModuleClass(styles, "video"), getSpacingClass(variants), getWidthClass(variants)), children: children }));
}
/** Set of video buttons floating over a video. */
export function VideoButtons({ children, ...variants }) {
    return _jsx("div", { className: getModuleClass(styles, "buttons", variants), children: children });
}
/** Individual video button over a video. */
export function VideoButton({ children, title, onClick, disabled, ...variants }) {
    return (_jsx("button", { type: "button", onClick: onClick, className: getModuleClass(styles, "button", variants), title: title, disabled: disabled, children: children }));
}
/** Button to make a video element go fullscreen. */
export function FullscreenVideoButton() {
    const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
    useEffect(() => {
        const onChange = () => setFull(!!document.fullscreenElement);
        document.addEventListener("fullscreenchange", onChange);
        return () => document.removeEventListener("fullscreenchange", onChange);
    });
    if (!document.fullscreenEnabled)
        return null;
    return (_jsx(VideoButton, { title: isFull ? "Exit full screen mode" : "Enter full screen mode", onClick: ({ currentTarget }) => {
            if (document.fullscreenElement) {
                document.exitFullscreen();
            }
            else {
                const parent = currentTarget.closest("figure, video");
                if (parent)
                    parent.requestFullscreen();
            }
        }, children: isFull ? _jsx(ArrowsPointingInIcon, {}) : _jsx(ArrowsPointingOutIcon, {}) }));
}