@videojs/react 10.0.0-beta.8 → 10.0.0-rc.1

package/dist/default/internal/skins/default-live-video/skin.js

@@ -0,0 +1,34 @@
+import { Container } from "../shared/components/layout/container.js";
+import { ErrorDialog } from "../shared/components/feedback/error-dialog.js";
+import { Poster } from "../shared/components/layout/poster.js";
+import { LiveVideoGestures } from "../shared/skins/shared/live-video/gestures.js";
+import { LiveVideoHotkeys } from "../shared/skins/shared/live-video/hotkeys.js";
+import { BufferingIndicator } from "./components/feedback/buffering-indicator.js";
+import { DefaultLiveVideoControls } from "./controls.js";
+import { LiveVideoStatusIndicators } from "./skins/shared/live-video/status-indicators.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/default-live-video/skin.tsx
+/** @jsxImportSource react */
+function DefaultLiveVideoSkin({ children, className, renderPoster, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(Container, {
+		className: cn("video-skin", className),
+		"data-theme": "default",
+		"data-preset": "live-video",
+		...props,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(Poster, { children: renderPoster }),
+			/* @__PURE__ */ jsx(BufferingIndicator, {}),
+			/* @__PURE__ */ jsx(ErrorDialog, {}),
+			/* @__PURE__ */ jsx(DefaultLiveVideoControls, {}),
+			/* @__PURE__ */ jsx(LiveVideoHotkeys, {}),
+			/* @__PURE__ */ jsx(LiveVideoGestures, {}),
+			/* @__PURE__ */ jsx(LiveVideoStatusIndicators, {})
+		]
+	});
+}
+//#endregion
+export { DefaultLiveVideoSkin };
+
+//# sourceMappingURL=skin.js.map

package/dist/default/internal/skins/default-live-video/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../../src/internal/skins/default-live-video/skin.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { ErrorDialog } from '../shared/components/feedback/error-dialog';\nimport { Container } from '../shared/components/layout/container';\nimport { Poster } from '../shared/components/layout/poster';\nimport { LiveVideoGestures } from '../shared/skins/shared/live-video/gestures';\nimport { LiveVideoHotkeys } from '../shared/skins/shared/live-video/hotkeys';\nimport { BufferingIndicator } from './components/feedback/buffering-indicator';\nimport { DefaultLiveVideoControls } from './controls';\nimport { LiveVideoStatusIndicators } from './skins/shared/live-video/status-indicators';\n\nexport interface DefaultLiveVideoSkinProps extends Omit<NonNullable<ComponentProps<typeof Container>>, 'children'> {\n  children?: ReactNode;\n  renderPoster?: NonNullable<ComponentProps<typeof Poster>>['children'];\n}\n\nexport function DefaultLiveVideoSkin({ children, className, renderPoster, ...props }: DefaultLiveVideoSkinProps = {}) {\n  return (\n    <Container className={cn('video-skin', className)} data-theme=\"default\" data-preset=\"live-video\" {...props}>\n      {children}\n      <Poster>{renderPoster}</Poster>\n      <BufferingIndicator />\n      <ErrorDialog />\n      <DefaultLiveVideoControls />\n      <LiveVideoHotkeys />\n      <LiveVideoGestures />\n      <LiveVideoStatusIndicators />\n    </Container>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,qBAAqB,EAAE,UAAU,WAAW,cAAc,GAAG,UAAqC,CAAC,GAAG;CACpH,OACE,qBAAC,WAAD;EAAW,WAAW,GAAG,cAAc,SAAS;EAAG,cAAW;EAAU,eAAY;EAAa,GAAI;EAArG,UAAA;GACG;GACD,oBAAC,QAAD,EAAA,UAAS,aAAqB,CAAA;GAC9B,oBAAC,oBAAD,CAAqB,CAAA;GACrB,oBAAC,aAAD,CAAc,CAAA;GACd,oBAAC,0BAAD,CAA2B,CAAA;GAC3B,oBAAC,kBAAD,CAAmB,CAAA;GACnB,oBAAC,mBAAD,CAAoB,CAAA;GACpB,oBAAC,2BAAD,CAA4B,CAAA;EACnB;;AAEf"}

package/dist/default/internal/skins/default-live-video/skins/shared/live-video/status-indicators.js

@@ -0,0 +1,22 @@
+import { StatusAnnouncer } from "../../../../shared/components/feedback/status-announcer.js";
+import { PlaybackStatusIndicator, StatusIndicator } from "../../../components/feedback/status-indicator.js";
+import { VolumeIndicator } from "../../../components/feedback/volume-indicator.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/default-live-video/skins/shared/live-video/status-indicators.tsx
+/** @jsxImportSource react */
+function LiveVideoStatusIndicators({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StatusAnnouncer, {}), /* @__PURE__ */ jsxs("div", {
+		className: cn("video-status-indicators", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(VolumeIndicator, {}),
+			/* @__PURE__ */ jsx(StatusIndicator, {}),
+			/* @__PURE__ */ jsx(PlaybackStatusIndicator, {})
+		]
+	})] });
+}
+//#endregion
+export { LiveVideoStatusIndicators };
+
+//# sourceMappingURL=status-indicators.js.map

package/dist/default/internal/skins/default-live-video/skins/shared/live-video/status-indicators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicators.js","names":[],"sources":["../../../../../../../../src/internal/skins/default-live-video/skins/shared/live-video/status-indicators.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport type { ComponentProps } from 'react';\n\nimport { StatusAnnouncer } from '../../../../shared/components/feedback/status-announcer';\nimport { PlaybackStatusIndicator, StatusIndicator } from '../../../components/feedback/status-indicator';\nimport { VolumeIndicator } from '../../../components/feedback/volume-indicator';\n\nexport type LiveVideoStatusIndicatorsProps = Omit<ComponentProps<'div'>, 'children'>;\n\nexport function LiveVideoStatusIndicators({ className, ...props }: LiveVideoStatusIndicatorsProps = {}) {\n  return (\n    <>\n      <StatusAnnouncer />\n      <div className={cn('video-status-indicators', className)} {...props}>\n        <VolumeIndicator />\n        <StatusIndicator />\n        <PlaybackStatusIndicator />\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,0BAA0B,EAAE,WAAW,GAAG,UAA0C,CAAC,GAAG;CACtG,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,qBAAC,OAAD;EAAK,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;EAA9D,UAAA;GACE,oBAAC,iBAAD,CAAkB,CAAA;GAClB,oBAAC,iBAAD,CAAkB,CAAA;GAClB,oBAAC,yBAAD,CAA0B,CAAA;EACvB;CACL,CAAA,CAAA,EAAA,CAAA;AAEN"}

package/dist/default/internal/skins/default-video/components/buttons/airplay-button.js

@@ -0,0 +1,20 @@
+import { AirPlayButton as AirPlayButton$1 } from "../../../../../ui/airplay-button/airplay-button.js";
+import ForwardRef from "../../../../../icons/dist/react/default/airplay-enter.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/airplay-exit.js";
+import { Button } from "../../../shared/components/buttons/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/buttons/airplay-button.tsx
+/** @jsxImportSource react */
+function AirPlayButton({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(AirPlayButton$1, {
+		render: /* @__PURE__ */ jsx(Button, {}),
+		className: (state) => cn("media-airplay-button", resolveClassName(className, state)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-airplay-button-enter-icon") }), /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-airplay-button-exit-icon") })]
+	});
+}
+//#endregion
+export { AirPlayButton };
+
+//# sourceMappingURL=airplay-button.js.map

package/dist/default/internal/skins/default-video/components/buttons/airplay-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"airplay-button.js","names":["AirPlayButtonPrimitive","AirPlayEnterIconPrimitive","AirPlayExitIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/airplay-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  AirPlayEnterIcon as AirPlayEnterIconPrimitive,\n  AirPlayExitIcon as AirPlayExitIconPrimitive,\n} from '../../../../../icons/index';\nimport { AirPlayButton as AirPlayButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type AirPlayButtonProps = Omit<AirPlayButtonPrimitive.Props, 'children'>;\n\nexport function AirPlayButton({ className, ...props }: AirPlayButtonProps = {}) {\n  return (\n    <AirPlayButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-airplay-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <AirPlayEnterIconPrimitive className={cn('media-button-icon', 'media-airplay-button-enter-icon')} />\n      <AirPlayExitIconPrimitive className={cn('media-button-icon', 'media-airplay-button-exit-icon')} />\n    </AirPlayButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,cAAc,EAAE,WAAW,GAAG,UAA8B,CAAC,GAAG;CAC9E,OACE,qBAACA,iBAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,wBAAwB,iBAAiB,WAAW,KAAK,CAAC;EACnF,GAAI;EAHN,UAAA,CAKE,oBAACC,YAAD,EAA2B,WAAW,GAAG,qBAAqB,iCAAiC,EAAI,CAAA,GACnG,oBAACC,cAAD,EAA0B,WAAW,GAAG,qBAAqB,gCAAgC,EAAI,CAAA,CAC3E;;AAE5B"}

package/dist/default/internal/skins/default-video/components/buttons/captions-button.js

@@ -0,0 +1,20 @@
+import { CaptionsButton as CaptionsButton$1 } from "../../../../../ui/captions-button/captions-button.js";
+import ForwardRef from "../../../../../icons/dist/react/default/captions-off.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/captions-on.js";
+import { Button } from "../../../shared/components/buttons/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/buttons/captions-button.tsx
+/** @jsxImportSource react */
+function CaptionsButton({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(CaptionsButton$1, {
+		render: /* @__PURE__ */ jsx(Button, {}),
+		className: (state) => cn("media-captions-button", resolveClassName(className, state)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-captions-button-off-icon") }), /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-captions-button-on-icon") })]
+	});
+}
+//#endregion
+export { CaptionsButton };
+
+//# sourceMappingURL=captions-button.js.map

package/dist/default/internal/skins/default-video/components/buttons/captions-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captions-button.js","names":["CaptionsButtonPrimitive","CaptionsOffIconPrimitive","CaptionsOnIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/captions-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  CaptionsOffIcon as CaptionsOffIconPrimitive,\n  CaptionsOnIcon as CaptionsOnIconPrimitive,\n} from '../../../../../icons/index';\nimport { CaptionsButton as CaptionsButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type CaptionsButtonProps = Omit<CaptionsButtonPrimitive.Props, 'children'>;\n\nexport function CaptionsButton({ className, ...props }: CaptionsButtonProps = {}) {\n  return (\n    <CaptionsButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-captions-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <CaptionsOffIconPrimitive className={cn('media-button-icon', 'media-captions-button-off-icon')} />\n      <CaptionsOnIconPrimitive className={cn('media-button-icon', 'media-captions-button-on-icon')} />\n    </CaptionsButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,eAAe,EAAE,WAAW,GAAG,UAA+B,CAAC,GAAG;CAChF,OACE,qBAACA,kBAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,yBAAyB,iBAAiB,WAAW,KAAK,CAAC;EACpF,GAAI;EAHN,UAAA,CAKE,oBAACC,YAAD,EAA0B,WAAW,GAAG,qBAAqB,gCAAgC,EAAI,CAAA,GACjG,oBAACC,cAAD,EAAyB,WAAW,GAAG,qBAAqB,+BAA+B,EAAI,CAAA,CACxE;;AAE7B"}

package/dist/default/internal/skins/default-video/components/buttons/cast-button.js

@@ -0,0 +1,20 @@
+import { CastButton as CastButton$1 } from "../../../../../ui/cast-button/cast-button.js";
+import ForwardRef from "../../../../../icons/dist/react/default/cast-enter.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/cast-exit.js";
+import { Button } from "../../../shared/components/buttons/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/buttons/cast-button.tsx
+/** @jsxImportSource react */
+function CastButton({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(CastButton$1, {
+		render: /* @__PURE__ */ jsx(Button, {}),
+		className: (state) => cn("media-cast-button", resolveClassName(className, state)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-cast-button-enter-icon") }), /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-cast-button-exit-icon") })]
+	});
+}
+//#endregion
+export { CastButton };
+
+//# sourceMappingURL=cast-button.js.map

package/dist/default/internal/skins/default-video/components/buttons/cast-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cast-button.js","names":["CastButtonPrimitive","CastEnterIconPrimitive","CastExitIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/cast-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  CastEnterIcon as CastEnterIconPrimitive,\n  CastExitIcon as CastExitIconPrimitive,\n} from '../../../../../icons/index';\nimport { CastButton as CastButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type CastButtonProps = Omit<CastButtonPrimitive.Props, 'children'>;\n\nexport function CastButton({ className, ...props }: CastButtonProps = {}) {\n  return (\n    <CastButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-cast-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <CastEnterIconPrimitive className={cn('media-button-icon', 'media-cast-button-enter-icon')} />\n      <CastExitIconPrimitive className={cn('media-button-icon', 'media-cast-button-exit-icon')} />\n    </CastButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,WAAW,EAAE,WAAW,GAAG,UAA2B,CAAC,GAAG;CACxE,OACE,qBAACA,cAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAChF,GAAI;EAHN,UAAA,CAKE,oBAACC,YAAD,EAAwB,WAAW,GAAG,qBAAqB,8BAA8B,EAAI,CAAA,GAC7F,oBAACC,cAAD,EAAuB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA,CACxE;;AAEzB"}

package/dist/default/internal/skins/default-video/components/buttons/fullscreen-button.js

@@ -0,0 +1,20 @@
+import { FullscreenButton as FullscreenButton$1 } from "../../../../../ui/fullscreen-button/fullscreen-button.js";
+import ForwardRef from "../../../../../icons/dist/react/default/fullscreen-enter.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/fullscreen-exit.js";
+import { Button } from "../../../shared/components/buttons/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/buttons/fullscreen-button.tsx
+/** @jsxImportSource react */
+function FullscreenButton({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(FullscreenButton$1, {
+		render: /* @__PURE__ */ jsx(Button, {}),
+		className: (state) => cn("media-fullscreen-button", resolveClassName(className, state)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-fullscreen-button-enter-icon") }), /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-fullscreen-button-exit-icon") })]
+	});
+}
+//#endregion
+export { FullscreenButton };
+
+//# sourceMappingURL=fullscreen-button.js.map

package/dist/default/internal/skins/default-video/components/buttons/fullscreen-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button.js","names":["FullscreenButtonPrimitive","FullscreenEnterIconPrimitive","FullscreenExitIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/fullscreen-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  FullscreenEnterIcon as FullscreenEnterIconPrimitive,\n  FullscreenExitIcon as FullscreenExitIconPrimitive,\n} from '../../../../../icons/index';\nimport { FullscreenButton as FullscreenButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type FullscreenButtonProps = Omit<FullscreenButtonPrimitive.Props, 'children'>;\n\nexport function FullscreenButton({ className, ...props }: FullscreenButtonProps = {}) {\n  return (\n    <FullscreenButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-fullscreen-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <FullscreenEnterIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-enter-icon')} />\n      <FullscreenExitIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-exit-icon')} />\n    </FullscreenButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,UAAiC,CAAC,GAAG;CACpF,OACE,qBAACA,oBAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,2BAA2B,iBAAiB,WAAW,KAAK,CAAC;EACtF,GAAI;EAHN,UAAA,CAKE,oBAACC,YAAD,EAA8B,WAAW,GAAG,qBAAqB,oCAAoC,EAAI,CAAA,GACzG,oBAACC,cAAD,EAA6B,WAAW,GAAG,qBAAqB,mCAAmC,EAAI,CAAA,CAC9E;;AAE/B"}

package/dist/default/internal/skins/default-video/components/buttons/mute-button.js

@@ -0,0 +1,25 @@
+import { MuteButton as MuteButton$1 } from "../../../../../ui/mute-button/mute-button.js";
+import ForwardRef from "../../../../../icons/dist/react/default/volume-high.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/volume-low.js";
+import ForwardRef$2 from "../../../../../icons/dist/react/default/volume-off.js";
+import { Button } from "../../../shared/components/buttons/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/buttons/mute-button.tsx
+/** @jsxImportSource react */
+function MuteButton({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(MuteButton$1, {
+		render: /* @__PURE__ */ jsx(Button, {}),
+		className: (state) => cn("media-mute-button", resolveClassName(className, state)),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ForwardRef$2, { className: cn("media-button-icon", "media-mute-button-off-icon") }),
+			/* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-mute-button-low-icon") }),
+			/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-mute-button-high-icon") })
+		]
+	});
+}
+//#endregion
+export { MuteButton };
+
+//# sourceMappingURL=mute-button.js.map

package/dist/default/internal/skins/default-video/components/buttons/mute-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button.js","names":["MuteButtonPrimitive","VolumeOffIconPrimitive","VolumeLowIconPrimitive","VolumeHighIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/mute-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  VolumeOffIcon as VolumeOffIconPrimitive,\n  VolumeLowIcon as VolumeLowIconPrimitive,\n  VolumeHighIcon as VolumeHighIconPrimitive,\n} from '../../../../../icons/index';\nimport { MuteButton as MuteButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type MuteButtonProps = Omit<MuteButtonPrimitive.Props, 'children'>;\n\nexport function MuteButton({ className, ...props }: MuteButtonProps = {}) {\n  return (\n    <MuteButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-mute-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />\n      <VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />\n      <VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />\n    </MuteButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,WAAW,EAAE,WAAW,GAAG,UAA2B,CAAC,GAAG;CACxE,OACE,qBAACA,cAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAChF,GAAI;EAHN,UAAA;GAKE,oBAACC,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;GAC3F,oBAACC,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;GAC3F,oBAACC,YAAD,EAAyB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;EAC1E;;AAEzB"}

package/dist/default/internal/skins/default-video/components/buttons/pip-button.js

@@ -0,0 +1,20 @@
+import { PiPButton as PiPButton$1 } from "../../../../../ui/pip-button/pip-button.js";
+import ForwardRef from "../../../../../icons/dist/react/default/pip-enter.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/pip-exit.js";
+import { Button } from "../../../shared/components/buttons/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/buttons/pip-button.tsx
+/** @jsxImportSource react */
+function PiPButton({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(PiPButton$1, {
+		render: /* @__PURE__ */ jsx(Button, {}),
+		className: (state) => cn("media-pip-button", resolveClassName(className, state)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-pip-button-enter-icon") }), /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-pip-button-exit-icon") })]
+	});
+}
+//#endregion
+export { PiPButton };
+
+//# sourceMappingURL=pip-button.js.map

package/dist/default/internal/skins/default-video/components/buttons/pip-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip-button.js","names":["PiPButtonPrimitive","PipEnterIconPrimitive","PipExitIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/pip-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { PipEnterIcon as PipEnterIconPrimitive, PipExitIcon as PipExitIconPrimitive } from '../../../../../icons/index';\nimport { PiPButton as PiPButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type PiPButtonProps = Omit<PiPButtonPrimitive.Props, 'children'>;\n\nexport function PiPButton({ className, ...props }: PiPButtonProps = {}) {\n  return (\n    <PiPButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-pip-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <PipEnterIconPrimitive className={cn('media-button-icon', 'media-pip-button-enter-icon')} />\n      <PipExitIconPrimitive className={cn('media-button-icon', 'media-pip-button-exit-icon')} />\n    </PiPButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,UAAU,EAAE,WAAW,GAAG,UAA0B,CAAC,GAAG;CACtE,OACE,qBAACA,aAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,oBAAoB,iBAAiB,WAAW,KAAK,CAAC;EAC/E,GAAI;EAHN,UAAA,CAKE,oBAACC,YAAD,EAAuB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA,GAC3F,oBAACC,cAAD,EAAsB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA,CACvE;;AAExB"}

package/dist/default/internal/skins/default-video/components/buttons/play-button.js

@@ -0,0 +1,25 @@
+import { PlayButton as PlayButton$1 } from "../../../../../ui/play-button/play-button.js";
+import ForwardRef from "../../../../../icons/dist/react/default/pause.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/play.js";
+import ForwardRef$2 from "../../../../../icons/dist/react/default/restart.js";
+import { Button } from "../../../shared/components/buttons/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/buttons/play-button.tsx
+/** @jsxImportSource react */
+function PlayButton({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(PlayButton$1, {
+		render: /* @__PURE__ */ jsx(Button, {}),
+		className: (state) => cn("media-play-button", resolveClassName(className, state)),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ForwardRef$2, { className: cn("media-button-icon", "media-play-button-restart-icon") }),
+			/* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-play-button-play-icon") }),
+			/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-play-button-pause-icon") })
+		]
+	});
+}
+//#endregion
+export { PlayButton };
+
+//# sourceMappingURL=play-button.js.map

package/dist/default/internal/skins/default-video/components/buttons/play-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.js","names":["PlayButtonPrimitive","RestartIconPrimitive","PlayIconPrimitive","PauseIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/play-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  RestartIcon as RestartIconPrimitive,\n  PlayIcon as PlayIconPrimitive,\n  PauseIcon as PauseIconPrimitive,\n} from '../../../../../icons/index';\nimport { PlayButton as PlayButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type PlayButtonProps = Omit<PlayButtonPrimitive.Props, 'children'>;\n\nexport function PlayButton({ className, ...props }: PlayButtonProps = {}) {\n  return (\n    <PlayButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-play-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <RestartIconPrimitive className={cn('media-button-icon', 'media-play-button-restart-icon')} />\n      <PlayIconPrimitive className={cn('media-button-icon', 'media-play-button-play-icon')} />\n      <PauseIconPrimitive className={cn('media-button-icon', 'media-play-button-pause-icon')} />\n    </PlayButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,WAAW,EAAE,WAAW,GAAG,UAA2B,CAAC,GAAG;CACxE,OACE,qBAACA,cAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAChF,GAAI;EAHN,UAAA;GAKE,oBAACC,cAAD,EAAsB,WAAW,GAAG,qBAAqB,gCAAgC,EAAI,CAAA;GAC7F,oBAACC,cAAD,EAAmB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;GACvF,oBAACC,YAAD,EAAoB,WAAW,GAAG,qBAAqB,8BAA8B,EAAI,CAAA;EACtE;;AAEzB"}

package/dist/default/internal/skins/default-video/components/controls/volume-popover.js

@@ -0,0 +1,32 @@
+import { VolumePopoverPopup } from "../../../../../ui/volume-popover/volume-popover-popup.js";
+import { VolumePopoverRoot } from "../../../../../ui/volume-popover/volume-popover-root.js";
+import { VolumePopoverTrigger } from "../../../../../ui/volume-popover/volume-popover-trigger.js";
+import { ButtonTooltip } from "../../../shared/components/buttons/button-tooltip.js";
+import { VolumeSlider } from "../../../shared/components/sliders/volume-slider.js";
+import { MuteButton } from "../buttons/mute-button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/controls/volume-popover.tsx
+function VolumePopover({ className, showTooltip = false, side = "top", orientation = "vertical", ...props } = {}) {
+	return /* @__PURE__ */ jsxs(VolumePopoverRoot, {
+		openOnHover: true,
+		delay: 200,
+		closeDelay: 100,
+		side,
+		...props,
+		children: [/* @__PURE__ */ jsx(ButtonTooltip, {
+			delay: 0,
+			disabled: !showTooltip,
+			sticky: true,
+			side: "top",
+			children: /* @__PURE__ */ jsx(VolumePopoverTrigger, { render: /* @__PURE__ */ jsx(MuteButton, { className: cn(className) }) })
+		}), /* @__PURE__ */ jsx(VolumePopoverPopup, {
+			className: cn("media-popup", "media-popup-safe-area", "media-popup-transition", "media-popup-surface", "media-volume-popover"),
+			children: /* @__PURE__ */ jsx(VolumeSlider, { orientation })
+		})]
+	});
+}
+//#endregion
+export { VolumePopover };
+
+//# sourceMappingURL=volume-popover.js.map

package/dist/default/internal/skins/default-video/components/controls/volume-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover.js","names":["VolumePopoverPrimitive.Root","VolumePopoverPrimitive.Trigger","VolumePopoverPrimitive.Popup"],"sources":["../../../../../../../src/internal/skins/default-video/components/controls/volume-popover.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport type { VolumeSliderProps as CoreVolumeSliderProps } from '@videojs/core';\nimport { cn } from '@videojs/utils/style';\n\nimport { VolumePopover as VolumePopoverPrimitive } from '../../../../skin-primitives';\nimport type { ClassValue } from '../../../../skin-primitives';\nimport { ButtonTooltip } from '../../../shared/components/buttons/button-tooltip';\nimport { VolumeSlider } from '../../../shared/components/sliders/volume-slider';\nimport { MuteButton } from '../buttons/mute-button';\n\nexport interface VolumePopoverProps extends Omit<VolumePopoverPrimitive.RootProps, 'children'> {\n  className?: ClassValue;\n  orientation?: CoreVolumeSliderProps['orientation'];\n  showTooltip?: boolean;\n}\n\nexport function VolumePopover({\n  className,\n  showTooltip = false,\n  side = 'top',\n  orientation = 'vertical',\n  ...props\n}: VolumePopoverProps = {}) {\n  return (\n    <VolumePopoverPrimitive.Root openOnHover delay={200} closeDelay={100} side={side} {...props}>\n      <ButtonTooltip delay={0} disabled={!showTooltip} sticky side=\"top\">\n        <VolumePopoverPrimitive.Trigger render={<MuteButton className={cn(className)} />} />\n      </ButtonTooltip>\n      <VolumePopoverPrimitive.Popup\n        className={cn(\n          'media-popup',\n          'media-popup-safe-area',\n          'media-popup-transition',\n          'media-popup-surface',\n          'media-volume-popover'\n        )}\n      >\n        <VolumeSlider orientation={orientation} />\n      </VolumePopoverPrimitive.Popup>\n    </VolumePopoverPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,cAAc,EAC5B,WACA,cAAc,OACd,OAAO,OACP,cAAc,YACd,GAAG,UACmB,CAAC,GAAG;CAC1B,OACE,qBAACA,mBAAD;EAA6B,aAAA;EAAY,OAAO;EAAK,YAAY;EAAW;EAAM,GAAI;EAAtF,UAAA,CACE,oBAAC,eAAD;GAAe,OAAO;GAAG,UAAU,CAAC;GAAa,QAAA;GAAO,MAAK;GAC3D,UAAA,oBAACC,sBAAD,EAAgC,QAAQ,oBAAC,YAAD,EAAY,WAAW,GAAG,SAAS,EAAI,CAAA,EAAI,CAAA;EACtE,CAAA,GACf,oBAACC,oBAAD;GACE,WAAW,GACT,eACA,yBACA,0BACA,uBACA,sBACF;GAEA,UAAA,oBAAC,cAAD,EAA2B,YAAc,CAAA;EACb,CAAA,CACH;;AAEjC"}

package/dist/default/internal/skins/default-video/components/feedback/buffering-indicator.js

@@ -0,0 +1,17 @@
+import { BufferingIndicator as BufferingIndicator$1 } from "../../../../../ui/buffering-indicator/buffering-indicator.js";
+import ForwardRef from "../../../../../icons/dist/react/default/spinner.js";
+import { jsx } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/feedback/buffering-indicator.tsx
+/** @jsxImportSource react */
+function BufferingIndicator({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsx(BufferingIndicator$1, {
+		className: (state) => cn("media-buffering-indicator", resolveClassName(className, state)),
+		...props,
+		children: /* @__PURE__ */ jsx(ForwardRef, { className: "media-buffering-indicator-spinner-icon" })
+	});
+}
+//#endregion
+export { BufferingIndicator };
+
+//# sourceMappingURL=buffering-indicator.js.map

package/dist/default/internal/skins/default-video/components/feedback/buffering-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffering-indicator.js","names":["BufferingIndicatorPrimitive","SpinnerIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/feedback/buffering-indicator.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { SpinnerIcon as SpinnerIconPrimitive } from '../../../../../icons/index';\nimport { BufferingIndicator as BufferingIndicatorPrimitive } from '../../../../skin-primitives';\n\nexport type BufferingIndicatorProps = Omit<BufferingIndicatorPrimitive.Props, 'children'>;\n\nexport function BufferingIndicator({ className, ...props }: BufferingIndicatorProps = {}) {\n  return (\n    <BufferingIndicatorPrimitive\n      className={(state) => cn('media-buffering-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <SpinnerIconPrimitive className={'media-buffering-indicator-spinner-icon'} />\n    </BufferingIndicatorPrimitive>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,UAAmC,CAAC,GAAG;CACxF,OACE,oBAACA,sBAAD;EACE,YAAY,UAAU,GAAG,6BAA6B,iBAAiB,WAAW,KAAK,CAAC;EACxF,GAAI;EAEJ,UAAA,oBAACC,YAAD,EAAsB,WAAW,yCAA2C,CAAA;CACjD,CAAA;AAEjC"}

package/dist/default/internal/skins/default-video/components/feedback/seek-indicator.js

@@ -0,0 +1,18 @@
+import { SeekIndicatorRoot } from "../../../../../ui/seek-indicator/seek-indicator-root.js";
+import { SeekIndicatorValue } from "../../../../../ui/seek-indicator/seek-indicator-value.js";
+import ForwardRef from "../../../../../icons/dist/react/default/chevron.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/feedback/seek-indicator.tsx
+/** @jsxImportSource react */
+function SeekIndicator({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(SeekIndicatorRoot, {
+		className: (state) => cn("media-seek-indicator", resolveClassName(className, state)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ForwardRef, { className: "media-seek-indicator-icon" }), /* @__PURE__ */ jsx(SeekIndicatorValue, { className: "media-seek-indicator-value" })]
+	});
+}
+//#endregion
+export { SeekIndicator };
+
+//# sourceMappingURL=seek-indicator.js.map

package/dist/default/internal/skins/default-video/components/feedback/seek-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator.js","names":["SeekIndicatorPrimitive.Root","ChevronIconPrimitive","SeekIndicatorPrimitive.Value"],"sources":["../../../../../../../src/internal/skins/default-video/components/feedback/seek-indicator.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { ChevronIcon as ChevronIconPrimitive } from '../../../../../icons/index';\nimport { SeekIndicator as SeekIndicatorPrimitive } from '../../../../skin-primitives';\n\nexport type SeekIndicatorProps = Omit<SeekIndicatorPrimitive.RootProps, 'children'>;\n\nexport function SeekIndicator({ className, ...props }: SeekIndicatorProps = {}) {\n  return (\n    <SeekIndicatorPrimitive.Root\n      className={(state) => cn('media-seek-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <ChevronIconPrimitive className={'media-seek-indicator-icon'} />\n      <SeekIndicatorPrimitive.Value className={'media-seek-indicator-value'} />\n    </SeekIndicatorPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,cAAc,EAAE,WAAW,GAAG,UAA8B,CAAC,GAAG;CAC9E,OACE,qBAACA,mBAAD;EACE,YAAY,UAAU,GAAG,wBAAwB,iBAAiB,WAAW,KAAK,CAAC;EACnF,GAAI;EAFN,UAAA,CAIE,oBAACC,YAAD,EAAsB,WAAW,4BAA8B,CAAA,GAC/D,oBAACC,oBAAD,EAA8B,WAAW,6BAA+B,CAAA,CAC7C;;AAEjC"}

package/dist/default/internal/skins/default-video/components/feedback/status-indicator.js

@@ -0,0 +1,51 @@
+import { StatusIndicatorRoot } from "../../../../../ui/status-indicator/status-indicator-root.js";
+import { StatusIndicatorValue } from "../../../../../ui/status-indicator/status-indicator-value.js";
+import ForwardRef from "../../../../../icons/dist/react/default/captions-off.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/captions-on.js";
+import ForwardRef$2 from "../../../../../icons/dist/react/default/fullscreen-enter.js";
+import ForwardRef$3 from "../../../../../icons/dist/react/default/fullscreen-exit.js";
+import ForwardRef$4 from "../../../../../icons/dist/react/default/pause.js";
+import ForwardRef$5 from "../../../../../icons/dist/react/default/pip-enter.js";
+import ForwardRef$6 from "../../../../../icons/dist/react/default/pip-exit.js";
+import ForwardRef$7 from "../../../../../icons/dist/react/default/play.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/feedback/status-indicator.tsx
+/** @jsxImportSource react */
+const TOP_STATUS_ACTIONS = [
+	"toggleSubtitles",
+	"toggleFullscreen",
+	"togglePictureInPicture"
+];
+const PLAYBACK_STATUS_ACTIONS = ["togglePaused"];
+function StatusIndicator({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsx(StatusIndicatorRoot, {
+		actions: TOP_STATUS_ACTIONS,
+		className: (state) => cn("media-indicator", "media-status-indicator", resolveClassName(className, state)),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("media-indicator-content", "media-status-indicator-content"),
+			children: [
+				/* @__PURE__ */ jsx(ForwardRef$1, { className: "media-status-indicator-captions-on-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef, { className: "media-status-indicator-captions-off-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$2, { className: "media-status-indicator-fullscreen-enter-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$3, { className: "media-status-indicator-fullscreen-exit-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$5, { className: "media-status-indicator-pip-enter-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$6, { className: "media-status-indicator-pip-exit-icon" }),
+				/* @__PURE__ */ jsx(StatusIndicatorValue, { className: "media-status-indicator-value" })
+			]
+		})
+	});
+}
+function PlaybackStatusIndicator({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(StatusIndicatorRoot, {
+		actions: PLAYBACK_STATUS_ACTIONS,
+		className: (state) => cn("media-playback-status-indicator", resolveClassName(className, state)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ForwardRef$7, { className: "media-playback-status-indicator-play-icon" }), /* @__PURE__ */ jsx(ForwardRef$4, { className: "media-playback-status-indicator-pause-icon" })]
+	});
+}
+//#endregion
+export { PlaybackStatusIndicator, StatusIndicator };
+
+//# sourceMappingURL=status-indicator.js.map

package/dist/default/internal/skins/default-video/components/feedback/status-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator.js","names":["StatusIndicatorPrimitive.Root","CaptionsOnIconPrimitive","CaptionsOffIconPrimitive","FullscreenEnterIconPrimitive","FullscreenExitIconPrimitive","PipEnterIconPrimitive","PipExitIconPrimitive","StatusIndicatorPrimitive.Value","PlayIconPrimitive","PauseIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/feedback/status-indicator.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  CaptionsOnIcon as CaptionsOnIconPrimitive,\n  CaptionsOffIcon as CaptionsOffIconPrimitive,\n  FullscreenEnterIcon as FullscreenEnterIconPrimitive,\n  FullscreenExitIcon as FullscreenExitIconPrimitive,\n  PipEnterIcon as PipEnterIconPrimitive,\n  PipExitIcon as PipExitIconPrimitive,\n  PlayIcon as PlayIconPrimitive,\n  PauseIcon as PauseIconPrimitive,\n} from '../../../../../icons/index';\nimport { StatusIndicator as StatusIndicatorPrimitive } from '../../../../skin-primitives';\n\nconst TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;\n\nconst PLAYBACK_STATUS_ACTIONS = ['togglePaused'] as const;\n\nexport type StatusIndicatorProps = Omit<StatusIndicatorPrimitive.RootProps, 'children'>;\n\nexport function StatusIndicator({ className, ...props }: StatusIndicatorProps = {}) {\n  return (\n    <StatusIndicatorPrimitive.Root\n      actions={TOP_STATUS_ACTIONS}\n      className={(state) => cn('media-indicator', 'media-status-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <div className={cn('media-indicator-content', 'media-status-indicator-content')}>\n        <CaptionsOnIconPrimitive className={'media-status-indicator-captions-on-icon'} />\n        <CaptionsOffIconPrimitive className={'media-status-indicator-captions-off-icon'} />\n        <FullscreenEnterIconPrimitive className={'media-status-indicator-fullscreen-enter-icon'} />\n        <FullscreenExitIconPrimitive className={'media-status-indicator-fullscreen-exit-icon'} />\n        <PipEnterIconPrimitive className={'media-status-indicator-pip-enter-icon'} />\n        <PipExitIconPrimitive className={'media-status-indicator-pip-exit-icon'} />\n        <StatusIndicatorPrimitive.Value className={'media-status-indicator-value'} />\n      </div>\n    </StatusIndicatorPrimitive.Root>\n  );\n}\n\nexport type PlaybackStatusIndicatorProps = Omit<StatusIndicatorPrimitive.RootProps, 'children'>;\n\nexport function PlaybackStatusIndicator({ className, ...props }: PlaybackStatusIndicatorProps = {}) {\n  return (\n    <StatusIndicatorPrimitive.Root\n      actions={PLAYBACK_STATUS_ACTIONS}\n      className={(state) => cn('media-playback-status-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <PlayIconPrimitive className={'media-playback-status-indicator-play-icon'} />\n      <PauseIconPrimitive className={'media-playback-status-indicator-pause-icon'} />\n    </StatusIndicatorPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,qBAAqB;CAAC;CAAmB;CAAoB;AAAwB;AAE3F,MAAM,0BAA0B,CAAC,cAAc;AAI/C,SAAgB,gBAAgB,EAAE,WAAW,GAAG,UAAgC,CAAC,GAAG;CAClF,OACE,oBAACA,qBAAD;EACE,SAAS;EACT,YAAY,UAAU,GAAG,mBAAmB,0BAA0B,iBAAiB,WAAW,KAAK,CAAC;EACxG,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,WAAW,GAAG,2BAA2B,gCAAgC;GAA9E,UAAA;IACE,oBAACC,cAAD,EAAyB,WAAW,0CAA4C,CAAA;IAChF,oBAACC,YAAD,EAA0B,WAAW,2CAA6C,CAAA;IAClF,oBAACC,cAAD,EAA8B,WAAW,+CAAiD,CAAA;IAC1F,oBAACC,cAAD,EAA6B,WAAW,8CAAgD,CAAA;IACxF,oBAACC,cAAD,EAAuB,WAAW,wCAA0C,CAAA;IAC5E,oBAACC,cAAD,EAAsB,WAAW,uCAAyC,CAAA;IAC1E,oBAACC,sBAAD,EAAgC,WAAW,+BAAiC,CAAA;GACzE;;CACwB,CAAA;AAEnC;AAIA,SAAgB,wBAAwB,EAAE,WAAW,GAAG,UAAwC,CAAC,GAAG;CAClG,OACE,qBAACP,qBAAD;EACE,SAAS;EACT,YAAY,UAAU,GAAG,mCAAmC,iBAAiB,WAAW,KAAK,CAAC;EAC9F,GAAI;EAHN,UAAA,CAKE,oBAACQ,cAAD,EAAmB,WAAW,4CAA8C,CAAA,GAC5E,oBAACC,cAAD,EAAoB,WAAW,6CAA+C,CAAA,CACjD;;AAEnC"}

package/dist/default/internal/skins/default-video/components/feedback/volume-indicator.js

@@ -0,0 +1,29 @@
+import { VolumeIndicatorFill } from "../../../../../ui/volume-indicator/volume-indicator-fill.js";
+import { VolumeIndicatorRoot } from "../../../../../ui/volume-indicator/volume-indicator-root.js";
+import { VolumeIndicatorValue } from "../../../../../ui/volume-indicator/volume-indicator-value.js";
+import ForwardRef from "../../../../../icons/dist/react/default/volume-high.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/volume-low.js";
+import ForwardRef$2 from "../../../../../icons/dist/react/default/volume-off.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/feedback/volume-indicator.tsx
+/** @jsxImportSource react */
+function VolumeIndicator({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsx(VolumeIndicatorRoot, {
+		className: (state) => cn("media-indicator", "media-volume-indicator", resolveClassName(className, state)),
+		...props,
+		children: /* @__PURE__ */ jsxs(VolumeIndicatorFill, {
+			className: cn("media-indicator-content", "media-volume-indicator-fill"),
+			children: [
+				/* @__PURE__ */ jsx(ForwardRef, { className: "media-volume-indicator-high-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$1, { className: "media-volume-indicator-low-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$2, { className: "media-volume-indicator-off-icon" }),
+				/* @__PURE__ */ jsx(VolumeIndicatorValue, { className: "media-volume-indicator-value" })
+			]
+		})
+	});
+}
+//#endregion
+export { VolumeIndicator };
+
+//# sourceMappingURL=volume-indicator.js.map

package/dist/default/internal/skins/default-video/components/feedback/volume-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator.js","names":["VolumeIndicatorPrimitive.Root","VolumeIndicatorPrimitive.Fill","VolumeHighIconPrimitive","VolumeLowIconPrimitive","VolumeOffIconPrimitive","VolumeIndicatorPrimitive.Value"],"sources":["../../../../../../../src/internal/skins/default-video/components/feedback/volume-indicator.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  VolumeHighIcon as VolumeHighIconPrimitive,\n  VolumeLowIcon as VolumeLowIconPrimitive,\n  VolumeOffIcon as VolumeOffIconPrimitive,\n} from '../../../../../icons/index';\nimport { VolumeIndicator as VolumeIndicatorPrimitive } from '../../../../skin-primitives';\n\nexport type VolumeIndicatorProps = Omit<VolumeIndicatorPrimitive.RootProps, 'children'>;\n\nexport function VolumeIndicator({ className, ...props }: VolumeIndicatorProps = {}) {\n  return (\n    <VolumeIndicatorPrimitive.Root\n      className={(state) => cn('media-indicator', 'media-volume-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <VolumeIndicatorPrimitive.Fill className={cn('media-indicator-content', 'media-volume-indicator-fill')}>\n        <VolumeHighIconPrimitive className={'media-volume-indicator-high-icon'} />\n        <VolumeLowIconPrimitive className={'media-volume-indicator-low-icon'} />\n        <VolumeOffIconPrimitive className={'media-volume-indicator-off-icon'} />\n        <VolumeIndicatorPrimitive.Value className={'media-volume-indicator-value'} />\n      </VolumeIndicatorPrimitive.Fill>\n    </VolumeIndicatorPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;AAaA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,UAAgC,CAAC,GAAG;CAClF,OACE,oBAACA,qBAAD;EACE,YAAY,UAAU,GAAG,mBAAmB,0BAA0B,iBAAiB,WAAW,KAAK,CAAC;EACxG,GAAI;EAEJ,UAAA,qBAACC,qBAAD;GAA+B,WAAW,GAAG,2BAA2B,6BAA6B;GAArG,UAAA;IACE,oBAACC,YAAD,EAAyB,WAAW,mCAAqC,CAAA;IACzE,oBAACC,cAAD,EAAwB,WAAW,kCAAoC,CAAA;IACvE,oBAACC,cAAD,EAAwB,WAAW,kCAAoC,CAAA;IACvE,oBAACC,sBAAD,EAAgC,WAAW,+BAAiC,CAAA;GAC/C;;CACF,CAAA;AAEnC"}

package/dist/default/internal/skins/default-video/components/menus/audio-track-menu.js

@@ -0,0 +1,56 @@
+import { Text } from "../../../../../i18n/text.js";
+import { AudioTrackRadioGroupOptions, AudioTrackRadioGroupRoot, AudioTrackRadioGroupValue } from "../../../../../ui/audio-track-radio-group/audio-track-radio-group.js";
+import { MenuContent } from "../../../../../ui/menu/menu-content.js";
+import { MenuItem } from "../../../../../ui/menu/menu-item.js";
+import { MenuRoot } from "../../../../../ui/menu/menu-root.js";
+import { MenuSeparator } from "../../../../../ui/menu/menu-separator.js";
+import { MenuTrigger } from "../../../../../ui/menu/menu-trigger.js";
+import ForwardRef from "../../../../../icons/dist/react/default/speech.js";
+import { MenuChevron } from "./menu-chevron.js";
+import { RadioItem } from "./radio-item.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { audioText } from "@videojs/core/i18n/text/menu";
+//#region src/internal/skins/default-video/components/menus/audio-track-menu.tsx
+/** @jsxImportSource react */
+function AudioTrackMenu({ ...props } = {}) {
+	return /* @__PURE__ */ jsx(MenuRoot, {
+		...props,
+		children: /* @__PURE__ */ jsxs(AudioTrackRadioGroupRoot, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+			className: "media-menu-trigger-item",
+			children: [
+				/* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-trigger-item-icon" }),
+				/* @__PURE__ */ jsx(Text, {
+					token: audioText.key,
+					children: audioText.text
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "media-menu-hint",
+					children: [/* @__PURE__ */ jsx(AudioTrackRadioGroupValue, { className: "media-menu-hint-label" }), /* @__PURE__ */ jsx(MenuChevron, {})]
+				})
+			]
+		}), /* @__PURE__ */ jsxs(MenuContent, {
+			className: "media-menu-content",
+			children: [
+				/* @__PURE__ */ jsxs(MenuItem, {
+					className: "media-menu-back-item",
+					children: [/* @__PURE__ */ jsx(MenuChevron, { back: true }), /* @__PURE__ */ jsx(Text, {
+						token: audioText.key,
+						children: audioText.text
+					})]
+				}),
+				/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu-separator" }),
+				/* @__PURE__ */ jsx(AudioTrackRadioGroupOptions, {
+					className: "media-menu-radio-group",
+					renderItem: (props, item) => /* @__PURE__ */ jsx(RadioItem, {
+						...props,
+						children: /* @__PURE__ */ jsx("span", { children: item.label })
+					})
+				})
+			]
+		})] })
+	});
+}
+//#endregion
+export { AudioTrackMenu };
+
+//# sourceMappingURL=audio-track-menu.js.map

package/dist/default/internal/skins/default-video/components/menus/audio-track-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-track-menu.js","names":["Menu.Root","AudioTrackRadioGroup.Root","Menu.Trigger","SpeechIconPrimitive","TextPrimitive","AudioTrackRadioGroup.Value","Menu.Content","Menu.Item","Menu.Separator","AudioTrackRadioGroup.Options"],"sources":["../../../../../../../src/internal/skins/default-video/components/menus/audio-track-menu.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport { audioText } from '@videojs/core/i18n/text/menu';\n\nimport { SpeechIcon as SpeechIconPrimitive } from '../../../../../icons/index';\nimport { Menu } from '../../../../skin-primitives';\nimport { Text as TextPrimitive } from '../../../../skin-primitives';\nimport { AudioTrackRadioGroup } from '../../../../skin-primitives';\nimport { MenuChevron } from './menu-chevron';\nimport { RadioItem } from './radio-item';\n\nexport type AudioTrackMenuProps = Omit<Menu.RootProps, 'children'>;\n\nexport function AudioTrackMenu({ ...props }: AudioTrackMenuProps = {}) {\n  return (\n    <Menu.Root {...props}>\n      <AudioTrackRadioGroup.Root>\n        <Menu.Trigger className={'media-menu-trigger-item'}>\n          <SpeechIconPrimitive className={'media-menu-trigger-item-icon'} />\n          <TextPrimitive token={audioText.key}>{audioText.text}</TextPrimitive>\n          <span className={'media-menu-hint'}>\n            <AudioTrackRadioGroup.Value className={'media-menu-hint-label'} />\n            <MenuChevron />\n          </span>\n        </Menu.Trigger>\n        <Menu.Content className={'media-menu-content'}>\n          <Menu.Item className={'media-menu-back-item'}>\n            <MenuChevron back />\n            <TextPrimitive token={audioText.key}>{audioText.text}</TextPrimitive>\n          </Menu.Item>\n          <Menu.Separator className={'media-menu-separator'} />\n          <AudioTrackRadioGroup.Options\n            className={'media-menu-radio-group'}\n            renderItem={(props, item) => (\n              <RadioItem {...props}>\n                <span>{item.label}</span>\n              </RadioItem>\n            )}\n          ></AudioTrackRadioGroup.Options>\n        </Menu.Content>\n      </AudioTrackRadioGroup.Root>\n    </Menu.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,SAAgB,eAAe,EAAE,GAAG,UAA+B,CAAC,GAAG;CACrE,OACE,oBAACA,UAAD;EAAW,GAAI;EACb,UAAA,qBAACC,0BAAD,EAAA,UAAA,CACE,qBAACC,aAAD;GAAc,WAAW;GAAzB,UAAA;IACE,oBAACC,YAAD,EAAqB,WAAW,+BAAiC,CAAA;IACjE,oBAACC,MAAD;KAAe,OAAO,UAAU;KAAM,UAAA,UAAU;IAAoB,CAAA;IACpE,qBAAC,QAAD;KAAM,WAAW;KAAjB,UAAA,CACE,oBAACC,2BAAD,EAA4B,WAAW,wBAA0B,CAAA,GACjE,oBAAC,aAAD,CAAc,CAAA,CACV;;GACM;EACd,CAAA,GAAA,qBAACC,aAAD;GAAc,WAAW;GAAzB,UAAA;IACE,qBAACC,UAAD;KAAW,WAAW;KAAtB,UAAA,CACE,oBAAC,aAAD,EAAa,MAAA,KAAM,CAAA,GACnB,oBAACH,MAAD;MAAe,OAAO,UAAU;MAAM,UAAA,UAAU;KAAoB,CAAA,CAC3D;;IACX,oBAACI,eAAD,EAAgB,WAAW,uBAAyB,CAAA;IACpD,oBAACC,6BAAD;KACE,WAAW;KACX,aAAa,OAAO,SAClB,oBAAC,WAAD;MAAW,GAAI;MACb,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;KACf,CAAA;IAEgB,CAAA;GACnB;EACW,CAAA,CAAA,EAAA,CAAA;CAClB,CAAA;AAEf"}

package/dist/default/internal/skins/default-video/components/menus/captions-submenu.js

@@ -0,0 +1,56 @@
+import { Text } from "../../../../../i18n/text.js";
+import { CaptionsRadioGroupOptions, CaptionsRadioGroupRoot, CaptionsRadioGroupValue } from "../../../../../ui/captions-radio-group/captions-radio-group.js";
+import { MenuContent } from "../../../../../ui/menu/menu-content.js";
+import { MenuItem } from "../../../../../ui/menu/menu-item.js";
+import { MenuRoot } from "../../../../../ui/menu/menu-root.js";
+import { MenuSeparator } from "../../../../../ui/menu/menu-separator.js";
+import { MenuTrigger } from "../../../../../ui/menu/menu-trigger.js";
+import ForwardRef from "../../../../../icons/dist/react/default/captions-off.js";
+import { MenuChevron } from "./menu-chevron.js";
+import { RadioItem } from "./radio-item.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { captionsText } from "@videojs/core/i18n/text/menu";
+//#region src/internal/skins/default-video/components/menus/captions-submenu.tsx
+/** @jsxImportSource react */
+function CaptionsSubmenu({ ...props } = {}) {
+	return /* @__PURE__ */ jsx(MenuRoot, {
+		...props,
+		children: /* @__PURE__ */ jsxs(CaptionsRadioGroupRoot, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+			className: "media-menu-trigger-item",
+			children: [
+				/* @__PURE__ */ jsx(ForwardRef, { className: "media-menu-trigger-item-icon" }),
+				/* @__PURE__ */ jsx(Text, {
+					token: captionsText.key,
+					children: captionsText.text
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "media-menu-hint",
+					children: [/* @__PURE__ */ jsx(CaptionsRadioGroupValue, { className: "media-menu-hint-label" }), /* @__PURE__ */ jsx(MenuChevron, {})]
+				})
+			]
+		}), /* @__PURE__ */ jsxs(MenuContent, {
+			className: "media-menu-content",
+			children: [
+				/* @__PURE__ */ jsxs(MenuItem, {
+					className: "media-menu-back-item",
+					children: [/* @__PURE__ */ jsx(MenuChevron, { back: true }), /* @__PURE__ */ jsx(Text, {
+						token: captionsText.key,
+						children: captionsText.text
+					})]
+				}),
+				/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu-separator" }),
+				/* @__PURE__ */ jsx(CaptionsRadioGroupOptions, {
+					className: "media-menu-radio-group",
+					renderItem: (props, item) => /* @__PURE__ */ jsx(RadioItem, {
+						...props,
+						children: /* @__PURE__ */ jsx("span", { children: item.label })
+					})
+				})
+			]
+		})] })
+	});
+}
+//#endregion
+export { CaptionsSubmenu };
+
+//# sourceMappingURL=captions-submenu.js.map