@theoplayer/react-ui 1.6.0 → 1.7.1

package/CHANGELOG.md

@@ -10,6 +10,22 @@
 > -   🏠 Internal
 > -   💅 Polish
 
+## v1.7.1 (2024-02-15)
+
+-   🐛 Fix "Warning: useLayoutEffect does nothing on the server" when using `@theoplayer/react-ui` in Node. ([#52](https://github.com/THEOplayer/web-ui/pull/52))
+-   💅 Export `version` in public API. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
+-   💅 Allow importing `@theoplayer/react-ui/package.json`. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
+-   🏠 See changes to [Open Video UI for Web v1.7.1](https://github.com/THEOplayer/web-ui/blob/v1.7.1/CHANGELOG.md)
+
+## v1.7.0 (2024-02-15)
+
+-   🚀 Added support for loading in Node for static site generation (SSG) or server-side rendering (SSR). ([#50](https://github.com/THEOplayer/web-ui/pull/50))
+    -   This allows you to pass React components (such as `<DefaultUI>`, `<UIContainer>` or `<PlayButton>`) to the [Server React DOM APIs](https://react.dev/reference/react-dom/server), or to use them with a framework that supports SSG or SSR (such as Next.js, Remix or Gatsby).
+    -   ⚠️ The rendered HTML must still be [hydrated](https://react.dev/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) on the client to load the Open Video UI properly. (Usually, this handled automatically by your React framework.)
+-   🚀 Added utility hooks such as `useCurrentTime()`, `usePaused()` and `useVolume()`. ([#51](https://github.com/THEOplayer/web-ui/pull/51))
+    -   See [the API documentation](https://theoplayer.github.io/web-ui/react-api/) for more information.
+-   🏠 See changes to [Open Video UI for Web v1.7.0](https://github.com/THEOplayer/web-ui/blob/v1.7.0/CHANGELOG.md)
+
 ## v1.6.0 (2024-02-08)
 
 -   🚀 Initial release

package/dist/THEOplayerReactUI.d.ts

@@ -1,5 +1,5 @@
 /*!
- * THEOplayer Open Video UI for React (v1.6.0)
+ * THEOplayer Open Video UI for React (v1.7.1)
  * License: MIT
  */
 import * as react from 'react';
@@ -9,6 +9,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UIContainer as UIContainer$1, DefaultUI as DefaultUI$1, ControlBar as ControlBar$1, Button as Button$1, LinkButton as LinkButton$1, PlayButton as PlayButton$1, MuteButton as MuteButton$1, SeekButton as SeekButton$1, TimeDisplay as TimeDisplay$1, DurationDisplay as DurationDisplay$1, RadioGroup as RadioGroup$1, RadioButton as RadioButton$1, Menu as Menu$1, MenuGroup as MenuGroup$1, MenuButton as MenuButton$1, CloseMenuButton as CloseMenuButton$1, MediaTrackRadioButton as MediaTrackRadioButton$1, TrackRadioGroup as TrackRadioGroup$1, TextTrackRadioButton as TextTrackRadioButton$1, TextTrackOffRadioButton as TextTrackOffRadioButton$1, LanguageMenu as LanguageMenu$1, LanguageMenuButton as LanguageMenuButton$1, PlaybackRateRadioGroup as PlaybackRateRadioGroup$1, PlaybackRateMenuButton as PlaybackRateMenuButton$1, PlaybackRateMenu as PlaybackRateMenu$1, PlaybackRateDisplay as PlaybackRateDisplay$1, ActiveQualityDisplay as ActiveQualityDisplay$1, QualityRadioButton as QualityRadioButton$1, QualityRadioGroup as QualityRadioGroup$1, TextTrackStyleRadioGroup as TextTrackStyleRadioGroup$1, TextTrackStyleResetButton as TextTrackStyleResetButton$1, TextTrackStyleDisplay as TextTrackStyleDisplay$1, TextTrackStyleMenu as TextTrackStyleMenu$1, SettingsMenu as SettingsMenu$1, SettingsMenuButton as SettingsMenuButton$1, FullscreenButton as FullscreenButton$1, TimeRange as TimeRange$1, VolumeRange as VolumeRange$1, ErrorDisplay as ErrorDisplay$1, CastButton as CastButton$1, ChromecastButton as ChromecastButton$1, ChromecastDisplay as ChromecastDisplay$1, AirPlayButton as AirPlayButton$1, LoadingIndicator as LoadingIndicator$1, GestureReceiver as GestureReceiver$1, PreviewTimeDisplay as PreviewTimeDisplay$1, PreviewThumbnail as PreviewThumbnail$1, LiveButton as LiveButton$1, AdDisplay as AdDisplay$1, AdCountdown as AdCountdown$1, AdClickThroughButton as AdClickThroughButton$1, AdSkipButton as AdSkipButton$1 } from '@theoplayer/web-ui';
 import * as _lit_react from '@lit/react';
 import { WebComponentProps } from '@lit/react';
+import { SourceDescription } from 'theoplayer';
 
 /**
  * The {@link theoplayer!ChromelessPlayer | ChromelessPlayer} instance of the parent {@link DefaultUI} or {@link UIContainer}.
@@ -16,7 +17,7 @@ import { WebComponentProps } from '@lit/react';
  * This can be used to access the backing player's state and add event listeners from within a custom React component.
  * The component *must* be a child of {@link DefaultUI} or {@link UIContainer} in order to receive the context.
  * ```jsx
- * import { useContext, useState } from 'react';
+ * import { useCallback, useContext, useSyncExternalStore } from 'react';
  * import { PlayerContext } from '@theoplayer/react-ui';
  *
  * const MyCustomComponent = () => {
@@ -24,17 +25,24 @@ import { WebComponentProps } from '@lit/react';
  *     const player = useContext(PlayerContext);
  *
  *     // Track the paused state of the player
- *     const [paused, setPaused] = useState(player?.paused ?? true);
- *     useEffect(() => {
- *         if (!player) return;
- *         const updatePaused = () => {
- *             setPaused(player.paused);
- *         };
- *         player.addEventListener(['play', 'pause'], updatePaused);
- *         return () => {
- *             player.removeEventListener(['play', 'pause'], updatePaused);
- *         };
- *     }, [player]);
+ *     const subscribe = useCallback(
+ *         (callback) => {
+ *             player?.addEventListener(['play', 'pause'], callback);
+ *             return () => {
+ *                 player?.removeEventListener(['play', 'pause'], callback);
+ *             };
+ *         },
+ *         [player]
+ *     );
+ *     const paused = useSyncExternalStore(
+ *         subscribe,
+ *         () => player?.paused ?? true,
+ *         () => true
+ *     );
+ *
+ *     // Alternatively, you can use the built-in hook:
+ *     // import { usePaused } from '@theoplayer/react-ui';
+ *     // const paused = usePaused();
  *
  *     // Show the paused state in your UI
  *     return <p>Player is {paused ? "paused" : "playing"}</p>
@@ -680,5 +688,80 @@ declare const AdSkipButton: _lit_react.ReactWebComponent<AdSkipButton$1, {
     readonly onClick: "click";
 }>;
 
-export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Button, ButtonEvents, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, CommonMenuProps, ControlBar, DefaultUI, DefaultUIProps, DurationDisplay, ErrorDisplay, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LanguageMenuProps, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MenuProps, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateMenuProps, PlaybackRateRadioGroup, PlayerContext, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioButtonEvents, RadioGroup, RadioGroupEvents, RangeEvents, SeekButton, SettingsMenu, SettingsMenuButton, SettingsMenuProps, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMenu, TextTrackStyleMenuProps, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, UIContainer, UIContainerProps, VolumeRange };
+/**
+ * Returns {@link theoplayer!ChromelessPlayer.currentTime | the player's current time}, automatically updating whenever it changes.
+ *
+ * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},
+ * or alternatively any other component that provides a {@link PlayerContext}.
+ *
+ * @group Hooks
+ */
+declare function useCurrentTime(): number;
+
+/**
+ * Returns {@link theoplayer!ChromelessPlayer.duration | the player's duration}, automatically updating whenever it changes.
+ *
+ * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},
+ * or alternatively any other component that provides a {@link PlayerContext}.
+ *
+ * @group Hooks
+ */
+declare function useDuration(): number;
+
+/**
+ * Returns {@link theoplayer!ChromelessPlayer.muted | the player's muted state}, automatically updating whenever it changes.
+ *
+ * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},
+ * or alternatively any other component that provides a {@link PlayerContext}.
+ *
+ * @group Hooks
+ */
+declare function useMuted(): boolean;
+
+/**
+ * Returns {@link theoplayer!ChromelessPlayer.paused | the player's paused state}, automatically updating whenever it changes.
+ *
+ * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},
+ * or alternatively any other component that provides a {@link PlayerContext}.
+ *
+ * @group Hooks
+ */
+declare function usePaused(): boolean;
+
+/**
+ * Returns {@link theoplayer!ChromelessPlayer.seeking | the player's seeking state}, automatically updating whenever it changes.
+ *
+ * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},
+ * or alternatively any other component that provides a {@link PlayerContext}.
+ *
+ * @group Hooks
+ */
+declare function useSeeking(): boolean;
+
+/**
+ * Returns {@link theoplayer!ChromelessPlayer.source | the player's source}, automatically updating whenever it changes.
+ *
+ * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},
+ * or alternatively any other component that provides a {@link PlayerContext}.
+ *
+ * @group Hooks
+ */
+declare function useSource(): SourceDescription | undefined;
+
+/**
+ * Returns {@link theoplayer!ChromelessPlayer.volume | the player's volume}, automatically updating whenever it changes.
+ *
+ * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},
+ * or alternatively any other component that provides a {@link PlayerContext}.
+ *
+ * @group Hooks
+ */
+declare function useVolume(): number;
+
+/**
+ * The version of Open Video UI for React.
+ */
+declare const version: string;
+
+export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Button, ButtonEvents, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, CommonMenuProps, ControlBar, DefaultUI, DefaultUIProps, DurationDisplay, ErrorDisplay, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LanguageMenuProps, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MenuProps, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateMenuProps, PlaybackRateRadioGroup, PlayerContext, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioButtonEvents, RadioGroup, RadioGroupEvents, RangeEvents, SeekButton, SettingsMenu, SettingsMenuButton, SettingsMenuProps, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMenu, TextTrackStyleMenuProps, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, UIContainer, UIContainerProps, VolumeRange, useCurrentTime, useDuration, useMuted, usePaused, useSeeking, useSource, useVolume, version };
 export as namespace THEOplayerReactUI;

package/dist/THEOplayerReactUI.es5.js

@@ -1,8 +1,8 @@
 /*!
- * THEOplayer Open Video UI for React (v1.6.0)
+ * THEOplayer Open Video UI for React (v1.7.1)
  * License: MIT
- */!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@theoplayer/web-ui/es5")):"function"==typeof define&&define.amd?define(["exports","react","@theoplayer/web-ui/es5"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).THEOplayerReactUI={},e.React,e.THEOplayerUI)}(this,function(e,t,a){"use strict";var n,l=(n=Object.create(null),t&&Object.keys(t).forEach(function(e){if("default"!==e){var a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,a.get?a:{enumerable:!0,get:function(){return t[e]}})}}),n.default=t,Object.freeze(n)),r=t.createContext(void 0);function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var a,n,l={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(l[a]=e[a]);return l}/**
+ */!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@theoplayer/web-ui/es5")):"function"==typeof define&&define.amd?define(["exports","react","@theoplayer/web-ui/es5"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).THEOplayerReactUI={},e.React,e.THEOplayerUI)}(this,function(e,t,a){"use strict";var n,r=(n=Object.create(null),t&&Object.keys(t).forEach(function(e){if("default"!==e){var a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,a.get?a:{enumerable:!0,get:function(){return t[e]}})}}),n.default=t,Object.freeze(n)),l=t.createContext(void 0);function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function u(e,t){if(null==e)return{};var a,n,r={},l=Object.keys(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}/**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let i=new Set(["children","localName","ref","style","className"]),u=new WeakMap,m=(e,t,a,n,l)=>{let r,o;let s=l?.[t];void 0===s||a===n?(e[t]=a,null==a&&t in HTMLElement.prototype&&e.removeAttribute(t)):(void 0===(r=u.get(e))&&u.set(e,r=new Map),o=r.get(s),void 0!==a?void 0===o?(r.set(s,o={handleEvent:a}),e.addEventListener(s,o)):o.handleEvent=a:void 0!==o&&(r.delete(s),e.removeEventListener(s,o)))},c=({react:e,tagName:t,elementClass:a,events:n,displayName:l})=>{let r=new Set(Object.keys(n??{})),o=e.forwardRef((l,o)=>{let s=e.useRef(null),u=e.useRef(null),c={},y={};for(let[e,t]of Object.entries(l))i.has(e)?c["className"===e?"class":e]=t:r.has(e)||e in a.prototype?y[e]=t:c[e]=t;return e.useLayoutEffect(()=>{if(null!==u.current){for(let e in y)m(u.current,e,l[e],s.current?s.current[e]:void 0,n);s.current=l}}),e.useLayoutEffect(()=>{u.current?.removeAttribute("defer-hydration")},[]),c.suppressHydrationWarning=!0,e.createElement(t,{...c,ref:e.useCallback(e=>{u.current=e,"function"==typeof o?o(e):null!==o&&(o.current=e)},[o])})});return o.displayName=l??a.name,o};function y(e){var a=t.useState(null),n=a[0],l=a[1],r=t.useState(void 0),o=r[0],s=r[1];t.useEffect(function(){s(null==n?void 0:n.player)},[n]);var i=t.useCallback(function(e){s(null==n?void 0:n.player)},[n]);return t.useEffect(function(){o&&(null==e||e(o))},[o,e]),{player:o,setUi:l,onReadyHandler:i}}var d=function(e){var t=e.slot,a=e.children;return a?l.createElement("div",{slot:t,style:{display:"contents"},children:a}):null},p=function(e){var a=e.slot,n=e.children;return n?t.Children.map(n,function(e){return t.isValidElement(e)?e.type===t.Fragment?t.cloneElement(e,void 0,l.createElement(p,{slot:a,children:e.props.children})):t.cloneElement(e,{slot:a}):l.createElement(d,{slot:a,children:e})}):null},h=c({tagName:"theoplayer-ui",displayName:"UIContainer",elementClass:a.UIContainer,react:l,events:{onReady:"theoplayerready"}}),g=c({tagName:"theoplayer-default-ui",displayName:"DefaultUI",elementClass:a.DefaultUI,react:l,events:{onReady:"theoplayerready"}}),N=c({tagName:"theoplayer-control-bar",displayName:"ControlBar",elementClass:a.ControlBar,react:l}),v={onClick:"click"},C=c({tagName:"theoplayer-button",displayName:"Button",elementClass:a.Button,react:l,events:v}),f=c({tagName:"theoplayer-link-button",displayName:"LinkButton",elementClass:a.LinkButton,react:l,events:v}),B=c({tagName:"theoplayer-play-button",displayName:"PlayButton",elementClass:a.PlayButton,react:l,events:v}),R=c({tagName:"theoplayer-mute-button",displayName:"MuteButton",elementClass:a.MuteButton,react:l,events:v}),k=c({tagName:"theoplayer-seek-button",displayName:"SeekButton",elementClass:a.SeekButton,react:l,events:v}),b=c({tagName:"theoplayer-time-display",displayName:"TimeDisplay",elementClass:a.TimeDisplay,react:l}),T=c({tagName:"theoplayer-duration-display",displayName:"DurationDisplay",elementClass:a.DurationDisplay,react:l}),E={onChange:"change"},M=c({tagName:"theoplayer-radio-group",displayName:"RadioGroup",elementClass:a.RadioGroup,react:l,events:E}),D=o({},v,{onChange:"change",onInput:"input"}),x=c({tagName:"theoplayer-radio-button",displayName:"RadioButton",elementClass:a.RadioButton,react:l,events:D}),P=c({tagName:"theoplayer-menu",displayName:"Menu",elementClass:a.Menu,react:l}),S=c({tagName:"theoplayer-menu-group",displayName:"MenuGroup",elementClass:a.MenuGroup,react:l}),G=c({tagName:"theoplayer-menu-button",displayName:"MenuButton",elementClass:a.MenuButton,react:l,events:v}),L=c({tagName:"theoplayer-close-menu-button",displayName:"CloseMenuButton",elementClass:a.CloseMenuButton,react:l,events:v}),w=c({tagName:"theoplayer-media-track-radio-button",displayName:"MediaTrackRadioButton",elementClass:a.MediaTrackRadioButton,react:l,events:D}),A=c({tagName:"theoplayer-track-radio-group",displayName:"TrackRadioGroup",elementClass:a.TrackRadioGroup,react:l,events:E}),O=c({tagName:"theoplayer-text-track-radio-button",displayName:"TextTrackRadioButton",elementClass:a.TextTrackRadioButton,react:l,events:D}),I=c({tagName:"theoplayer-text-track-off-radio-button",displayName:"TextTrackOffRadioButton",elementClass:a.TextTrackOffRadioButton,react:l,events:D}),j=c({tagName:"theoplayer-language-menu",displayName:"LanguageMenu",elementClass:a.LanguageMenu,react:l}),U=c({tagName:"theoplayer-language-menu-button",displayName:"LanguageMenuButton",elementClass:a.LanguageMenuButton,react:l,events:v}),Q=c({tagName:"theoplayer-playback-rate-radio-group",displayName:"PlaybackRateRadioGroup",elementClass:a.PlaybackRateRadioGroup,react:l,events:E}),H=c({tagName:"theoplayer-playback-rate-menu-button",displayName:"PlaybackRateMenuButton",elementClass:a.PlaybackRateMenuButton,react:l,events:v}),q=c({tagName:"theoplayer-playback-rate-menu",displayName:"PlaybackRateMenu",elementClass:a.PlaybackRateMenu,react:l}),F=c({tagName:"theoplayer-playback-rate-display",displayName:"PlaybackRateDisplay",elementClass:a.PlaybackRateDisplay,react:l}),V=c({tagName:"theoplayer-active-quality-display",displayName:"ActiveQualityDisplay",elementClass:a.ActiveQualityDisplay,react:l}),W=c({tagName:"theoplayer-quality-radio-button",displayName:"QualityRadioButton",elementClass:a.QualityRadioButton,react:l,events:D}),z=c({tagName:"theoplayer-quality-radio-group",displayName:"QualityRadioGroup",elementClass:a.QualityRadioGroup,react:l,events:E}),J=c({tagName:"theoplayer-text-track-style-radio-group",displayName:"TextTrackStyleRadioGroup",elementClass:a.TextTrackStyleRadioGroup,react:l,events:E}),K=c({tagName:"theoplayer-text-track-style-reset-button",displayName:"TextTrackStyleResetButton",elementClass:a.TextTrackStyleResetButton,react:l,events:v}),X=c({tagName:"theoplayer-text-track-style-display",displayName:"TextTrackStyleDisplay",elementClass:a.TextTrackStyleDisplay,react:l}),Y=c({tagName:"theoplayer-text-track-style-menu",displayName:"TextTrackStyleMenu",elementClass:a.TextTrackStyleMenu,react:l}),Z=c({tagName:"theoplayer-settings-menu",displayName:"SettingsMenu",elementClass:a.SettingsMenu,react:l}),$=c({tagName:"theoplayer-settings-menu-button",displayName:"SettingsMenuButton",elementClass:a.SettingsMenuButton,react:l,events:v}),_=c({tagName:"theoplayer-fullscreen-button",displayName:"FullscreenButton",elementClass:a.FullscreenButton,react:l,events:v}),ee={onChange:"change",onInput:"input"},et=c({tagName:"theoplayer-time-range",displayName:"TimeRange",elementClass:a.TimeRange,react:l,events:ee}),ea=c({tagName:"theoplayer-volume-range",displayName:"VolumeRange",elementClass:a.VolumeRange,react:l,events:ee}),en=c({tagName:"theoplayer-error-display",displayName:"ErrorDisplay",elementClass:a.ErrorDisplay,react:l}),el=c({tagName:"theoplayer-cast-button",displayName:"CastButton",elementClass:a.CastButton,react:l,events:v}),er=c({tagName:"theoplayer-chromecast-button",displayName:"ChromecastButton",elementClass:a.ChromecastButton,react:l,events:v}),eo=c({tagName:"theoplayer-chromecast-display",displayName:"ChromecastDisplay",elementClass:a.ChromecastDisplay,react:l}),es=c({tagName:"theoplayer-airplay-button",displayName:"AirPlayButton",elementClass:a.AirPlayButton,react:l,events:v}),ei=c({tagName:"theoplayer-loading-indicator",displayName:"LoadingIndicator",elementClass:a.LoadingIndicator,react:l}),eu=c({tagName:"theoplayer-gesture-receiver",displayName:"GestureReceiver",elementClass:a.GestureReceiver,react:l}),em=c({tagName:"theoplayer-preview-time-display",displayName:"PreviewTimeDisplay",elementClass:a.PreviewTimeDisplay,react:l}),ec=c({tagName:"theoplayer-preview-thumbnail",displayName:"PreviewThumbnail",elementClass:a.PreviewThumbnail,react:l}),ey=c({tagName:"theoplayer-live-button",displayName:"LiveButton",elementClass:a.LiveButton,react:l,events:v}),ed=c({tagName:"theoplayer-ad-display",displayName:"AdDisplay",elementClass:a.AdDisplay,react:l}),ep=c({tagName:"theoplayer-ad-countdown",displayName:"AdCountdown",elementClass:a.AdCountdown,react:l}),eh=c({tagName:"theoplayer-ad-clickthrough-button",displayName:"AdClickThroughButton",elementClass:a.AdClickThroughButton,react:l,events:v}),eg=c({tagName:"theoplayer-ad-skip-button",displayName:"AdSkipButton",elementClass:a.AdSkipButton,react:l,events:v});e.ActiveQualityDisplay=V,e.AdClickThroughButton=eh,e.AdCountdown=ep,e.AdDisplay=ed,e.AdSkipButton=eg,e.AirPlayButton=es,e.Button=C,e.ButtonEvents=v,e.CastButton=el,e.ChromecastButton=er,e.ChromecastDisplay=eo,e.CloseMenuButton=L,e.ControlBar=N,e.DefaultUI=function(e){var t=e.title,a=e.topControlBar,n=e.bottomControlBar,i=e.menu,u=e.onReady,m=s(e,["title","topControlBar","bottomControlBar","menu","onReady"]),c=y(u),h=c.player,N=c.setUi,v=c.onReadyHandler;return l.createElement(g,o({},m,{ref:N,onReady:v}),l.createElement(r.Provider,{value:h},l.createElement(d,{slot:"title"},t),l.createElement(d,{slot:"top-control-bar"},a),l.createElement(d,{slot:"bottom-control-bar"},n),l.createElement(p,{slot:"menu"},i)))},e.DurationDisplay=T,e.ErrorDisplay=en,e.FullscreenButton=_,e.GestureReceiver=eu,e.LanguageMenu=function(e){var t=e.heading,a=e.children,n=s(e,["heading","children"]);return l.createElement(j,n,l.createElement(d,{slot:"heading"},t),a)},e.LanguageMenuButton=U,e.LinkButton=f,e.LiveButton=ey,e.LoadingIndicator=ei,e.MediaTrackRadioButton=w,e.Menu=function(e){var t=e.heading,a=e.children,n=s(e,["heading","children"]);return l.createElement(P,n,l.createElement(d,{slot:"heading"},t),a)},e.MenuButton=G,e.MenuGroup=S,e.MuteButton=R,e.PlayButton=B,e.PlaybackRateDisplay=F,e.PlaybackRateMenu=function(e){var t=e.heading,a=e.children,n=s(e,["heading","children"]);return l.createElement(q,n,l.createElement(d,{slot:"heading"},t),a)},e.PlaybackRateMenuButton=H,e.PlaybackRateRadioGroup=Q,e.PlayerContext=r,e.PreviewThumbnail=ec,e.PreviewTimeDisplay=em,e.QualityRadioButton=W,e.QualityRadioGroup=z,e.RadioButton=x,e.RadioButtonEvents=D,e.RadioGroup=M,e.RadioGroupEvents=E,e.RangeEvents=ee,e.SeekButton=k,e.SettingsMenu=function(e){var t=e.heading,a=e.children,n=s(e,["heading","children"]);return l.createElement(Z,n,l.createElement(d,{slot:"heading"},t),a)},e.SettingsMenuButton=$,e.TextTrackOffRadioButton=I,e.TextTrackRadioButton=O,e.TextTrackStyleDisplay=X,e.TextTrackStyleMenu=function(e){var t=e.heading,a=e.children,n=s(e,["heading","children"]);return l.createElement(Y,n,l.createElement(d,{slot:"heading"},t),a)},e.TextTrackStyleRadioGroup=J,e.TextTrackStyleResetButton=K,e.TimeDisplay=b,e.TimeRange=et,e.TrackRadioGroup=A,e.UIContainer=function(e){var t=e.topChrome,a=e.middleChrome,n=e.bottomChrome,i=e.centeredChrome,u=e.centeredLoading,m=e.menu,c=e.error,g=e.onReady,N=s(e,["topChrome","middleChrome","bottomChrome","centeredChrome","centeredLoading","menu","error","onReady"]),v=y(g),C=v.player,f=v.setUi,B=v.onReadyHandler;return l.createElement(h,o({},N,{ref:f,onReady:B}),l.createElement(r.Provider,{value:C},l.createElement(d,{slot:"top-chrome"},t),l.createElement(d,{slot:"middle-chrome"},a),l.createElement(d,{slot:"centered-chrome"},i),l.createElement(d,{slot:"centered-loading"},u),n,l.createElement(p,{slot:"menu"},m),l.createElement(d,{slot:"error"},c)))},e.VolumeRange=ea});
+ */let i=new Set(["children","localName","ref","style","className"]),s=new WeakMap,c=(e,t,a,n,r)=>{let l,o;let u=r?.[t];void 0===u||a===n?(e[t]=a,null==a&&t in HTMLElement.prototype&&e.removeAttribute(t)):(void 0===(l=s.get(e))&&s.set(e,l=new Map),o=l.get(u),void 0!==a?void 0===o?(l.set(u,o={handleEvent:a}),e.addEventListener(u,o)):o.handleEvent=a:void 0!==o&&(l.delete(u),e.removeEventListener(u,o)))},m=({react:e,tagName:t,elementClass:a,events:n,displayName:r})=>{let l=new Set(Object.keys(n??{})),o=e.forwardRef((r,o)=>{let u=e.useRef(null),s=e.useRef(null),m={},d={};for(let[e,t]of Object.entries(r))i.has(e)?m["className"===e?"class":e]=t:l.has(e)||e in a.prototype?d[e]=t:m[e]=t;return e.useLayoutEffect(()=>{if(null!==s.current){for(let e in d)c(s.current,e,r[e],u.current?u.current[e]:void 0,n);u.current=r}}),e.useLayoutEffect(()=>{s.current?.removeAttribute("defer-hydration")},[]),m.suppressHydrationWarning=!0,e.createElement(t,{...m,ref:e.useCallback(e=>{s.current=e,"function"==typeof o?o(e):null!==o&&(o.current=e)},[o])})});return o.displayName=r??a.name,o};function d(e,a){var n=t.useCallback(function(t){return null==e||e.addEventListener("theoplayerready",t),function(){return null==e?void 0:e.removeEventListener("theoplayerready",t)}},[e]),r=t.useSyncExternalStore(n,function(){return null==e?void 0:e.player},function(){});return t.useEffect(function(){r&&(null==a||a(r))},[r,a]),r}var y=function(e){var t=e.slot,a=e.children;return a?r.createElement("div",{slot:t,style:{display:"contents"},children:a}):null},p=function(e){var a=e.slot,n=e.children;return n?t.Children.map(n,function(e){return t.isValidElement(e)?e.type===t.Fragment?t.cloneElement(e,void 0,r.createElement(p,{slot:a,children:e.props.children})):t.cloneElement(e,{slot:a}):r.createElement(y,{slot:a,children:e})}):null},g=m({tagName:"theoplayer-ui",displayName:"UIContainer",elementClass:a.UIContainer,react:r,events:{onReady:"theoplayerready"}}),h=m({tagName:"theoplayer-default-ui",displayName:"DefaultUI",elementClass:a.DefaultUI,react:r,events:{onReady:"theoplayerready"}}),v=m({tagName:"theoplayer-control-bar",displayName:"ControlBar",elementClass:a.ControlBar,react:r}),f={onClick:"click"},N=m({tagName:"theoplayer-button",displayName:"Button",elementClass:a.Button,react:r,events:f}),C=m({tagName:"theoplayer-link-button",displayName:"LinkButton",elementClass:a.LinkButton,react:r,events:f}),k=m({tagName:"theoplayer-play-button",displayName:"PlayButton",elementClass:a.PlayButton,react:r,events:f}),b=m({tagName:"theoplayer-mute-button",displayName:"MuteButton",elementClass:a.MuteButton,react:r,events:f}),B=m({tagName:"theoplayer-seek-button",displayName:"SeekButton",elementClass:a.SeekButton,react:r,events:f}),E=m({tagName:"theoplayer-time-display",displayName:"TimeDisplay",elementClass:a.TimeDisplay,react:r}),R=m({tagName:"theoplayer-duration-display",displayName:"DurationDisplay",elementClass:a.DurationDisplay,react:r}),T={onChange:"change"},S=m({tagName:"theoplayer-radio-group",displayName:"RadioGroup",elementClass:a.RadioGroup,react:r,events:T}),x=o({},f,{onChange:"change",onInput:"input"}),M=m({tagName:"theoplayer-radio-button",displayName:"RadioButton",elementClass:a.RadioButton,react:r,events:x}),L=m({tagName:"theoplayer-menu",displayName:"Menu",elementClass:a.Menu,react:r}),D=m({tagName:"theoplayer-menu-group",displayName:"MenuGroup",elementClass:a.MenuGroup,react:r}),P=m({tagName:"theoplayer-menu-button",displayName:"MenuButton",elementClass:a.MenuButton,react:r,events:f}),G=m({tagName:"theoplayer-close-menu-button",displayName:"CloseMenuButton",elementClass:a.CloseMenuButton,react:r,events:f}),w=m({tagName:"theoplayer-media-track-radio-button",displayName:"MediaTrackRadioButton",elementClass:a.MediaTrackRadioButton,react:r,events:x}),A=m({tagName:"theoplayer-track-radio-group",displayName:"TrackRadioGroup",elementClass:a.TrackRadioGroup,react:r,events:T}),O=m({tagName:"theoplayer-text-track-radio-button",displayName:"TextTrackRadioButton",elementClass:a.TextTrackRadioButton,react:r,events:x}),I=m({tagName:"theoplayer-text-track-off-radio-button",displayName:"TextTrackOffRadioButton",elementClass:a.TextTrackOffRadioButton,react:r,events:x}),j=m({tagName:"theoplayer-language-menu",displayName:"LanguageMenu",elementClass:a.LanguageMenu,react:r}),Q=m({tagName:"theoplayer-language-menu-button",displayName:"LanguageMenuButton",elementClass:a.LanguageMenuButton,react:r,events:f}),U=m({tagName:"theoplayer-playback-rate-radio-group",displayName:"PlaybackRateRadioGroup",elementClass:a.PlaybackRateRadioGroup,react:r,events:T}),q=m({tagName:"theoplayer-playback-rate-menu-button",displayName:"PlaybackRateMenuButton",elementClass:a.PlaybackRateMenuButton,react:r,events:f}),V=m({tagName:"theoplayer-playback-rate-menu",displayName:"PlaybackRateMenu",elementClass:a.PlaybackRateMenu,react:r}),F=m({tagName:"theoplayer-playback-rate-display",displayName:"PlaybackRateDisplay",elementClass:a.PlaybackRateDisplay,react:r}),H=m({tagName:"theoplayer-active-quality-display",displayName:"ActiveQualityDisplay",elementClass:a.ActiveQualityDisplay,react:r}),W=m({tagName:"theoplayer-quality-radio-button",displayName:"QualityRadioButton",elementClass:a.QualityRadioButton,react:r,events:x}),z=m({tagName:"theoplayer-quality-radio-group",displayName:"QualityRadioGroup",elementClass:a.QualityRadioGroup,react:r,events:T}),J=m({tagName:"theoplayer-text-track-style-radio-group",displayName:"TextTrackStyleRadioGroup",elementClass:a.TextTrackStyleRadioGroup,react:r,events:T}),K=m({tagName:"theoplayer-text-track-style-reset-button",displayName:"TextTrackStyleResetButton",elementClass:a.TextTrackStyleResetButton,react:r,events:f}),X=m({tagName:"theoplayer-text-track-style-display",displayName:"TextTrackStyleDisplay",elementClass:a.TextTrackStyleDisplay,react:r}),Y=m({tagName:"theoplayer-text-track-style-menu",displayName:"TextTrackStyleMenu",elementClass:a.TextTrackStyleMenu,react:r}),Z=m({tagName:"theoplayer-settings-menu",displayName:"SettingsMenu",elementClass:a.SettingsMenu,react:r}),$=m({tagName:"theoplayer-settings-menu-button",displayName:"SettingsMenuButton",elementClass:a.SettingsMenuButton,react:r,events:f}),_=m({tagName:"theoplayer-fullscreen-button",displayName:"FullscreenButton",elementClass:a.FullscreenButton,react:r,events:f}),ee={onChange:"change",onInput:"input"},et=m({tagName:"theoplayer-time-range",displayName:"TimeRange",elementClass:a.TimeRange,react:r,events:ee}),ea=m({tagName:"theoplayer-volume-range",displayName:"VolumeRange",elementClass:a.VolumeRange,react:r,events:ee}),en=m({tagName:"theoplayer-error-display",displayName:"ErrorDisplay",elementClass:a.ErrorDisplay,react:r}),er=m({tagName:"theoplayer-cast-button",displayName:"CastButton",elementClass:a.CastButton,react:r,events:f}),el=m({tagName:"theoplayer-chromecast-button",displayName:"ChromecastButton",elementClass:a.ChromecastButton,react:r,events:f}),eo=m({tagName:"theoplayer-chromecast-display",displayName:"ChromecastDisplay",elementClass:a.ChromecastDisplay,react:r}),eu=m({tagName:"theoplayer-airplay-button",displayName:"AirPlayButton",elementClass:a.AirPlayButton,react:r,events:f}),ei=m({tagName:"theoplayer-loading-indicator",displayName:"LoadingIndicator",elementClass:a.LoadingIndicator,react:r}),es=m({tagName:"theoplayer-gesture-receiver",displayName:"GestureReceiver",elementClass:a.GestureReceiver,react:r}),ec=m({tagName:"theoplayer-preview-time-display",displayName:"PreviewTimeDisplay",elementClass:a.PreviewTimeDisplay,react:r}),em=m({tagName:"theoplayer-preview-thumbnail",displayName:"PreviewThumbnail",elementClass:a.PreviewThumbnail,react:r}),ed=m({tagName:"theoplayer-live-button",displayName:"LiveButton",elementClass:a.LiveButton,react:r,events:f}),ey=m({tagName:"theoplayer-ad-display",displayName:"AdDisplay",elementClass:a.AdDisplay,react:r}),ep=m({tagName:"theoplayer-ad-countdown",displayName:"AdCountdown",elementClass:a.AdCountdown,react:r}),eg=m({tagName:"theoplayer-ad-clickthrough-button",displayName:"AdClickThroughButton",elementClass:a.AdClickThroughButton,react:r,events:f}),eh=m({tagName:"theoplayer-ad-skip-button",displayName:"AdSkipButton",elementClass:a.AdSkipButton,react:r,events:f}),ev=["timeupdate","seeking","seeked","emptied"],ef=["durationchange","emptied"],eN=["play","pause"],eC=["seeking","seeked","emptied"];e.ActiveQualityDisplay=H,e.AdClickThroughButton=eg,e.AdCountdown=ep,e.AdDisplay=ey,e.AdSkipButton=eh,e.AirPlayButton=eu,e.Button=N,e.ButtonEvents=f,e.CastButton=er,e.ChromecastButton=el,e.ChromecastDisplay=eo,e.CloseMenuButton=G,e.ControlBar=v,e.DefaultUI=function(e){var a=e.title,n=e.topControlBar,i=e.bottomControlBar,s=e.menu,c=e.onReady,m=u(e,["title","topControlBar","bottomControlBar","menu","onReady"]),g=t.useState(null),v=g[0],f=g[1],N=d(v,c);return r.createElement(h,o({},m,{ref:f}),r.createElement(l.Provider,{value:N},r.createElement(y,{slot:"title"},a),r.createElement(y,{slot:"top-control-bar"},n),r.createElement(y,{slot:"bottom-control-bar"},i),r.createElement(p,{slot:"menu"},s)))},e.DurationDisplay=R,e.ErrorDisplay=en,e.FullscreenButton=_,e.GestureReceiver=es,e.LanguageMenu=function(e){var t=e.heading,a=e.children,n=u(e,["heading","children"]);return r.createElement(j,n,r.createElement(y,{slot:"heading"},t),a)},e.LanguageMenuButton=Q,e.LinkButton=C,e.LiveButton=ed,e.LoadingIndicator=ei,e.MediaTrackRadioButton=w,e.Menu=function(e){var t=e.heading,a=e.children,n=u(e,["heading","children"]);return r.createElement(L,n,r.createElement(y,{slot:"heading"},t),a)},e.MenuButton=P,e.MenuGroup=D,e.MuteButton=b,e.PlayButton=k,e.PlaybackRateDisplay=F,e.PlaybackRateMenu=function(e){var t=e.heading,a=e.children,n=u(e,["heading","children"]);return r.createElement(V,n,r.createElement(y,{slot:"heading"},t),a)},e.PlaybackRateMenuButton=q,e.PlaybackRateRadioGroup=U,e.PlayerContext=l,e.PreviewThumbnail=em,e.PreviewTimeDisplay=ec,e.QualityRadioButton=W,e.QualityRadioGroup=z,e.RadioButton=M,e.RadioButtonEvents=x,e.RadioGroup=S,e.RadioGroupEvents=T,e.RangeEvents=ee,e.SeekButton=B,e.SettingsMenu=function(e){var t=e.heading,a=e.children,n=u(e,["heading","children"]);return r.createElement(Z,n,r.createElement(y,{slot:"heading"},t),a)},e.SettingsMenuButton=$,e.TextTrackOffRadioButton=I,e.TextTrackRadioButton=O,e.TextTrackStyleDisplay=X,e.TextTrackStyleMenu=function(e){var t=e.heading,a=e.children,n=u(e,["heading","children"]);return r.createElement(Y,n,r.createElement(y,{slot:"heading"},t),a)},e.TextTrackStyleRadioGroup=J,e.TextTrackStyleResetButton=K,e.TimeDisplay=E,e.TimeRange=et,e.TrackRadioGroup=A,e.UIContainer=function(e){var a=e.topChrome,n=e.middleChrome,i=e.bottomChrome,s=e.centeredChrome,c=e.centeredLoading,m=e.menu,h=e.error,v=e.onReady,f=u(e,["topChrome","middleChrome","bottomChrome","centeredChrome","centeredLoading","menu","error","onReady"]),N=t.useState(null),C=N[0],k=N[1],b=d(C,v);return r.createElement(g,o({},f,{ref:k}),r.createElement(l.Provider,{value:b},r.createElement(y,{slot:"top-chrome"},a),r.createElement(y,{slot:"middle-chrome"},n),r.createElement(y,{slot:"centered-chrome"},s),r.createElement(y,{slot:"centered-loading"},c),i,r.createElement(p,{slot:"menu"},m),r.createElement(y,{slot:"error"},h)))},e.VolumeRange=ea,e.useCurrentTime=function(){var e=t.useContext(l),a=t.useCallback(function(t){return null==e||e.addEventListener(ev,t),function(){return null==e?void 0:e.removeEventListener(ev,t)}},[e]);return t.useSyncExternalStore(a,function(){return e?e.currentTime:0},function(){return 0})},e.useDuration=function(){var e=t.useContext(l),a=t.useCallback(function(t){return null==e||e.addEventListener(ef,t),function(){return null==e?void 0:e.removeEventListener(ef,t)}},[e]);return t.useSyncExternalStore(a,function(){return e?e.duration:NaN},function(){return NaN})},e.useMuted=function(){var e=t.useContext(l),a=t.useCallback(function(t){return null==e||e.addEventListener("volumechange",t),function(){return null==e?void 0:e.removeEventListener("volumechange",t)}},[e]);return t.useSyncExternalStore(a,function(){return!!e&&e.muted},function(){return!1})},e.usePaused=function(){var e=t.useContext(l),a=t.useCallback(function(t){return null==e||e.addEventListener(eN,t),function(){return null==e?void 0:e.removeEventListener(eN,t)}},[e]);return t.useSyncExternalStore(a,function(){return!e||e.paused},function(){return!0})},e.useSeeking=function(){var e=t.useContext(l),a=t.useCallback(function(t){return null==e||e.addEventListener(eC,t),function(){return null==e?void 0:e.removeEventListener(eC,t)}},[e]);return t.useSyncExternalStore(a,function(){return!!e&&e.seeking},function(){return!1})},e.useSource=function(){var e=t.useContext(l),a=t.useCallback(function(t){return null==e||e.addEventListener("sourcechange",t),function(){return null==e?void 0:e.removeEventListener("sourcechange",t)}},[e]);return t.useSyncExternalStore(a,function(){return null==e?void 0:e.source},function(){})},e.useVolume=function(){var e=t.useContext(l),a=t.useCallback(function(t){return null==e||e.addEventListener("volumechange",t),function(){return null==e?void 0:e.removeEventListener("volumechange",t)}},[e]);return t.useSyncExternalStore(a,function(){return e?e.volume:1},function(){return 1})},e.version="1.7.1"});

package/dist/THEOplayerReactUI.es5.mjs

@@ -1,5 +1 @@
-import*as e from"react";import{createContext as t,useState as a,useEffect as n,useCallback as l,Children as r,isValidElement as o,Fragment as s,cloneElement as i}from"react";import{UIContainer as u,DefaultUI as m,ControlBar as c,Button as y,LinkButton as d,PlayButton as p,MuteButton as h,SeekButton as g,TimeDisplay as N,DurationDisplay as v,RadioGroup as C,RadioButton as B,Menu as R,MenuGroup as k,MenuButton as b,CloseMenuButton as T,MediaTrackRadioButton as f,TrackRadioGroup as E,TextTrackRadioButton as M,TextTrackOffRadioButton as D,LanguageMenu as P,LanguageMenuButton as x,PlaybackRateRadioGroup as S,PlaybackRateMenuButton as G,PlaybackRateMenu as L,PlaybackRateDisplay as A,ActiveQualityDisplay as w,QualityRadioButton as I,QualityRadioGroup as O,TextTrackStyleRadioGroup as Q,TextTrackStyleResetButton as U,TextTrackStyleDisplay as j,TextTrackStyleMenu as H,SettingsMenu as q,SettingsMenuButton as F,FullscreenButton as V,TimeRange as W,VolumeRange as z,ErrorDisplay as J,CastButton as K,ChromecastButton as X,ChromecastDisplay as Y,AirPlayButton as Z,LoadingIndicator as $,GestureReceiver as _,PreviewTimeDisplay as ee,PreviewThumbnail as et,LiveButton as ea,AdDisplay as en,AdCountdown as el,AdClickThroughButton as er,AdSkipButton as eo}from"@theoplayer/web-ui/es5";var es=t(void 0);function ei(){return(ei=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function eu(e,t){if(null==e)return{};var a,n,l={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(l[a]=e[a]);return l}/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */let em=new Set(["children","localName","ref","style","className"]),ec=new WeakMap,ey=(e,t,a,n,l)=>{let r,o;let s=l?.[t];void 0===s||a===n?(e[t]=a,null==a&&t in HTMLElement.prototype&&e.removeAttribute(t)):(void 0===(r=ec.get(e))&&ec.set(e,r=new Map),o=r.get(s),void 0!==a?void 0===o?(r.set(s,o={handleEvent:a}),e.addEventListener(s,o)):o.handleEvent=a:void 0!==o&&(r.delete(s),e.removeEventListener(s,o)))},ed=({react:e,tagName:t,elementClass:a,events:n,displayName:l})=>{let r=new Set(Object.keys(n??{})),o=e.forwardRef((l,o)=>{let s=e.useRef(null),i=e.useRef(null),u={},m={};for(let[e,t]of Object.entries(l))em.has(e)?u["className"===e?"class":e]=t:r.has(e)||e in a.prototype?m[e]=t:u[e]=t;return e.useLayoutEffect(()=>{if(null!==i.current){for(let e in m)ey(i.current,e,l[e],s.current?s.current[e]:void 0,n);s.current=l}}),e.useLayoutEffect(()=>{i.current?.removeAttribute("defer-hydration")},[]),u.suppressHydrationWarning=!0,e.createElement(t,{...u,ref:e.useCallback(e=>{i.current=e,"function"==typeof o?o(e):null!==o&&(o.current=e)},[o])})});return o.displayName=l??a.name,o};function ep(e){var t=a(null),r=t[0],o=t[1],s=a(void 0),i=s[0],u=s[1];n(function(){u(null==r?void 0:r.player)},[r]);var m=l(function(e){u(null==r?void 0:r.player)},[r]);return n(function(){i&&(null==e||e(i))},[i,e]),{player:i,setUi:o,onReadyHandler:m}}var eh=function(t){var a=t.slot,n=t.children;return n?e.createElement("div",{slot:a,style:{display:"contents"},children:n}):null},eg=function(t){var a=t.slot,n=t.children;return n?r.map(n,function(t){return o(t)?t.type===s?i(t,void 0,e.createElement(eg,{slot:a,children:t.props.children})):i(t,{slot:a}):e.createElement(eh,{slot:a,children:t})}):null},eN=ed({tagName:"theoplayer-ui",displayName:"UIContainer",elementClass:u,react:e,events:{onReady:"theoplayerready"}}),ev=function(t){var a=t.topChrome,n=t.middleChrome,l=t.bottomChrome,r=t.centeredChrome,o=t.centeredLoading,s=t.menu,i=t.error,u=t.onReady,m=eu(t,["topChrome","middleChrome","bottomChrome","centeredChrome","centeredLoading","menu","error","onReady"]),c=ep(u),y=c.player,d=c.setUi,p=c.onReadyHandler;return e.createElement(eN,ei({},m,{ref:d,onReady:p}),e.createElement(es.Provider,{value:y},e.createElement(eh,{slot:"top-chrome"},a),e.createElement(eh,{slot:"middle-chrome"},n),e.createElement(eh,{slot:"centered-chrome"},r),e.createElement(eh,{slot:"centered-loading"},o),l,e.createElement(eg,{slot:"menu"},s),e.createElement(eh,{slot:"error"},i)))},eC=ed({tagName:"theoplayer-default-ui",displayName:"DefaultUI",elementClass:m,react:e,events:{onReady:"theoplayerready"}}),eB=function(t){var a=t.title,n=t.topControlBar,l=t.bottomControlBar,r=t.menu,o=t.onReady,s=eu(t,["title","topControlBar","bottomControlBar","menu","onReady"]),i=ep(o),u=i.player,m=i.setUi,c=i.onReadyHandler;return e.createElement(eC,ei({},s,{ref:m,onReady:c}),e.createElement(es.Provider,{value:u},e.createElement(eh,{slot:"title"},a),e.createElement(eh,{slot:"top-control-bar"},n),e.createElement(eh,{slot:"bottom-control-bar"},l),e.createElement(eg,{slot:"menu"},r)))},eR=ed({tagName:"theoplayer-control-bar",displayName:"ControlBar",elementClass:c,react:e}),ek={onClick:"click"},eb=ed({tagName:"theoplayer-button",displayName:"Button",elementClass:y,react:e,events:ek}),eT=ed({tagName:"theoplayer-link-button",displayName:"LinkButton",elementClass:d,react:e,events:ek}),ef=ed({tagName:"theoplayer-play-button",displayName:"PlayButton",elementClass:p,react:e,events:ek}),eE=ed({tagName:"theoplayer-mute-button",displayName:"MuteButton",elementClass:h,react:e,events:ek}),eM=ed({tagName:"theoplayer-seek-button",displayName:"SeekButton",elementClass:g,react:e,events:ek}),eD=ed({tagName:"theoplayer-time-display",displayName:"TimeDisplay",elementClass:N,react:e}),eP=ed({tagName:"theoplayer-duration-display",displayName:"DurationDisplay",elementClass:v,react:e}),ex={onChange:"change"},eS=ed({tagName:"theoplayer-radio-group",displayName:"RadioGroup",elementClass:C,react:e,events:ex}),eG=ei({},ek,{onChange:"change",onInput:"input"}),eL=ed({tagName:"theoplayer-radio-button",displayName:"RadioButton",elementClass:B,react:e,events:eG}),eA=ed({tagName:"theoplayer-menu",displayName:"Menu",elementClass:R,react:e}),ew=function(t){var a=t.heading,n=t.children,l=eu(t,["heading","children"]);return e.createElement(eA,l,e.createElement(eh,{slot:"heading"},a),n)},eI=ed({tagName:"theoplayer-menu-group",displayName:"MenuGroup",elementClass:k,react:e}),eO=ed({tagName:"theoplayer-menu-button",displayName:"MenuButton",elementClass:b,react:e,events:ek}),eQ=ed({tagName:"theoplayer-close-menu-button",displayName:"CloseMenuButton",elementClass:T,react:e,events:ek}),eU=ed({tagName:"theoplayer-media-track-radio-button",displayName:"MediaTrackRadioButton",elementClass:f,react:e,events:eG}),ej=ed({tagName:"theoplayer-track-radio-group",displayName:"TrackRadioGroup",elementClass:E,react:e,events:ex}),eH=ed({tagName:"theoplayer-text-track-radio-button",displayName:"TextTrackRadioButton",elementClass:M,react:e,events:eG}),eq=ed({tagName:"theoplayer-text-track-off-radio-button",displayName:"TextTrackOffRadioButton",elementClass:D,react:e,events:eG}),eF=ed({tagName:"theoplayer-language-menu",displayName:"LanguageMenu",elementClass:P,react:e}),eV=function(t){var a=t.heading,n=t.children,l=eu(t,["heading","children"]);return e.createElement(eF,l,e.createElement(eh,{slot:"heading"},a),n)},eW=ed({tagName:"theoplayer-language-menu-button",displayName:"LanguageMenuButton",elementClass:x,react:e,events:ek}),ez=ed({tagName:"theoplayer-playback-rate-radio-group",displayName:"PlaybackRateRadioGroup",elementClass:S,react:e,events:ex}),eJ=ed({tagName:"theoplayer-playback-rate-menu-button",displayName:"PlaybackRateMenuButton",elementClass:G,react:e,events:ek}),eK=ed({tagName:"theoplayer-playback-rate-menu",displayName:"PlaybackRateMenu",elementClass:L,react:e}),eX=function(t){var a=t.heading,n=t.children,l=eu(t,["heading","children"]);return e.createElement(eK,l,e.createElement(eh,{slot:"heading"},a),n)},eY=ed({tagName:"theoplayer-playback-rate-display",displayName:"PlaybackRateDisplay",elementClass:A,react:e}),eZ=ed({tagName:"theoplayer-active-quality-display",displayName:"ActiveQualityDisplay",elementClass:w,react:e}),e$=ed({tagName:"theoplayer-quality-radio-button",displayName:"QualityRadioButton",elementClass:I,react:e,events:eG}),e_=ed({tagName:"theoplayer-quality-radio-group",displayName:"QualityRadioGroup",elementClass:O,react:e,events:ex}),e0=ed({tagName:"theoplayer-text-track-style-radio-group",displayName:"TextTrackStyleRadioGroup",elementClass:Q,react:e,events:ex}),e1=ed({tagName:"theoplayer-text-track-style-reset-button",displayName:"TextTrackStyleResetButton",elementClass:U,react:e,events:ek}),e5=ed({tagName:"theoplayer-text-track-style-display",displayName:"TextTrackStyleDisplay",elementClass:j,react:e}),e2=ed({tagName:"theoplayer-text-track-style-menu",displayName:"TextTrackStyleMenu",elementClass:H,react:e}),e3=function(t){var a=t.heading,n=t.children,l=eu(t,["heading","children"]);return e.createElement(e2,l,e.createElement(eh,{slot:"heading"},a),n)},e4=ed({tagName:"theoplayer-settings-menu",displayName:"SettingsMenu",elementClass:q,react:e}),e6=function(t){var a=t.heading,n=t.children,l=eu(t,["heading","children"]);return e.createElement(e4,l,e.createElement(eh,{slot:"heading"},a),n)},e7=ed({tagName:"theoplayer-settings-menu-button",displayName:"SettingsMenuButton",elementClass:F,react:e,events:ek}),e8=ed({tagName:"theoplayer-fullscreen-button",displayName:"FullscreenButton",elementClass:V,react:e,events:ek}),e9={onChange:"change",onInput:"input"},te=ed({tagName:"theoplayer-time-range",displayName:"TimeRange",elementClass:W,react:e,events:e9}),tt=ed({tagName:"theoplayer-volume-range",displayName:"VolumeRange",elementClass:z,react:e,events:e9}),ta=ed({tagName:"theoplayer-error-display",displayName:"ErrorDisplay",elementClass:J,react:e}),tn=ed({tagName:"theoplayer-cast-button",displayName:"CastButton",elementClass:K,react:e,events:ek}),tl=ed({tagName:"theoplayer-chromecast-button",displayName:"ChromecastButton",elementClass:X,react:e,events:ek}),tr=ed({tagName:"theoplayer-chromecast-display",displayName:"ChromecastDisplay",elementClass:Y,react:e}),to=ed({tagName:"theoplayer-airplay-button",displayName:"AirPlayButton",elementClass:Z,react:e,events:ek}),ts=ed({tagName:"theoplayer-loading-indicator",displayName:"LoadingIndicator",elementClass:$,react:e}),ti=ed({tagName:"theoplayer-gesture-receiver",displayName:"GestureReceiver",elementClass:_,react:e}),tu=ed({tagName:"theoplayer-preview-time-display",displayName:"PreviewTimeDisplay",elementClass:ee,react:e}),tm=ed({tagName:"theoplayer-preview-thumbnail",displayName:"PreviewThumbnail",elementClass:et,react:e}),tc=ed({tagName:"theoplayer-live-button",displayName:"LiveButton",elementClass:ea,react:e,events:ek}),ty=ed({tagName:"theoplayer-ad-display",displayName:"AdDisplay",elementClass:en,react:e}),td=ed({tagName:"theoplayer-ad-countdown",displayName:"AdCountdown",elementClass:el,react:e}),tp=ed({tagName:"theoplayer-ad-clickthrough-button",displayName:"AdClickThroughButton",elementClass:er,react:e,events:ek}),th=ed({tagName:"theoplayer-ad-skip-button",displayName:"AdSkipButton",elementClass:eo,react:e,events:ek});export{eZ as ActiveQualityDisplay,tp as AdClickThroughButton,td as AdCountdown,ty as AdDisplay,th as AdSkipButton,to as AirPlayButton,eb as Button,ek as ButtonEvents,tn as CastButton,tl as ChromecastButton,tr as ChromecastDisplay,eQ as CloseMenuButton,eR as ControlBar,eB as DefaultUI,eP as DurationDisplay,ta as ErrorDisplay,e8 as FullscreenButton,ti as GestureReceiver,eV as LanguageMenu,eW as LanguageMenuButton,eT as LinkButton,tc as LiveButton,ts as LoadingIndicator,eU as MediaTrackRadioButton,ew as Menu,eO as MenuButton,eI as MenuGroup,eE as MuteButton,ef as PlayButton,eY as PlaybackRateDisplay,eX as PlaybackRateMenu,eJ as PlaybackRateMenuButton,ez as PlaybackRateRadioGroup,es as PlayerContext,tm as PreviewThumbnail,tu as PreviewTimeDisplay,e$ as QualityRadioButton,e_ as QualityRadioGroup,eL as RadioButton,eG as RadioButtonEvents,eS as RadioGroup,ex as RadioGroupEvents,e9 as RangeEvents,eM as SeekButton,e6 as SettingsMenu,e7 as SettingsMenuButton,eq as TextTrackOffRadioButton,eH as TextTrackRadioButton,e5 as TextTrackStyleDisplay,e3 as TextTrackStyleMenu,e0 as TextTrackStyleRadioGroup,e1 as TextTrackStyleResetButton,eD as TimeDisplay,te as TimeRange,ej as TrackRadioGroup,ev as UIContainer,tt as VolumeRange};
+import*as e from"react";import{createContext as t,useCallback as a,useSyncExternalStore as n,useEffect as r,Children as l,isValidElement as o,Fragment as u,cloneElement as s,useState as i,useContext as m}from"react";import{UIContainer as c,DefaultUI as d,ControlBar as y,Button as p,LinkButton as g,PlayButton as h,MuteButton as v,SeekButton as N,TimeDisplay as C,DurationDisplay as f,RadioGroup as B,RadioButton as k,Menu as R,MenuGroup as T,MenuButton as b,CloseMenuButton as E,MediaTrackRadioButton as M,TrackRadioGroup as D,TextTrackRadioButton as L,TextTrackOffRadioButton as P,LanguageMenu as x,LanguageMenuButton as S,PlaybackRateRadioGroup as G,PlaybackRateMenuButton as A,PlaybackRateMenu as w,PlaybackRateDisplay as I,ActiveQualityDisplay as Q,QualityRadioButton as O,QualityRadioGroup as U,TextTrackStyleRadioGroup as V,TextTrackStyleResetButton as j,TextTrackStyleDisplay as q,TextTrackStyleMenu as F,SettingsMenu as z,SettingsMenuButton as H,FullscreenButton as J,TimeRange as K,VolumeRange as W,ErrorDisplay as X,CastButton as Y,ChromecastButton as Z,ChromecastDisplay as $,AirPlayButton as _,LoadingIndicator as ee,GestureReceiver as et,PreviewTimeDisplay as ea,PreviewThumbnail as en,LiveButton as er,AdDisplay as el,AdCountdown as eo,AdClickThroughButton as eu,AdSkipButton as es}from"@theoplayer/web-ui/es5";import{createComponent as ei}from"@lit/react";var em=t(void 0);function ec(){return(ec=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function ed(e,t){if(null==e)return{};var a,n,r={},l=Object.keys(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}function ey(e,t){var l=n(a(function(t){return null==e||e.addEventListener("theoplayerready",t),function(){return null==e?void 0:e.removeEventListener("theoplayerready",t)}},[e]),function(){return null==e?void 0:e.player},function(){});return r(function(){l&&(null==t||t(l))},[l,t]),l}var ep=function(t){var a=t.slot,n=t.children;return n?e.createElement("div",{slot:a,style:{display:"contents"},children:n}):null},eg=function(t){var a=t.slot,n=t.children;return n?l.map(n,function(t){return o(t)?t.type===u?s(t,void 0,e.createElement(eg,{slot:a,children:t.props.children})):s(t,{slot:a}):e.createElement(ep,{slot:a,children:t})}):null},eh=ei({tagName:"theoplayer-ui",displayName:"UIContainer",elementClass:c,react:e,events:{onReady:"theoplayerready"}}),ev=function(t){var a=t.topChrome,n=t.middleChrome,r=t.bottomChrome,l=t.centeredChrome,o=t.centeredLoading,u=t.menu,s=t.error,m=t.onReady,c=ed(t,["topChrome","middleChrome","bottomChrome","centeredChrome","centeredLoading","menu","error","onReady"]),d=i(null),y=d[0],p=d[1],g=ey(y,m);return e.createElement(eh,ec({},c,{ref:p}),e.createElement(em.Provider,{value:g},e.createElement(ep,{slot:"top-chrome"},a),e.createElement(ep,{slot:"middle-chrome"},n),e.createElement(ep,{slot:"centered-chrome"},l),e.createElement(ep,{slot:"centered-loading"},o),r,e.createElement(eg,{slot:"menu"},u),e.createElement(ep,{slot:"error"},s)))},eN=ei({tagName:"theoplayer-default-ui",displayName:"DefaultUI",elementClass:d,react:e,events:{onReady:"theoplayerready"}}),eC=function(t){var a=t.title,n=t.topControlBar,r=t.bottomControlBar,l=t.menu,o=t.onReady,u=ed(t,["title","topControlBar","bottomControlBar","menu","onReady"]),s=i(null),m=s[0],c=s[1],d=ey(m,o);return e.createElement(eN,ec({},u,{ref:c}),e.createElement(em.Provider,{value:d},e.createElement(ep,{slot:"title"},a),e.createElement(ep,{slot:"top-control-bar"},n),e.createElement(ep,{slot:"bottom-control-bar"},r),e.createElement(eg,{slot:"menu"},l)))},ef=ei({tagName:"theoplayer-control-bar",displayName:"ControlBar",elementClass:y,react:e}),eB={onClick:"click"},ek=ei({tagName:"theoplayer-button",displayName:"Button",elementClass:p,react:e,events:eB}),eR=ei({tagName:"theoplayer-link-button",displayName:"LinkButton",elementClass:g,react:e,events:eB}),eT=ei({tagName:"theoplayer-play-button",displayName:"PlayButton",elementClass:h,react:e,events:eB}),eb=ei({tagName:"theoplayer-mute-button",displayName:"MuteButton",elementClass:v,react:e,events:eB}),eE=ei({tagName:"theoplayer-seek-button",displayName:"SeekButton",elementClass:N,react:e,events:eB}),eM=ei({tagName:"theoplayer-time-display",displayName:"TimeDisplay",elementClass:C,react:e}),eD=ei({tagName:"theoplayer-duration-display",displayName:"DurationDisplay",elementClass:f,react:e}),eL={onChange:"change"},eP=ei({tagName:"theoplayer-radio-group",displayName:"RadioGroup",elementClass:B,react:e,events:eL}),ex=ec({},eB,{onChange:"change",onInput:"input"}),eS=ei({tagName:"theoplayer-radio-button",displayName:"RadioButton",elementClass:k,react:e,events:ex}),eG=ei({tagName:"theoplayer-menu",displayName:"Menu",elementClass:R,react:e}),eA=function(t){var a=t.heading,n=t.children,r=ed(t,["heading","children"]);return e.createElement(eG,r,e.createElement(ep,{slot:"heading"},a),n)},ew=ei({tagName:"theoplayer-menu-group",displayName:"MenuGroup",elementClass:T,react:e}),eI=ei({tagName:"theoplayer-menu-button",displayName:"MenuButton",elementClass:b,react:e,events:eB}),eQ=ei({tagName:"theoplayer-close-menu-button",displayName:"CloseMenuButton",elementClass:E,react:e,events:eB}),eO=ei({tagName:"theoplayer-media-track-radio-button",displayName:"MediaTrackRadioButton",elementClass:M,react:e,events:ex}),eU=ei({tagName:"theoplayer-track-radio-group",displayName:"TrackRadioGroup",elementClass:D,react:e,events:eL}),eV=ei({tagName:"theoplayer-text-track-radio-button",displayName:"TextTrackRadioButton",elementClass:L,react:e,events:ex}),ej=ei({tagName:"theoplayer-text-track-off-radio-button",displayName:"TextTrackOffRadioButton",elementClass:P,react:e,events:ex}),eq=ei({tagName:"theoplayer-language-menu",displayName:"LanguageMenu",elementClass:x,react:e}),eF=function(t){var a=t.heading,n=t.children,r=ed(t,["heading","children"]);return e.createElement(eq,r,e.createElement(ep,{slot:"heading"},a),n)},ez=ei({tagName:"theoplayer-language-menu-button",displayName:"LanguageMenuButton",elementClass:S,react:e,events:eB}),eH=ei({tagName:"theoplayer-playback-rate-radio-group",displayName:"PlaybackRateRadioGroup",elementClass:G,react:e,events:eL}),eJ=ei({tagName:"theoplayer-playback-rate-menu-button",displayName:"PlaybackRateMenuButton",elementClass:A,react:e,events:eB}),eK=ei({tagName:"theoplayer-playback-rate-menu",displayName:"PlaybackRateMenu",elementClass:w,react:e}),eW=function(t){var a=t.heading,n=t.children,r=ed(t,["heading","children"]);return e.createElement(eK,r,e.createElement(ep,{slot:"heading"},a),n)},eX=ei({tagName:"theoplayer-playback-rate-display",displayName:"PlaybackRateDisplay",elementClass:I,react:e}),eY=ei({tagName:"theoplayer-active-quality-display",displayName:"ActiveQualityDisplay",elementClass:Q,react:e}),eZ=ei({tagName:"theoplayer-quality-radio-button",displayName:"QualityRadioButton",elementClass:O,react:e,events:ex}),e$=ei({tagName:"theoplayer-quality-radio-group",displayName:"QualityRadioGroup",elementClass:U,react:e,events:eL}),e_=ei({tagName:"theoplayer-text-track-style-radio-group",displayName:"TextTrackStyleRadioGroup",elementClass:V,react:e,events:eL}),e0=ei({tagName:"theoplayer-text-track-style-reset-button",displayName:"TextTrackStyleResetButton",elementClass:j,react:e,events:eB}),e1=ei({tagName:"theoplayer-text-track-style-display",displayName:"TextTrackStyleDisplay",elementClass:q,react:e}),e5=ei({tagName:"theoplayer-text-track-style-menu",displayName:"TextTrackStyleMenu",elementClass:F,react:e}),e7=function(t){var a=t.heading,n=t.children,r=ed(t,["heading","children"]);return e.createElement(e5,r,e.createElement(ep,{slot:"heading"},a),n)},e2=ei({tagName:"theoplayer-settings-menu",displayName:"SettingsMenu",elementClass:z,react:e}),e3=function(t){var a=t.heading,n=t.children,r=ed(t,["heading","children"]);return e.createElement(e2,r,e.createElement(ep,{slot:"heading"},a),n)},e4=ei({tagName:"theoplayer-settings-menu-button",displayName:"SettingsMenuButton",elementClass:H,react:e,events:eB}),e6=ei({tagName:"theoplayer-fullscreen-button",displayName:"FullscreenButton",elementClass:J,react:e,events:eB}),e8={onChange:"change",onInput:"input"},e9=ei({tagName:"theoplayer-time-range",displayName:"TimeRange",elementClass:K,react:e,events:e8}),te=ei({tagName:"theoplayer-volume-range",displayName:"VolumeRange",elementClass:W,react:e,events:e8}),tt=ei({tagName:"theoplayer-error-display",displayName:"ErrorDisplay",elementClass:X,react:e}),ta=ei({tagName:"theoplayer-cast-button",displayName:"CastButton",elementClass:Y,react:e,events:eB}),tn=ei({tagName:"theoplayer-chromecast-button",displayName:"ChromecastButton",elementClass:Z,react:e,events:eB}),tr=ei({tagName:"theoplayer-chromecast-display",displayName:"ChromecastDisplay",elementClass:$,react:e}),tl=ei({tagName:"theoplayer-airplay-button",displayName:"AirPlayButton",elementClass:_,react:e,events:eB}),to=ei({tagName:"theoplayer-loading-indicator",displayName:"LoadingIndicator",elementClass:ee,react:e}),tu=ei({tagName:"theoplayer-gesture-receiver",displayName:"GestureReceiver",elementClass:et,react:e}),ts=ei({tagName:"theoplayer-preview-time-display",displayName:"PreviewTimeDisplay",elementClass:ea,react:e}),ti=ei({tagName:"theoplayer-preview-thumbnail",displayName:"PreviewThumbnail",elementClass:en,react:e}),tm=ei({tagName:"theoplayer-live-button",displayName:"LiveButton",elementClass:er,react:e,events:eB}),tc=ei({tagName:"theoplayer-ad-display",displayName:"AdDisplay",elementClass:el,react:e}),td=ei({tagName:"theoplayer-ad-countdown",displayName:"AdCountdown",elementClass:eo,react:e}),ty=ei({tagName:"theoplayer-ad-clickthrough-button",displayName:"AdClickThroughButton",elementClass:eu,react:e,events:eB}),tp=ei({tagName:"theoplayer-ad-skip-button",displayName:"AdSkipButton",elementClass:es,react:e,events:eB}),tg=["timeupdate","seeking","seeked","emptied"];function th(){var e=m(em);return n(a(function(t){return null==e||e.addEventListener(tg,t),function(){return null==e?void 0:e.removeEventListener(tg,t)}},[e]),function(){return e?e.currentTime:0},function(){return 0})}var tv=["durationchange","emptied"];function tN(){var e=m(em);return n(a(function(t){return null==e||e.addEventListener(tv,t),function(){return null==e?void 0:e.removeEventListener(tv,t)}},[e]),function(){return e?e.duration:NaN},function(){return NaN})}function tC(){var e=m(em);return n(a(function(t){return null==e||e.addEventListener("volumechange",t),function(){return null==e?void 0:e.removeEventListener("volumechange",t)}},[e]),function(){return!!e&&e.muted},function(){return!1})}var tf=["play","pause"];function tB(){var e=m(em);return n(a(function(t){return null==e||e.addEventListener(tf,t),function(){return null==e?void 0:e.removeEventListener(tf,t)}},[e]),function(){return!e||e.paused},function(){return!0})}var tk=["seeking","seeked","emptied"];function tR(){var e=m(em);return n(a(function(t){return null==e||e.addEventListener(tk,t),function(){return null==e?void 0:e.removeEventListener(tk,t)}},[e]),function(){return!!e&&e.seeking},function(){return!1})}function tT(){var e=m(em);return n(a(function(t){return null==e||e.addEventListener("sourcechange",t),function(){return null==e?void 0:e.removeEventListener("sourcechange",t)}},[e]),function(){return null==e?void 0:e.source},function(){})}function tb(){var e=m(em);return n(a(function(t){return null==e||e.addEventListener("volumechange",t),function(){return null==e?void 0:e.removeEventListener("volumechange",t)}},[e]),function(){return e?e.volume:1},function(){return 1})}var tE="1.7.1";export{eY as ActiveQualityDisplay,ty as AdClickThroughButton,td as AdCountdown,tc as AdDisplay,tp as AdSkipButton,tl as AirPlayButton,ek as Button,eB as ButtonEvents,ta as CastButton,tn as ChromecastButton,tr as ChromecastDisplay,eQ as CloseMenuButton,ef as ControlBar,eC as DefaultUI,eD as DurationDisplay,tt as ErrorDisplay,e6 as FullscreenButton,tu as GestureReceiver,eF as LanguageMenu,ez as LanguageMenuButton,eR as LinkButton,tm as LiveButton,to as LoadingIndicator,eO as MediaTrackRadioButton,eA as Menu,eI as MenuButton,ew as MenuGroup,eb as MuteButton,eT as PlayButton,eX as PlaybackRateDisplay,eW as PlaybackRateMenu,eJ as PlaybackRateMenuButton,eH as PlaybackRateRadioGroup,em as PlayerContext,ti as PreviewThumbnail,ts as PreviewTimeDisplay,eZ as QualityRadioButton,e$ as QualityRadioGroup,eS as RadioButton,ex as RadioButtonEvents,eP as RadioGroup,eL as RadioGroupEvents,e8 as RangeEvents,eE as SeekButton,e3 as SettingsMenu,e4 as SettingsMenuButton,ej as TextTrackOffRadioButton,eV as TextTrackRadioButton,e1 as TextTrackStyleDisplay,e7 as TextTrackStyleMenu,e_ as TextTrackStyleRadioGroup,e0 as TextTrackStyleResetButton,eM as TimeDisplay,e9 as TimeRange,eU as TrackRadioGroup,ev as UIContainer,te as VolumeRange,th as useCurrentTime,tN as useDuration,tC as useMuted,tB as usePaused,tR as useSeeking,tT as useSource,tb as useVolume,tE as version};

package/dist/THEOplayerReactUI.js

@@ -1,5 +1,5 @@
 /*!
- * THEOplayer Open Video UI for React (v1.6.0)
+ * THEOplayer Open Video UI for React (v1.7.1)
  * License: MIT
- */!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@theoplayer/web-ui")):"function"==typeof define&&define.amd?define(["exports","react","@theoplayer/web-ui"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).THEOplayerReactUI={},e.React,e.THEOplayerUI)}(this,function(e,t,a){"use strict";var l,n=(l=Object.create(null),t&&Object.keys(t).forEach(function(e){if("default"!==e){var a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(l,e,a.get?a:{enumerable:!0,get:function(){return t[e]}})}}),l.default=t,Object.freeze(l));let r=t.createContext(void 0),o=new Set(["children","localName","ref","style","className"]),s=new WeakMap,i=(e,t,a,l,n)=>{let r,o;let i=n?.[t];void 0===i||a===l?(e[t]=a,null==a&&t in HTMLElement.prototype&&e.removeAttribute(t)):(void 0===(r=s.get(e))&&s.set(e,r=new Map),o=r.get(i),void 0!==a?void 0===o?(r.set(i,o={handleEvent:a}),e.addEventListener(i,o)):o.handleEvent=a:void 0!==o&&(r.delete(i),e.removeEventListener(i,o)))},u=({react:e,tagName:t,elementClass:a,events:l,displayName:n})=>{let r=new Set(Object.keys(l??{})),s=e.forwardRef((n,s)=>{let u=e.useRef(null),m=e.useRef(null),y={},c={};for(let[e,t]of Object.entries(n))o.has(e)?y["className"===e?"class":e]=t:r.has(e)||e in a.prototype?c[e]=t:y[e]=t;return e.useLayoutEffect(()=>{if(null!==m.current){for(let e in c)i(m.current,e,n[e],u.current?u.current[e]:void 0,l);u.current=n}}),e.useLayoutEffect(()=>{m.current?.removeAttribute("defer-hydration")},[]),y.suppressHydrationWarning=!0,e.createElement(t,{...y,ref:e.useCallback(e=>{m.current=e,"function"==typeof s?s(e):null!==s&&(s.current=e)},[s])})});return s.displayName=n??a.name,s};function m(e){let[a,l]=t.useState(null),[n,r]=t.useState(void 0);t.useEffect(()=>{r(null==a?void 0:a.player)},[a]);let o=t.useCallback(e=>{r(null==a?void 0:a.player)},[a]);return t.useEffect(()=>{n&&(null==e||e(n))},[n,e]),{player:n,setUi:l,onReadyHandler:o}}let y=e=>{let{slot:t,children:a}=e;return a?n.createElement("div",{slot:t,style:{display:"contents"},children:a}):null},c=e=>{let{slot:a,children:l}=e;return l?t.Children.map(l,e=>t.isValidElement(e)?e.type===t.Fragment?t.cloneElement(e,void 0,n.createElement(c,{slot:a,children:e.props.children})):t.cloneElement(e,{slot:a}):n.createElement(y,{slot:a,children:e})):null},p=u({tagName:"theoplayer-ui",displayName:"UIContainer",elementClass:a.UIContainer,react:n,events:{onReady:"theoplayerready"}}),d=u({tagName:"theoplayer-default-ui",displayName:"DefaultUI",elementClass:a.DefaultUI,react:n,events:{onReady:"theoplayerready"}}),g=u({tagName:"theoplayer-control-bar",displayName:"ControlBar",elementClass:a.ControlBar,react:n}),N={onClick:"click"},h=u({tagName:"theoplayer-button",displayName:"Button",elementClass:a.Button,react:n,events:N}),C=u({tagName:"theoplayer-link-button",displayName:"LinkButton",elementClass:a.LinkButton,react:n,events:N}),v=u({tagName:"theoplayer-play-button",displayName:"PlayButton",elementClass:a.PlayButton,react:n,events:N}),B=u({tagName:"theoplayer-mute-button",displayName:"MuteButton",elementClass:a.MuteButton,react:n,events:N}),k=u({tagName:"theoplayer-seek-button",displayName:"SeekButton",elementClass:a.SeekButton,react:n,events:N}),R=u({tagName:"theoplayer-time-display",displayName:"TimeDisplay",elementClass:a.TimeDisplay,react:n}),b=u({tagName:"theoplayer-duration-display",displayName:"DurationDisplay",elementClass:a.DurationDisplay,react:n}),T={onChange:"change"},f=u({tagName:"theoplayer-radio-group",displayName:"RadioGroup",elementClass:a.RadioGroup,react:n,events:T}),E={...N,onChange:"change",onInput:"input"},M=u({tagName:"theoplayer-radio-button",displayName:"RadioButton",elementClass:a.RadioButton,react:n,events:E}),D=u({tagName:"theoplayer-menu",displayName:"Menu",elementClass:a.Menu,react:n}),x=u({tagName:"theoplayer-menu-group",displayName:"MenuGroup",elementClass:a.MenuGroup,react:n}),P=u({tagName:"theoplayer-menu-button",displayName:"MenuButton",elementClass:a.MenuButton,react:n,events:N}),S=u({tagName:"theoplayer-close-menu-button",displayName:"CloseMenuButton",elementClass:a.CloseMenuButton,react:n,events:N}),G=u({tagName:"theoplayer-media-track-radio-button",displayName:"MediaTrackRadioButton",elementClass:a.MediaTrackRadioButton,react:n,events:E}),w=u({tagName:"theoplayer-track-radio-group",displayName:"TrackRadioGroup",elementClass:a.TrackRadioGroup,react:n,events:T}),A=u({tagName:"theoplayer-text-track-radio-button",displayName:"TextTrackRadioButton",elementClass:a.TextTrackRadioButton,react:n,events:E}),L=u({tagName:"theoplayer-text-track-off-radio-button",displayName:"TextTrackOffRadioButton",elementClass:a.TextTrackOffRadioButton,react:n,events:E}),I=u({tagName:"theoplayer-language-menu",displayName:"LanguageMenu",elementClass:a.LanguageMenu,react:n}),O=u({tagName:"theoplayer-language-menu-button",displayName:"LanguageMenuButton",elementClass:a.LanguageMenuButton,react:n,events:N}),Q=u({tagName:"theoplayer-playback-rate-radio-group",displayName:"PlaybackRateRadioGroup",elementClass:a.PlaybackRateRadioGroup,react:n,events:T}),j=u({tagName:"theoplayer-playback-rate-menu-button",displayName:"PlaybackRateMenuButton",elementClass:a.PlaybackRateMenuButton,react:n,events:N}),U=u({tagName:"theoplayer-playback-rate-menu",displayName:"PlaybackRateMenu",elementClass:a.PlaybackRateMenu,react:n}),q=u({tagName:"theoplayer-playback-rate-display",displayName:"PlaybackRateDisplay",elementClass:a.PlaybackRateDisplay,react:n}),F=u({tagName:"theoplayer-active-quality-display",displayName:"ActiveQualityDisplay",elementClass:a.ActiveQualityDisplay,react:n}),H=u({tagName:"theoplayer-quality-radio-button",displayName:"QualityRadioButton",elementClass:a.QualityRadioButton,react:n,events:E}),V=u({tagName:"theoplayer-quality-radio-group",displayName:"QualityRadioGroup",elementClass:a.QualityRadioGroup,react:n,events:T}),W=u({tagName:"theoplayer-text-track-style-radio-group",displayName:"TextTrackStyleRadioGroup",elementClass:a.TextTrackStyleRadioGroup,react:n,events:T}),z=u({tagName:"theoplayer-text-track-style-reset-button",displayName:"TextTrackStyleResetButton",elementClass:a.TextTrackStyleResetButton,react:n,events:N}),J=u({tagName:"theoplayer-text-track-style-display",displayName:"TextTrackStyleDisplay",elementClass:a.TextTrackStyleDisplay,react:n}),K=u({tagName:"theoplayer-text-track-style-menu",displayName:"TextTrackStyleMenu",elementClass:a.TextTrackStyleMenu,react:n}),X=u({tagName:"theoplayer-settings-menu",displayName:"SettingsMenu",elementClass:a.SettingsMenu,react:n}),Y=u({tagName:"theoplayer-settings-menu-button",displayName:"SettingsMenuButton",elementClass:a.SettingsMenuButton,react:n,events:N}),Z=u({tagName:"theoplayer-fullscreen-button",displayName:"FullscreenButton",elementClass:a.FullscreenButton,react:n,events:N}),$={onChange:"change",onInput:"input"},_=u({tagName:"theoplayer-time-range",displayName:"TimeRange",elementClass:a.TimeRange,react:n,events:$}),ee=u({tagName:"theoplayer-volume-range",displayName:"VolumeRange",elementClass:a.VolumeRange,react:n,events:$}),et=u({tagName:"theoplayer-error-display",displayName:"ErrorDisplay",elementClass:a.ErrorDisplay,react:n}),ea=u({tagName:"theoplayer-cast-button",displayName:"CastButton",elementClass:a.CastButton,react:n,events:N}),el=u({tagName:"theoplayer-chromecast-button",displayName:"ChromecastButton",elementClass:a.ChromecastButton,react:n,events:N}),en=u({tagName:"theoplayer-chromecast-display",displayName:"ChromecastDisplay",elementClass:a.ChromecastDisplay,react:n}),er=u({tagName:"theoplayer-airplay-button",displayName:"AirPlayButton",elementClass:a.AirPlayButton,react:n,events:N}),eo=u({tagName:"theoplayer-loading-indicator",displayName:"LoadingIndicator",elementClass:a.LoadingIndicator,react:n}),es=u({tagName:"theoplayer-gesture-receiver",displayName:"GestureReceiver",elementClass:a.GestureReceiver,react:n}),ei=u({tagName:"theoplayer-preview-time-display",displayName:"PreviewTimeDisplay",elementClass:a.PreviewTimeDisplay,react:n}),eu=u({tagName:"theoplayer-preview-thumbnail",displayName:"PreviewThumbnail",elementClass:a.PreviewThumbnail,react:n}),em=u({tagName:"theoplayer-live-button",displayName:"LiveButton",elementClass:a.LiveButton,react:n,events:N}),ey=u({tagName:"theoplayer-ad-display",displayName:"AdDisplay",elementClass:a.AdDisplay,react:n}),ec=u({tagName:"theoplayer-ad-countdown",displayName:"AdCountdown",elementClass:a.AdCountdown,react:n}),ep=u({tagName:"theoplayer-ad-clickthrough-button",displayName:"AdClickThroughButton",elementClass:a.AdClickThroughButton,react:n,events:N}),ed=u({tagName:"theoplayer-ad-skip-button",displayName:"AdSkipButton",elementClass:a.AdSkipButton,react:n,events:N});e.ActiveQualityDisplay=F,e.AdClickThroughButton=ep,e.AdCountdown=ec,e.AdDisplay=ey,e.AdSkipButton=ed,e.AirPlayButton=er,e.Button=h,e.ButtonEvents=N,e.CastButton=ea,e.ChromecastButton=el,e.ChromecastDisplay=en,e.CloseMenuButton=S,e.ControlBar=g,e.DefaultUI=e=>{let{title:t,topControlBar:a,bottomControlBar:l,menu:o,onReady:s,...i}=e,{player:u,setUi:p,onReadyHandler:g}=m(s);return n.createElement(d,{...i,ref:p,onReady:g},n.createElement(r.Provider,{value:u},n.createElement(y,{slot:"title"},t),n.createElement(y,{slot:"top-control-bar"},a),n.createElement(y,{slot:"bottom-control-bar"},l),n.createElement(c,{slot:"menu"},o)))},e.DurationDisplay=b,e.ErrorDisplay=et,e.FullscreenButton=Z,e.GestureReceiver=es,e.LanguageMenu=e=>{let{heading:t,children:a,...l}=e;return n.createElement(I,l,n.createElement(y,{slot:"heading"},t),a)},e.LanguageMenuButton=O,e.LinkButton=C,e.LiveButton=em,e.LoadingIndicator=eo,e.MediaTrackRadioButton=G,e.Menu=e=>{let{heading:t,children:a,...l}=e;return n.createElement(D,l,n.createElement(y,{slot:"heading"},t),a)},e.MenuButton=P,e.MenuGroup=x,e.MuteButton=B,e.PlayButton=v,e.PlaybackRateDisplay=q,e.PlaybackRateMenu=e=>{let{heading:t,children:a,...l}=e;return n.createElement(U,l,n.createElement(y,{slot:"heading"},t),a)},e.PlaybackRateMenuButton=j,e.PlaybackRateRadioGroup=Q,e.PlayerContext=r,e.PreviewThumbnail=eu,e.PreviewTimeDisplay=ei,e.QualityRadioButton=H,e.QualityRadioGroup=V,e.RadioButton=M,e.RadioButtonEvents=E,e.RadioGroup=f,e.RadioGroupEvents=T,e.RangeEvents=$,e.SeekButton=k,e.SettingsMenu=e=>{let{heading:t,children:a,...l}=e;return n.createElement(X,l,n.createElement(y,{slot:"heading"},t),a)},e.SettingsMenuButton=Y,e.TextTrackOffRadioButton=L,e.TextTrackRadioButton=A,e.TextTrackStyleDisplay=J,e.TextTrackStyleMenu=e=>{let{heading:t,children:a,...l}=e;return n.createElement(K,l,n.createElement(y,{slot:"heading"},t),a)},e.TextTrackStyleRadioGroup=W,e.TextTrackStyleResetButton=z,e.TimeDisplay=R,e.TimeRange=_,e.TrackRadioGroup=w,e.UIContainer=e=>{let{topChrome:t,middleChrome:a,bottomChrome:l,centeredChrome:o,centeredLoading:s,menu:i,error:u,onReady:d,...g}=e,{player:N,setUi:h,onReadyHandler:C}=m(d);return n.createElement(p,{...g,ref:h,onReady:C},n.createElement(r.Provider,{value:N},n.createElement(y,{slot:"top-chrome"},t),n.createElement(y,{slot:"middle-chrome"},a),n.createElement(y,{slot:"centered-chrome"},o),n.createElement(y,{slot:"centered-loading"},s),l,n.createElement(c,{slot:"menu"},i),n.createElement(y,{slot:"error"},u)))},e.VolumeRange=ee});
+ */!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@theoplayer/web-ui")):"function"==typeof define&&define.amd?define(["exports","react","@theoplayer/web-ui"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).THEOplayerReactUI={},e.React,e.THEOplayerUI)}(this,function(e,t,a){"use strict";var n,l=(n=Object.create(null),t&&Object.keys(t).forEach(function(e){if("default"!==e){var a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,a.get?a:{enumerable:!0,get:function(){return t[e]}})}}),n.default=t,Object.freeze(n));let r=t.createContext(void 0),o=new Set(["children","localName","ref","style","className"]),s=new WeakMap,u=(e,t,a,n,l)=>{let r,o;let u=l?.[t];void 0===u||a===n?(e[t]=a,null==a&&t in HTMLElement.prototype&&e.removeAttribute(t)):(void 0===(r=s.get(e))&&s.set(e,r=new Map),o=r.get(u),void 0!==a?void 0===o?(r.set(u,o={handleEvent:a}),e.addEventListener(u,o)):o.handleEvent=a:void 0!==o&&(r.delete(u),e.removeEventListener(u,o)))},i=({react:e,tagName:t,elementClass:a,events:n,displayName:l})=>{let r=new Set(Object.keys(n??{})),s=e.forwardRef((l,s)=>{let i=e.useRef(null),m=e.useRef(null),c={},y={};for(let[e,t]of Object.entries(l))o.has(e)?c["className"===e?"class":e]=t:r.has(e)||e in a.prototype?y[e]=t:c[e]=t;return e.useLayoutEffect(()=>{if(null!==m.current){for(let e in y)u(m.current,e,l[e],i.current?i.current[e]:void 0,n);i.current=l}}),e.useLayoutEffect(()=>{m.current?.removeAttribute("defer-hydration")},[]),c.suppressHydrationWarning=!0,e.createElement(t,{...c,ref:e.useCallback(e=>{m.current=e,"function"==typeof s?s(e):null!==s&&(s.current=e)},[s])})});return s.displayName=l??a.name,s};function m(e,a){let n=t.useCallback(t=>(null==e||e.addEventListener("theoplayerready",t),()=>null==e?void 0:e.removeEventListener("theoplayerready",t)),[e]),l=t.useSyncExternalStore(n,()=>null==e?void 0:e.player,()=>void 0);return t.useEffect(()=>{l&&(null==a||a(l))},[l,a]),l}let c=e=>{let{slot:t,children:a}=e;return a?l.createElement("div",{slot:t,style:{display:"contents"},children:a}):null},y=e=>{let{slot:a,children:n}=e;return n?t.Children.map(n,e=>t.isValidElement(e)?e.type===t.Fragment?t.cloneElement(e,void 0,l.createElement(y,{slot:a,children:e.props.children})):t.cloneElement(e,{slot:a}):l.createElement(c,{slot:a,children:e})):null},d=i({tagName:"theoplayer-ui",displayName:"UIContainer",elementClass:a.UIContainer,react:l,events:{onReady:"theoplayerready"}}),p=i({tagName:"theoplayer-default-ui",displayName:"DefaultUI",elementClass:a.DefaultUI,react:l,events:{onReady:"theoplayerready"}}),g=i({tagName:"theoplayer-control-bar",displayName:"ControlBar",elementClass:a.ControlBar,react:l}),v={onClick:"click"},h=i({tagName:"theoplayer-button",displayName:"Button",elementClass:a.Button,react:l,events:v}),N=i({tagName:"theoplayer-link-button",displayName:"LinkButton",elementClass:a.LinkButton,react:l,events:v}),C=i({tagName:"theoplayer-play-button",displayName:"PlayButton",elementClass:a.PlayButton,react:l,events:v}),k=i({tagName:"theoplayer-mute-button",displayName:"MuteButton",elementClass:a.MuteButton,react:l,events:v}),B=i({tagName:"theoplayer-seek-button",displayName:"SeekButton",elementClass:a.SeekButton,react:l,events:v}),E=i({tagName:"theoplayer-time-display",displayName:"TimeDisplay",elementClass:a.TimeDisplay,react:l}),b=i({tagName:"theoplayer-duration-display",displayName:"DurationDisplay",elementClass:a.DurationDisplay,react:l}),R={onChange:"change"},T=i({tagName:"theoplayer-radio-group",displayName:"RadioGroup",elementClass:a.RadioGroup,react:l,events:R}),f={...v,onChange:"change",onInput:"input"},S=i({tagName:"theoplayer-radio-button",displayName:"RadioButton",elementClass:a.RadioButton,react:l,events:f}),x=i({tagName:"theoplayer-menu",displayName:"Menu",elementClass:a.Menu,react:l}),M=i({tagName:"theoplayer-menu-group",displayName:"MenuGroup",elementClass:a.MenuGroup,react:l}),L=i({tagName:"theoplayer-menu-button",displayName:"MenuButton",elementClass:a.MenuButton,react:l,events:v}),D=i({tagName:"theoplayer-close-menu-button",displayName:"CloseMenuButton",elementClass:a.CloseMenuButton,react:l,events:v}),P=i({tagName:"theoplayer-media-track-radio-button",displayName:"MediaTrackRadioButton",elementClass:a.MediaTrackRadioButton,react:l,events:f}),G=i({tagName:"theoplayer-track-radio-group",displayName:"TrackRadioGroup",elementClass:a.TrackRadioGroup,react:l,events:R}),w=i({tagName:"theoplayer-text-track-radio-button",displayName:"TextTrackRadioButton",elementClass:a.TextTrackRadioButton,react:l,events:f}),A=i({tagName:"theoplayer-text-track-off-radio-button",displayName:"TextTrackOffRadioButton",elementClass:a.TextTrackOffRadioButton,react:l,events:f}),I=i({tagName:"theoplayer-language-menu",displayName:"LanguageMenu",elementClass:a.LanguageMenu,react:l}),O=i({tagName:"theoplayer-language-menu-button",displayName:"LanguageMenuButton",elementClass:a.LanguageMenuButton,react:l,events:v}),Q=i({tagName:"theoplayer-playback-rate-radio-group",displayName:"PlaybackRateRadioGroup",elementClass:a.PlaybackRateRadioGroup,react:l,events:R}),j=i({tagName:"theoplayer-playback-rate-menu-button",displayName:"PlaybackRateMenuButton",elementClass:a.PlaybackRateMenuButton,react:l,events:v}),U=i({tagName:"theoplayer-playback-rate-menu",displayName:"PlaybackRateMenu",elementClass:a.PlaybackRateMenu,react:l}),q=i({tagName:"theoplayer-playback-rate-display",displayName:"PlaybackRateDisplay",elementClass:a.PlaybackRateDisplay,react:l}),V=i({tagName:"theoplayer-active-quality-display",displayName:"ActiveQualityDisplay",elementClass:a.ActiveQualityDisplay,react:l}),F=i({tagName:"theoplayer-quality-radio-button",displayName:"QualityRadioButton",elementClass:a.QualityRadioButton,react:l,events:f}),H=i({tagName:"theoplayer-quality-radio-group",displayName:"QualityRadioGroup",elementClass:a.QualityRadioGroup,react:l,events:R}),W=i({tagName:"theoplayer-text-track-style-radio-group",displayName:"TextTrackStyleRadioGroup",elementClass:a.TextTrackStyleRadioGroup,react:l,events:R}),z=i({tagName:"theoplayer-text-track-style-reset-button",displayName:"TextTrackStyleResetButton",elementClass:a.TextTrackStyleResetButton,react:l,events:v}),J=i({tagName:"theoplayer-text-track-style-display",displayName:"TextTrackStyleDisplay",elementClass:a.TextTrackStyleDisplay,react:l}),K=i({tagName:"theoplayer-text-track-style-menu",displayName:"TextTrackStyleMenu",elementClass:a.TextTrackStyleMenu,react:l}),X=i({tagName:"theoplayer-settings-menu",displayName:"SettingsMenu",elementClass:a.SettingsMenu,react:l}),Y=i({tagName:"theoplayer-settings-menu-button",displayName:"SettingsMenuButton",elementClass:a.SettingsMenuButton,react:l,events:v}),Z=i({tagName:"theoplayer-fullscreen-button",displayName:"FullscreenButton",elementClass:a.FullscreenButton,react:l,events:v}),$={onChange:"change",onInput:"input"},_=i({tagName:"theoplayer-time-range",displayName:"TimeRange",elementClass:a.TimeRange,react:l,events:$}),ee=i({tagName:"theoplayer-volume-range",displayName:"VolumeRange",elementClass:a.VolumeRange,react:l,events:$}),et=i({tagName:"theoplayer-error-display",displayName:"ErrorDisplay",elementClass:a.ErrorDisplay,react:l}),ea=i({tagName:"theoplayer-cast-button",displayName:"CastButton",elementClass:a.CastButton,react:l,events:v}),en=i({tagName:"theoplayer-chromecast-button",displayName:"ChromecastButton",elementClass:a.ChromecastButton,react:l,events:v}),el=i({tagName:"theoplayer-chromecast-display",displayName:"ChromecastDisplay",elementClass:a.ChromecastDisplay,react:l}),er=i({tagName:"theoplayer-airplay-button",displayName:"AirPlayButton",elementClass:a.AirPlayButton,react:l,events:v}),eo=i({tagName:"theoplayer-loading-indicator",displayName:"LoadingIndicator",elementClass:a.LoadingIndicator,react:l}),es=i({tagName:"theoplayer-gesture-receiver",displayName:"GestureReceiver",elementClass:a.GestureReceiver,react:l}),eu=i({tagName:"theoplayer-preview-time-display",displayName:"PreviewTimeDisplay",elementClass:a.PreviewTimeDisplay,react:l}),ei=i({tagName:"theoplayer-preview-thumbnail",displayName:"PreviewThumbnail",elementClass:a.PreviewThumbnail,react:l}),em=i({tagName:"theoplayer-live-button",displayName:"LiveButton",elementClass:a.LiveButton,react:l,events:v}),ec=i({tagName:"theoplayer-ad-display",displayName:"AdDisplay",elementClass:a.AdDisplay,react:l}),ey=i({tagName:"theoplayer-ad-countdown",displayName:"AdCountdown",elementClass:a.AdCountdown,react:l}),ed=i({tagName:"theoplayer-ad-clickthrough-button",displayName:"AdClickThroughButton",elementClass:a.AdClickThroughButton,react:l,events:v}),ep=i({tagName:"theoplayer-ad-skip-button",displayName:"AdSkipButton",elementClass:a.AdSkipButton,react:l,events:v}),eg=["timeupdate","seeking","seeked","emptied"],ev=["durationchange","emptied"],eh=["play","pause"],eN=["seeking","seeked","emptied"];e.ActiveQualityDisplay=V,e.AdClickThroughButton=ed,e.AdCountdown=ey,e.AdDisplay=ec,e.AdSkipButton=ep,e.AirPlayButton=er,e.Button=h,e.ButtonEvents=v,e.CastButton=ea,e.ChromecastButton=en,e.ChromecastDisplay=el,e.CloseMenuButton=D,e.ControlBar=g,e.DefaultUI=e=>{let{title:a,topControlBar:n,bottomControlBar:o,menu:s,onReady:u,...i}=e,[d,g]=t.useState(null),v=m(d,u);return l.createElement(p,{...i,ref:g},l.createElement(r.Provider,{value:v},l.createElement(c,{slot:"title"},a),l.createElement(c,{slot:"top-control-bar"},n),l.createElement(c,{slot:"bottom-control-bar"},o),l.createElement(y,{slot:"menu"},s)))},e.DurationDisplay=b,e.ErrorDisplay=et,e.FullscreenButton=Z,e.GestureReceiver=es,e.LanguageMenu=e=>{let{heading:t,children:a,...n}=e;return l.createElement(I,n,l.createElement(c,{slot:"heading"},t),a)},e.LanguageMenuButton=O,e.LinkButton=N,e.LiveButton=em,e.LoadingIndicator=eo,e.MediaTrackRadioButton=P,e.Menu=e=>{let{heading:t,children:a,...n}=e;return l.createElement(x,n,l.createElement(c,{slot:"heading"},t),a)},e.MenuButton=L,e.MenuGroup=M,e.MuteButton=k,e.PlayButton=C,e.PlaybackRateDisplay=q,e.PlaybackRateMenu=e=>{let{heading:t,children:a,...n}=e;return l.createElement(U,n,l.createElement(c,{slot:"heading"},t),a)},e.PlaybackRateMenuButton=j,e.PlaybackRateRadioGroup=Q,e.PlayerContext=r,e.PreviewThumbnail=ei,e.PreviewTimeDisplay=eu,e.QualityRadioButton=F,e.QualityRadioGroup=H,e.RadioButton=S,e.RadioButtonEvents=f,e.RadioGroup=T,e.RadioGroupEvents=R,e.RangeEvents=$,e.SeekButton=B,e.SettingsMenu=e=>{let{heading:t,children:a,...n}=e;return l.createElement(X,n,l.createElement(c,{slot:"heading"},t),a)},e.SettingsMenuButton=Y,e.TextTrackOffRadioButton=A,e.TextTrackRadioButton=w,e.TextTrackStyleDisplay=J,e.TextTrackStyleMenu=e=>{let{heading:t,children:a,...n}=e;return l.createElement(K,n,l.createElement(c,{slot:"heading"},t),a)},e.TextTrackStyleRadioGroup=W,e.TextTrackStyleResetButton=z,e.TimeDisplay=E,e.TimeRange=_,e.TrackRadioGroup=G,e.UIContainer=e=>{let{topChrome:a,middleChrome:n,bottomChrome:o,centeredChrome:s,centeredLoading:u,menu:i,error:p,onReady:g,...v}=e,[h,N]=t.useState(null),C=m(h,g);return l.createElement(d,{...v,ref:N},l.createElement(r.Provider,{value:C},l.createElement(c,{slot:"top-chrome"},a),l.createElement(c,{slot:"middle-chrome"},n),l.createElement(c,{slot:"centered-chrome"},s),l.createElement(c,{slot:"centered-loading"},u),o,l.createElement(y,{slot:"menu"},i),l.createElement(c,{slot:"error"},p)))},e.VolumeRange=ee,e.useCurrentTime=function(){let e=t.useContext(r),a=t.useCallback(t=>(null==e||e.addEventListener(eg,t),()=>null==e?void 0:e.removeEventListener(eg,t)),[e]);return t.useSyncExternalStore(a,()=>e?e.currentTime:0,()=>0)},e.useDuration=function(){let e=t.useContext(r),a=t.useCallback(t=>(null==e||e.addEventListener(ev,t),()=>null==e?void 0:e.removeEventListener(ev,t)),[e]);return t.useSyncExternalStore(a,()=>e?e.duration:NaN,()=>NaN)},e.useMuted=function(){let e=t.useContext(r),a=t.useCallback(t=>(null==e||e.addEventListener("volumechange",t),()=>null==e?void 0:e.removeEventListener("volumechange",t)),[e]);return t.useSyncExternalStore(a,()=>!!e&&e.muted,()=>!1)},e.usePaused=function(){let e=t.useContext(r),a=t.useCallback(t=>(null==e||e.addEventListener(eh,t),()=>null==e?void 0:e.removeEventListener(eh,t)),[e]);return t.useSyncExternalStore(a,()=>!e||e.paused,()=>!0)},e.useSeeking=function(){let e=t.useContext(r),a=t.useCallback(t=>(null==e||e.addEventListener(eN,t),()=>null==e?void 0:e.removeEventListener(eN,t)),[e]);return t.useSyncExternalStore(a,()=>!!e&&e.seeking,()=>!1)},e.useSource=function(){let e=t.useContext(r),a=t.useCallback(t=>(null==e||e.addEventListener("sourcechange",t),()=>null==e?void 0:e.removeEventListener("sourcechange",t)),[e]);return t.useSyncExternalStore(a,()=>null==e?void 0:e.source,()=>void 0)},e.useVolume=function(){let e=t.useContext(r),a=t.useCallback(t=>(null==e||e.addEventListener("volumechange",t),()=>null==e?void 0:e.removeEventListener("volumechange",t)),[e]);return t.useSyncExternalStore(a,()=>e?e.volume:1,()=>1)},e.version="1.7.1"});
 //# sourceMappingURL=THEOplayerReactUI.js.map