@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/video-lightbox-controls.js

@@ -0,0 +1,536 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * The lightbox player's own controls (AGL-2802).
+ *
+ * ## Why not the browser's
+ *
+ * A `<video controls>` draws its buttons inside the browser's shadow tree, and
+ * Chrome's media controls consume `Escape` there before the page is sent
+ * anything: from the play, timeline, volume and full-screen stops, no
+ * `keydown` or `keyup` for it reaches the document in either phase. MUI's
+ * Modal closes on a bubbling `keydown`, so the dialog could not close from the
+ * four focus stops a keyboard visitor is on while watching, and no listener,
+ * capture phase included, can hear a key the page is never sent.
+ *
+ * These are ordinary buttons and range inputs. Every key pressed on one is
+ * dispatched through the document like any other key, so `Escape` bubbles to
+ * the Modal from each of them and focus goes back to the trigger.
+ *
+ * ## Why a module of its own
+ *
+ * Only `video-lightbox.tsx` imports it, and nothing else may. That module is
+ * reached solely through `lazy(() => import())` in `video.tsx`, so this file,
+ * and MUI's Slider with it, travels in the dialog's chunk: fetched by a
+ * visitor who asked to watch, never by a page that only shows a poster
+ * (AGL-2744).
+ *
+ * ## The keyboard
+ *
+ * | key | from | does |
+ * | -- | -- | -- |
+ * | `Space` | any stop but a button, which `Space` presses | play or pause |
+ * | `K` | any stop | play or pause |
+ * | `←` `→` | any stop but a slider | back or forward five seconds |
+ * | `M` | any stop | mute or unmute |
+ * | `F` | any stop | full screen on or off |
+ * | arrows | the seek slider | five seconds, ten with `Shift` |
+ * | `Page Up` `Page Down` | the seek slider | ten seconds |
+ * | `Home` `End` | the seek slider | the start, the end |
+ * | arrows | the volume slider | five percent |
+ * | `Escape` | any stop | leaves full screen if on, otherwise closes |
+ *
+ * A key held with `Ctrl`, `Alt` or `Meta` is never a shortcut: those belong
+ * to the browser and the operating system.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mdiClosedCaption, mdiClosedCaptionOutline, mdiFullscreen, mdiFullscreenExit, mdiPause, mdiPlay, mdiVolumeHigh, mdiVolumeOff } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import Box from "@mui/material/Box";
+import { touchRippleClasses } from "@mui/material/ButtonBase";
+import IconButton from "@mui/material/IconButton";
+import Slider, { sliderClasses } from "@mui/material/Slider";
+import { useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useEffect, useRef, useState } from "react";
+/** One arrow press on the playhead, on the seek slider or from any other stop. */ export const SEEK_STEP_SECONDS = 5;
+/** `Page Up` and `Page Down` on the seek slider, and an arrow held with `Shift`. */ export const SEEK_PAGE_SECONDS = 10;
+/** One arrow press on the volume slider, in percent. */ const VOLUME_STEP_PERCENT = 5;
+const ignore = ()=>undefined;
+/**
+ * A player clock: `m:ss`, or `h:mm:ss` from an hour up.
+ *
+ * A duration the browser does not know yet (`NaN`, before metadata) or cannot
+ * know (`Infinity`, a stream) reads as `0:00` rather than as `NaN:NaN`.
+ */ export function formatMediaTime(seconds) {
+    const whole = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+    const hours = Math.floor(whole / 3600);
+    const minutes = Math.floor(whole / 60) % 60;
+    const rest = String(whole % 60).padStart(2, '0');
+    return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${rest}` : `${minutes}:${rest}`;
+}
+/** What the seek slider says its value is: `1:23 of 4:10`. */ export function seekValueText(position, duration) {
+    return `${formatMediaTime(position)} of ${formatMediaTime(duration)}`;
+}
+/**
+ * Play or pause.
+ *
+ * `play()` rejects when the browser refuses playback, and the refusal needs
+ * no handling: no `play` event fires, so the control goes on reporting a
+ * paused film, which is the truth.
+ */ export function togglePlayback(video) {
+    if (video.paused || video.ended) {
+        void Promise.resolve(video.play()).catch(ignore);
+    } else {
+        video.pause();
+    }
+}
+/**
+ * Moves the playhead, clamped to the film, and returns where it landed.
+ * Before the duration is known there is nowhere to land, and nothing moves.
+ */ export function seekPlayback(video, seconds) {
+    const { duration } = video;
+    if (!Number.isFinite(duration) || duration <= 0) return undefined;
+    const landed = Math.min(Math.max(seconds, 0), duration);
+    video.currentTime = landed;
+    return landed;
+}
+export function toggleMute(video) {
+    video.muted = !video.muted;
+}
+/**
+ * Whether a full-screen control would do anything here.
+ *
+ * `fullscreenEnabled` is false inside a frame whose embedder did not allow it,
+ * and there the control is left out rather than shown doing nothing. A phone
+ * with no element full screen at all still gets the video-only kind, which
+ * plays under the platform's own controls.
+ */ export function fullscreenAvailable() {
+    if (typeof document === 'undefined') return false;
+    if (document.fullscreenEnabled) return true;
+    return !('requestFullscreen' in Element.prototype) && 'webkitEnterFullscreen' in HTMLVideoElement.prototype;
+}
+export function toggleFullscreen({ video, player }) {
+    var _this, _phone_webkitEnterFullscreen;
+    const doc = (_this = player != null ? player : video) == null ? void 0 : _this.ownerDocument;
+    if (!doc) return;
+    if (player && doc.fullscreenElement === player) {
+        void Promise.resolve(doc.exitFullscreen()).catch(ignore);
+        return;
+    }
+    if (player && doc.fullscreenEnabled) {
+        void Promise.resolve(player.requestFullscreen()).catch(ignore);
+        return;
+    }
+    const phone = video;
+    phone == null ? void 0 : (_phone_webkitEnterFullscreen = phone.webkitEnterFullscreen) == null ? void 0 : _phone_webkitEnterFullscreen.call(phone);
+}
+/** The tracks a captions toggle turns on and off. */ function captionTracks(video) {
+    var _video_textTracks;
+    // Absent where a DOM implements no media pipeline.
+    const tracks = (_video_textTracks = video.textTracks) != null ? _video_textTracks : [];
+    return Array.from(tracks).filter((track)=>track.kind === 'captions' || track.kind === 'subtitles');
+}
+/** The keys a focused slider moves itself with. */ const SLIDER_KEYS = new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'PageUp',
+    'PageDown',
+    'Home',
+    'End'
+]);
+const ARROW_KEYS = new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown'
+]);
+/**
+ * Whether the focused element uses `key` for itself, in which case no shortcut
+ * may take it: `Space` and `Enter` press a focused button, the arrows and
+ * `Home`/`End` move a focused slider, and a text field wants every key.
+ */ export function keyBelongsToFocus(target, key) {
+    if (!(target instanceof Element)) return false;
+    if (target instanceof HTMLElement && target.isContentEditable) return true;
+    if (target.matches('input[type="range"], [role="slider"]')) {
+        return SLIDER_KEYS.has(key);
+    }
+    if (target.matches('button, [role="button"], a[href], summary, input[type="checkbox"], input[type="radio"]')) {
+        return key === ' ' || key === 'Enter';
+    }
+    return target.matches('input, textarea, select');
+}
+const SHORTCUTS = new Map([
+    [
+        ' ',
+        {
+            run: togglePlayback,
+            repeats: false
+        }
+    ],
+    [
+        'k',
+        {
+            run: togglePlayback,
+            repeats: false
+        }
+    ],
+    [
+        'ArrowLeft',
+        {
+            run: (video)=>seekPlayback(video, video.currentTime - SEEK_STEP_SECONDS),
+            repeats: true
+        }
+    ],
+    [
+        'ArrowRight',
+        {
+            run: (video)=>seekPlayback(video, video.currentTime + SEEK_STEP_SECONDS),
+            repeats: true
+        }
+    ],
+    [
+        'm',
+        {
+            run: toggleMute,
+            repeats: false
+        }
+    ],
+    [
+        'f',
+        {
+            run: (video, player)=>toggleFullscreen({
+                    video,
+                    player
+                }),
+            repeats: false
+        }
+    ]
+]);
+/**
+ * The dialog's `onKeyDown`: the player's shortcuts, from every stop inside it.
+ *
+ * Bound on the Modal root rather than on the controls, because focus is not
+ * always on a control — a click on the film leaves it on the dialog container
+ * — and a key pressed anywhere in the dialog bubbles through the root. MUI
+ * calls this before its own `Escape` handling, and nothing here touches
+ * `Escape`.
+ *
+ * A key the focused control uses for itself is left alone, and so is any key
+ * a control already claimed: MUI's Slider calls `preventDefault` on the keys
+ * it moves with, which is how an arrow on a slider stays that slider's.
+ */ export function handlePlayerShortcut(event, { video, player }) {
+    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+    const shortcut = SHORTCUTS.get(key);
+    if (!shortcut || !video) return;
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing) {
+        return;
+    }
+    if (keyBelongsToFocus(event.target, event.key)) return;
+    event.preventDefault();
+    if (event.repeat && !shortcut.repeats) return;
+    shortcut.run(video, player);
+}
+/** A focus ring that reads on the player's black ground, whatever the site's palette. */ const focusRing = {
+    outline: '2px solid',
+    outlineColor: 'common.white',
+    outlineOffset: 2
+};
+/**
+ * Every button on the player, the dialog's close button included.
+ *
+ * IconButton's own hover rule reads `--IconButton-hoverBg`, `hover: none`
+ * reset and all; its default is a tint of `action.active`, which on a light
+ * site's palette is black on this black ground and never shows. The ripple is
+ * motion, so it goes for a visitor who asked for less, and it is gated in CSS
+ * as the poster's play badge is so the setting resolves in both directions.
+ */ export const controlButtonSx = (theme)=>({
+        color: 'common.white',
+        '--IconButton-hoverBg': (theme.vars || theme).palette.grey[800],
+        '&:focus-visible': focusRing,
+        '@media (prefers-reduced-motion: reduce)': {
+            [`& .${touchRippleClasses.root}`]: {
+                display: 'none'
+            }
+        }
+    });
+const sliderSx = {
+    color: 'common.white',
+    // The focused element is the thumb's visually hidden range input, so the
+    // ring goes on the thumb MUI marks as focus-visible.
+    [`& .${sliderClasses.thumb}.${sliderClasses.focusVisible}`]: focusRing,
+    // The thumb glides to each new value; that glide is motion too.
+    '@media (prefers-reduced-motion: reduce)': {
+        [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
+            transition: 'none'
+        }
+    }
+};
+/** Every event after which the element reports something the controls draw. */ const MEDIA_EVENTS = [
+    'play',
+    'pause',
+    'ended',
+    'timeupdate',
+    'seeked',
+    'durationchange',
+    'loadedmetadata',
+    'volumechange',
+    'emptied'
+];
+const snapshotOf = (video)=>({
+        paused: video.paused,
+        currentTime: video.currentTime,
+        duration: video.duration,
+        muted: video.muted,
+        volume: video.volume
+    });
+/**
+ * The bar under the film: a seek slider across the top, then play, the clock,
+ * mute, volume, captions and full screen.
+ *
+ * Each control is a real `<button>` or a real range input with a name and a
+ * state: `aria-pressed` on the toggles, a spoken `1:23 of 4:10` on the seek
+ * slider, `aria-keyshortcuts` where a key does the same thing.
+ *
+ * What the controls draw is read back off the `<video>` on its own events
+ * rather than kept beside it, so a button, a shortcut, a click on the film and
+ * the platform's media keys all end in one place, and the play beacon's
+ * handlers on the element hear every one of them.
+ */ export function VideoLightboxControls(props) {
+    const { videoRef, playerRef, captions = false } = props;
+    const [media, setMedia] = useState({
+        paused: true,
+        currentTime: 0,
+        duration: Number.NaN,
+        muted: false,
+        volume: 1
+    });
+    const [fullscreen, setFullscreen] = useState(false);
+    const [captionsShowing, setCaptionsShowing] = useState(captions);
+    const [canFullscreen] = useState(fullscreenAvailable);
+    const fullscreenButtonRef = useRef(null);
+    /**
+   * No volume slider at phone width: a phone's volume belongs to its hardware
+   * buttons, iOS ignores a page that sets it, and the row has no room for it.
+   * Read on the first render, so the slider never flashes in and out on open.
+   */ const theme = useTheme();
+    const phone = useMediaQuery(theme.breakpoints.down('sm'), {
+        noSsr: true
+    });
+    useEffect(()=>{
+        var _tracks_addEventListener;
+        const video = videoRef.current;
+        if (!video) return undefined;
+        const doc = video.ownerDocument;
+        const tracks = video.textTracks;
+        const syncMedia = ()=>setMedia(snapshotOf(video));
+        /**
+     * Full screen moves the player into the top layer, and the browser blurs
+     * whatever had focus outside it: the dialog's own surface, where focus
+     * lands on open, is outside it. Focus then sits on the body, outside the
+     * Modal, where no shortcut and no `Escape` reaches the dialog. So focus
+     * follows the player in, onto the control that toggles it, and is put
+     * back there on the way out if the browser dropped it again.
+     */ const syncFullscreen = ()=>{
+            const player = playerRef.current;
+            setFullscreen(player !== null && doc.fullscreenElement === player);
+            if (player && !player.contains(doc.activeElement)) {
+                var _fullscreenButtonRef_current;
+                (_fullscreenButtonRef_current = fullscreenButtonRef.current) == null ? void 0 : _fullscreenButtonRef_current.focus();
+            }
+        };
+        const syncCaptions = ()=>setCaptionsShowing(captionTracks(video).some((track)=>track.mode === 'showing'));
+        syncMedia();
+        for (const type of MEDIA_EVENTS)video.addEventListener(type, syncMedia);
+        doc.addEventListener('fullscreenchange', syncFullscreen);
+        tracks == null ? void 0 : (_tracks_addEventListener = tracks.addEventListener) == null ? void 0 : _tracks_addEventListener.call(tracks, 'change', syncCaptions);
+        return ()=>{
+            var _tracks_removeEventListener;
+            for (const type of MEDIA_EVENTS)video.removeEventListener(type, syncMedia);
+            doc.removeEventListener('fullscreenchange', syncFullscreen);
+            tracks == null ? void 0 : (_tracks_removeEventListener = tracks.removeEventListener) == null ? void 0 : _tracks_removeEventListener.call(tracks, 'change', syncCaptions);
+        };
+    }, [
+        videoRef,
+        playerRef
+    ]);
+    const seekable = Number.isFinite(media.duration) && media.duration > 0;
+    const position = seekable ? Math.min(Math.max(media.currentTime, 0), media.duration) : 0;
+    const playing = !media.paused;
+    const level = media.muted ? 0 : Math.round(media.volume * 100);
+    const withVideo = (action)=>()=>{
+            const video = videoRef.current;
+            if (video) action(video);
+        };
+    /**
+   * MUI's Slider steps an arrow by `step`, which is also the grain a pointer
+   * drag snaps to. One second keeps a drag as fine as the clock it moves, and
+   * this scales an arrow up to the same five seconds the arrows give from
+   * every other stop, in the direction MUI chose, so a right-to-left page's
+   * arrows still point the way the track runs.
+   */ const onSeek = (event, value)=>{
+        const video = videoRef.current;
+        if (!video || typeof value !== 'number') return;
+        const arrow = event.type === 'keydown' && ARROW_KEYS.has(event.key);
+        const step = event.shiftKey ? SEEK_PAGE_SECONDS : SEEK_STEP_SECONDS;
+        const target = arrow ? video.currentTime + Math.sign(value - position) * step : value;
+        const landed = seekPlayback(video, target);
+        // Drawn now rather than on `seeked`, so the thumb does not spring back
+        // to where it was for the frames the seek takes.
+        if (landed !== undefined) {
+            setMedia((previous)=>_extends({}, previous, {
+                    currentTime: landed
+                }));
+        }
+    };
+    /**
+   * Zero mutes rather than zeroing the volume, so unmuting brings back the
+   * last level the visitor could hear.
+   */ const onVolume = (_event, value)=>{
+        const video = videoRef.current;
+        if (!video || typeof value !== 'number') return;
+        if (value <= 0) {
+            video.muted = true;
+            return;
+        }
+        video.volume = value / 100;
+        video.muted = false;
+    };
+    const onCaptions = withVideo((video)=>{
+        const next = !captionsShowing;
+        for (const track of captionTracks(video)){
+            track.mode = next ? 'showing' : 'hidden';
+        }
+        setCaptionsShowing(next);
+    });
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    px: 2
+                },
+                children: /*#__PURE__*/ _jsx(Slider, {
+                    "aria-label": "Seek",
+                    size: "small",
+                    min: 0,
+                    max: seekable ? media.duration : 1,
+                    step: 1,
+                    shiftStep: SEEK_PAGE_SECONDS,
+                    value: position,
+                    disabled: !seekable,
+                    getAriaValueText: (value)=>seekValueText(value, media.duration),
+                    onChange: onSeek,
+                    sx: sliderSx
+                })
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    px: 1,
+                    pb: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        "aria-label": "Play",
+                        "aria-pressed": playing,
+                        "aria-keyshortcuts": "k Space",
+                        onClick: withVideo(togglePlayback),
+                        sx: controlButtonSx,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: playing ? mdiPause.path : mdiPlay.path
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        component: "span",
+                        variant: "body2",
+                        // The seek slider already speaks this, as `1:23 of 4:10`.
+                        "aria-hidden": true,
+                        sx: {
+                            color: 'common.white',
+                            fontVariantNumeric: 'tabular-nums',
+                            whiteSpace: 'nowrap'
+                        },
+                        children: `${formatMediaTime(position)} / ${formatMediaTime(media.duration)}`
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            flexGrow: 1
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        "aria-label": "Mute",
+                        "aria-pressed": media.muted,
+                        "aria-keyshortcuts": "m",
+                        onClick: withVideo(toggleMute),
+                        sx: controlButtonSx,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: media.muted || media.volume === 0 ? mdiVolumeOff.path : mdiVolumeHigh.path
+                        })
+                    }),
+                    phone ? null : /*#__PURE__*/ _jsx(Slider, {
+                        "aria-label": "Volume",
+                        size: "small",
+                        min: 0,
+                        max: 100,
+                        step: VOLUME_STEP_PERCENT,
+                        value: level,
+                        getAriaValueText: (value)=>value === 0 ? 'Muted' : `${value}%`,
+                        onChange: onVolume,
+                        sx: [
+                            sliderSx,
+                            {
+                                width: theme.spacing(12),
+                                mx: 1
+                            }
+                        ]
+                    }),
+                    captions ? /*#__PURE__*/ _jsx(IconButton, {
+                        "aria-label": "Captions",
+                        "aria-pressed": captionsShowing,
+                        onClick: onCaptions,
+                        sx: controlButtonSx,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: captionsShowing ? mdiClosedCaption.path : mdiClosedCaptionOutline.path
+                        })
+                    }) : null,
+                    canFullscreen ? /*#__PURE__*/ _jsx(IconButton, {
+                        ref: fullscreenButtonRef,
+                        "aria-label": "Full screen",
+                        "aria-pressed": fullscreen,
+                        "aria-keyshortcuts": "f",
+                        onClick: ()=>toggleFullscreen({
+                                video: videoRef.current,
+                                player: playerRef.current
+                            }),
+                        sx: controlButtonSx,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: fullscreen ? mdiFullscreenExit.path : mdiFullscreen.path
+                        })
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+VideoLightboxControls.displayName = 'VideoLightboxControls';
+
+//# sourceMappingURL=video-lightbox-controls.js.map

package/src/lib/components/video-lightbox-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/video-lightbox-controls.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * The lightbox player's own controls (AGL-2802).\n *\n * ## Why not the browser's\n *\n * A `<video controls>` draws its buttons inside the browser's shadow tree, and\n * Chrome's media controls consume `Escape` there before the page is sent\n * anything: from the play, timeline, volume and full-screen stops, no\n * `keydown` or `keyup` for it reaches the document in either phase. MUI's\n * Modal closes on a bubbling `keydown`, so the dialog could not close from the\n * four focus stops a keyboard visitor is on while watching, and no listener,\n * capture phase included, can hear a key the page is never sent.\n *\n * These are ordinary buttons and range inputs. Every key pressed on one is\n * dispatched through the document like any other key, so `Escape` bubbles to\n * the Modal from each of them and focus goes back to the trigger.\n *\n * ## Why a module of its own\n *\n * Only `video-lightbox.tsx` imports it, and nothing else may. That module is\n * reached solely through `lazy(() => import())` in `video.tsx`, so this file,\n * and MUI's Slider with it, travels in the dialog's chunk: fetched by a\n * visitor who asked to watch, never by a page that only shows a poster\n * (AGL-2744).\n *\n * ## The keyboard\n *\n * | key | from | does |\n * | -- | -- | -- |\n * | `Space` | any stop but a button, which `Space` presses | play or pause |\n * | `K` | any stop | play or pause |\n * | `←` `→` | any stop but a slider | back or forward five seconds |\n * | `M` | any stop | mute or unmute |\n * | `F` | any stop | full screen on or off |\n * | arrows | the seek slider | five seconds, ten with `Shift` |\n * | `Page Up` `Page Down` | the seek slider | ten seconds |\n * | `Home` `End` | the seek slider | the start, the end |\n * | arrows | the volume slider | five percent |\n * | `Escape` | any stop | leaves full screen if on, otherwise closes |\n *\n * A key held with `Ctrl`, `Alt` or `Meta` is never a shortcut: those belong\n * to the browser and the operating system.\n */\n'use client'\n\nimport {\n  mdiClosedCaption,\n  mdiClosedCaptionOutline,\n  mdiFullscreen,\n  mdiFullscreenExit,\n  mdiPause,\n  mdiPlay,\n  mdiVolumeHigh,\n  mdiVolumeOff,\n} from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport Box from '@mui/material/Box'\nimport { touchRippleClasses } from '@mui/material/ButtonBase'\nimport IconButton from '@mui/material/IconButton'\nimport Slider, { sliderClasses } from '@mui/material/Slider'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport Typography from '@mui/material/Typography'\nimport useMediaQuery from '@mui/material/useMediaQuery'\nimport {\n  type KeyboardEvent,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\n\n/** One arrow press on the playhead, on the seek slider or from any other stop. */\nexport const SEEK_STEP_SECONDS = 5\n\n/** `Page Up` and `Page Down` on the seek slider, and an arrow held with `Shift`. */\nexport const SEEK_PAGE_SECONDS = 10\n\n/** One arrow press on the volume slider, in percent. */\nconst VOLUME_STEP_PERCENT = 5\n\nconst ignore = () => undefined\n\n/**\n * A player clock: `m:ss`, or `h:mm:ss` from an hour up.\n *\n * A duration the browser does not know yet (`NaN`, before metadata) or cannot\n * know (`Infinity`, a stream) reads as `0:00` rather than as `NaN:NaN`.\n */\nexport function formatMediaTime(seconds: number): string {\n  const whole = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0\n  const hours = Math.floor(whole / 3600)\n  const minutes = Math.floor(whole / 60) % 60\n  const rest = String(whole % 60).padStart(2, '0')\n  return hours > 0\n    ? `${hours}:${String(minutes).padStart(2, '0')}:${rest}`\n    : `${minutes}:${rest}`\n}\n\n/** What the seek slider says its value is: `1:23 of 4:10`. */\nexport function seekValueText(position: number, duration: number): string {\n  return `${formatMediaTime(position)} of ${formatMediaTime(duration)}`\n}\n\n/** The two elements the controls and the keyboard act on. */\nexport interface LightboxPlayerElements {\n  video: HTMLVideoElement | null\n  /**\n   * The frame that goes full screen: the film AND these controls, so they are\n   * still on screen, and still reachable from the keyboard, once it has.\n   */\n  player: HTMLElement | null\n}\n\n/**\n * Play or pause.\n *\n * `play()` rejects when the browser refuses playback, and the refusal needs\n * no handling: no `play` event fires, so the control goes on reporting a\n * paused film, which is the truth.\n */\nexport function togglePlayback(video: HTMLVideoElement): void {\n  if (video.paused || video.ended) {\n    void Promise.resolve(video.play()).catch(ignore)\n  } else {\n    video.pause()\n  }\n}\n\n/**\n * Moves the playhead, clamped to the film, and returns where it landed.\n * Before the duration is known there is nowhere to land, and nothing moves.\n */\nexport function seekPlayback(\n  video: HTMLVideoElement,\n  seconds: number,\n): number | undefined {\n  const { duration } = video\n  if (!Number.isFinite(duration) || duration <= 0) return undefined\n  const landed = Math.min(Math.max(seconds, 0), duration)\n  video.currentTime = landed\n  return landed\n}\n\nexport function toggleMute(video: HTMLVideoElement): void {\n  video.muted = !video.muted\n}\n\n/** iOS Safari on a phone, which can put only the `<video>` itself full screen. */\ntype PhoneVideoElement = HTMLVideoElement & { webkitEnterFullscreen?: () => void }\n\n/**\n * Whether a full-screen control would do anything here.\n *\n * `fullscreenEnabled` is false inside a frame whose embedder did not allow it,\n * and there the control is left out rather than shown doing nothing. A phone\n * with no element full screen at all still gets the video-only kind, which\n * plays under the platform's own controls.\n */\nexport function fullscreenAvailable(): boolean {\n  if (typeof document === 'undefined') return false\n  if (document.fullscreenEnabled) return true\n  return (\n    !('requestFullscreen' in Element.prototype) &&\n    'webkitEnterFullscreen' in HTMLVideoElement.prototype\n  )\n}\n\nexport function toggleFullscreen({ video, player }: LightboxPlayerElements): void {\n  const doc = (player ?? video)?.ownerDocument\n  if (!doc) return\n  if (player && doc.fullscreenElement === player) {\n    void Promise.resolve(doc.exitFullscreen()).catch(ignore)\n    return\n  }\n  if (player && doc.fullscreenEnabled) {\n    void Promise.resolve(player.requestFullscreen()).catch(ignore)\n    return\n  }\n  const phone = video as PhoneVideoElement | null\n  phone?.webkitEnterFullscreen?.()\n}\n\n/** The tracks a captions toggle turns on and off. */\nfunction captionTracks(video: HTMLVideoElement): TextTrack[] {\n  // Absent where a DOM implements no media pipeline.\n  const tracks: ArrayLike<TextTrack> = video.textTracks ?? []\n  return Array.from(tracks).filter(\n    (track) => track.kind === 'captions' || track.kind === 'subtitles',\n  )\n}\n\n/** The keys a focused slider moves itself with. */\nconst SLIDER_KEYS = new Set([\n  'ArrowLeft',\n  'ArrowRight',\n  'ArrowUp',\n  'ArrowDown',\n  'PageUp',\n  'PageDown',\n  'Home',\n  'End',\n])\n\nconst ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])\n\n/**\n * Whether the focused element uses `key` for itself, in which case no shortcut\n * may take it: `Space` and `Enter` press a focused button, the arrows and\n * `Home`/`End` move a focused slider, and a text field wants every key.\n */\nexport function keyBelongsToFocus(\n  target: EventTarget | null,\n  key: string,\n): boolean {\n  if (!(target instanceof Element)) return false\n  if (target instanceof HTMLElement && target.isContentEditable) return true\n  if (target.matches('input[type=\"range\"], [role=\"slider\"]')) {\n    return SLIDER_KEYS.has(key)\n  }\n  if (\n    target.matches(\n      'button, [role=\"button\"], a[href], summary, input[type=\"checkbox\"], input[type=\"radio\"]',\n    )\n  ) {\n    return key === ' ' || key === 'Enter'\n  }\n  return target.matches('input, textarea, select')\n}\n\ninterface Shortcut {\n  run: (video: HTMLVideoElement, player: HTMLElement | null) => void\n  /** Whether holding the key keeps doing it. A toggle held down must not flicker. */\n  repeats: boolean\n}\n\nconst SHORTCUTS = new Map<string, Shortcut>([\n  [' ', { run: togglePlayback, repeats: false }],\n  ['k', { run: togglePlayback, repeats: false }],\n  [\n    'ArrowLeft',\n    {\n      run: (video) => seekPlayback(video, video.currentTime - SEEK_STEP_SECONDS),\n      repeats: true,\n    },\n  ],\n  [\n    'ArrowRight',\n    {\n      run: (video) => seekPlayback(video, video.currentTime + SEEK_STEP_SECONDS),\n      repeats: true,\n    },\n  ],\n  ['m', { run: toggleMute, repeats: false }],\n  [\n    'f',\n    { run: (video, player) => toggleFullscreen({ video, player }), repeats: false },\n  ],\n])\n\n/**\n * The dialog's `onKeyDown`: the player's shortcuts, from every stop inside it.\n *\n * Bound on the Modal root rather than on the controls, because focus is not\n * always on a control — a click on the film leaves it on the dialog container\n * — and a key pressed anywhere in the dialog bubbles through the root. MUI\n * calls this before its own `Escape` handling, and nothing here touches\n * `Escape`.\n *\n * A key the focused control uses for itself is left alone, and so is any key\n * a control already claimed: MUI's Slider calls `preventDefault` on the keys\n * it moves with, which is how an arrow on a slider stays that slider's.\n */\nexport function handlePlayerShortcut(\n  event: KeyboardEvent<Element>,\n  { video, player }: LightboxPlayerElements,\n): void {\n  const key = event.key.length === 1 ? event.key.toLowerCase() : event.key\n  const shortcut = SHORTCUTS.get(key)\n  if (!shortcut || !video) return\n  if (\n    event.defaultPrevented ||\n    event.altKey ||\n    event.ctrlKey ||\n    event.metaKey ||\n    event.nativeEvent.isComposing\n  ) {\n    return\n  }\n  if (keyBelongsToFocus(event.target, event.key)) return\n  event.preventDefault()\n  if (event.repeat && !shortcut.repeats) return\n  shortcut.run(video, player)\n}\n\n/** A focus ring that reads on the player's black ground, whatever the site's palette. */\nconst focusRing = {\n  outline: '2px solid',\n  outlineColor: 'common.white',\n  outlineOffset: 2,\n}\n\n/**\n * Every button on the player, the dialog's close button included.\n *\n * IconButton's own hover rule reads `--IconButton-hoverBg`, `hover: none`\n * reset and all; its default is a tint of `action.active`, which on a light\n * site's palette is black on this black ground and never shows. The ripple is\n * motion, so it goes for a visitor who asked for less, and it is gated in CSS\n * as the poster's play badge is so the setting resolves in both directions.\n */\nexport const controlButtonSx = (theme: Theme) => ({\n  color: 'common.white',\n  '--IconButton-hoverBg': (theme.vars || theme).palette.grey[800],\n  '&:focus-visible': focusRing,\n  '@media (prefers-reduced-motion: reduce)': {\n    [`& .${touchRippleClasses.root}`]: { display: 'none' },\n  },\n})\n\nconst sliderSx = {\n  color: 'common.white',\n  // The focused element is the thumb's visually hidden range input, so the\n  // ring goes on the thumb MUI marks as focus-visible.\n  [`& .${sliderClasses.thumb}.${sliderClasses.focusVisible}`]: focusRing,\n  // The thumb glides to each new value; that glide is motion too.\n  '@media (prefers-reduced-motion: reduce)': {\n    [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {\n      transition: 'none',\n    },\n  },\n}\n\n/** The film's state as the controls draw it. */\ninterface MediaSnapshot {\n  paused: boolean\n  currentTime: number\n  duration: number\n  muted: boolean\n  volume: number\n}\n\n/** Every event after which the element reports something the controls draw. */\nconst MEDIA_EVENTS = [\n  'play',\n  'pause',\n  'ended',\n  'timeupdate',\n  'seeked',\n  'durationchange',\n  'loadedmetadata',\n  'volumechange',\n  'emptied',\n] as const\n\nconst snapshotOf = (video: HTMLVideoElement): MediaSnapshot => ({\n  paused: video.paused,\n  currentTime: video.currentTime,\n  duration: video.duration,\n  muted: video.muted,\n  volume: video.volume,\n})\n\nexport interface VideoLightboxControlsProps {\n  videoRef: RefObject<HTMLVideoElement | null>\n  /** See {@link LightboxPlayerElements.player}. */\n  playerRef: RefObject<HTMLElement | null>\n  /** The film carries a captions track, so a toggle for it belongs here. */\n  captions?: boolean\n}\n\n/**\n * The bar under the film: a seek slider across the top, then play, the clock,\n * mute, volume, captions and full screen.\n *\n * Each control is a real `<button>` or a real range input with a name and a\n * state: `aria-pressed` on the toggles, a spoken `1:23 of 4:10` on the seek\n * slider, `aria-keyshortcuts` where a key does the same thing.\n *\n * What the controls draw is read back off the `<video>` on its own events\n * rather than kept beside it, so a button, a shortcut, a click on the film and\n * the platform's media keys all end in one place, and the play beacon's\n * handlers on the element hear every one of them.\n */\nexport function VideoLightboxControls(props: VideoLightboxControlsProps) {\n  const { videoRef, playerRef, captions = false } = props\n  const [media, setMedia] = useState<MediaSnapshot>({\n    paused: true,\n    currentTime: 0,\n    duration: Number.NaN,\n    muted: false,\n    volume: 1,\n  })\n  const [fullscreen, setFullscreen] = useState(false)\n  const [captionsShowing, setCaptionsShowing] = useState(captions)\n  const [canFullscreen] = useState(fullscreenAvailable)\n  const fullscreenButtonRef = useRef<HTMLButtonElement>(null)\n  /**\n   * No volume slider at phone width: a phone's volume belongs to its hardware\n   * buttons, iOS ignores a page that sets it, and the row has no room for it.\n   * Read on the first render, so the slider never flashes in and out on open.\n   */\n  const theme = useTheme()\n  const phone = useMediaQuery(theme.breakpoints.down('sm'), { noSsr: true })\n\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return undefined\n    const doc = video.ownerDocument\n    const tracks = video.textTracks as TextTrackList | undefined\n    const syncMedia = () => setMedia(snapshotOf(video))\n    /**\n     * Full screen moves the player into the top layer, and the browser blurs\n     * whatever had focus outside it: the dialog's own surface, where focus\n     * lands on open, is outside it. Focus then sits on the body, outside the\n     * Modal, where no shortcut and no `Escape` reaches the dialog. So focus\n     * follows the player in, onto the control that toggles it, and is put\n     * back there on the way out if the browser dropped it again.\n     */\n    const syncFullscreen = () => {\n      const player = playerRef.current\n      setFullscreen(player !== null && doc.fullscreenElement === player)\n      if (player && !player.contains(doc.activeElement)) {\n        fullscreenButtonRef.current?.focus()\n      }\n    }\n    const syncCaptions = () =>\n      setCaptionsShowing(\n        captionTracks(video).some((track) => track.mode === 'showing'),\n      )\n    syncMedia()\n    for (const type of MEDIA_EVENTS) video.addEventListener(type, syncMedia)\n    doc.addEventListener('fullscreenchange', syncFullscreen)\n    tracks?.addEventListener?.('change', syncCaptions)\n    return () => {\n      for (const type of MEDIA_EVENTS) video.removeEventListener(type, syncMedia)\n      doc.removeEventListener('fullscreenchange', syncFullscreen)\n      tracks?.removeEventListener?.('change', syncCaptions)\n    }\n  }, [videoRef, playerRef])\n\n  const seekable = Number.isFinite(media.duration) && media.duration > 0\n  const position = seekable\n    ? Math.min(Math.max(media.currentTime, 0), media.duration)\n    : 0\n  const playing = !media.paused\n  const level = media.muted ? 0 : Math.round(media.volume * 100)\n\n  const withVideo = (action: (video: HTMLVideoElement) => void) => () => {\n    const video = videoRef.current\n    if (video) action(video)\n  }\n\n  /**\n   * MUI's Slider steps an arrow by `step`, which is also the grain a pointer\n   * drag snaps to. One second keeps a drag as fine as the clock it moves, and\n   * this scales an arrow up to the same five seconds the arrows give from\n   * every other stop, in the direction MUI chose, so a right-to-left page's\n   * arrows still point the way the track runs.\n   */\n  const onSeek = (event: Event, value: number | number[]) => {\n    const video = videoRef.current\n    if (!video || typeof value !== 'number') return\n    const arrow =\n      event.type === 'keydown' &&\n      ARROW_KEYS.has((event as globalThis.KeyboardEvent).key)\n    const step = (event as globalThis.KeyboardEvent).shiftKey\n      ? SEEK_PAGE_SECONDS\n      : SEEK_STEP_SECONDS\n    const target = arrow\n      ? video.currentTime + Math.sign(value - position) * step\n      : value\n    const landed = seekPlayback(video, target)\n    // Drawn now rather than on `seeked`, so the thumb does not spring back\n    // to where it was for the frames the seek takes.\n    if (landed !== undefined) {\n      setMedia((previous) => ({ ...previous, currentTime: landed }))\n    }\n  }\n\n  /**\n   * Zero mutes rather than zeroing the volume, so unmuting brings back the\n   * last level the visitor could hear.\n   */\n  const onVolume = (_event: Event, value: number | number[]) => {\n    const video = videoRef.current\n    if (!video || typeof value !== 'number') return\n    if (value <= 0) {\n      video.muted = true\n      return\n    }\n    video.volume = value / 100\n    video.muted = false\n  }\n\n  const onCaptions = withVideo((video) => {\n    const next = !captionsShowing\n    for (const track of captionTracks(video)) {\n      track.mode = next ? 'showing' : 'hidden'\n    }\n    setCaptionsShowing(next)\n  })\n\n  return (\n    <Box>\n      <Box sx={{ px: 2 }}>\n        <Slider\n          aria-label=\"Seek\"\n          size=\"small\"\n          min={0}\n          max={seekable ? media.duration : 1}\n          step={1}\n          shiftStep={SEEK_PAGE_SECONDS}\n          value={position}\n          disabled={!seekable}\n          getAriaValueText={(value) => seekValueText(value, media.duration)}\n          onChange={onSeek}\n          sx={sliderSx}\n        />\n      </Box>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1, pb: 1 }}>\n        <IconButton\n          aria-label=\"Play\"\n          aria-pressed={playing}\n          aria-keyshortcuts=\"k Space\"\n          onClick={withVideo(togglePlayback)}\n          sx={controlButtonSx}\n        >\n          <MdiIcon path={playing ? mdiPause.path : mdiPlay.path} />\n        </IconButton>\n        <Typography\n          component=\"span\"\n          variant=\"body2\"\n          // The seek slider already speaks this, as `1:23 of 4:10`.\n          aria-hidden\n          sx={{\n            color: 'common.white',\n            fontVariantNumeric: 'tabular-nums',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {`${formatMediaTime(position)} / ${formatMediaTime(media.duration)}`}\n        </Typography>\n        <Box sx={{ flexGrow: 1 }} />\n        <IconButton\n          aria-label=\"Mute\"\n          aria-pressed={media.muted}\n          aria-keyshortcuts=\"m\"\n          onClick={withVideo(toggleMute)}\n          sx={controlButtonSx}\n        >\n          <MdiIcon\n            path={\n              media.muted || media.volume === 0\n                ? mdiVolumeOff.path\n                : mdiVolumeHigh.path\n            }\n          />\n        </IconButton>\n        {phone ? null : (\n          <Slider\n            aria-label=\"Volume\"\n            size=\"small\"\n            min={0}\n            max={100}\n            step={VOLUME_STEP_PERCENT}\n            value={level}\n            getAriaValueText={(value) => (value === 0 ? 'Muted' : `${value}%`)}\n            onChange={onVolume}\n            sx={[sliderSx, { width: theme.spacing(12), mx: 1 }]}\n          />\n        )}\n        {captions ? (\n          <IconButton\n            aria-label=\"Captions\"\n            aria-pressed={captionsShowing}\n            onClick={onCaptions}\n            sx={controlButtonSx}\n          >\n            <MdiIcon\n              path={\n                captionsShowing\n                  ? mdiClosedCaption.path\n                  : mdiClosedCaptionOutline.path\n              }\n            />\n          </IconButton>\n        ) : null}\n        {canFullscreen ? (\n          <IconButton\n            ref={fullscreenButtonRef}\n            aria-label=\"Full screen\"\n            aria-pressed={fullscreen}\n            aria-keyshortcuts=\"f\"\n            onClick={() =>\n              toggleFullscreen({\n                video: videoRef.current,\n                player: playerRef.current,\n              })\n            }\n            sx={controlButtonSx}\n          >\n            <MdiIcon path={fullscreen ? mdiFullscreenExit.path : mdiFullscreen.path} />\n          </IconButton>\n        ) : null}\n      </Box>\n    </Box>\n  )\n}\nVideoLightboxControls.displayName = 'VideoLightboxControls'\n"],"names":["mdiClosedCaption","mdiClosedCaptionOutline","mdiFullscreen","mdiFullscreenExit","mdiPause","mdiPlay","mdiVolumeHigh","mdiVolumeOff","MdiIcon","Box","touchRippleClasses","IconButton","Slider","sliderClasses","useTheme","Typography","useMediaQuery","useEffect","useRef","useState","SEEK_STEP_SECONDS","SEEK_PAGE_SECONDS","VOLUME_STEP_PERCENT","ignore","undefined","formatMediaTime","seconds","whole","Number","isFinite","Math","floor","hours","minutes","rest","String","padStart","seekValueText","position","duration","togglePlayback","video","paused","ended","Promise","resolve","play","catch","pause","seekPlayback","landed","min","max","currentTime","toggleMute","muted","fullscreenAvailable","document","fullscreenEnabled","Element","prototype","HTMLVideoElement","toggleFullscreen","player","phone","doc","ownerDocument","fullscreenElement","exitFullscreen","requestFullscreen","webkitEnterFullscreen","captionTracks","tracks","textTracks","Array","from","filter","track","kind","SLIDER_KEYS","Set","ARROW_KEYS","keyBelongsToFocus","target","key","HTMLElement","isContentEditable","matches","has","SHORTCUTS","Map","run","repeats","handlePlayerShortcut","event","length","toLowerCase","shortcut","get","defaultPrevented","altKey","ctrlKey","metaKey","nativeEvent","isComposing","preventDefault","repeat","focusRing","outline","outlineColor","outlineOffset","controlButtonSx","theme","color","vars","palette","grey","root","display","sliderSx","thumb","focusVisible","transition","MEDIA_EVENTS","snapshotOf","volume","VideoLightboxControls","props","videoRef","playerRef","captions","media","setMedia","NaN","fullscreen","setFullscreen","captionsShowing","setCaptionsShowing","canFullscreen","fullscreenButtonRef","breakpoints","down","noSsr","current","syncMedia","syncFullscreen","contains","activeElement","focus","syncCaptions","some","mode","type","addEventListener","removeEventListener","seekable","playing","level","round","withVideo","action","onSeek","value","arrow","step","shiftKey","sign","previous","onVolume","_event","onCaptions","next","sx","px","aria-label","size","shiftStep","disabled","getAriaValueText","onChange","alignItems","gap","pb","aria-pressed","aria-keyshortcuts","onClick","path","component","variant","aria-hidden","fontVariantNumeric","whiteSpace","flexGrow","width","spacing","mx","ref","displayName"],"mappings":"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"}