@theoplayer/react-ui 1.7.1 → 1.8.0

package/dist/THEOplayerReactUI.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"THEOplayerReactUI.mjs","sources":["../src/context.ts","../src/util.ts","../src/slotted.tsx","../src/UIContainer.tsx","../src/DefaultUI.tsx","../src/components/ControlBar.tsx","../src/components/Button.tsx","../src/components/LinkButton.tsx","../src/components/PlayButton.tsx","../src/components/MuteButton.tsx","../src/components/SeekButton.tsx","../src/components/TimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/RadioGroup.tsx","../src/components/RadioButton.tsx","../src/components/Menu.tsx","../src/components/MenuGroup.tsx","../src/components/MenuButton.tsx","../src/components/CloseMenuButton.tsx","../src/components/MediaTrackRadioButton.tsx","../src/components/TrackRadioGroup.tsx","../src/components/TextTrackRadioButton.tsx","../src/components/TextTrackOffRadioButton.tsx","../src/components/LanguageMenu.tsx","../src/components/LanguageMenuButton.tsx","../src/components/PlaybackRateRadioGroup.tsx","../src/components/PlaybackRateMenuButton.tsx","../src/components/PlaybackRateMenu.tsx","../src/components/PlaybackRateDisplay.tsx","../src/components/ActiveQualityDisplay.tsx","../src/components/QualityRadioButton.tsx","../src/components/QualityRadioGroup.tsx","../src/components/TextTrackStyleRadioGroup.tsx","../src/components/TextTrackStyleResetButton.tsx","../src/components/TextTrackStyleDisplay.tsx","../src/components/TextTrackStyleMenu.tsx","../src/components/SettingsMenu.tsx","../src/components/SettingsMenuButton.tsx","../src/components/FullscreenButton.tsx","../src/components/Range.ts","../src/components/TimeRange.tsx","../src/components/VolumeRange.tsx","../src/components/ErrorDisplay.tsx","../src/components/CastButton.tsx","../src/components/ChromecastButton.tsx","../src/components/ChromecastDisplay.tsx","../src/components/AirPlayButton.tsx","../src/components/LoadingIndicator.tsx","../src/components/GestureReceiver.tsx","../src/components/PreviewTimeDisplay.tsx","../src/components/PreviewThumbnail.tsx","../src/components/LiveButton.tsx","../src/components/ads/AdDisplay.tsx","../src/components/ads/AdCountdown.tsx","../src/components/ads/AdClickThroughButton.tsx","../src/components/ads/AdSkipButton.tsx","../src/hooks/useCurrentTime.ts","../src/hooks/useDuration.ts","../src/hooks/useMuted.ts","../src/hooks/usePaused.ts","../src/hooks/useSeeking.ts","../src/hooks/useSource.ts","../src/hooks/useVolume.ts","../src/version.ts"],"sourcesContent":["import { createContext } from 'react';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\n\n/**\n * The {@link theoplayer!ChromelessPlayer | ChromelessPlayer} instance of the parent {@link DefaultUI} or {@link UIContainer}.\n *\n * This can be used to access the backing player's state and add event listeners from within a custom React component.\n * The component *must* be a child of {@link DefaultUI} or {@link UIContainer} in order to receive the context.\n * ```jsx\n * import { useCallback, useContext, useSyncExternalStore } from 'react';\n * import { PlayerContext } from '@theoplayer/react-ui';\n *\n * const MyCustomComponent = () => {\n *     // Retrieve the backing player from the context\n *     const player = useContext(PlayerContext);\n *\n *     // Track the paused state of the player\n *     const subscribe = useCallback(\n *         (callback) => {\n *             player?.addEventListener(['play', 'pause'], callback);\n *             return () => {\n *                 player?.removeEventListener(['play', 'pause'], callback);\n *             };\n *         },\n *         [player]\n *     );\n *     const paused = useSyncExternalStore(\n *         subscribe,\n *         () => player?.paused ?? true,\n *         () => true\n *     );\n *\n *     // Alternatively, you can use the built-in hook:\n *     // import { usePaused } from '@theoplayer/react-ui';\n *     // const paused = usePaused();\n *\n *     // Show the paused state in your UI\n *     return <p>Player is {paused ? \"paused\" : \"playing\"}</p>\n * };\n * ```\n */\nexport const PlayerContext = createContext<ChromelessPlayer | undefined>(undefined);\n","import { useCallback, useEffect, useSyncExternalStore } from 'react';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\nimport type { DefaultUI as DefaultUIElement, UIContainer as UIContainerElement } from '@theoplayer/web-ui';\n\nexport function usePlayer(\n    ui: DefaultUIElement | UIContainerElement | null,\n    onReady?: (player: ChromelessPlayer) => void\n): ChromelessPlayer | undefined {\n    // Update player when UI is created, or when 'theoplayerready' event fires.\n    const subscribeReady = useCallback(\n        (callback: () => void) => {\n            ui?.addEventListener('theoplayerready', callback);\n            return () => ui?.removeEventListener('theoplayerready', callback);\n        },\n        [ui]\n    );\n    const player = useSyncExternalStore<ChromelessPlayer | undefined>(\n        subscribeReady,\n        () => ui?.player,\n        () => undefined\n    );\n\n    // Call onReady once player is available.\n    useEffect(() => {\n        if (!player) return;\n        onReady?.(player);\n    }, [player, onReady]);\n\n    return player;\n}\n","import * as React from 'react';\nimport { Children, cloneElement, Fragment, isValidElement, type ReactNode } from 'react';\n\nexport interface SlottedProps {\n    slot: string;\n    children?: ReactNode;\n}\n\n/**\n * A component that puts its children inside a specific slot of a custom element.\n */\nexport const Slotted = ({ slot, children }: SlottedProps) => {\n    if (!children) {\n        return null;\n    }\n    return (\n        // https://lit.dev/docs/frameworks/react/#using-slots\n        <div slot={slot} style={{ display: 'contents' }} children={children} />\n    );\n};\n\n/**\n * A component that puts its children inside a specific slot of a custom element,\n * by adding a `slot` property directly to each child.\n *\n * This should be used with caution! If a component is wrapped in another component that doesn't forward all props\n * (such as a `<Context.Consumer>`), then the slot property might not end up at the desired child.\n */\nexport const SlottedInPlace = ({ slot, children }: SlottedProps): ReactNode => {\n    if (!children) {\n        return null;\n    }\n    return Children.map(children, (child) => cloneWithSlot(slot, child));\n};\n\nfunction cloneWithSlot<T extends ReactNode>(slot: string, child: T): ReactNode {\n    if (isValidElement(child)) {\n        if (child.type === Fragment) {\n            return cloneElement(child, undefined, <SlottedInPlace slot={slot} children={child.props.children} />);\n        } else {\n            return cloneElement(child, { slot });\n        }\n    } else {\n        return <Slotted slot={slot} children={child} />;\n    }\n}\n","import * as React from 'react';\nimport { type PropsWithoutRef, type ReactNode, useState } from 'react';\nimport { UIContainer as UIContainerElement } from '@theoplayer/web-ui';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\nimport { createComponent, type WebComponentProps } from '@lit/react';\nimport { usePlayer } from './util';\nimport { PlayerContext } from './context';\nimport { Slotted, SlottedInPlace } from './slotted';\nimport type { ChromecastButton, ErrorDisplay, Menu, PlayButton, TimeRange } from './components';\n\nconst RawUIContainer = createComponent({\n    tagName: 'theoplayer-ui',\n    displayName: 'UIContainer',\n    elementClass: UIContainerElement,\n    react: React,\n    events: {\n        onReady: 'theoplayerready'\n    } as const\n});\n\nexport interface UIContainerProps extends PropsWithoutRef<WebComponentProps<UIContainerElement>> {\n    /**\n     * A slot for controls at the top of the player.\n     *\n     * Can be used to display the stream's title, or for a cast button ({@link ChromecastButton}).\n     */\n    topChrome?: ReactNode;\n    /**\n     * A slot for controls in the middle of the player (between the top and bottom chrome).\n     */\n    middleChrome?: ReactNode;\n    /**\n     * A slot for controls at the bottom of the player.\n     *\n     * Can be used for controls such as a play button ({@link PlayButton}) or a seek bar ({@link TimeRange}).\n     */\n    bottomChrome?: ReactNode;\n    /**\n     * A slot for controls centered on the player, on top of other controls.\n     */\n    centeredChrome?: ReactNode;\n    /**\n     * A slot for a loading indicator centered on the player, on top of other controls but behind the centered chrome.\n     */\n    centeredLoading?: ReactNode;\n    /**\n     * A slot for extra menus (see {@link Menu}).\n     */\n    menu?: ReactNode;\n    /**\n     * A slot for an error display, to show when the player encounters a fatal error (see {@link ErrorDisplay}).\n     */\n    error?: ReactNode;\n    /**\n     * Use a named slot instead, such as:\n     *  - {@link topChrome}\n     *  - {@link middleChrome}\n     *  - {@link bottomChrome}\n     *  - {@link centeredChrome}\n     *  - {@link centeredLoading}\n     *  - {@link menu}\n     *  - {@link error}\n     */\n    children?: never;\n    /**\n     * Called when the backing player is created.\n     *\n     * @param player\n     */\n    onReady?: (player: ChromelessPlayer) => void;\n}\n\n/**\n * The container component for a THEOplayer UI.\n *\n * This component provides a basic layout structure for a general player UI, and handles the creation and management\n * of a {@link theoplayer!ChromelessPlayer | THEOplayer player instance} for this UI.\n *\n * ## Usage\n *\n * 1. Create a `<UIContainer>` component, passing a valid player configuration as its `configuration` property\n *    and a valid stream source as its `source` property.\n *    Additionally, place your UI components into one of the slots of the `<UIContainer>`, such as\n *    ```jsx\n *    <UIContainer\n *        configuration={{\n *            license: 'your_license_goes_here',\n *            libraryLocation: '/path/to/node_modules/theoplayer/'\n *        }}\n *        source={{\n *            sources: [{ src: 'https://example.com/my_stream.m3u8', type: 'application/x-mpegurl' }]\n *        }}\n *        // ...\n *    />\n *    ```\n * 2. Place your UI components into one of the slots of the `<UIContainer>`, such as {@link UIContainerProps.bottomChrome}\n *    or {@link UIContainerProps.centeredChrome}. You can use the provided THEOplayer UI components\n *    (such as {@link PlayButton} or {@link TimeRange}), or use any of your own components.\n *    ```jsx\n *    <UIContainer\n *        // ...\n *        topChrome={<span class=\"title\">My awesome video</span>}\n *        centeredChrome={<PlayButton />}\n *        bottomChrome={\n *            <>\n *                <ControlBar>\n *                    <TimeRange />\n *                </ControlBar>\n *                <ControlBar>\n *                    <PlayButton />\n *                    <MuteButton />\n *                    <TimeDisplay />\n *                    <FullscreenButton />\n *                </ControlBar>\n *            </>\n *        }\n *    />\n *    ```\n *\n * ## Customization\n *\n * This component does not provide any UI components by default, you need to add all components as children of\n * one of the `<UIContainer>` slots. If you're looking for a simple out-of-the-box player experience instead,\n * see {@link DefaultUI}.\n *\n * See {@link @theoplayer/web-ui!UIContainer | UIContainer in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const UIContainer = (props: UIContainerProps) => {\n    const { topChrome, middleChrome, bottomChrome, centeredChrome, centeredLoading, menu, error, onReady, ...otherProps } = props;\n    const [ui, setUi] = useState<UIContainerElement | null>(null);\n    const player = usePlayer(ui, onReady);\n    return (\n        <RawUIContainer {...otherProps} ref={setUi}>\n            <PlayerContext.Provider value={player}>\n                <Slotted slot=\"top-chrome\">{topChrome}</Slotted>\n                <Slotted slot=\"middle-chrome\">{middleChrome}</Slotted>\n                <Slotted slot=\"centered-chrome\">{centeredChrome}</Slotted>\n                <Slotted slot=\"centered-loading\">{centeredLoading}</Slotted>\n                {bottomChrome}\n                <SlottedInPlace slot=\"menu\">{menu}</SlottedInPlace>\n                <Slotted slot=\"error\">{error}</Slotted>\n            </PlayerContext.Provider>\n        </RawUIContainer>\n    );\n};\n","import * as React from 'react';\nimport { type PropsWithoutRef, type ReactNode, useState } from 'react';\nimport { DefaultUI as DefaultUIElement } from '@theoplayer/web-ui';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\nimport { createComponent, type WebComponentProps } from '@lit/react';\nimport { usePlayer } from './util';\nimport { PlayerContext } from './context';\nimport { Slotted, SlottedInPlace } from './slotted';\nimport type { Menu } from './components';\n\nconst RawDefaultUI = createComponent({\n    tagName: 'theoplayer-default-ui',\n    displayName: 'DefaultUI',\n    elementClass: DefaultUIElement,\n    react: React,\n    events: {\n        onReady: 'theoplayerready'\n    } as const\n});\n\nexport interface DefaultUIProps extends PropsWithoutRef<Omit<WebComponentProps<DefaultUIElement>, 'title'>> {\n    /**\n     * A slot for the stream's title in the top control bar.\n     */\n    title?: ReactNode;\n    /**\n     * A slot for extra UI controls in the top control bar.\n     */\n    topControlBar?: ReactNode;\n    /**\n     * A slot for extra UI controls in the bottom control bar.\n     */\n    bottomControlBar?: ReactNode;\n    /**\n     * A slot for extra menus (see {@link Menu}).\n     */\n    menu?: ReactNode;\n    /**\n     * Use a named slot instead, such as:\n     *  - {@link title}\n     *  - {@link topControlBar}\n     *  - {@link bottomControlBar}\n     *  - {@link menu}\n     */\n    children?: never;\n    /**\n     * Called when the backing player is created.\n     *\n     * @param player\n     */\n    onReady?: (player: ChromelessPlayer) => void;\n}\n\n/**\n * A default UI for THEOplayer.\n *\n * This default UI provides a great player experience out-of-the-box, that works well on all types of devices\n * and for all types of streams. It provides all the common playback controls for playing, seeking,\n * changing languages and qualities. It also supports advertisements and casting.\n *\n * ## Usage\n *\n * 1. Create a `<DefaultUI>` component, passing a valid player configuration as its `configuration` property\n *    and a valid stream source as its `source` property.\n *    ```jsx\n *    <DefaultUI\n *        configuration={{\n *            license: 'your_license_goes_here',\n *            libraryLocation: '/path/to/node_modules/theoplayer/'\n *        }}\n *        source={{\n *            sources: [{ src: 'https://example.com/my_stream.m3u8', type: 'application/x-mpegurl' }]\n *        }}\n *    />\n *    ```\n * 2. Optionally, customize the player using CSS custom properties and/or extra controls.\n *\n * ## Customization\n *\n * The styling can be controlled using CSS custom properties (see {@link UIContainer}).\n * Additional controls can be added to the {@link DefaultUIProps.topControlBar}\n * and {@link DefaultUIProps.bottomControlBar} slots.\n * For more extensive customizations, we recommend defining your own custom UI using a {@link UIContainer}.\n *\n * See {@link @theoplayer/web-ui!DefaultUI | DefaultUI in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const DefaultUI = (props: DefaultUIProps) => {\n    const { title, topControlBar, bottomControlBar, menu, onReady, ...otherProps } = props;\n    const [ui, setUi] = useState<DefaultUIElement | null>(null);\n    const player = usePlayer(ui, onReady);\n    return (\n        <RawDefaultUI {...otherProps} ref={setUi}>\n            <PlayerContext.Provider value={player}>\n                <Slotted slot=\"title\">{title}</Slotted>\n                <Slotted slot=\"top-control-bar\">{topControlBar}</Slotted>\n                <Slotted slot=\"bottom-control-bar\">{bottomControlBar}</Slotted>\n                <SlottedInPlace slot=\"menu\">{menu}</SlottedInPlace>\n            </PlayerContext.Provider>\n        </RawDefaultUI>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { ControlBar as ControlBarElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!ControlBar | ControlBar in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ControlBar = createComponent({\n    tagName: 'theoplayer-control-bar',\n    displayName: 'ControlBar',\n    elementClass: ControlBarElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { Button as ButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\nexport const ButtonEvents = {\n    onClick: 'click'\n} as const;\n\n/**\n * See {@link @theoplayer/web-ui!Button | Button in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const Button = createComponent({\n    tagName: 'theoplayer-button',\n    displayName: 'Button',\n    elementClass: ButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { LinkButton as LinkButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!LinkButton | LinkButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LinkButton = createComponent({\n    tagName: 'theoplayer-link-button',\n    displayName: 'LinkButton',\n    elementClass: LinkButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { PlayButton as PlayButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!PlayButton | PlayButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlayButton = createComponent({\n    tagName: 'theoplayer-play-button',\n    displayName: 'PlayButton',\n    elementClass: PlayButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { MuteButton as MuteButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!MuteButton | MuteButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const MuteButton = createComponent({\n    tagName: 'theoplayer-mute-button',\n    displayName: 'MuteButton',\n    elementClass: MuteButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { SeekButton as SeekButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!SeekButton | SeekButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const SeekButton = createComponent({\n    tagName: 'theoplayer-seek-button',\n    displayName: 'SeekButton',\n    elementClass: SeekButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TimeDisplay as TimeDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!TimeDisplay | TimeDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TimeDisplay = createComponent({\n    tagName: 'theoplayer-time-display',\n    displayName: 'TimeDisplay',\n    elementClass: TimeDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { DurationDisplay as DurationDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!DurationDisplay | DurationDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const DurationDisplay = createComponent({\n    tagName: 'theoplayer-duration-display',\n    displayName: 'DurationDisplay',\n    elementClass: DurationDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { RadioGroup as RadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\nexport const RadioGroupEvents = {\n    onChange: 'change'\n} as const;\n\n/**\n * See {@link @theoplayer/web-ui!RadioGroup | RadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const RadioGroup = createComponent({\n    tagName: 'theoplayer-radio-group',\n    displayName: 'RadioGroup',\n    elementClass: RadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { RadioButton as RadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\nexport const RadioButtonEvents = {\n    ...ButtonEvents,\n    onChange: 'change',\n    onInput: 'input'\n} as const;\n\n/**\n * See {@link @theoplayer/web-ui!RadioButton | RadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const RadioButton = createComponent({\n    tagName: 'theoplayer-radio-button',\n    displayName: 'RadioButton',\n    elementClass: RadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { Menu as MenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\n\nconst RawMenu = createComponent({\n    tagName: 'theoplayer-menu',\n    displayName: 'Menu',\n    elementClass: MenuElement,\n    react: React\n});\n\nexport interface CommonMenuProps {\n    /**\n     * A slot for the menu's heading.\n     */\n    heading?: ReactNode;\n    /**\n     * The menu's contents.\n     */\n    children?: ReactNode;\n}\n\nexport interface MenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<MenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!Menu | Menu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const Menu = (props: MenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawMenu>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { MenuGroup as MenuGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!MenuGroup | MenuGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const MenuGroup = createComponent({\n    tagName: 'theoplayer-menu-group',\n    displayName: 'MenuGroup',\n    elementClass: MenuGroupElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { MenuButton as MenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!MenuButton | MenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const MenuButton = createComponent({\n    tagName: 'theoplayer-menu-button',\n    displayName: 'MenuButton',\n    elementClass: MenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { CloseMenuButton as CloseMenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!CloseMenuButton | CloseMenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const CloseMenuButton = createComponent({\n    tagName: 'theoplayer-close-menu-button',\n    displayName: 'CloseMenuButton',\n    elementClass: CloseMenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { MediaTrackRadioButton as MediaTrackRadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioButtonEvents } from './RadioButton';\n\n/**\n * See {@link @theoplayer/web-ui!MediaTrackRadioButton | MediaTrackRadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const MediaTrackRadioButton = createComponent({\n    tagName: 'theoplayer-media-track-radio-button',\n    displayName: 'MediaTrackRadioButton',\n    elementClass: MediaTrackRadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TrackRadioGroup as TrackRadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioGroupEvents } from './RadioGroup';\n\n/**\n * See {@link @theoplayer/web-ui!TrackRadioGroup | TrackRadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TrackRadioGroup = createComponent({\n    tagName: 'theoplayer-track-radio-group',\n    displayName: 'TrackRadioGroup',\n    elementClass: TrackRadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackRadioButton as TextTrackRadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioButtonEvents } from './RadioButton';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackRadioButton | TextTrackRadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackRadioButton = createComponent({\n    tagName: 'theoplayer-text-track-radio-button',\n    displayName: 'TextTrackRadioButton',\n    elementClass: TextTrackRadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackOffRadioButton as TextTrackOffRadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioButtonEvents } from './RadioButton';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackOffRadioButton | TextTrackOffRadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackOffRadioButton = createComponent({\n    tagName: 'theoplayer-text-track-off-radio-button',\n    displayName: 'TextTrackOffRadioButton',\n    elementClass: TextTrackOffRadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { LanguageMenu as LanguageMenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\nimport type { CommonMenuProps } from './Menu';\n\nconst RawLanguageMenu = createComponent({\n    tagName: 'theoplayer-language-menu',\n    displayName: 'LanguageMenu',\n    elementClass: LanguageMenuElement,\n    react: React\n});\n\nexport interface LanguageMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<LanguageMenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!LanguageMenu | LanguageMenu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LanguageMenu = (props: LanguageMenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawLanguageMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawLanguageMenu>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { LanguageMenuButton as LanguageMenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!LanguageMenuButton | LanguageMenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LanguageMenuButton = createComponent({\n    tagName: 'theoplayer-language-menu-button',\n    displayName: 'LanguageMenuButton',\n    elementClass: LanguageMenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { PlaybackRateRadioGroup as PlaybackRateRadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioGroupEvents } from './RadioGroup';\n\n/**\n * See {@link @theoplayer/web-ui!PlaybackRateRadioGroup | PlaybackRateRadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlaybackRateRadioGroup = createComponent({\n    tagName: 'theoplayer-playback-rate-radio-group',\n    displayName: 'PlaybackRateRadioGroup',\n    elementClass: PlaybackRateRadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { PlaybackRateMenuButton as PlaybackRateMenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!PlaybackRateMenuButton | PlaybackRateMenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlaybackRateMenuButton = createComponent({\n    tagName: 'theoplayer-playback-rate-menu-button',\n    displayName: 'PlaybackRateMenuButton',\n    elementClass: PlaybackRateMenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { PlaybackRateMenu as PlaybackRateMenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\nimport type { CommonMenuProps } from './Menu';\n\nconst RawPlaybackRateMenu = createComponent({\n    tagName: 'theoplayer-playback-rate-menu',\n    displayName: 'PlaybackRateMenu',\n    elementClass: PlaybackRateMenuElement,\n    react: React\n});\n\nexport interface PlaybackRateMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<PlaybackRateMenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!PlaybackRateMenu | PlaybackRateMenu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlaybackRateMenu = (props: PlaybackRateMenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawPlaybackRateMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawPlaybackRateMenu>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { PlaybackRateDisplay as PlaybackRateDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!PlaybackRateDisplay | PlaybackRateDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlaybackRateDisplay = createComponent({\n    tagName: 'theoplayer-playback-rate-display',\n    displayName: 'PlaybackRateDisplay',\n    elementClass: PlaybackRateDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { ActiveQualityDisplay as ActiveQualityDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!ActiveQualityDisplay | ActiveQualityDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ActiveQualityDisplay = createComponent({\n    tagName: 'theoplayer-active-quality-display',\n    displayName: 'ActiveQualityDisplay',\n    elementClass: ActiveQualityDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { QualityRadioButton as QualityRadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioButtonEvents } from './RadioButton';\n\n/**\n * See {@link @theoplayer/web-ui!QualityRadioButton | QualityRadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const QualityRadioButton = createComponent({\n    tagName: 'theoplayer-quality-radio-button',\n    displayName: 'QualityRadioButton',\n    elementClass: QualityRadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { QualityRadioGroup as QualityRadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioGroupEvents } from './RadioGroup';\n\n/**\n * See {@link @theoplayer/web-ui!QualityRadioGroup | QualityRadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const QualityRadioGroup = createComponent({\n    tagName: 'theoplayer-quality-radio-group',\n    displayName: 'QualityRadioGroup',\n    elementClass: QualityRadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackStyleRadioGroup as TextTrackStyleRadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioGroupEvents } from './RadioGroup';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackStyleRadioGroup | TextTrackStyleRadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackStyleRadioGroup = createComponent({\n    tagName: 'theoplayer-text-track-style-radio-group',\n    displayName: 'TextTrackStyleRadioGroup',\n    elementClass: TextTrackStyleRadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackStyleResetButton as TextTrackStyleResetButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackStyleResetButton | TextTrackStyleResetButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackStyleResetButton = createComponent({\n    tagName: 'theoplayer-text-track-style-reset-button',\n    displayName: 'TextTrackStyleResetButton',\n    elementClass: TextTrackStyleResetButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackStyleDisplay as TextTrackStyleDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackStyleDisplay | TextTrackStyleDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackStyleDisplay = createComponent({\n    tagName: 'theoplayer-text-track-style-display',\n    displayName: 'TextTrackStyleDisplay',\n    elementClass: TextTrackStyleDisplayElement,\n    react: React\n});\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { TextTrackStyleMenu as TextTrackStyleMenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\nimport type { CommonMenuProps } from './Menu';\n\nconst RawTextTrackStyleMenu = createComponent({\n    tagName: 'theoplayer-text-track-style-menu',\n    displayName: 'TextTrackStyleMenu',\n    elementClass: TextTrackStyleMenuElement,\n    react: React\n});\n\nexport interface TextTrackStyleMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<TextTrackStyleMenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackStyleMenu | TextTrackStyleMenu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackStyleMenu = (props: TextTrackStyleMenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawTextTrackStyleMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawTextTrackStyleMenu>\n    );\n};\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { SettingsMenu as SettingsMenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\nimport type { CommonMenuProps } from './Menu';\n\nconst RawSettingsMenu = createComponent({\n    tagName: 'theoplayer-settings-menu',\n    displayName: 'SettingsMenu',\n    elementClass: SettingsMenuElement,\n    react: React\n});\n\nexport interface SettingsMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<SettingsMenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!SettingsMenu | SettingsMenu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const SettingsMenu = (props: SettingsMenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawSettingsMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawSettingsMenu>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { SettingsMenuButton as SettingsMenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!SettingsMenuButton | SettingsMenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const SettingsMenuButton = createComponent({\n    tagName: 'theoplayer-settings-menu-button',\n    displayName: 'SettingsMenuButton',\n    elementClass: SettingsMenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { FullscreenButton as FullscreenButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!FullscreenButton | FullscreenButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const FullscreenButton = createComponent({\n    tagName: 'theoplayer-fullscreen-button',\n    displayName: 'FullscreenButton',\n    elementClass: FullscreenButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","export const RangeEvents = {\n    onChange: 'change',\n    onInput: 'input'\n} as const;\n","import { createComponent } from '@lit/react';\nimport { TimeRange as TimeRangeElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RangeEvents } from './Range';\n\n/**\n * See {@link @theoplayer/web-ui!TimeRange | TimeRange in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TimeRange = createComponent({\n    tagName: 'theoplayer-time-range',\n    displayName: 'TimeRange',\n    elementClass: TimeRangeElement,\n    react: React,\n    events: RangeEvents\n});\n","import { createComponent } from '@lit/react';\nimport { VolumeRange as VolumeRangeElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RangeEvents } from './Range';\n\n/**\n * See {@link @theoplayer/web-ui!VolumeRange | VolumeRange in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const VolumeRange = createComponent({\n    tagName: 'theoplayer-volume-range',\n    displayName: 'VolumeRange',\n    elementClass: VolumeRangeElement,\n    react: React,\n    events: RangeEvents\n});\n","import { createComponent } from '@lit/react';\nimport { ErrorDisplay as ErrorDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!ErrorDisplay | ErrorDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ErrorDisplay = createComponent({\n    tagName: 'theoplayer-error-display',\n    displayName: 'ErrorDisplay',\n    elementClass: ErrorDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { CastButton as CastButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!CastButton | CastButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const CastButton = createComponent({\n    tagName: 'theoplayer-cast-button',\n    displayName: 'CastButton',\n    elementClass: CastButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { ChromecastButton as ChromecastButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!ChromecastButton | ChromecastButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ChromecastButton = createComponent({\n    tagName: 'theoplayer-chromecast-button',\n    displayName: 'ChromecastButton',\n    elementClass: ChromecastButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { ChromecastDisplay as ChromecastDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!ChromecastDisplay | ChromecastDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ChromecastDisplay = createComponent({\n    tagName: 'theoplayer-chromecast-display',\n    displayName: 'ChromecastDisplay',\n    elementClass: ChromecastDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { AirPlayButton as AirPlayButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!AirPlayButton | AirPlayButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AirPlayButton = createComponent({\n    tagName: 'theoplayer-airplay-button',\n    displayName: 'AirPlayButton',\n    elementClass: AirPlayButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { LoadingIndicator as LoadingIndicatorElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!LoadingIndicator | LoadingIndicator in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LoadingIndicator = createComponent({\n    tagName: 'theoplayer-loading-indicator',\n    displayName: 'LoadingIndicator',\n    elementClass: LoadingIndicatorElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { GestureReceiver as GestureReceiverElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!GestureReceiver | GestureReceiver in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const GestureReceiver = createComponent({\n    tagName: 'theoplayer-gesture-receiver',\n    displayName: 'GestureReceiver',\n    elementClass: GestureReceiverElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { PreviewTimeDisplay as PreviewTimeDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!PreviewTimeDisplay | PreviewTimeDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PreviewTimeDisplay = createComponent({\n    tagName: 'theoplayer-preview-time-display',\n    displayName: 'PreviewTimeDisplay',\n    elementClass: PreviewTimeDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { PreviewThumbnail as PreviewThumbnailElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!PreviewThumbnail | PreviewThumbnail in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PreviewThumbnail = createComponent({\n    tagName: 'theoplayer-preview-thumbnail',\n    displayName: 'PreviewThumbnail',\n    elementClass: PreviewThumbnailElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { LiveButton as LiveButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!LiveButton | LiveButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LiveButton = createComponent({\n    tagName: 'theoplayer-live-button',\n    displayName: 'LiveButton',\n    elementClass: LiveButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { AdDisplay as AdDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!AdDisplay | AdDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AdDisplay = createComponent({\n    tagName: 'theoplayer-ad-display',\n    displayName: 'AdDisplay',\n    elementClass: AdDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { AdCountdown as AdCountdownElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!AdCountdown | AdCountdown in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AdCountdown = createComponent({\n    tagName: 'theoplayer-ad-countdown',\n    displayName: 'AdCountdown',\n    elementClass: AdCountdownElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { AdClickThroughButton as AdClickThroughButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from '../Button';\n\n/**\n * See {@link @theoplayer/web-ui!AdClickThroughButton | AdClickThroughButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AdClickThroughButton = createComponent({\n    tagName: 'theoplayer-ad-clickthrough-button',\n    displayName: 'AdClickThroughButton',\n    elementClass: AdClickThroughButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { AdSkipButton as AdSkipButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from '../Button';\n\n/**\n * See {@link @theoplayer/web-ui!AdSkipButton | AdSkipButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AdSkipButton = createComponent({\n    tagName: 'theoplayer-ad-skip-button',\n    displayName: 'AdSkipButton',\n    elementClass: AdSkipButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { PlayerEventMap } from 'theoplayer';\n\nconst TIME_CHANGE_EVENTS = ['timeupdate', 'seeking', 'seeked', 'emptied'] satisfies ReadonlyArray<keyof PlayerEventMap>;\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.currentTime | the player's current time}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useCurrentTime(): number {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener(TIME_CHANGE_EVENTS, callback);\n            return () => player?.removeEventListener(TIME_CHANGE_EVENTS, callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.currentTime : 0),\n        () => 0\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { PlayerEventMap } from 'theoplayer';\n\nconst DURATION_CHANGE_EVENTS = ['durationchange', 'emptied'] satisfies ReadonlyArray<keyof PlayerEventMap>;\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.duration | the player's duration}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useDuration(): number {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener(DURATION_CHANGE_EVENTS, callback);\n            return () => player?.removeEventListener(DURATION_CHANGE_EVENTS, callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.duration : NaN),\n        () => NaN\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.muted | the player's muted state}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useMuted(): boolean {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener('volumechange', callback);\n            return () => player?.removeEventListener('volumechange', callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.muted : false),\n        () => false\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { PlayerEventMap } from 'theoplayer';\n\nconst PAUSED_CHANGE_EVENTS = ['play', 'pause'] satisfies ReadonlyArray<keyof PlayerEventMap>;\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.paused | the player's paused state}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function usePaused(): boolean {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener(PAUSED_CHANGE_EVENTS, callback);\n            return () => player?.removeEventListener(PAUSED_CHANGE_EVENTS, callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.paused : true),\n        () => true\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { PlayerEventMap } from 'theoplayer';\n\nconst SEEKING_CHANGE_EVENTS = ['seeking', 'seeked', 'emptied'] satisfies ReadonlyArray<keyof PlayerEventMap>;\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.seeking | the player's seeking state}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useSeeking(): boolean {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener(SEEKING_CHANGE_EVENTS, callback);\n            return () => player?.removeEventListener(SEEKING_CHANGE_EVENTS, callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.seeking : false),\n        () => false\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { SourceDescription } from 'theoplayer';\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.source | the player's source}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useSource(): SourceDescription | undefined {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener('sourcechange', callback);\n            return () => player?.removeEventListener('sourcechange', callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => player?.source,\n        () => undefined\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.volume | the player's volume}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useVolume(): number {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener('volumechange', callback);\n            return () => player?.removeEventListener('volumechange', callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.volume : 1),\n        () => 1\n    );\n}\n","import { version as packageVersion } from '../package.json';\n\n/**\n * The version of Open Video UI for React.\n */\nexport const version: string = packageVersion;\n"],"names":["PlayerContext","createContext","undefined","usePlayer","ui","onReady","subscribeReady","useCallback","callback","addEventListener","removeEventListener","player","useSyncExternalStore","useEffect","Slotted","param","slot","children","React","div","style","display","SlottedInPlace","Children","map","child","isValidElement","type","Fragment","cloneElement","props","RawUIContainer","createComponent","tagName","displayName","elementClass","UIContainerElement","react","events","UIContainer","topChrome","middleChrome","bottomChrome","centeredChrome","centeredLoading","menu","error","otherProps","setUi","useState","ref","createElement","Provider","value","RawDefaultUI","DefaultUIElement","DefaultUI","title","topControlBar","bottomControlBar","ControlBar","ControlBarElement","ButtonEvents","onClick","Button","ButtonElement","LinkButton","LinkButtonElement","PlayButton","PlayButtonElement","MuteButton","MuteButtonElement","SeekButton","SeekButtonElement","TimeDisplay","TimeDisplayElement","DurationDisplay","DurationDisplayElement","RadioGroupEvents","onChange","RadioGroup","RadioGroupElement","RadioButtonEvents","onInput","RadioButton","RadioButtonElement","RawMenu","MenuElement","Menu","heading","MenuGroup","MenuGroupElement","MenuButton","MenuButtonElement","CloseMenuButton","CloseMenuButtonElement","MediaTrackRadioButton","MediaTrackRadioButtonElement","TrackRadioGroup","TrackRadioGroupElement","TextTrackRadioButton","TextTrackRadioButtonElement","TextTrackOffRadioButton","TextTrackOffRadioButtonElement","RawLanguageMenu","LanguageMenuElement","LanguageMenu","LanguageMenuButton","LanguageMenuButtonElement","PlaybackRateRadioGroup","PlaybackRateRadioGroupElement","PlaybackRateMenuButton","PlaybackRateMenuButtonElement","RawPlaybackRateMenu","PlaybackRateMenuElement","PlaybackRateMenu","PlaybackRateDisplay","PlaybackRateDisplayElement","ActiveQualityDisplay","ActiveQualityDisplayElement","QualityRadioButton","QualityRadioButtonElement","QualityRadioGroup","QualityRadioGroupElement","TextTrackStyleRadioGroup","TextTrackStyleRadioGroupElement","TextTrackStyleResetButton","TextTrackStyleResetButtonElement","TextTrackStyleDisplay","TextTrackStyleDisplayElement","RawTextTrackStyleMenu","TextTrackStyleMenuElement","TextTrackStyleMenu","RawSettingsMenu","SettingsMenuElement","SettingsMenu","SettingsMenuButton","SettingsMenuButtonElement","FullscreenButton","FullscreenButtonElement","RangeEvents","TimeRange","TimeRangeElement","VolumeRange","VolumeRangeElement","ErrorDisplay","ErrorDisplayElement","CastButton","CastButtonElement","ChromecastButton","ChromecastButtonElement","ChromecastDisplay","ChromecastDisplayElement","AirPlayButton","AirPlayButtonElement","LoadingIndicator","LoadingIndicatorElement","GestureReceiver","GestureReceiverElement","PreviewTimeDisplay","PreviewTimeDisplayElement","PreviewThumbnail","PreviewThumbnailElement","LiveButton","LiveButtonElement","AdDisplay","AdDisplayElement","AdCountdown","AdCountdownElement","AdClickThroughButton","AdClickThroughButtonElement","AdSkipButton","AdSkipButtonElement","TIME_CHANGE_EVENTS","useCurrentTime","useContext","subscribe","currentTime","DURATION_CHANGE_EVENTS","useDuration","duration","NaN","useMuted","muted","PAUSED_CHANGE_EVENTS","usePaused","paused","SEEKING_CHANGE_EVENTS","useSeeking","seeking","useSource","source","useVolume","volume","version"],"mappings":"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"}
+{"version":3,"file":"THEOplayerReactUI.mjs","sources":["../src/context.ts","../src/util.ts","../src/components/ControlBar.tsx","../src/components/Button.tsx","../src/components/LinkButton.tsx","../src/components/PlayButton.tsx","../src/components/MuteButton.tsx","../src/components/SeekButton.tsx","../src/components/TimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/RadioGroup.tsx","../src/components/RadioButton.tsx","../src/slotted.tsx","../src/components/Menu.tsx","../src/components/MenuGroup.tsx","../src/components/MenuButton.tsx","../src/components/CloseMenuButton.tsx","../src/components/MediaTrackRadioButton.tsx","../src/components/TrackRadioGroup.tsx","../src/components/TextTrackRadioButton.tsx","../src/components/TextTrackOffRadioButton.tsx","../src/components/LanguageMenu.tsx","../src/components/LanguageMenuButton.tsx","../src/components/PlaybackRateRadioGroup.tsx","../src/components/PlaybackRateMenuButton.tsx","../src/components/PlaybackRateMenu.tsx","../src/components/PlaybackRateDisplay.tsx","../src/components/ActiveQualityDisplay.tsx","../src/components/QualityRadioButton.tsx","../src/components/QualityRadioGroup.tsx","../src/components/TextTrackStyleRadioGroup.tsx","../src/components/TextTrackStyleResetButton.tsx","../src/components/TextTrackStyleDisplay.tsx","../src/components/TextTrackStyleMenu.tsx","../src/components/SettingsMenu.tsx","../src/components/SettingsMenuButton.tsx","../src/components/FullscreenButton.tsx","../src/components/Range.ts","../src/components/TimeRange.tsx","../src/components/VolumeRange.tsx","../src/components/ErrorDisplay.tsx","../src/components/CastButton.tsx","../src/components/ChromecastButton.tsx","../src/components/ChromecastDisplay.tsx","../src/components/AirPlayButton.tsx","../src/components/LoadingIndicator.tsx","../src/components/GestureReceiver.tsx","../src/components/PreviewTimeDisplay.tsx","../src/components/PreviewThumbnail.tsx","../src/components/LiveButton.tsx","../src/components/SlotContainer.tsx","../src/components/ads/AdDisplay.tsx","../src/components/ads/AdCountdown.tsx","../src/components/ads/AdClickThroughButton.tsx","../src/components/ads/AdSkipButton.tsx","../src/UIContainer.tsx","../src/DefaultUI.tsx","../src/THEOliveDefaultUI.tsx","../src/hooks/useCurrentTime.ts","../src/hooks/useDuration.ts","../src/hooks/useMuted.ts","../src/hooks/usePaused.ts","../src/hooks/useSeeking.ts","../src/hooks/useSource.ts","../src/hooks/useVolume.ts","../src/version.ts"],"sourcesContent":["import { createContext } from 'react';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\n\n/**\n * The {@link theoplayer!ChromelessPlayer | ChromelessPlayer} instance of the parent {@link DefaultUI} or {@link UIContainer}.\n *\n * This can be used to access the backing player's state and add event listeners from within a custom React component.\n * The component *must* be a child of {@link DefaultUI} or {@link UIContainer} in order to receive the context.\n * ```jsx\n * import { useCallback, useContext, useSyncExternalStore } from 'react';\n * import { PlayerContext } from '@theoplayer/react-ui';\n *\n * const MyCustomComponent = () => {\n *     // Retrieve the backing player from the context\n *     const player = useContext(PlayerContext);\n *\n *     // Track the paused state of the player\n *     const subscribe = useCallback(\n *         (callback) => {\n *             player?.addEventListener(['play', 'pause'], callback);\n *             return () => {\n *                 player?.removeEventListener(['play', 'pause'], callback);\n *             };\n *         },\n *         [player]\n *     );\n *     const paused = useSyncExternalStore(\n *         subscribe,\n *         () => player?.paused ?? true,\n *         () => true\n *     );\n *\n *     // Alternatively, you can use the built-in hook:\n *     // import { usePaused } from '@theoplayer/react-ui';\n *     // const paused = usePaused();\n *\n *     // Show the paused state in your UI\n *     return <p>Player is {paused ? \"paused\" : \"playing\"}</p>\n * };\n * ```\n */\nexport const PlayerContext = createContext<ChromelessPlayer | undefined>(undefined);\n","import { useCallback, useEffect, useSyncExternalStore } from 'react';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\nimport type { DefaultUI as DefaultUIElement, UIContainer as UIContainerElement } from '@theoplayer/web-ui';\n\nexport function usePlayer(\n    ui: DefaultUIElement | UIContainerElement | null,\n    onReady?: (player: ChromelessPlayer) => void\n): ChromelessPlayer | undefined {\n    // Update player when UI is created, or when 'theoplayerready' event fires.\n    const subscribeReady = useCallback(\n        (callback: () => void) => {\n            ui?.addEventListener('theoplayerready', callback);\n            return () => ui?.removeEventListener('theoplayerready', callback);\n        },\n        [ui]\n    );\n    const player = useSyncExternalStore<ChromelessPlayer | undefined>(\n        subscribeReady,\n        () => ui?.player,\n        () => undefined\n    );\n\n    // Call onReady once player is available.\n    useEffect(() => {\n        if (!player) return;\n        onReady?.(player);\n    }, [player, onReady]);\n\n    return player;\n}\n","import { createComponent } from '@lit/react';\nimport { ControlBar as ControlBarElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!ControlBar | ControlBar in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ControlBar = createComponent({\n    tagName: 'theoplayer-control-bar',\n    displayName: 'ControlBar',\n    elementClass: ControlBarElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { Button as ButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\nexport const ButtonEvents = {\n    onClick: 'click'\n} as const;\n\n/**\n * See {@link @theoplayer/web-ui!Button | Button in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const Button = createComponent({\n    tagName: 'theoplayer-button',\n    displayName: 'Button',\n    elementClass: ButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { LinkButton as LinkButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!LinkButton | LinkButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LinkButton = createComponent({\n    tagName: 'theoplayer-link-button',\n    displayName: 'LinkButton',\n    elementClass: LinkButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { PlayButton as PlayButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!PlayButton | PlayButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlayButton = createComponent({\n    tagName: 'theoplayer-play-button',\n    displayName: 'PlayButton',\n    elementClass: PlayButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { MuteButton as MuteButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!MuteButton | MuteButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const MuteButton = createComponent({\n    tagName: 'theoplayer-mute-button',\n    displayName: 'MuteButton',\n    elementClass: MuteButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { SeekButton as SeekButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!SeekButton | SeekButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const SeekButton = createComponent({\n    tagName: 'theoplayer-seek-button',\n    displayName: 'SeekButton',\n    elementClass: SeekButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TimeDisplay as TimeDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!TimeDisplay | TimeDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TimeDisplay = createComponent({\n    tagName: 'theoplayer-time-display',\n    displayName: 'TimeDisplay',\n    elementClass: TimeDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { DurationDisplay as DurationDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!DurationDisplay | DurationDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const DurationDisplay = createComponent({\n    tagName: 'theoplayer-duration-display',\n    displayName: 'DurationDisplay',\n    elementClass: DurationDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { RadioGroup as RadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\nexport const RadioGroupEvents = {\n    onChange: 'change'\n} as const;\n\n/**\n * See {@link @theoplayer/web-ui!RadioGroup | RadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const RadioGroup = createComponent({\n    tagName: 'theoplayer-radio-group',\n    displayName: 'RadioGroup',\n    elementClass: RadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { RadioButton as RadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\nexport const RadioButtonEvents = {\n    ...ButtonEvents,\n    onChange: 'change',\n    onInput: 'input'\n} as const;\n\n/**\n * See {@link @theoplayer/web-ui!RadioButton | RadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const RadioButton = createComponent({\n    tagName: 'theoplayer-radio-button',\n    displayName: 'RadioButton',\n    elementClass: RadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\n\nexport interface SlottedProps {\n    slot: string;\n    children?: ReactNode;\n}\n/**\n * A component that puts its children inside a specific slot of a custom element.\n */\nexport const Slotted = ({ slot, children }: SlottedProps) => {\n    if (!children) {\n        return null;\n    }\n    return (\n        // https://lit.dev/docs/frameworks/react/#using-slots\n        <div slot={slot} style={{ display: 'contents' }} children={children} />\n    );\n};\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { Menu as MenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\n\nconst RawMenu = createComponent({\n    tagName: 'theoplayer-menu',\n    displayName: 'Menu',\n    elementClass: MenuElement,\n    react: React\n});\n\nexport interface CommonMenuProps {\n    /**\n     * A slot for the menu's heading.\n     */\n    heading?: ReactNode;\n    /**\n     * The menu's contents.\n     */\n    children?: ReactNode;\n}\n\nexport interface MenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<MenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!Menu | Menu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const Menu = (props: MenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawMenu>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { MenuGroup as MenuGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!MenuGroup | MenuGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const MenuGroup = createComponent({\n    tagName: 'theoplayer-menu-group',\n    displayName: 'MenuGroup',\n    elementClass: MenuGroupElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { MenuButton as MenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!MenuButton | MenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const MenuButton = createComponent({\n    tagName: 'theoplayer-menu-button',\n    displayName: 'MenuButton',\n    elementClass: MenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { CloseMenuButton as CloseMenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!CloseMenuButton | CloseMenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const CloseMenuButton = createComponent({\n    tagName: 'theoplayer-close-menu-button',\n    displayName: 'CloseMenuButton',\n    elementClass: CloseMenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { MediaTrackRadioButton as MediaTrackRadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioButtonEvents } from './RadioButton';\n\n/**\n * See {@link @theoplayer/web-ui!MediaTrackRadioButton | MediaTrackRadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const MediaTrackRadioButton = createComponent({\n    tagName: 'theoplayer-media-track-radio-button',\n    displayName: 'MediaTrackRadioButton',\n    elementClass: MediaTrackRadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TrackRadioGroup as TrackRadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioGroupEvents } from './RadioGroup';\n\n/**\n * See {@link @theoplayer/web-ui!TrackRadioGroup | TrackRadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TrackRadioGroup = createComponent({\n    tagName: 'theoplayer-track-radio-group',\n    displayName: 'TrackRadioGroup',\n    elementClass: TrackRadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackRadioButton as TextTrackRadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioButtonEvents } from './RadioButton';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackRadioButton | TextTrackRadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackRadioButton = createComponent({\n    tagName: 'theoplayer-text-track-radio-button',\n    displayName: 'TextTrackRadioButton',\n    elementClass: TextTrackRadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackOffRadioButton as TextTrackOffRadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioButtonEvents } from './RadioButton';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackOffRadioButton | TextTrackOffRadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackOffRadioButton = createComponent({\n    tagName: 'theoplayer-text-track-off-radio-button',\n    displayName: 'TextTrackOffRadioButton',\n    elementClass: TextTrackOffRadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { LanguageMenu as LanguageMenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\nimport type { CommonMenuProps } from './Menu';\n\nconst RawLanguageMenu = createComponent({\n    tagName: 'theoplayer-language-menu',\n    displayName: 'LanguageMenu',\n    elementClass: LanguageMenuElement,\n    react: React\n});\n\nexport interface LanguageMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<LanguageMenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!LanguageMenu | LanguageMenu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LanguageMenu = (props: LanguageMenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawLanguageMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawLanguageMenu>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { LanguageMenuButton as LanguageMenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!LanguageMenuButton | LanguageMenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LanguageMenuButton = createComponent({\n    tagName: 'theoplayer-language-menu-button',\n    displayName: 'LanguageMenuButton',\n    elementClass: LanguageMenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { PlaybackRateRadioGroup as PlaybackRateRadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioGroupEvents } from './RadioGroup';\n\n/**\n * See {@link @theoplayer/web-ui!PlaybackRateRadioGroup | PlaybackRateRadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlaybackRateRadioGroup = createComponent({\n    tagName: 'theoplayer-playback-rate-radio-group',\n    displayName: 'PlaybackRateRadioGroup',\n    elementClass: PlaybackRateRadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { PlaybackRateMenuButton as PlaybackRateMenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!PlaybackRateMenuButton | PlaybackRateMenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlaybackRateMenuButton = createComponent({\n    tagName: 'theoplayer-playback-rate-menu-button',\n    displayName: 'PlaybackRateMenuButton',\n    elementClass: PlaybackRateMenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { PlaybackRateMenu as PlaybackRateMenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\nimport type { CommonMenuProps } from './Menu';\n\nconst RawPlaybackRateMenu = createComponent({\n    tagName: 'theoplayer-playback-rate-menu',\n    displayName: 'PlaybackRateMenu',\n    elementClass: PlaybackRateMenuElement,\n    react: React\n});\n\nexport interface PlaybackRateMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<PlaybackRateMenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!PlaybackRateMenu | PlaybackRateMenu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlaybackRateMenu = (props: PlaybackRateMenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawPlaybackRateMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawPlaybackRateMenu>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { PlaybackRateDisplay as PlaybackRateDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!PlaybackRateDisplay | PlaybackRateDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PlaybackRateDisplay = createComponent({\n    tagName: 'theoplayer-playback-rate-display',\n    displayName: 'PlaybackRateDisplay',\n    elementClass: PlaybackRateDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { ActiveQualityDisplay as ActiveQualityDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!ActiveQualityDisplay | ActiveQualityDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ActiveQualityDisplay = createComponent({\n    tagName: 'theoplayer-active-quality-display',\n    displayName: 'ActiveQualityDisplay',\n    elementClass: ActiveQualityDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { QualityRadioButton as QualityRadioButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioButtonEvents } from './RadioButton';\n\n/**\n * See {@link @theoplayer/web-ui!QualityRadioButton | QualityRadioButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const QualityRadioButton = createComponent({\n    tagName: 'theoplayer-quality-radio-button',\n    displayName: 'QualityRadioButton',\n    elementClass: QualityRadioButtonElement,\n    react: React,\n    events: RadioButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { QualityRadioGroup as QualityRadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioGroupEvents } from './RadioGroup';\n\n/**\n * See {@link @theoplayer/web-ui!QualityRadioGroup | QualityRadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const QualityRadioGroup = createComponent({\n    tagName: 'theoplayer-quality-radio-group',\n    displayName: 'QualityRadioGroup',\n    elementClass: QualityRadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackStyleRadioGroup as TextTrackStyleRadioGroupElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RadioGroupEvents } from './RadioGroup';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackStyleRadioGroup | TextTrackStyleRadioGroup in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackStyleRadioGroup = createComponent({\n    tagName: 'theoplayer-text-track-style-radio-group',\n    displayName: 'TextTrackStyleRadioGroup',\n    elementClass: TextTrackStyleRadioGroupElement,\n    react: React,\n    events: RadioGroupEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackStyleResetButton as TextTrackStyleResetButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackStyleResetButton | TextTrackStyleResetButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackStyleResetButton = createComponent({\n    tagName: 'theoplayer-text-track-style-reset-button',\n    displayName: 'TextTrackStyleResetButton',\n    elementClass: TextTrackStyleResetButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { TextTrackStyleDisplay as TextTrackStyleDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackStyleDisplay | TextTrackStyleDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackStyleDisplay = createComponent({\n    tagName: 'theoplayer-text-track-style-display',\n    displayName: 'TextTrackStyleDisplay',\n    elementClass: TextTrackStyleDisplayElement,\n    react: React\n});\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { TextTrackStyleMenu as TextTrackStyleMenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\nimport type { CommonMenuProps } from './Menu';\n\nconst RawTextTrackStyleMenu = createComponent({\n    tagName: 'theoplayer-text-track-style-menu',\n    displayName: 'TextTrackStyleMenu',\n    elementClass: TextTrackStyleMenuElement,\n    react: React\n});\n\nexport interface TextTrackStyleMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<TextTrackStyleMenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!TextTrackStyleMenu | TextTrackStyleMenu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TextTrackStyleMenu = (props: TextTrackStyleMenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawTextTrackStyleMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawTextTrackStyleMenu>\n    );\n};\n","import { createComponent, type WebComponentProps } from '@lit/react';\nimport { SettingsMenu as SettingsMenuElement } from '@theoplayer/web-ui';\nimport type { PropsWithoutRef } from 'react';\nimport * as React from 'react';\nimport { Slotted } from '../slotted';\nimport type { CommonMenuProps } from './Menu';\n\nconst RawSettingsMenu = createComponent({\n    tagName: 'theoplayer-settings-menu',\n    displayName: 'SettingsMenu',\n    elementClass: SettingsMenuElement,\n    react: React\n});\n\nexport interface SettingsMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<SettingsMenuElement>> {}\n\n/**\n * See {@link @theoplayer/web-ui!SettingsMenu | SettingsMenu in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const SettingsMenu = (props: SettingsMenuProps) => {\n    const { heading, children, ...otherProps } = props;\n    return (\n        <RawSettingsMenu {...otherProps}>\n            <Slotted slot=\"heading\">{heading}</Slotted>\n            {children}\n        </RawSettingsMenu>\n    );\n};\n","import { createComponent } from '@lit/react';\nimport { SettingsMenuButton as SettingsMenuButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!SettingsMenuButton | SettingsMenuButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const SettingsMenuButton = createComponent({\n    tagName: 'theoplayer-settings-menu-button',\n    displayName: 'SettingsMenuButton',\n    elementClass: SettingsMenuButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { FullscreenButton as FullscreenButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!FullscreenButton | FullscreenButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const FullscreenButton = createComponent({\n    tagName: 'theoplayer-fullscreen-button',\n    displayName: 'FullscreenButton',\n    elementClass: FullscreenButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","export const RangeEvents = {\n    onChange: 'change',\n    onInput: 'input'\n} as const;\n","import { createComponent } from '@lit/react';\nimport { TimeRange as TimeRangeElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RangeEvents } from './Range';\n\n/**\n * See {@link @theoplayer/web-ui!TimeRange | TimeRange in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const TimeRange = createComponent({\n    tagName: 'theoplayer-time-range',\n    displayName: 'TimeRange',\n    elementClass: TimeRangeElement,\n    react: React,\n    events: RangeEvents\n});\n","import { createComponent } from '@lit/react';\nimport { VolumeRange as VolumeRangeElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { RangeEvents } from './Range';\n\n/**\n * See {@link @theoplayer/web-ui!VolumeRange | VolumeRange in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const VolumeRange = createComponent({\n    tagName: 'theoplayer-volume-range',\n    displayName: 'VolumeRange',\n    elementClass: VolumeRangeElement,\n    react: React,\n    events: RangeEvents\n});\n","import { createComponent } from '@lit/react';\nimport { ErrorDisplay as ErrorDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!ErrorDisplay | ErrorDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ErrorDisplay = createComponent({\n    tagName: 'theoplayer-error-display',\n    displayName: 'ErrorDisplay',\n    elementClass: ErrorDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { CastButton as CastButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!CastButton | CastButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const CastButton = createComponent({\n    tagName: 'theoplayer-cast-button',\n    displayName: 'CastButton',\n    elementClass: CastButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { ChromecastButton as ChromecastButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!ChromecastButton | ChromecastButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ChromecastButton = createComponent({\n    tagName: 'theoplayer-chromecast-button',\n    displayName: 'ChromecastButton',\n    elementClass: ChromecastButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { ChromecastDisplay as ChromecastDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!ChromecastDisplay | ChromecastDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const ChromecastDisplay = createComponent({\n    tagName: 'theoplayer-chromecast-display',\n    displayName: 'ChromecastDisplay',\n    elementClass: ChromecastDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { AirPlayButton as AirPlayButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!AirPlayButton | AirPlayButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AirPlayButton = createComponent({\n    tagName: 'theoplayer-airplay-button',\n    displayName: 'AirPlayButton',\n    elementClass: AirPlayButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { LoadingIndicator as LoadingIndicatorElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!LoadingIndicator | LoadingIndicator in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LoadingIndicator = createComponent({\n    tagName: 'theoplayer-loading-indicator',\n    displayName: 'LoadingIndicator',\n    elementClass: LoadingIndicatorElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { GestureReceiver as GestureReceiverElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!GestureReceiver | GestureReceiver in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const GestureReceiver = createComponent({\n    tagName: 'theoplayer-gesture-receiver',\n    displayName: 'GestureReceiver',\n    elementClass: GestureReceiverElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { PreviewTimeDisplay as PreviewTimeDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!PreviewTimeDisplay | PreviewTimeDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PreviewTimeDisplay = createComponent({\n    tagName: 'theoplayer-preview-time-display',\n    displayName: 'PreviewTimeDisplay',\n    elementClass: PreviewTimeDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { PreviewThumbnail as PreviewThumbnailElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!PreviewThumbnail | PreviewThumbnail in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const PreviewThumbnail = createComponent({\n    tagName: 'theoplayer-preview-thumbnail',\n    displayName: 'PreviewThumbnail',\n    elementClass: PreviewThumbnailElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { LiveButton as LiveButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from './Button';\n\n/**\n * See {@link @theoplayer/web-ui!LiveButton | LiveButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const LiveButton = createComponent({\n    tagName: 'theoplayer-live-button',\n    displayName: 'LiveButton',\n    elementClass: LiveButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { SlotContainer as SlotContainerElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!SlotContainer | SlotContainer in @theoplayer/web-ui}.\n *\n * @group Components\n * @internal\n */\nexport const SlotContainer = createComponent({\n    tagName: 'theoplayer-slot-container',\n    displayName: 'SlotContainer',\n    elementClass: SlotContainerElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { AdDisplay as AdDisplayElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!AdDisplay | AdDisplay in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AdDisplay = createComponent({\n    tagName: 'theoplayer-ad-display',\n    displayName: 'AdDisplay',\n    elementClass: AdDisplayElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { AdCountdown as AdCountdownElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\n\n/**\n * See {@link @theoplayer/web-ui!AdCountdown | AdCountdown in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AdCountdown = createComponent({\n    tagName: 'theoplayer-ad-countdown',\n    displayName: 'AdCountdown',\n    elementClass: AdCountdownElement,\n    react: React\n});\n","import { createComponent } from '@lit/react';\nimport { AdClickThroughButton as AdClickThroughButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from '../Button';\n\n/**\n * See {@link @theoplayer/web-ui!AdClickThroughButton | AdClickThroughButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AdClickThroughButton = createComponent({\n    tagName: 'theoplayer-ad-clickthrough-button',\n    displayName: 'AdClickThroughButton',\n    elementClass: AdClickThroughButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import { createComponent } from '@lit/react';\nimport { AdSkipButton as AdSkipButtonElement } from '@theoplayer/web-ui';\nimport * as React from 'react';\nimport { ButtonEvents } from '../Button';\n\n/**\n * See {@link @theoplayer/web-ui!AdSkipButton | AdSkipButton in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const AdSkipButton = createComponent({\n    tagName: 'theoplayer-ad-skip-button',\n    displayName: 'AdSkipButton',\n    elementClass: AdSkipButtonElement,\n    react: React,\n    events: ButtonEvents\n});\n","import * as React from 'react';\nimport { type PropsWithoutRef, type ReactNode, useState } from 'react';\nimport { UIContainer as UIContainerElement } from '@theoplayer/web-ui';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\nimport { createComponent, type WebComponentProps } from '@lit/react';\nimport { usePlayer } from './util';\nimport { PlayerContext } from './context';\nimport { type ChromecastButton, type ErrorDisplay, type Menu, type PlayButton, SlotContainer, type TimeRange } from './components';\n\nconst RawUIContainer = createComponent({\n    tagName: 'theoplayer-ui',\n    displayName: 'UIContainer',\n    elementClass: UIContainerElement,\n    react: React,\n    events: {\n        onReady: 'theoplayerready'\n    } as const\n});\n\nexport interface UIContainerProps extends PropsWithoutRef<WebComponentProps<UIContainerElement>> {\n    /**\n     * A slot for controls at the top of the player.\n     *\n     * Can be used to display the stream's title, or for a cast button ({@link ChromecastButton}).\n     */\n    topChrome?: ReactNode;\n    /**\n     * A slot for controls in the middle of the player (between the top and bottom chrome).\n     */\n    middleChrome?: ReactNode;\n    /**\n     * A slot for controls at the bottom of the player.\n     *\n     * Can be used for controls such as a play button ({@link PlayButton}) or a seek bar ({@link TimeRange}).\n     */\n    bottomChrome?: ReactNode;\n    /**\n     * A slot for controls centered on the player, on top of other controls.\n     */\n    centeredChrome?: ReactNode;\n    /**\n     * A slot for a loading indicator centered on the player, on top of other controls but behind the centered chrome.\n     */\n    centeredLoading?: ReactNode;\n    /**\n     * A slot for extra menus (see {@link Menu}).\n     */\n    menu?: ReactNode;\n    /**\n     * A slot for an error display, to show when the player encounters a fatal error (see {@link ErrorDisplay}).\n     */\n    error?: ReactNode;\n    /**\n     * Use a named slot instead, such as:\n     *  - {@link topChrome}\n     *  - {@link middleChrome}\n     *  - {@link bottomChrome}\n     *  - {@link centeredChrome}\n     *  - {@link centeredLoading}\n     *  - {@link menu}\n     *  - {@link error}\n     */\n    children?: never;\n    /**\n     * Called when the backing player is created.\n     *\n     * @param player\n     */\n    onReady?: (player: ChromelessPlayer) => void;\n}\n\n/**\n * The container component for a THEOplayer UI.\n *\n * This component provides a basic layout structure for a general player UI, and handles the creation and management\n * of a {@link theoplayer!ChromelessPlayer | THEOplayer player instance} for this UI.\n *\n * ## Usage\n *\n * 1. Create a `<UIContainer>` component, passing a valid player configuration as its `configuration` property\n *    and a valid stream source as its `source` property.\n *    Additionally, place your UI components into one of the slots of the `<UIContainer>`, such as\n *    ```jsx\n *    <UIContainer\n *        configuration={{\n *            license: 'your_license_goes_here',\n *            libraryLocation: '/path/to/node_modules/theoplayer/'\n *        }}\n *        source={{\n *            sources: [{ src: 'https://example.com/my_stream.m3u8', type: 'application/x-mpegurl' }]\n *        }}\n *        // ...\n *    />\n *    ```\n * 2. Place your UI components into one of the slots of the `<UIContainer>`, such as {@link UIContainerProps.bottomChrome}\n *    or {@link UIContainerProps.centeredChrome}. You can use the provided THEOplayer UI components\n *    (such as {@link PlayButton} or {@link TimeRange}), or use any of your own components.\n *    ```jsx\n *    <UIContainer\n *        // ...\n *        topChrome={<span class=\"title\">My awesome video</span>}\n *        centeredChrome={<PlayButton />}\n *        bottomChrome={\n *            <>\n *                <ControlBar>\n *                    <TimeRange />\n *                </ControlBar>\n *                <ControlBar>\n *                    <PlayButton />\n *                    <MuteButton />\n *                    <TimeDisplay />\n *                    <FullscreenButton />\n *                </ControlBar>\n *            </>\n *        }\n *    />\n *    ```\n *\n * ## Customization\n *\n * This component does not provide any UI components by default, you need to add all components as children of\n * one of the `<UIContainer>` slots. If you're looking for a simple out-of-the-box player experience instead,\n * see {@link DefaultUI}.\n *\n * See {@link @theoplayer/web-ui!UIContainer | UIContainer in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const UIContainer = (props: UIContainerProps) => {\n    const { topChrome, middleChrome, bottomChrome, centeredChrome, centeredLoading, menu, error, onReady, ...otherProps } = props;\n    const [ui, setUi] = useState<UIContainerElement | null>(null);\n    const player = usePlayer(ui, onReady);\n    return (\n        <RawUIContainer {...otherProps} ref={setUi}>\n            <PlayerContext.Provider value={player}>\n                {topChrome && <SlotContainer slot=\"top-chrome\">{topChrome}</SlotContainer>}\n                {middleChrome && <SlotContainer slot=\"middle-chrome\">{middleChrome}</SlotContainer>}\n                {centeredChrome && <SlotContainer slot=\"centered-chrome\">{centeredChrome}</SlotContainer>}\n                {centeredLoading && <SlotContainer slot=\"centered-loading\">{centeredLoading}</SlotContainer>}\n                {bottomChrome}\n                {menu && <SlotContainer slot=\"menu\">{menu}</SlotContainer>}\n                {error && <SlotContainer slot=\"error\">{error}</SlotContainer>}\n            </PlayerContext.Provider>\n        </RawUIContainer>\n    );\n};\n","import * as React from 'react';\nimport { type PropsWithoutRef, type ReactNode, useState } from 'react';\nimport { DefaultUI as DefaultUIElement } from '@theoplayer/web-ui';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\nimport { createComponent, type WebComponentProps } from '@lit/react';\nimport { usePlayer } from './util';\nimport { PlayerContext } from './context';\nimport { type Menu, SlotContainer } from './components';\n\nconst RawDefaultUI = createComponent({\n    tagName: 'theoplayer-default-ui',\n    displayName: 'DefaultUI',\n    elementClass: DefaultUIElement,\n    react: React,\n    events: {\n        onReady: 'theoplayerready'\n    } as const\n});\n\nexport interface DefaultUIProps extends PropsWithoutRef<Omit<WebComponentProps<DefaultUIElement>, 'title'>> {\n    /**\n     * A slot for the stream's title in the top control bar.\n     */\n    title?: ReactNode;\n    /**\n     * A slot for extra UI controls in the top control bar.\n     */\n    topControlBar?: ReactNode;\n    /**\n     * A slot for extra UI controls in the bottom control bar.\n     */\n    bottomControlBar?: ReactNode;\n    /**\n     * A slot for extra menus (see {@link Menu}).\n     */\n    menu?: ReactNode;\n    /**\n     * Use a named slot instead, such as:\n     *  - {@link title}\n     *  - {@link topControlBar}\n     *  - {@link bottomControlBar}\n     *  - {@link menu}\n     */\n    children?: never;\n    /**\n     * Called when the backing player is created.\n     *\n     * @param player\n     */\n    onReady?: (player: ChromelessPlayer) => void;\n}\n\n/**\n * A default UI for THEOplayer.\n *\n * This default UI provides a great player experience out-of-the-box, that works well on all types of devices\n * and for all types of streams. It provides all the common playback controls for playing, seeking,\n * changing languages and qualities. It also supports advertisements and casting.\n *\n * ## Usage\n *\n * 1. Create a `<DefaultUI>` component, passing a valid player configuration as its `configuration` property\n *    and a valid stream source as its `source` property.\n *    ```jsx\n *    <DefaultUI\n *        configuration={{\n *            license: 'your_license_goes_here',\n *            libraryLocation: '/path/to/node_modules/theoplayer/'\n *        }}\n *        source={{\n *            sources: [{ src: 'https://example.com/my_stream.m3u8', type: 'application/x-mpegurl' }]\n *        }}\n *    />\n *    ```\n * 2. Optionally, customize the player using CSS custom properties and/or extra controls.\n *\n * ## Customization\n *\n * The styling can be controlled using CSS custom properties (see {@link UIContainer}).\n * Additional controls can be added to the {@link DefaultUIProps.topControlBar}\n * and {@link DefaultUIProps.bottomControlBar} slots.\n * For more extensive customizations, we recommend defining your own custom UI using a {@link UIContainer}.\n *\n * See {@link @theoplayer/web-ui!DefaultUI | DefaultUI in @theoplayer/web-ui}.\n *\n * @group Components\n */\nexport const DefaultUI = (props: DefaultUIProps) => {\n    const { title, topControlBar, bottomControlBar, menu, onReady, ...otherProps } = props;\n    const [ui, setUi] = useState<DefaultUIElement | null>(null);\n    const player = usePlayer(ui, onReady);\n    return (\n        <RawDefaultUI {...otherProps} ref={setUi}>\n            <PlayerContext.Provider value={player}>\n                {title && <SlotContainer slot=\"title\">{title}</SlotContainer>}\n                {topControlBar && <SlotContainer slot=\"top-control-bar\">{topControlBar}</SlotContainer>}\n                {bottomControlBar && <SlotContainer slot=\"bottom-control-bar\">{bottomControlBar}</SlotContainer>}\n                {menu && <SlotContainer slot=\"menu\">{menu}</SlotContainer>}\n            </PlayerContext.Provider>\n        </RawDefaultUI>\n    );\n};\n","import * as React from 'react';\nimport { type PropsWithoutRef, type ReactNode, useState } from 'react';\nimport { THEOliveDefaultUI as THEOliveDefaultUIElement } from '@theoplayer/web-ui';\nimport type { ChromelessPlayer } from 'theoplayer/chromeless';\nimport { createComponent, type WebComponentProps } from '@lit/react';\nimport { usePlayer } from './util';\nimport { PlayerContext } from './context';\nimport { SlotContainer } from './components';\n\nconst RawTHEOliveDefaultUI = createComponent({\n    tagName: 'theolive-default-ui',\n    displayName: 'THEOliveDefaultUI',\n    elementClass: THEOliveDefaultUIElement,\n    react: React,\n    events: {\n        onReady: 'theoplayerready'\n    } as const\n});\n\nexport interface THEOliveDefaultUIProps extends PropsWithoutRef<WebComponentProps<THEOliveDefaultUIElement>> {\n    /**\n     * A slot for the loading announcement, shown before the publication is loaded.\n     */\n    loadingAnnouncement?: ReactNode;\n    /**\n     * A slot for the offline announcement, shown when all publications are offline.\n     */\n    offlineAnnouncement?: ReactNode;\n    /**\n     * Use a named slot instead, such as:\n     *  - {@link loadingAnnouncement}\n     *  - {@link offlineAnnouncement}\n     */\n    children?: never;\n    /**\n     * Called when the backing player is created.\n     *\n     * @param player\n     */\n    onReady?: (player: ChromelessPlayer) => void;\n}\n\n/**\n * A default UI for THEOlive.\n *\n * @group Components\n */\nexport const THEOliveDefaultUI = (props: THEOliveDefaultUIProps) => {\n    const { loadingAnnouncement, offlineAnnouncement, onReady, ...otherProps } = props;\n    const [ui, setUi] = useState<THEOliveDefaultUIElement | null>(null);\n    const player = usePlayer(ui, onReady);\n    return (\n        <RawTHEOliveDefaultUI {...otherProps} ref={setUi}>\n            <PlayerContext.Provider value={player}>\n                {loadingAnnouncement && <SlotContainer slot=\"loading-announcement\">{loadingAnnouncement}</SlotContainer>}\n                {offlineAnnouncement && <SlotContainer slot=\"offline-announcement\">{offlineAnnouncement}</SlotContainer>}\n            </PlayerContext.Provider>\n        </RawTHEOliveDefaultUI>\n    );\n};\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { PlayerEventMap } from 'theoplayer';\n\nconst TIME_CHANGE_EVENTS = ['timeupdate', 'seeking', 'seeked', 'emptied'] satisfies ReadonlyArray<keyof PlayerEventMap>;\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.currentTime | the player's current time}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useCurrentTime(): number {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener(TIME_CHANGE_EVENTS, callback);\n            return () => player?.removeEventListener(TIME_CHANGE_EVENTS, callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.currentTime : 0),\n        () => 0\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { PlayerEventMap } from 'theoplayer';\n\nconst DURATION_CHANGE_EVENTS = ['durationchange', 'emptied'] satisfies ReadonlyArray<keyof PlayerEventMap>;\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.duration | the player's duration}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useDuration(): number {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener(DURATION_CHANGE_EVENTS, callback);\n            return () => player?.removeEventListener(DURATION_CHANGE_EVENTS, callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.duration : NaN),\n        () => NaN\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.muted | the player's muted state}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useMuted(): boolean {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener('volumechange', callback);\n            return () => player?.removeEventListener('volumechange', callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.muted : false),\n        () => false\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { PlayerEventMap } from 'theoplayer';\n\nconst PAUSED_CHANGE_EVENTS = ['play', 'pause'] satisfies ReadonlyArray<keyof PlayerEventMap>;\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.paused | the player's paused state}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function usePaused(): boolean {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener(PAUSED_CHANGE_EVENTS, callback);\n            return () => player?.removeEventListener(PAUSED_CHANGE_EVENTS, callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.paused : true),\n        () => true\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { PlayerEventMap } from 'theoplayer';\n\nconst SEEKING_CHANGE_EVENTS = ['seeking', 'seeked', 'emptied'] satisfies ReadonlyArray<keyof PlayerEventMap>;\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.seeking | the player's seeking state}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useSeeking(): boolean {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener(SEEKING_CHANGE_EVENTS, callback);\n            return () => player?.removeEventListener(SEEKING_CHANGE_EVENTS, callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.seeking : false),\n        () => false\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\nimport type { SourceDescription } from 'theoplayer';\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.source | the player's source}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useSource(): SourceDescription | undefined {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener('sourcechange', callback);\n            return () => player?.removeEventListener('sourcechange', callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => player?.source,\n        () => undefined\n    );\n}\n","import { useCallback, useContext, useSyncExternalStore } from 'react';\nimport { PlayerContext } from '../context';\n\n/**\n * Returns {@link theoplayer!ChromelessPlayer.volume | the player's volume}, automatically updating whenever it changes.\n *\n * This hook must only be used in a component mounted inside a {@link DefaultUI} or {@link UIContainer},\n * or alternatively any other component that provides a {@link PlayerContext}.\n *\n * @group Hooks\n */\nexport function useVolume(): number {\n    const player = useContext(PlayerContext);\n    const subscribe = useCallback(\n        (callback: () => void) => {\n            player?.addEventListener('volumechange', callback);\n            return () => player?.removeEventListener('volumechange', callback);\n        },\n        [player]\n    );\n    return useSyncExternalStore(\n        subscribe,\n        () => (player ? player.volume : 1),\n        () => 1\n    );\n}\n","import { version as packageVersion } from '../package.json';\n\n/**\n * The version of Open Video UI for React.\n */\nexport const version: string = packageVersion;\n"],"names":["PlayerContext","createContext","undefined","usePlayer","ui","onReady","subscribeReady","useCallback","callback","addEventListener","removeEventListener","player","useSyncExternalStore","useEffect","ControlBar","createComponent","tagName","displayName","elementClass","ControlBarElement","react","React","ButtonEvents","onClick","Button","ButtonElement","events","LinkButton","LinkButtonElement","PlayButton","PlayButtonElement","MuteButton","MuteButtonElement","SeekButton","SeekButtonElement","TimeDisplay","TimeDisplayElement","DurationDisplay","DurationDisplayElement","RadioGroupEvents","onChange","RadioGroup","RadioGroupElement","RadioButtonEvents","onInput","RadioButton","RadioButtonElement","Slotted","param","slot","children","div","style","display","RawMenu","MenuElement","Menu","props","heading","otherProps","createElement","MenuGroup","MenuGroupElement","MenuButton","MenuButtonElement","CloseMenuButton","CloseMenuButtonElement","MediaTrackRadioButton","MediaTrackRadioButtonElement","TrackRadioGroup","TrackRadioGroupElement","TextTrackRadioButton","TextTrackRadioButtonElement","TextTrackOffRadioButton","TextTrackOffRadioButtonElement","RawLanguageMenu","LanguageMenuElement","LanguageMenu","LanguageMenuButton","LanguageMenuButtonElement","PlaybackRateRadioGroup","PlaybackRateRadioGroupElement","PlaybackRateMenuButton","PlaybackRateMenuButtonElement","RawPlaybackRateMenu","PlaybackRateMenuElement","PlaybackRateMenu","PlaybackRateDisplay","PlaybackRateDisplayElement","ActiveQualityDisplay","ActiveQualityDisplayElement","QualityRadioButton","QualityRadioButtonElement","QualityRadioGroup","QualityRadioGroupElement","TextTrackStyleRadioGroup","TextTrackStyleRadioGroupElement","TextTrackStyleResetButton","TextTrackStyleResetButtonElement","TextTrackStyleDisplay","TextTrackStyleDisplayElement","RawTextTrackStyleMenu","TextTrackStyleMenuElement","TextTrackStyleMenu","RawSettingsMenu","SettingsMenuElement","SettingsMenu","SettingsMenuButton","SettingsMenuButtonElement","FullscreenButton","FullscreenButtonElement","RangeEvents","TimeRange","TimeRangeElement","VolumeRange","VolumeRangeElement","ErrorDisplay","ErrorDisplayElement","CastButton","CastButtonElement","ChromecastButton","ChromecastButtonElement","ChromecastDisplay","ChromecastDisplayElement","AirPlayButton","AirPlayButtonElement","LoadingIndicator","LoadingIndicatorElement","GestureReceiver","GestureReceiverElement","PreviewTimeDisplay","PreviewTimeDisplayElement","PreviewThumbnail","PreviewThumbnailElement","LiveButton","LiveButtonElement","SlotContainer","SlotContainerElement","AdDisplay","AdDisplayElement","AdCountdown","AdCountdownElement","AdClickThroughButton","AdClickThroughButtonElement","AdSkipButton","AdSkipButtonElement","RawUIContainer","UIContainerElement","UIContainer","topChrome","middleChrome","bottomChrome","centeredChrome","centeredLoading","menu","error","setUi","useState","ref","Provider","value","RawDefaultUI","DefaultUIElement","DefaultUI","title","topControlBar","bottomControlBar","RawTHEOliveDefaultUI","THEOliveDefaultUIElement","THEOliveDefaultUI","loadingAnnouncement","offlineAnnouncement","TIME_CHANGE_EVENTS","useCurrentTime","useContext","subscribe","currentTime","DURATION_CHANGE_EVENTS","useDuration","duration","NaN","useMuted","muted","PAUSED_CHANGE_EVENTS","usePaused","paused","SEEKING_CHANGE_EVENTS","useSeeking","seeking","useSource","source","useVolume","volume","version"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoplayer/react-ui",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "React component library for the THEOplayer Web SDK",
   "main": "dist/THEOplayerReactUI.js",
   "module": "dist/THEOplayerReactUI.mjs",
@@ -52,12 +52,12 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.3",
-    "@theoplayer/web-ui": "^1.7.1"
+    "@theoplayer/web-ui": "^1.8.0"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17 || ^18",
     "react": "^16.3.0 || ^17 || ^18",
-    "theoplayer": "^6"
+    "theoplayer": "^7"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.1.0",
@@ -72,7 +72,7 @@
     "rollup": "^3.29.3",
     "rollup-plugin-dts": "^5.3.1",
     "rollup-plugin-swc3": "^0.8.2",
-    "theoplayer": "^6.0.0",
+    "theoplayer": "^7.0.0",
     "tslib": "^2.6.2",
     "typedoc": "^0.25.8",
     "typedoc-plugin-external-resolver": "^1.0.3",