node_modules ignore

server/node_modules/media-chrome/dist/react/common/utils.js

@@ -0,0 +1,39 @@
+const ReactPropToAttrNameMap = {
+  className: 'class',
+  classname: 'class',
+  htmlFor: 'for',
+  crossOrigin: 'crossorigin',
+  viewBox: 'viewBox',
+};
+
+export const toNativeAttrName = (propName, propValue) => {
+  if (ReactPropToAttrNameMap[propName]) return ReactPropToAttrNameMap[propName];
+  if (typeof propValue == undefined) return undefined;
+  if (typeof propValue === 'boolean' && !propValue) return undefined;
+  if (/[A-Z]/.test(propName)) return propName.toLowerCase();
+  return propName;
+};
+
+export const toNativeAttrValue = (propValue, _propName) => {
+  if (typeof propValue === 'boolean') return '';
+  if (Array.isArray(propValue)) return propValue.join(' ');
+  return propValue;
+};
+
+export const toNativeProps = (props = {}) => {
+  return Object.entries(props).reduce(
+    (transformedProps, [propName, propValue]) => {
+      const attrName = toNativeAttrName(propName, propValue);
+
+      // prop was stripped. Don't add.
+      if (!attrName) {
+        return transformedProps;
+      }
+
+      const attrValue = toNativeAttrValue(propValue, propName);
+      transformedProps[attrName] = attrValue;
+      return transformedProps;
+    },
+    {}
+  );
+};

server/node_modules/media-chrome/dist/react/index.d.ts

@@ -0,0 +1,109 @@
+import type React from 'react';
+
+import type * as CSS from 'csstype';
+declare global {
+  interface Element {
+    slot?: string;
+  }
+}
+
+declare module 'csstype' {
+  interface Properties {
+    // Should add generic support for any CSS variables
+    [index: `--${string}`]: any;
+  }
+}
+
+type GenericProps = { [k: string]: any };
+type GenericElement = HTMLElement;
+
+type GenericForwardRef = React.ForwardRefExoticComponent<
+  GenericProps & React.RefAttributes<GenericElement | undefined>
+>;
+
+declare const MediaGestureReceiver: GenericForwardRef;
+export { MediaGestureReceiver };
+
+declare const MediaContainer: GenericForwardRef;
+export { MediaContainer };
+
+declare const MediaController: GenericForwardRef;
+export { MediaController };
+
+declare const MediaChromeButton: GenericForwardRef;
+export { MediaChromeButton };
+
+declare const MediaAirplayButton: GenericForwardRef;
+export { MediaAirplayButton };
+
+declare const MediaCaptionsButton: GenericForwardRef;
+export { MediaCaptionsButton };
+
+declare const MediaCastButton: GenericForwardRef;
+export { MediaCastButton };
+
+declare const MediaChromeDialog: GenericForwardRef;
+export { MediaChromeDialog };
+
+declare const MediaChromeRange: GenericForwardRef;
+export { MediaChromeRange };
+
+declare const MediaControlBar: GenericForwardRef;
+export { MediaControlBar };
+
+declare const MediaTextDisplay: GenericForwardRef;
+export { MediaTextDisplay };
+
+declare const MediaDurationDisplay: GenericForwardRef;
+export { MediaDurationDisplay };
+
+declare const MediaFullscreenButton: GenericForwardRef;
+export { MediaFullscreenButton };
+
+declare const MediaLiveButton: GenericForwardRef;
+export { MediaLiveButton };
+
+declare const MediaLoadingIndicator: GenericForwardRef;
+export { MediaLoadingIndicator };
+
+declare const MediaMuteButton: GenericForwardRef;
+export { MediaMuteButton };
+
+declare const MediaPipButton: GenericForwardRef;
+export { MediaPipButton };
+
+declare const MediaPlaybackRateButton: GenericForwardRef;
+export { MediaPlaybackRateButton };
+
+declare const MediaPlayButton: GenericForwardRef;
+export { MediaPlayButton };
+
+declare const MediaPosterImage: GenericForwardRef;
+export { MediaPosterImage };
+
+declare const MediaPreviewChapterDisplay: GenericForwardRef;
+export { MediaPreviewChapterDisplay };
+
+declare const MediaPreviewThumbnail: GenericForwardRef;
+export { MediaPreviewThumbnail };
+
+declare const MediaPreviewTimeDisplay: GenericForwardRef;
+export { MediaPreviewTimeDisplay };
+
+declare const MediaSeekBackwardButton: GenericForwardRef;
+export { MediaSeekBackwardButton };
+
+declare const MediaSeekForwardButton: GenericForwardRef;
+export { MediaSeekForwardButton };
+
+declare const MediaTimeDisplay: GenericForwardRef;
+export { MediaTimeDisplay };
+
+declare const MediaTimeRange: GenericForwardRef;
+export { MediaTimeRange };
+
+declare const MediaTooltip: GenericForwardRef;
+export { MediaTooltip };
+
+declare const MediaVolumeRange: GenericForwardRef;
+export { MediaVolumeRange };

server/node_modules/media-chrome/dist/react/index.js

@@ -0,0 +1,206 @@
+import React from "react";
+import "../index.js";
+import { toNativeProps } from "./common/utils.js";
+
+/** @type { import("react").HTMLElement } */
+const MediaGestureReceiver = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-gesture-receiver', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaGestureReceiver };
+
+/** @type { import("react").HTMLElement } */
+const MediaContainer = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-container', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaContainer };
+
+/** @type { import("react").HTMLElement } */
+const MediaController = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-controller', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaController };
+
+/** @type { import("react").HTMLElement } */
+const MediaChromeButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-chrome-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaChromeButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaAirplayButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-airplay-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaAirplayButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaCaptionsButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-captions-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaCaptionsButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaCastButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-cast-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaCastButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaChromeDialog = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-chrome-dialog', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaChromeDialog };
+
+/** @type { import("react").HTMLElement } */
+const MediaChromeRange = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-chrome-range', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaChromeRange };
+
+/** @type { import("react").HTMLElement } */
+const MediaControlBar = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-control-bar', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaControlBar };
+
+/** @type { import("react").HTMLElement } */
+const MediaTextDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-text-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaTextDisplay };
+
+/** @type { import("react").HTMLElement } */
+const MediaDurationDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-duration-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaDurationDisplay };
+
+/** @type { import("react").HTMLElement } */
+const MediaFullscreenButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-fullscreen-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaFullscreenButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaLiveButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-live-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaLiveButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaLoadingIndicator = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-loading-indicator', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaLoadingIndicator };
+
+/** @type { import("react").HTMLElement } */
+const MediaMuteButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-mute-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaMuteButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaPipButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-pip-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPipButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaPlaybackRateButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-playback-rate-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPlaybackRateButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaPlayButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-play-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPlayButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaPosterImage = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-poster-image', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPosterImage };
+
+/** @type { import("react").HTMLElement } */
+const MediaPreviewChapterDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-preview-chapter-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPreviewChapterDisplay };
+
+/** @type { import("react").HTMLElement } */
+const MediaPreviewThumbnail = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-preview-thumbnail', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPreviewThumbnail };
+
+/** @type { import("react").HTMLElement } */
+const MediaPreviewTimeDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-preview-time-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPreviewTimeDisplay };
+
+/** @type { import("react").HTMLElement } */
+const MediaSeekBackwardButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-seek-backward-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaSeekBackwardButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaSeekForwardButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-seek-forward-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaSeekForwardButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaTimeDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-time-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaTimeDisplay };
+
+/** @type { import("react").HTMLElement } */
+const MediaTimeRange = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-time-range', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaTimeRange };
+
+/** @type { import("react").HTMLElement } */
+const MediaTooltip = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-tooltip', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaTooltip };
+
+/** @type { import("react").HTMLElement } */
+const MediaVolumeRange = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-volume-range', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaVolumeRange };

server/node_modules/media-chrome/dist/react/media-store.d.ts

@@ -0,0 +1,248 @@
+import type { Context, ReactNode } from 'react';
+import React from 'react';
+import { AvailabilityStates, StreamTypes, VolumeLevels } from '../constants.js';
+import { type MediaState, type MediaStore } from '../media-store/media-store.js';
+import type { FullScreenElementStateOwner, MediaStateOwner } from '../media-store/state-mediator.js';
+export * as timeUtils from '../utils/time.js';
+/**
+ * @description A lookup object for all well-defined action types that can be dispatched
+ * to the `MediaStore`. As each action type name suggests, these all take the form of
+ * "state change requests," where e.g. a component will `dispatch()` a request to change
+ * some bit of media state, typically due to some user interaction.
+ *
+ * @example
+ * import { useDispatch, MediaActionTypes } from 'media-chrome/react/media-store';
+ *
+ * const MyComponent = () => {
+ *   const dispatch = useDispatch();
+ *   return (
+ *     <button
+ *       onClick={() => dispatch({
+ *         type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+ *         detail: 2.0
+ *       })}
+ *     >
+ *       Faster!
+ *     </button>
+ *   );
+ * };
+ *
+ * @see {@link useMediaDispatch}
+ */
+export { MediaState };
+export { AvailabilityStates, StreamTypes, VolumeLevels };
+export declare const MediaActionTypes: {
+    readonly MEDIA_ELEMENT_CHANGE_REQUEST: "mediaelementchangerequest";
+    readonly FULLSCREEN_ELEMENT_CHANGE_REQUEST: "fullscreenelementchangerequest";
+    readonly MEDIA_PLAY_REQUEST: "mediaplayrequest";
+    readonly MEDIA_PAUSE_REQUEST: "mediapauserequest";
+    readonly MEDIA_MUTE_REQUEST: "mediamuterequest";
+    readonly MEDIA_UNMUTE_REQUEST: "mediaunmuterequest";
+    readonly MEDIA_VOLUME_REQUEST: "mediavolumerequest";
+    readonly MEDIA_SEEK_REQUEST: "mediaseekrequest";
+    readonly MEDIA_AIRPLAY_REQUEST: "mediaairplayrequest";
+    readonly MEDIA_ENTER_FULLSCREEN_REQUEST: "mediaenterfullscreenrequest";
+    readonly MEDIA_EXIT_FULLSCREEN_REQUEST: "mediaexitfullscreenrequest";
+    readonly MEDIA_PREVIEW_REQUEST: "mediapreviewrequest";
+    readonly MEDIA_ENTER_PIP_REQUEST: "mediaenterpiprequest";
+    readonly MEDIA_EXIT_PIP_REQUEST: "mediaexitpiprequest";
+    readonly MEDIA_ENTER_CAST_REQUEST: "mediaentercastrequest";
+    readonly MEDIA_EXIT_CAST_REQUEST: "mediaexitcastrequest";
+    readonly MEDIA_SHOW_SUBTITLES_REQUEST: "mediashowsubtitlesrequest";
+    readonly MEDIA_DISABLE_SUBTITLES_REQUEST: "mediadisablesubtitlesrequest";
+    readonly MEDIA_TOGGLE_SUBTITLES_REQUEST: "mediatogglesubtitlesrequest";
+    readonly MEDIA_PLAYBACK_RATE_REQUEST: "mediaplaybackraterequest";
+    readonly MEDIA_RENDITION_REQUEST: "mediarenditionrequest";
+    readonly MEDIA_AUDIO_TRACK_REQUEST: "mediaaudiotrackrequest";
+    readonly MEDIA_SEEK_TO_LIVE_REQUEST: "mediaseektoliverequest";
+};
+export declare const MediaStateNames: {
+    readonly MEDIA_AIRPLAY_UNAVAILABLE: "mediaAirplayUnavailable";
+    readonly MEDIA_FULLSCREEN_UNAVAILABLE: "mediaFullscreenUnavailable";
+    readonly MEDIA_PIP_UNAVAILABLE: "mediaPipUnavailable";
+    readonly MEDIA_CAST_UNAVAILABLE: "mediaCastUnavailable";
+    readonly MEDIA_RENDITION_UNAVAILABLE: "mediaRenditionUnavailable";
+    readonly MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable";
+    readonly MEDIA_WIDTH: "mediaWidth";
+    readonly MEDIA_HEIGHT: "mediaHeight";
+    readonly MEDIA_PAUSED: "mediaPaused";
+    readonly MEDIA_HAS_PLAYED: "mediaHasPlayed";
+    readonly MEDIA_ENDED: "mediaEnded";
+    readonly MEDIA_MUTED: "mediaMuted";
+    readonly MEDIA_VOLUME_LEVEL: "mediaVolumeLevel";
+    readonly MEDIA_VOLUME: "mediaVolume";
+    readonly MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable";
+    readonly MEDIA_IS_PIP: "mediaIsPip";
+    readonly MEDIA_IS_CASTING: "mediaIsCasting";
+    readonly MEDIA_IS_AIRPLAYING: "mediaIsAirplaying";
+    readonly MEDIA_SUBTITLES_LIST: "mediaSubtitlesList";
+    readonly MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing";
+    readonly MEDIA_IS_FULLSCREEN: "mediaIsFullscreen";
+    readonly MEDIA_PLAYBACK_RATE: "mediaPlaybackRate";
+    readonly MEDIA_CURRENT_TIME: "mediaCurrentTime";
+    readonly MEDIA_DURATION: "mediaDuration";
+    readonly MEDIA_SEEKABLE: "mediaSeekable";
+    readonly MEDIA_PREVIEW_TIME: "mediaPreviewTime";
+    readonly MEDIA_PREVIEW_IMAGE: "mediaPreviewImage";
+    readonly MEDIA_PREVIEW_COORDS: "mediaPreviewCoords";
+    readonly MEDIA_PREVIEW_CHAPTER: "mediaPreviewChapter";
+    readonly MEDIA_LOADING: "mediaLoading";
+    readonly MEDIA_BUFFERED: "mediaBuffered";
+    readonly MEDIA_STREAM_TYPE: "mediaStreamType";
+    readonly MEDIA_TARGET_LIVE_WINDOW: "mediaTargetLiveWindow";
+    readonly MEDIA_TIME_IS_LIVE: "mediaTimeIsLive";
+    readonly MEDIA_RENDITION_LIST: "mediaRenditionList";
+    readonly MEDIA_RENDITION_SELECTED: "mediaRenditionSelected";
+    readonly MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList";
+    readonly MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled";
+    readonly MEDIA_CHAPTERS_CUES: "mediaChaptersCues";
+};
+/**
+ * @description The {@link https://react.dev/learn/passing-data-deeply-with-context#context-an-alternative-to-passing-props|React Context}
+ * used "under the hood" for media ui state updates, state change requests, and the hooks and providers that integrate with this context.
+ * It is unlikely that you will/should be using `MediaContext` directly.
+ *
+ * @see {@link MediaProvider}
+ * @see {@link useMediaDispatch}
+ * @see {@link useMediaSelector}
+ */
+export declare const MediaContext: Context<MediaStore | null>;
+/**
+ * @description A {@link https://react.dev/reference/react/createContext#provider|React Context.Provider} for having access
+ * to media state and state updates. While many other react libraries that rely on `<Provider/>` and its corresponding context/hooks
+ * are expected to have the context close to the top of the
+ * {@link https://react.dev/learn/understanding-your-ui-as-a-tree#the-render-tree|React render tree}, `<MediaProvider/>` should
+ * typically be declared closer to the component (e.g. `<MyFancyVideoPlayer/>`) level, as it manages the media state for a particular
+ * playback experience (visual and otherwise), typically tightly tied to e.g. an `<audio/>` or `<video/>` component (or similar).
+ * This state is tied together and managed by using {@link https://react.dev/learn/manipulating-the-dom-with-refs|DOM element Refs} to
+ * e.g. the corresponding `<video/>` element, which is made easy by our specialized hooks such as {@link useMediaRef}.
+ *
+ * @example
+ * import {
+ *   MediaProvider,
+ *   useMediaFullscreenRef,
+ *   useMediaRef
+ * } from 'media-chrome/react/media-store';
+ * import MyFancyPlayButton from './MyFancyPlayButton';
+ *
+ * const MyFancyVideoPlayerContainer = ({ src }: { src: string }) => {
+ *   const mediaFullscreenRef = useMediaFullscreenRef();
+ *   const mediaRef = useMediaRef();
+ *   return (
+ *     <div ref={mediaFullscreenRef}>
+ *       <video ref={mediaRef} src={src}/>
+ *       <div><MyFancyPlayButton/><div>
+ *     </div>
+ *   );
+ * };
+ *
+ * const MyFancyVideoPlayer = ({ src }) => {
+ *   return (
+ *     <MediaProvider><MyFancyVideoPlayerContainer src={src}/></MediaProvider>
+ *   );
+ * };
+ *
+ * export default MyFancyVideoPlayer;
+ *
+ * @see {@link useMediaRef}
+ * @see {@link useMediaFullscreenRef}
+ * @see {@link useMediaDispatch}
+ * @see {@link useMediaSelector}
+ */
+export declare const MediaProvider: ({ children, mediaStore, }: {
+    children: ReactNode;
+    mediaStore?: MediaStore;
+}) => React.JSX.Element;
+export declare const useMediaStore: () => MediaStore;
+/**
+ * @description This is a hook to get access to the `MediaStore`'s `dispatch()` method, which allows
+ * a component to make media state change requests. All player/application level state changes
+ * should use `dispatch()` to change media state (e.g. playing/pausing, enabling/disabling/selecting subtitles,
+ * changing playback rate, seeking, etc.). All well-defined state change request action types are defined in
+ * `MediaActionTypes`.
+ *
+ * @example
+ * import { useDispatch, MediaActionTypes } from 'media-chrome/react/media-store';
+ *
+ * // Assumes this is a descendant of `<MediaProvider/>`.
+ * const MyComponent = () => {
+ *   const dispatch = useDispatch();
+ *   return (
+ *     <button
+ *       onClick={() => dispatch({
+ *         type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+ *         detail: 2.0
+ *       })}
+ *     >
+ *       Faster!
+ *     </button>
+ *   );
+ * };
+ *
+ * @see {@link MediaActionTypes}
+ */
+export declare const useMediaDispatch: () => MediaStore["dispatch"];
+/**
+ * @description This is the primary way to associate a media component with the `MediaStore` provided
+ * by {@link MediaProvider|`<MediaProvider/>`}. To associate the media component, use `useMediaRef` just
+ * like you would {@link https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref|useRef}.
+ * Unlike `useRef`, however, "under the hood" `useMediaRef` is actually a
+ * {@link https://react.dev/reference/react-dom/components/common#ref-callback|ref callback} function.
+ *
+ * @example
+ * import type { VideoHTMLAttributes } from 'react';
+ * import { useMediaRef } from 'media-chrome/react/media-store';
+ *
+ * // Assumes this is a descendant of `<MediaProvider/>`.
+ * const VideoWrapper = (props: VideoHTMLAttributes<HTMLVideoElement>) => {
+ *   const mediaRef = useMediaRef();
+ *   return <video ref={mediaRef} {...props}/>;
+ * };
+ *
+ * @see {@link MediaProvider}
+ */
+export declare const useMediaRef: () => (mediaEl: MediaStateOwner | null | undefined) => void;
+/**
+ * @description This is the primary way to associate a component with the `MediaStore` provided
+ * by {@link MediaProvider|`<MediaProvider/>`} to be used as the target for entering fullscreen.
+ * To associate the media component, use `useMediaFullscreenRef` just
+ * like you would {@link https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref|useRef}.
+ * Unlike `useRef`, however, "under the hood" `useMediaFullscreenRef` is actually a
+ * {@link https://react.dev/reference/react-dom/components/common#ref-callback|ref callback} function.
+ *
+ * @example
+ * import { useMediaFullscreenRef } from 'media-chrome/react/media-store';
+ * import PlayerUI from './PlayerUI';
+ *
+ * // Assumes this is a descendant of `<MediaProvider/>`.
+ * const PlayerContainer = () => {
+ *   const fullscreenRef = useMediaFullscreenRef();
+ *   return <div ref={fullscreenRef}><PlayerUI/></div>;
+ * };
+ *
+ * @see {@link MediaProvider}
+ */
+export declare const useMediaFullscreenRef: () => (fullscreenEl: FullScreenElementStateOwner | null | undefined) => void;
+/**
+ * @description This is the primary way to get access to the media state. It accepts a function that let's you grab
+ * only the bit of state you care about to avoid unnecessary re-renders in react. It also allows you to pass in a more
+ * complex equality check (since you can transform the state or might only care about a subset of state changes, say only
+ * caring about second precision for time updates). Modeled after a simplified version of
+ * {@link https://redux.js.org/usage/deriving-data-selectors#encapsulating-state-shape-with-selectors|React Redux selectors}.
+ * @param selector - a function that gets invoked with the latest state and returns whatever computed state you want to use
+ * @param [equalityFn] - (optional) a function for checking if the previous computed state is "equal to" the next. Used to
+ * avoid unnecessary re-renders. Checks strict identity (===) by default.
+ * @returns the latest computed state
+ *
+ * @example
+ * import { useMediaSelector } from 'media-chrome/react/media-store';
+ *
+ * // Assumes this is a descendant of `<MediaProvider/>`.
+ * const LoadingIndicator = () => {
+ *   const showLoading = useMediaSelector(state => state.mediaLoading && !state.mediaPaused);
+ *   return showLoading && <div>Watch it, I'm loading, here! (...or don't, bc I'm loading, here!)</div>;
+ * };
+ *
+ * @see {@link MediaProvider}
+ */
+export declare const useMediaSelector: <S = any>(selector: (state: Partial<MediaState>) => S, equalityFn?: (a: any, b: any) => boolean) => S;

server/node_modules/media-chrome/dist/react/media-store.js

@@ -0,0 +1,111 @@
+import React, { createContext, useContext, useEffect, useMemo } from "react";
+import {
+  AvailabilityStates,
+  MediaUIEvents,
+  MediaUIProps,
+  StreamTypes,
+  VolumeLevels
+} from "../constants.js";
+import createMediaStore from "../media-store/media-store.js";
+import { useSyncExternalStoreWithSelector } from "./useSyncExternalStoreWithSelector.js";
+import * as timeUtils from "../utils/time.js";
+const {
+  REGISTER_MEDIA_STATE_RECEIVER,
+  // eslint-disable-line
+  UNREGISTER_MEDIA_STATE_RECEIVER,
+  // eslint-disable-line
+  // NOTE: These generic state change requests are not currently supported (CJP)
+  MEDIA_SHOW_TEXT_TRACKS_REQUEST,
+  // eslint-disable-line
+  MEDIA_HIDE_TEXT_TRACKS_REQUEST,
+  // eslint-disable-line
+  ...StateChangeRequests
+} = MediaUIEvents;
+const MediaActionTypes = {
+  ...StateChangeRequests,
+  MEDIA_ELEMENT_CHANGE_REQUEST: "mediaelementchangerequest",
+  FULLSCREEN_ELEMENT_CHANGE_REQUEST: "fullscreenelementchangerequest"
+};
+const MediaStateNames = { ...MediaUIProps };
+const identity = (x) => x;
+const MediaContext = createContext(null);
+const MediaProvider = ({
+  children,
+  mediaStore
+}) => {
+  const value = useMemo(
+    () => mediaStore != null ? mediaStore : createMediaStore({ documentElement: globalThis.document }),
+    [mediaStore]
+  );
+  useEffect(() => {
+    value == null ? void 0 : value.dispatch({
+      type: "documentelementchangerequest",
+      detail: globalThis.document
+    });
+    return () => {
+      value == null ? void 0 : value.dispatch({
+        type: "documentelementchangerequest",
+        detail: void 0
+      });
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(MediaContext.Provider, { value }, children);
+};
+const useMediaStore = () => {
+  const store = useContext(MediaContext);
+  return store;
+};
+const useMediaDispatch = () => {
+  var _a;
+  const store = useContext(MediaContext);
+  const dispatch = (_a = store == null ? void 0 : store.dispatch) != null ? _a : identity;
+  return (value) => {
+    return dispatch(value);
+  };
+};
+const useMediaRef = () => {
+  const dispatch = useMediaDispatch();
+  return (mediaEl) => {
+    dispatch({
+      type: MediaActionTypes.MEDIA_ELEMENT_CHANGE_REQUEST,
+      detail: mediaEl
+    });
+  };
+};
+const useMediaFullscreenRef = () => {
+  const dispatch = useMediaDispatch();
+  return (fullscreenEl) => {
+    dispatch({
+      type: MediaActionTypes.FULLSCREEN_ELEMENT_CHANGE_REQUEST,
+      detail: fullscreenEl
+    });
+  };
+};
+const refEquality = (a, b) => a === b;
+const useMediaSelector = (selector, equalityFn = refEquality) => {
+  var _a, _b, _c;
+  const store = useContext(MediaContext);
+  const selectedState = useSyncExternalStoreWithSelector(
+    (_a = store == null ? void 0 : store.subscribe) != null ? _a : identity,
+    (_b = store == null ? void 0 : store.getState) != null ? _b : identity,
+    (_c = store == null ? void 0 : store.getState) != null ? _c : identity,
+    selector,
+    equalityFn
+  );
+  return selectedState;
+};
+export {
+  AvailabilityStates,
+  MediaActionTypes,
+  MediaContext,
+  MediaProvider,
+  MediaStateNames,
+  StreamTypes,
+  VolumeLevels,
+  timeUtils,
+  useMediaDispatch,
+  useMediaFullscreenRef,
+  useMediaRef,
+  useMediaSelector,
+  useMediaStore
+};

server/node_modules/media-chrome/dist/react/media-theme.d.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+
+import type * as CSS from 'csstype';
+declare global {
+  interface Element {
+    slot?: string;
+  }
+}
+
+declare module 'csstype' {
+  interface Properties {
+    // Should add generic support for any CSS variables
+    [index: `--${string}`]: any;
+  }
+}
+
+type GenericProps = { [k: string]: any };
+type GenericElement = HTMLElement;
+
+type GenericForwardRef = React.ForwardRefExoticComponent<
+  GenericProps & React.RefAttributes<GenericElement | undefined>
+>;
+
+declare const MediaTheme: GenericForwardRef;
+export { MediaTheme };

server/node_modules/media-chrome/dist/react/media-theme.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "../media-theme-element.js";
+import { toNativeProps } from "./common/utils.js";
+
+/** @type { import("react").HTMLElement } */
+const MediaTheme = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-theme', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaTheme };

server/node_modules/media-chrome/dist/react/menu/index.d.ts

@@ -0,0 +1,64 @@
+import type React from 'react';
+
+import type * as CSS from 'csstype';
+declare global {
+  interface Element {
+    slot?: string;
+  }
+}
+
+declare module 'csstype' {
+  interface Properties {
+    // Should add generic support for any CSS variables
+    [index: `--${string}`]: any;
+  }
+}
+
+type GenericProps = { [k: string]: any };
+type GenericElement = HTMLElement;
+
+type GenericForwardRef = React.ForwardRefExoticComponent<
+  GenericProps & React.RefAttributes<GenericElement | undefined>
+>;
+
+declare const MediaChromeMenu: GenericForwardRef;
+export { MediaChromeMenu };
+
+declare const MediaChromeMenuItem: GenericForwardRef;
+export { MediaChromeMenuItem };
+
+declare const MediaSettingsMenu: GenericForwardRef;
+export { MediaSettingsMenu };
+
+declare const MediaSettingsMenuItem: GenericForwardRef;
+export { MediaSettingsMenuItem };
+
+declare const MediaChromeMenuButton: GenericForwardRef;
+export { MediaChromeMenuButton };
+
+declare const MediaSettingsMenuButton: GenericForwardRef;
+export { MediaSettingsMenuButton };
+
+declare const MediaAudioTrackMenu: GenericForwardRef;
+export { MediaAudioTrackMenu };
+
+declare const MediaAudioTrackMenuButton: GenericForwardRef;
+export { MediaAudioTrackMenuButton };
+
+declare const MediaCaptionsMenu: GenericForwardRef;
+export { MediaCaptionsMenu };
+
+declare const MediaCaptionsMenuButton: GenericForwardRef;
+export { MediaCaptionsMenuButton };
+
+declare const MediaPlaybackRateMenu: GenericForwardRef;
+export { MediaPlaybackRateMenu };
+
+declare const MediaPlaybackRateMenuButton: GenericForwardRef;
+export { MediaPlaybackRateMenuButton };
+
+declare const MediaRenditionMenu: GenericForwardRef;
+export { MediaRenditionMenu };
+
+declare const MediaRenditionMenuButton: GenericForwardRef;
+export { MediaRenditionMenuButton };

server/node_modules/media-chrome/dist/react/menu/index.js

@@ -0,0 +1,101 @@
+import React from "react";
+import "../../menu/index.js";
+import { toNativeProps } from "../common/utils.js";
+
+/** @type { import("react").HTMLElement } */
+const MediaChromeMenu = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-chrome-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaChromeMenu };
+
+/** @type { import("react").HTMLElement } */
+const MediaChromeMenuItem = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-chrome-menu-item', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaChromeMenuItem };
+
+/** @type { import("react").HTMLElement } */
+const MediaSettingsMenu = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-settings-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaSettingsMenu };
+
+/** @type { import("react").HTMLElement } */
+const MediaSettingsMenuItem = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-settings-menu-item', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaSettingsMenuItem };
+
+/** @type { import("react").HTMLElement } */
+const MediaChromeMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-chrome-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaChromeMenuButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaSettingsMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-settings-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaSettingsMenuButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaAudioTrackMenu = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-audio-track-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaAudioTrackMenu };
+
+/** @type { import("react").HTMLElement } */
+const MediaAudioTrackMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-audio-track-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaAudioTrackMenuButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaCaptionsMenu = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-captions-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaCaptionsMenu };
+
+/** @type { import("react").HTMLElement } */
+const MediaCaptionsMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-captions-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaCaptionsMenuButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaPlaybackRateMenu = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-playback-rate-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPlaybackRateMenu };
+
+/** @type { import("react").HTMLElement } */
+const MediaPlaybackRateMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-playback-rate-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaPlaybackRateMenuButton };
+
+/** @type { import("react").HTMLElement } */
+const MediaRenditionMenu = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-rendition-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaRenditionMenu };
+
+/** @type { import("react").HTMLElement } */
+const MediaRenditionMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
+  return React.createElement('media-rendition-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+});
+
+export { MediaRenditionMenuButton };

server/node_modules/media-chrome/dist/react/useSyncExternalStoreWithSelector.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function useSyncExternalStoreWithSelector<Snapshot, Selection>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot: undefined | null | (() => Snapshot), selector: (snapshot: Snapshot) => Selection, isEqual?: (a: Selection, b: Selection) => boolean): Selection;

server/node_modules/media-chrome/dist/react/useSyncExternalStoreWithSelector.js

@@ -0,0 +1,77 @@
+import {
+  useRef,
+  useEffect,
+  useMemo,
+  useDebugValue,
+  useSyncExternalStore
+} from "react";
+function isPolyfill(x, y) {
+  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
+}
+const is = typeof Object.is === "function" ? Object.is : isPolyfill;
+function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+  const instRef = useRef(null);
+  let inst;
+  if (instRef.current === null) {
+    inst = {
+      hasValue: false,
+      value: null
+    };
+    instRef.current = inst;
+  } else {
+    inst = instRef.current;
+  }
+  const [getSelection, getServerSelection] = useMemo(() => {
+    let hasMemo = false;
+    let memoizedSnapshot;
+    let memoizedSelection;
+    const memoizedSelector = (nextSnapshot) => {
+      if (!hasMemo) {
+        hasMemo = true;
+        memoizedSnapshot = nextSnapshot;
+        const nextSelection2 = selector(nextSnapshot);
+        if (isEqual !== void 0) {
+          if (inst.hasValue) {
+            const currentSelection = inst.value;
+            if (isEqual(currentSelection, nextSelection2)) {
+              memoizedSelection = currentSelection;
+              return currentSelection;
+            }
+          }
+        }
+        memoizedSelection = nextSelection2;
+        return nextSelection2;
+      }
+      const prevSnapshot = memoizedSnapshot;
+      const prevSelection = memoizedSelection;
+      if (is(prevSnapshot, nextSnapshot)) {
+        return prevSelection;
+      }
+      const nextSelection = selector(nextSnapshot);
+      if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
+        return prevSelection;
+      }
+      memoizedSnapshot = nextSnapshot;
+      memoizedSelection = nextSelection;
+      return nextSelection;
+    };
+    const maybeGetServerSnapshot = getServerSnapshot === void 0 ? null : getServerSnapshot;
+    const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
+    const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : () => memoizedSelector(maybeGetServerSnapshot());
+    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
+  const value = useSyncExternalStore(
+    subscribe,
+    getSelection,
+    getServerSelection
+  );
+  useEffect(() => {
+    inst.hasValue = true;
+    inst.value = value;
+  }, [value]);
+  useDebugValue(value);
+  return value;
+}
+export {
+  useSyncExternalStoreWithSelector
+};