@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/video-lightbox.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @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.
+ */
+import { type ReactNode } from 'react';
+import { type VideoPlaybackBeaconOptions } from './video-playback-beacon';
+export interface VideoLightboxProps {
+    open: boolean;
+    onClose: () => void;
+    /** Names the dialog for assistive technology; also the video's own title. */
+    title?: string;
+    /** Resolved video URL — already through `resolveMediaSrc`. */
+    src: string;
+    /** Resolved poster URL, shown for the instant before the first frame. */
+    poster?: string;
+    /** `width / height` from the asset, when the DAM measured it. */
+    aspectRatio?: string;
+    loop?: boolean;
+    muted?: boolean;
+    /** The `<track>` the inline element would have rendered, if any. */
+    captions?: ReactNode;
+    /**
+     * What a play in this dialog is counted against (AGL-2781). Each open is
+     * its own viewing, so the element passes the facts and the dialog keys the
+     * viewing to `open`.
+     */
+    playback?: Omit<VideoPlaybackBeaconOptions, 'viewingKey'>;
+    /**
+     * A hosted player's frame address (AGL-2826). When set, the dialog frames
+     * that player and never plays `src` itself.
+     */
+    embedSrc?: string;
+}
+/**
+ * The dialog. Rendered only while `open`, and unmounted when it closes.
+ *
+ * Unmounting is not tidiness — it is the only thing that reliably STOPS the
+ * download. A `<video>` left in the tree paused still holds whatever it has
+ * buffered and may keep filling that buffer; taking the element out of the
+ * document is what tells the browser the request is over. That matters more
+ * here than it would elsewhere, because the whole element exists to keep a
+ * multi-megabyte file off the wire until it is wanted.
+ */
+export declare function VideoLightbox(props: VideoLightboxProps): import("react").JSX.Element;
+export declare namespace VideoLightbox {
+    var displayName: string;
+}
+export default VideoLightbox;

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

@@ -0,0 +1,247 @@
+/**
+ * @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 Video element's lightbox (AGL-2744).
+ *
+ * ## Why this is its own module
+ *
+ * This file is the ONLY place in the tenant's component graph that names
+ * `@mui/material/Dialog`, and it must stay that way. `libs/shared/ui/jsx`'s
+ * barrel deliberately withholds `dialog-confirm`, `loading-modal` and
+ * `navigation-drawer` because the MUI Dialog/Drawer/Popper stack was measured
+ * sitting in the first-load chunks of `/pricing` — a page that opens no dialog
+ * (AGL-1290). `plugin.ts` imports every element eagerly, so a `Dialog` named
+ * at the top of `video.tsx` would put that whole stack back on every published
+ * page of every customer site, including the ones with no video on them.
+ *
+ * Split out, it is a chunk `video.tsx` reaches through `lazy(() => import())`
+ * and mounts only once a visitor has actually asked to watch something. A page
+ * with no video pays nothing; a page with a video pays nothing; a visitor who
+ * clicks pays once. The player's controls, `video-lightbox-controls.tsx`, are
+ * imported from here and from nowhere else, so they ride in the same chunk.
+ *
+ * It is still MUI's `Dialog` and still the site's own theme. The split is
+ * about WHEN the dialog arrives, not about hand-rolling a modal — and the
+ * accessibility is most of why. `Dialog` traps focus for the life of the
+ * overlay, restores it to the element that opened it on close, closes on
+ * `Escape`, and marks the rest of the document inert for assistive
+ * technology. Every one of those is a thing a bespoke overlay gets wrong.
+ *
+ * ## Why the film has no `controls` attribute here
+ *
+ * The browser's own controls swallow `Escape` (AGL-2802): from inside them no
+ * key event reaches the page, so the dialog could not be dismissed from the
+ * stops a keyboard visitor is on while watching. The player draws its own
+ * controls instead; `video-lightbox-controls.tsx` explains the measurement and
+ * carries the key map. The inline player keeps the browser's controls, because
+ * nothing on a page is listening for `Escape` there.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { mdiClose } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import Box from "@mui/material/Box";
+import Dialog from "@mui/material/Dialog";
+import IconButton from "@mui/material/IconButton";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useRef } from "react";
+import { controlButtonSx, handlePlayerShortcut, togglePlayback, VideoLightboxControls } from "./video-lightbox-controls.js";
+import { useVideoPlaybackBeacon } from "./video-playback-beacon.js";
+import { VideoPlayerFrame } from "./video-player-frame.js";
+/** What a dialog is called when the author gave the video no title. */ const FALLBACK_LABEL = 'Video';
+/**
+ * The dialog. Rendered only while `open`, and unmounted when it closes.
+ *
+ * Unmounting is not tidiness — it is the only thing that reliably STOPS the
+ * download. A `<video>` left in the tree paused still holds whatever it has
+ * buffered and may keep filling that buffer; taking the element out of the
+ * document is what tells the browser the request is over. That matters more
+ * here than it would elsewhere, because the whole element exists to keep a
+ * multi-megabyte file off the wire until it is wanted.
+ */ export function VideoLightbox(props) {
+    const { open, onClose, title, src, poster, aspectRatio, loop, muted, captions, playback, embedSrc } = props;
+    const playbackHandlers = useVideoPlaybackBeacon(_extends({}, playback, {
+        viewingKey: open
+    }));
+    const videoRef = useRef(null);
+    /** The frame that goes full screen, controls and all. */ const playerRef = useRef(null);
+    /**
+   * `prefers-reduced-motion` reaches the DIALOG, not the video.
+   *
+   * The overlay's fade-and-grow is incidental motion a visitor did not ask
+   * for, so it is dropped to zero — MUI reads `transitionDuration` for both
+   * the backdrop and the paper, so one value covers the whole open.
+   *
+   * The FILM is deliberately left alone, and that is the more interesting
+   * half. Autoplay here is not autoplay: the visitor pressed a play button,
+   * and a play button that opens a paused video is a defect, not an
+   * accommodation. WCAG's auto-motion requirement is about motion that
+   * starts without the user, and it is satisfied anyway — the player's
+   * controls are on screen, so the video can be paused at any moment.
+   */ const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    /**
+   * Pauses before closing, so the sound stops on the press rather than when
+   * the exit transition ends and the `<video>` leaves the tree.
+   */ const closeDialog = ()=>{
+        var _videoRef_current;
+        (_videoRef_current = videoRef.current) == null ? void 0 : _videoRef_current.pause();
+        onClose();
+    };
+    /**
+   * `Escape` in full screen leaves full screen and keeps the dialog open. A
+   * browser normally exits full screen on that key before the page hears it;
+   * this covers one that passes the key on as well, so one press never does
+   * both.
+   */ const handleClose = (_event, reason)=>{
+        var _playerRef_current;
+        const doc = (_playerRef_current = playerRef.current) == null ? void 0 : _playerRef_current.ownerDocument;
+        if (reason === 'escapeKeyDown' && (doc == null ? void 0 : doc.fullscreenElement)) {
+            void Promise.resolve(doc.exitFullscreen()).catch(()=>undefined);
+            return;
+        }
+        closeDialog();
+    };
+    return /*#__PURE__*/ _jsx(Dialog, {
+        open: open,
+        onClose: handleClose,
+        onKeyDown: (event)=>handlePlayerShortcut(event, {
+                video: videoRef.current,
+                player: playerRef.current
+            }),
+        maxWidth: "lg",
+        fullWidth: true,
+        transitionDuration: reduceMotion ? 0 : undefined,
+        slotProps: {
+            paper: {
+                /**
+           * ⚠️ The label goes on the PAPER, not on `<Dialog>`.
+           *
+           * `role="dialog"` lives on the paper; props spread onto `Dialog`
+           * reach the Modal root, which is `role="presentation"`. Written
+           * there first and measured in a browser: the presentation root
+           * carried the name and the dialog itself had none, which is an
+           * unlabelled dialog announced to a screen reader — the exact
+           * failure the label was added to prevent. No `DialogTitle`,
+           * deliberately: the film is the content, and a heading above it
+           * would only push it down.
+           */ 'aria-label': title || FALLBACK_LABEL,
+                // The paper is a frame around a video, not a sheet of content:
+                // no padding, and a black ground so a letterboxed film has
+                // something to sit on rather than a white margin.
+                sx: {
+                    overflow: 'hidden',
+                    bgcolor: 'common.black'
+                }
+            }
+        },
+        children: /*#__PURE__*/ _jsxs(Box, {
+            ref: playerRef,
+            sx: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                // The paper stops growing at the viewport, less its margins. The
+                // film is what gives way, letterboxed, so the controls under it
+                // are never the part cut off on a short or landscape screen.
+                flex: '1 1 auto',
+                minHeight: 0,
+                bgcolor: 'common.black'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(IconButton, {
+                    onClick: closeDialog,
+                    "aria-label": "Close video",
+                    size: "small",
+                    sx: [
+                        controlButtonSx,
+                        (theme)=>({
+                                position: 'absolute',
+                                top: theme.spacing(1),
+                                right: theme.spacing(1),
+                                zIndex: 1,
+                                // Over frames of unknown brightness, so the control carries its
+                                // own ground rather than trusting the film's.
+                                bgcolor: 'common.black'
+                            })
+                    ],
+                    children: /*#__PURE__*/ _jsx(MdiIcon, {
+                        path: mdiClose.path,
+                        fontSize: "small"
+                    })
+                }),
+                embedSrc ? // A hosted player draws its own controls inside its frame, so the
+                // dialog adds none, and its shortcuts find no film to act on.
+                // Closing unmounts the frame with the rest of the dialog, which
+                // stops the player exactly as it stops the `<video>`, and the frame
+                // gives way on a short screen for the reason the film does.
+                /*#__PURE__*/ _jsx(VideoPlayerFrame, {
+                    src: embedSrc,
+                    title: title,
+                    aspectRatio: aspectRatio,
+                    style: {
+                        flexGrow: 1,
+                        flexShrink: 1,
+                        minHeight: 0
+                    }
+                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            component: "video",
+                            ref: videoRef,
+                            src: src,
+                            poster: poster || undefined,
+                            title: title || undefined,
+                            autoPlay: true,
+                            playsInline: true,
+                            loop: Boolean(loop),
+                            muted: Boolean(muted),
+                            // The one place in this element where fetching eagerly is right:
+                            // the visitor has asked for the film and is looking at the player.
+                            preload: "auto",
+                            // A click on the picture plays and pauses, as it does on the
+                            // browser's own player.
+                            onClick: ()=>{
+                                if (videoRef.current) togglePlayback(videoRef.current);
+                            },
+                            onPlay: playbackHandlers.onPlay,
+                            onTimeUpdate: playbackHandlers.onTimeUpdate,
+                            onEnded: playbackHandlers.onEnded,
+                            sx: {
+                                display: 'block',
+                                width: '100%',
+                                height: 'auto',
+                                flex: '1 1 auto',
+                                minHeight: 0,
+                                objectFit: 'contain',
+                                aspectRatio
+                            },
+                            children: captions
+                        }),
+                        /*#__PURE__*/ _jsx(VideoLightboxControls, {
+                            videoRef: videoRef,
+                            playerRef: playerRef,
+                            captions: Boolean(captions)
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+VideoLightbox.displayName = 'VideoLightbox';
+export default VideoLightbox;
+
+//# sourceMappingURL=video-lightbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/video-lightbox.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 Video element's lightbox (AGL-2744).\n *\n * ## Why this is its own module\n *\n * This file is the ONLY place in the tenant's component graph that names\n * `@mui/material/Dialog`, and it must stay that way. `libs/shared/ui/jsx`'s\n * barrel deliberately withholds `dialog-confirm`, `loading-modal` and\n * `navigation-drawer` because the MUI Dialog/Drawer/Popper stack was measured\n * sitting in the first-load chunks of `/pricing` — a page that opens no dialog\n * (AGL-1290). `plugin.ts` imports every element eagerly, so a `Dialog` named\n * at the top of `video.tsx` would put that whole stack back on every published\n * page of every customer site, including the ones with no video on them.\n *\n * Split out, it is a chunk `video.tsx` reaches through `lazy(() => import())`\n * and mounts only once a visitor has actually asked to watch something. A page\n * with no video pays nothing; a page with a video pays nothing; a visitor who\n * clicks pays once. The player's controls, `video-lightbox-controls.tsx`, are\n * imported from here and from nowhere else, so they ride in the same chunk.\n *\n * It is still MUI's `Dialog` and still the site's own theme. The split is\n * about WHEN the dialog arrives, not about hand-rolling a modal — and the\n * accessibility is most of why. `Dialog` traps focus for the life of the\n * overlay, restores it to the element that opened it on close, closes on\n * `Escape`, and marks the rest of the document inert for assistive\n * technology. Every one of those is a thing a bespoke overlay gets wrong.\n *\n * ## Why the film has no `controls` attribute here\n *\n * The browser's own controls swallow `Escape` (AGL-2802): from inside them no\n * key event reaches the page, so the dialog could not be dismissed from the\n * stops a keyboard visitor is on while watching. The player draws its own\n * controls instead; `video-lightbox-controls.tsx` explains the measurement and\n * carries the key map. The inline player keeps the browser's controls, because\n * nothing on a page is listening for `Escape` there.\n */\n'use client'\n\nimport { mdiClose } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport Box from '@mui/material/Box'\nimport Dialog, { type DialogProps } from '@mui/material/Dialog'\nimport IconButton from '@mui/material/IconButton'\nimport useMediaQuery from '@mui/material/useMediaQuery'\nimport { type ReactNode, useRef } from 'react'\nimport {\n  controlButtonSx,\n  handlePlayerShortcut,\n  togglePlayback,\n  VideoLightboxControls,\n} from './video-lightbox-controls'\nimport {\n  useVideoPlaybackBeacon,\n  type VideoPlaybackBeaconOptions,\n} from './video-playback-beacon'\nimport { VideoPlayerFrame } from './video-player-frame'\n\nexport interface VideoLightboxProps {\n  open: boolean\n  onClose: () => void\n  /** Names the dialog for assistive technology; also the video's own title. */\n  title?: string\n  /** Resolved video URL — already through `resolveMediaSrc`. */\n  src: string\n  /** Resolved poster URL, shown for the instant before the first frame. */\n  poster?: string\n  /** `width / height` from the asset, when the DAM measured it. */\n  aspectRatio?: string\n  loop?: boolean\n  muted?: boolean\n  /** The `<track>` the inline element would have rendered, if any. */\n  captions?: ReactNode\n  /**\n   * What a play in this dialog is counted against (AGL-2781). Each open is\n   * its own viewing, so the element passes the facts and the dialog keys the\n   * viewing to `open`.\n   */\n  playback?: Omit<VideoPlaybackBeaconOptions, 'viewingKey'>\n  /**\n   * A hosted player's frame address (AGL-2826). When set, the dialog frames\n   * that player and never plays `src` itself.\n   */\n  embedSrc?: string\n}\n\n/** What a dialog is called when the author gave the video no title. */\nconst FALLBACK_LABEL = 'Video'\n\n/**\n * The dialog. Rendered only while `open`, and unmounted when it closes.\n *\n * Unmounting is not tidiness — it is the only thing that reliably STOPS the\n * download. A `<video>` left in the tree paused still holds whatever it has\n * buffered and may keep filling that buffer; taking the element out of the\n * document is what tells the browser the request is over. That matters more\n * here than it would elsewhere, because the whole element exists to keep a\n * multi-megabyte file off the wire until it is wanted.\n */\nexport function VideoLightbox(props: VideoLightboxProps) {\n  const {\n    open,\n    onClose,\n    title,\n    src,\n    poster,\n    aspectRatio,\n    loop,\n    muted,\n    captions,\n    playback,\n    embedSrc,\n  } = props\n  const playbackHandlers = useVideoPlaybackBeacon({\n    ...playback,\n    viewingKey: open,\n  })\n  const videoRef = useRef<HTMLVideoElement>(null)\n  /** The frame that goes full screen, controls and all. */\n  const playerRef = useRef<HTMLDivElement>(null)\n  /**\n   * `prefers-reduced-motion` reaches the DIALOG, not the video.\n   *\n   * The overlay's fade-and-grow is incidental motion a visitor did not ask\n   * for, so it is dropped to zero — MUI reads `transitionDuration` for both\n   * the backdrop and the paper, so one value covers the whole open.\n   *\n   * The FILM is deliberately left alone, and that is the more interesting\n   * half. Autoplay here is not autoplay: the visitor pressed a play button,\n   * and a play button that opens a paused video is a defect, not an\n   * accommodation. WCAG's auto-motion requirement is about motion that\n   * starts without the user, and it is satisfied anyway — the player's\n   * controls are on screen, so the video can be paused at any moment.\n   */\n  const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)')\n  /**\n   * Pauses before closing, so the sound stops on the press rather than when\n   * the exit transition ends and the `<video>` leaves the tree.\n   */\n  const closeDialog = () => {\n    videoRef.current?.pause()\n    onClose()\n  }\n  /**\n   * `Escape` in full screen leaves full screen and keeps the dialog open. A\n   * browser normally exits full screen on that key before the page hears it;\n   * this covers one that passes the key on as well, so one press never does\n   * both.\n   */\n  const handleClose: DialogProps['onClose'] = (_event, reason) => {\n    const doc = playerRef.current?.ownerDocument\n    if (reason === 'escapeKeyDown' && doc?.fullscreenElement) {\n      void Promise.resolve(doc.exitFullscreen()).catch(() => undefined)\n      return\n    }\n    closeDialog()\n  }\n  return (\n    <Dialog\n      open={open}\n      onClose={handleClose}\n      onKeyDown={(event) =>\n        handlePlayerShortcut(event, {\n          video: videoRef.current,\n          player: playerRef.current,\n        })\n      }\n      maxWidth=\"lg\"\n      fullWidth\n      transitionDuration={reduceMotion ? 0 : undefined}\n      slotProps={{\n        paper: {\n          /**\n           * ⚠️ The label goes on the PAPER, not on `<Dialog>`.\n           *\n           * `role=\"dialog\"` lives on the paper; props spread onto `Dialog`\n           * reach the Modal root, which is `role=\"presentation\"`. Written\n           * there first and measured in a browser: the presentation root\n           * carried the name and the dialog itself had none, which is an\n           * unlabelled dialog announced to a screen reader — the exact\n           * failure the label was added to prevent. No `DialogTitle`,\n           * deliberately: the film is the content, and a heading above it\n           * would only push it down.\n           */\n          'aria-label': title || FALLBACK_LABEL,\n          // The paper is a frame around a video, not a sheet of content:\n          // no padding, and a black ground so a letterboxed film has\n          // something to sit on rather than a white margin.\n          sx: { overflow: 'hidden', bgcolor: 'common.black' },\n        },\n      }}\n    >\n      <Box\n        ref={playerRef}\n        sx={{\n          position: 'relative',\n          display: 'flex',\n          flexDirection: 'column',\n          // The paper stops growing at the viewport, less its margins. The\n          // film is what gives way, letterboxed, so the controls under it\n          // are never the part cut off on a short or landscape screen.\n          flex: '1 1 auto',\n          minHeight: 0,\n          bgcolor: 'common.black',\n        }}\n      >\n        <IconButton\n          onClick={closeDialog}\n          aria-label=\"Close video\"\n          size=\"small\"\n          sx={[\n            controlButtonSx,\n            (theme) => ({\n              position: 'absolute',\n              top: theme.spacing(1),\n              right: theme.spacing(1),\n              zIndex: 1,\n              // Over frames of unknown brightness, so the control carries its\n              // own ground rather than trusting the film's.\n              bgcolor: 'common.black',\n            }),\n          ]}\n        >\n          <MdiIcon path={mdiClose.path} fontSize=\"small\" />\n        </IconButton>\n        {embedSrc ? (\n          // A hosted player draws its own controls inside its frame, so the\n          // dialog adds none, and its shortcuts find no film to act on.\n          // Closing unmounts the frame with the rest of the dialog, which\n          // stops the player exactly as it stops the `<video>`, and the frame\n          // gives way on a short screen for the reason the film does.\n          <VideoPlayerFrame\n            src={embedSrc}\n            title={title}\n            aspectRatio={aspectRatio}\n            style={{ flexGrow: 1, flexShrink: 1, minHeight: 0 }}\n          />\n        ) : (\n          <>\n            <Box\n              component=\"video\"\n              ref={videoRef}\n              src={src}\n              poster={poster || undefined}\n              title={title || undefined}\n              autoPlay\n              playsInline\n              loop={Boolean(loop)}\n              muted={Boolean(muted)}\n              // The one place in this element where fetching eagerly is right:\n              // the visitor has asked for the film and is looking at the player.\n              preload=\"auto\"\n              // A click on the picture plays and pauses, as it does on the\n              // browser's own player.\n              onClick={() => {\n                if (videoRef.current) togglePlayback(videoRef.current)\n              }}\n              onPlay={playbackHandlers.onPlay}\n              onTimeUpdate={playbackHandlers.onTimeUpdate}\n              onEnded={playbackHandlers.onEnded}\n              sx={{\n                display: 'block',\n                width: '100%',\n                height: 'auto',\n                flex: '1 1 auto',\n                minHeight: 0,\n                objectFit: 'contain',\n                aspectRatio,\n              }}\n            >\n              {captions}\n            </Box>\n            <VideoLightboxControls\n              videoRef={videoRef}\n              playerRef={playerRef}\n              captions={Boolean(captions)}\n            />\n          </>\n        )}\n      </Box>\n    </Dialog>\n  )\n}\nVideoLightbox.displayName = 'VideoLightbox'\n\nexport default VideoLightbox\n"],"names":["mdiClose","MdiIcon","Box","Dialog","IconButton","useMediaQuery","useRef","controlButtonSx","handlePlayerShortcut","togglePlayback","VideoLightboxControls","useVideoPlaybackBeacon","VideoPlayerFrame","FALLBACK_LABEL","VideoLightbox","props","open","onClose","title","src","poster","aspectRatio","loop","muted","captions","playback","embedSrc","playbackHandlers","viewingKey","videoRef","playerRef","reduceMotion","closeDialog","current","pause","handleClose","_event","reason","doc","ownerDocument","fullscreenElement","Promise","resolve","exitFullscreen","catch","undefined","onKeyDown","event","video","player","maxWidth","fullWidth","transitionDuration","slotProps","paper","sx","overflow","bgcolor","ref","position","display","flexDirection","flex","minHeight","onClick","aria-label","size","theme","top","spacing","right","zIndex","path","fontSize","style","flexGrow","flexShrink","component","autoPlay","playsInline","Boolean","preload","onPlay","onTimeUpdate","onEnded","width","height","objectFit","displayName"],"mappings":"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"}

package/src/lib/components/video-playback-beacon.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @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.
+ */
+import { type SyntheticEvent } from 'react';
+/**
+ * The DAM media id a Video element's STORED `src` names, or undefined.
+ *
+ * Plays are counted per asset, so only a value that names one is counted: a
+ * `media:` reference (pinned or not), or a root-relative CDN path written
+ * before references existed. A hotlink and a raw Storage URL name no asset,
+ * and neither does an absolute URL whose path merely looks like the CDN's —
+ * that could be anybody's server.
+ *
+ * The stored value rather than the resolved one, because the resolved URL
+ * carries `?r=auto` and a host-qualified scope, neither of which is the asset.
+ */
+export declare function playbackMediaId(src: unknown): string | undefined;
+export interface VideoPlaybackBeaconOptions {
+    /** The site the film plays on. Nothing is counted without one. */
+    hostId?: string;
+    /** The element's stored `src` — see {@link playbackMediaId}. */
+    src?: unknown;
+    /**
+     * An editing surface: the besigner canvas or the console preview. An author
+     * watching their own draft is not a visitor's play.
+     */
+    suppressed?: boolean;
+    /**
+     * A new viewing starts whenever this changes. The lightbox passes `open`,
+     * so each open that is played counts once, while pausing and resuming
+     * inside one open does not.
+     */
+    viewingKey?: unknown;
+}
+export interface VideoPlaybackHandlers {
+    onPlay: (event: SyntheticEvent<HTMLVideoElement>) => void;
+    onTimeUpdate: (event: SyntheticEvent<HTMLVideoElement>) => void;
+    onEnded: (event: SyntheticEvent<HTMLVideoElement>) => void;
+}
+/**
+ * The `<video>` handlers that report playback to `/api/analytics/collect`.
+ *
+ * ## What counts as one play
+ *
+ * The first `play` of a viewing. A browser fires `play` on every resume after
+ * a pause, so the event alone would count a visitor who paused twice as three
+ * viewers. A viewing ends on `ended` — a replay from the end is a second
+ * play — or when {@link VideoPlaybackBeaconOptions.viewingKey} changes.
+ *
+ * ## Quartiles
+ *
+ * Each is reported once per viewing, against the furthest point the playhead
+ * has REACHED rather than where it last was. `videoQuartileEvent` compares a
+ * position with a previous one, so handing it the last position would report
+ * the first quartile again for a visitor who rewound past it and watched it
+ * twice; the watch curve asks where people stop, and a rewatch is not a
+ * second arrival.
+ *
+ * State lives in a ref, never in React state: every one of these is a
+ * Firestore write on a public page, and a counter driven by render would be
+ * one write per `timeupdate`, four times a second.
+ *
+ * `sendVideoAnalyticsBeacon` keeps its own gate — production surfaces only,
+ * never a browser carrying the internal-traffic opt-in — so this adds the two
+ * refusals only the element can know about: no site, and an editing surface.
+ */
+export declare function useVideoPlaybackBeacon(options: VideoPlaybackBeaconOptions): VideoPlaybackHandlers;

package/src/lib/components/video-playback-beacon.js

@@ -0,0 +1,128 @@
+/**
+ * @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.
+ */ import { sendVideoAnalyticsBeacon, videoQuartileEvent } from "@aglyn/aglyn/app-utils/analytics-beacon";
+import { MEDIA_CDN_ROUTE, mediaRefFromCdnPath, parseMediaRef } from "@aglyn/aglyn/app-utils/media-ref";
+import { useCallback, useEffect, useRef } from "react";
+/**
+ * The DAM media id a Video element's STORED `src` names, or undefined.
+ *
+ * Plays are counted per asset, so only a value that names one is counted: a
+ * `media:` reference (pinned or not), or a root-relative CDN path written
+ * before references existed. A hotlink and a raw Storage URL name no asset,
+ * and neither does an absolute URL whose path merely looks like the CDN's —
+ * that could be anybody's server.
+ *
+ * The stored value rather than the resolved one, because the resolved URL
+ * carries `?r=auto` and a host-qualified scope, neither of which is the asset.
+ */ export function playbackMediaId(src) {
+    var _parseMediaRef;
+    if (typeof src !== 'string' || !src) return undefined;
+    // The prefix test comes first and `parseMediaRef` answers everything else:
+    // it refuses any value that is not a reference, so a hotlink resolves to
+    // nothing without a type predicate narrowing `src` away in the other branch.
+    const reference = src.startsWith(`${MEDIA_CDN_ROUTE}/`) ? mediaRefFromCdnPath(src) : src;
+    return (_parseMediaRef = parseMediaRef(reference)) == null ? void 0 : _parseMediaRef.mediaId;
+}
+/**
+ * The `<video>` handlers that report playback to `/api/analytics/collect`.
+ *
+ * ## What counts as one play
+ *
+ * The first `play` of a viewing. A browser fires `play` on every resume after
+ * a pause, so the event alone would count a visitor who paused twice as three
+ * viewers. A viewing ends on `ended` — a replay from the end is a second
+ * play — or when {@link VideoPlaybackBeaconOptions.viewingKey} changes.
+ *
+ * ## Quartiles
+ *
+ * Each is reported once per viewing, against the furthest point the playhead
+ * has REACHED rather than where it last was. `videoQuartileEvent` compares a
+ * position with a previous one, so handing it the last position would report
+ * the first quartile again for a visitor who rewound past it and watched it
+ * twice; the watch curve asks where people stop, and a rewatch is not a
+ * second arrival.
+ *
+ * State lives in a ref, never in React state: every one of these is a
+ * Firestore write on a public page, and a counter driven by render would be
+ * one write per `timeupdate`, four times a second.
+ *
+ * `sendVideoAnalyticsBeacon` keeps its own gate — production surfaces only,
+ * never a browser carrying the internal-traffic opt-in — so this adds the two
+ * refusals only the element can know about: no site, and an editing surface.
+ */ export function useVideoPlaybackBeacon(options) {
+    const { hostId, src, suppressed, viewingKey } = options;
+    const mediaId = playbackMediaId(src);
+    const viewing = useRef({
+        played: false,
+        reached: 0
+    });
+    useEffect(()=>{
+        viewing.current = {
+            played: false,
+            reached: 0
+        };
+    }, [
+        viewingKey,
+        mediaId
+    ]);
+    const send = useCallback((event)=>{
+        if (suppressed || !hostId || !mediaId) return;
+        sendVideoAnalyticsBeacon({
+            hostId,
+            mediaId,
+            event
+        });
+    }, [
+        suppressed,
+        hostId,
+        mediaId
+    ]);
+    const onPlay = useCallback(()=>{
+        if (viewing.current.played) return;
+        viewing.current.played = true;
+        send('play');
+    }, [
+        send
+    ]);
+    const onTimeUpdate = useCallback((event)=>{
+        const { currentTime, duration } = event.currentTarget;
+        // `Infinity` for a stream and for some WebM files, `NaN` before
+        // metadata: neither has a fraction to report.
+        if (!Number.isFinite(duration) || duration <= 0) return;
+        const fraction = currentTime / duration;
+        const crossed = videoQuartileEvent(fraction, viewing.current.reached);
+        if (fraction > viewing.current.reached) viewing.current.reached = fraction;
+        if (crossed) send(crossed);
+    }, [
+        send
+    ]);
+    const onEnded = useCallback(()=>{
+        send('complete');
+        viewing.current = {
+            played: false,
+            reached: 0
+        };
+    }, [
+        send
+    ]);
+    return {
+        onPlay,
+        onTimeUpdate,
+        onEnded
+    };
+}
+
+//# sourceMappingURL=video-playback-beacon.js.map

package/src/lib/components/video-playback-beacon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/video-playback-beacon.ts"],"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\nimport {\n  sendVideoAnalyticsBeacon,\n  type VideoAnalyticsEvent,\n  videoQuartileEvent,\n} from '@aglyn/aglyn/app-utils/analytics-beacon'\nimport {\n  isMediaRef,\n  MEDIA_CDN_ROUTE,\n  mediaRefFromCdnPath,\n  parseMediaRef,\n} from '@aglyn/aglyn/app-utils/media-ref'\nimport { type SyntheticEvent, useCallback, useEffect, useRef } from 'react'\n\n/**\n * The DAM media id a Video element's STORED `src` names, or undefined.\n *\n * Plays are counted per asset, so only a value that names one is counted: a\n * `media:` reference (pinned or not), or a root-relative CDN path written\n * before references existed. A hotlink and a raw Storage URL name no asset,\n * and neither does an absolute URL whose path merely looks like the CDN's —\n * that could be anybody's server.\n *\n * The stored value rather than the resolved one, because the resolved URL\n * carries `?r=auto` and a host-qualified scope, neither of which is the asset.\n */\nexport function playbackMediaId(src: unknown): string | undefined {\n  if (typeof src !== 'string' || !src) return undefined\n  // The prefix test comes first and `parseMediaRef` answers everything else:\n  // it refuses any value that is not a reference, so a hotlink resolves to\n  // nothing without a type predicate narrowing `src` away in the other branch.\n  const reference = src.startsWith(`${MEDIA_CDN_ROUTE}/`)\n    ? mediaRefFromCdnPath(src)\n    : src\n  return parseMediaRef(reference)?.mediaId\n}\n\nexport interface VideoPlaybackBeaconOptions {\n  /** The site the film plays on. Nothing is counted without one. */\n  hostId?: string\n  /** The element's stored `src` — see {@link playbackMediaId}. */\n  src?: unknown\n  /**\n   * An editing surface: the besigner canvas or the console preview. An author\n   * watching their own draft is not a visitor's play.\n   */\n  suppressed?: boolean\n  /**\n   * A new viewing starts whenever this changes. The lightbox passes `open`,\n   * so each open that is played counts once, while pausing and resuming\n   * inside one open does not.\n   */\n  viewingKey?: unknown\n}\n\nexport interface VideoPlaybackHandlers {\n  onPlay: (event: SyntheticEvent<HTMLVideoElement>) => void\n  onTimeUpdate: (event: SyntheticEvent<HTMLVideoElement>) => void\n  onEnded: (event: SyntheticEvent<HTMLVideoElement>) => void\n}\n\n/**\n * The `<video>` handlers that report playback to `/api/analytics/collect`.\n *\n * ## What counts as one play\n *\n * The first `play` of a viewing. A browser fires `play` on every resume after\n * a pause, so the event alone would count a visitor who paused twice as three\n * viewers. A viewing ends on `ended` — a replay from the end is a second\n * play — or when {@link VideoPlaybackBeaconOptions.viewingKey} changes.\n *\n * ## Quartiles\n *\n * Each is reported once per viewing, against the furthest point the playhead\n * has REACHED rather than where it last was. `videoQuartileEvent` compares a\n * position with a previous one, so handing it the last position would report\n * the first quartile again for a visitor who rewound past it and watched it\n * twice; the watch curve asks where people stop, and a rewatch is not a\n * second arrival.\n *\n * State lives in a ref, never in React state: every one of these is a\n * Firestore write on a public page, and a counter driven by render would be\n * one write per `timeupdate`, four times a second.\n *\n * `sendVideoAnalyticsBeacon` keeps its own gate — production surfaces only,\n * never a browser carrying the internal-traffic opt-in — so this adds the two\n * refusals only the element can know about: no site, and an editing surface.\n */\nexport function useVideoPlaybackBeacon(\n  options: VideoPlaybackBeaconOptions,\n): VideoPlaybackHandlers {\n  const { hostId, src, suppressed, viewingKey } = options\n  const mediaId = playbackMediaId(src)\n  const viewing = useRef({ played: false, reached: 0 })\n  useEffect(() => {\n    viewing.current = { played: false, reached: 0 }\n  }, [viewingKey, mediaId])\n\n  const send = useCallback(\n    (event: VideoAnalyticsEvent) => {\n      if (suppressed || !hostId || !mediaId) return\n      sendVideoAnalyticsBeacon({ hostId, mediaId, event })\n    },\n    [suppressed, hostId, mediaId],\n  )\n\n  const onPlay = useCallback(() => {\n    if (viewing.current.played) return\n    viewing.current.played = true\n    send('play')\n  }, [send])\n\n  const onTimeUpdate = useCallback(\n    (event: SyntheticEvent<HTMLVideoElement>) => {\n      const { currentTime, duration } = event.currentTarget\n      // `Infinity` for a stream and for some WebM files, `NaN` before\n      // metadata: neither has a fraction to report.\n      if (!Number.isFinite(duration) || duration <= 0) return\n      const fraction = currentTime / duration\n      const crossed = videoQuartileEvent(fraction, viewing.current.reached)\n      if (fraction > viewing.current.reached) viewing.current.reached = fraction\n      if (crossed) send(crossed)\n    },\n    [send],\n  )\n\n  const onEnded = useCallback(() => {\n    send('complete')\n    viewing.current = { played: false, reached: 0 }\n  }, [send])\n\n  return { onPlay, onTimeUpdate, onEnded }\n}\n"],"names":["sendVideoAnalyticsBeacon","videoQuartileEvent","MEDIA_CDN_ROUTE","mediaRefFromCdnPath","parseMediaRef","useCallback","useEffect","useRef","playbackMediaId","src","undefined","reference","startsWith","mediaId","useVideoPlaybackBeacon","options","hostId","suppressed","viewingKey","viewing","played","reached","current","send","event","onPlay","onTimeUpdate","currentTime","duration","currentTarget","Number","isFinite","fraction","crossed","onEnded"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,SACEA,wBAAwB,EAExBC,kBAAkB,QACb,0CAAyC;AAChD,SAEEC,eAAe,EACfC,mBAAmB,EACnBC,aAAa,QACR,mCAAkC;AACzC,SAA8BC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAE3E;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,gBAAgBC,GAAY;QAQnCL;IAPP,IAAI,OAAOK,QAAQ,YAAY,CAACA,KAAK,OAAOC;IAC5C,2EAA2E;IAC3E,yEAAyE;IACzE,6EAA6E;IAC7E,MAAMC,YAAYF,IAAIG,UAAU,CAAC,GAAGV,gBAAgB,CAAC,CAAC,IAClDC,oBAAoBM,OACpBA;IACJ,QAAOL,iBAAAA,cAAcO,+BAAdP,eAA0BS,OAAO;AAC1C;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASC,uBACdC,OAAmC;IAEnC,MAAM,EAAEC,MAAM,EAAEP,GAAG,EAAEQ,UAAU,EAAEC,UAAU,EAAE,GAAGH;IAChD,MAAMF,UAAUL,gBAAgBC;IAChC,MAAMU,UAAUZ,OAAO;QAAEa,QAAQ;QAAOC,SAAS;IAAE;IACnDf,UAAU;QACRa,QAAQG,OAAO,GAAG;YAAEF,QAAQ;YAAOC,SAAS;QAAE;IAChD,GAAG;QAACH;QAAYL;KAAQ;IAExB,MAAMU,OAAOlB,YACX,CAACmB;QACC,IAAIP,cAAc,CAACD,UAAU,CAACH,SAAS;QACvCb,yBAAyB;YAAEgB;YAAQH;YAASW;QAAM;IACpD,GACA;QAACP;QAAYD;QAAQH;KAAQ;IAG/B,MAAMY,SAASpB,YAAY;QACzB,IAAIc,QAAQG,OAAO,CAACF,MAAM,EAAE;QAC5BD,QAAQG,OAAO,CAACF,MAAM,GAAG;QACzBG,KAAK;IACP,GAAG;QAACA;KAAK;IAET,MAAMG,eAAerB,YACnB,CAACmB;QACC,MAAM,EAAEG,WAAW,EAAEC,QAAQ,EAAE,GAAGJ,MAAMK,aAAa;QACrD,gEAAgE;QAChE,8CAA8C;QAC9C,IAAI,CAACC,OAAOC,QAAQ,CAACH,aAAaA,YAAY,GAAG;QACjD,MAAMI,WAAWL,cAAcC;QAC/B,MAAMK,UAAUhC,mBAAmB+B,UAAUb,QAAQG,OAAO,CAACD,OAAO;QACpE,IAAIW,WAAWb,QAAQG,OAAO,CAACD,OAAO,EAAEF,QAAQG,OAAO,CAACD,OAAO,GAAGW;QAClE,IAAIC,SAASV,KAAKU;IACpB,GACA;QAACV;KAAK;IAGR,MAAMW,UAAU7B,YAAY;QAC1BkB,KAAK;QACLJ,QAAQG,OAAO,GAAG;YAAEF,QAAQ;YAAOC,SAAS;QAAE;IAChD,GAAG;QAACE;KAAK;IAET,OAAO;QAAEE;QAAQC;QAAcQ;IAAQ;AACzC"}

package/src/lib/components/video-player-frame.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @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.
+ */
+import { type CSSProperties } from 'react';
+/**
+ * The frame a hosted player plays in (AGL-2826).
+ *
+ * Shared by the Video element, which puts it where the poster was, and by the
+ * lightbox, which opens it in a dialog, so the two cannot disagree about what
+ * the frame may do. Nothing renders this before a press, except the player an
+ * element loads with the page (AGL-2962), and that only for a visitor whose
+ * analytics consent is on record. Otherwise the element's poster is a button
+ * until the press, which is what keeps the player's origin off the wire for a
+ * visitor who only looks at the page.
+ */
+export interface VideoPlayerFrameProps {
+    /** The player's address, rebuilt by the caller from a parsed media id. */
+    src: string;
+    /** Names the frame for assistive technology. */
+    title?: string;
+    /** `width / height`; 16:9 when nothing measured the film. */
+    aspectRatio?: string;
+    /** A CSS height the author pinned, which replaces the ratio. */
+    height?: string;
+    /** Corner radius in px, matching the poster it replaced. */
+    radius?: number;
+    /**
+     * Move focus into the player as it mounts. For the in-place player only,
+     * where the button that was pressed has just left the page and focus would
+     * otherwise fall back to the body.
+     *
+     * ⛔ Never inside the lightbox. A cross-origin frame keeps every key pressed
+     * while it has focus, so `Escape` never reaches the dialog. Measured on
+     * 2026-09-10: with focus moved into the Wistia frame, `Escape` left the
+     * dialog open and the film playing. Left on the dialog, `Escape` closes it,
+     * and `Tab` still reaches the player.
+     */
+    focusOnMount?: boolean;
+    /** Layout the placement adds, such as the lightbox's flex, applied last. */
+    style?: CSSProperties;
+}
+export declare function VideoPlayerFrame(props: VideoPlayerFrameProps): import("react").JSX.Element;
+export declare namespace VideoPlayerFrame {
+    var displayName: string;
+}