@videojs/react 10.0.0-beta.25 → 10.0.0-beta.27

package/dist/dev/ui/menu/menu-back.js

@@ -1,30 +0,0 @@
-"use client";
-import { renderElement } from "../../utils/use-render.js";
-import { useSubMenuContext } from "./context.js";
-import { forwardRef, useCallback } from "react";
-//#region src/ui/menu/menu-back.tsx
-/** Button that navigates back to the parent menu view. Place at the top of a submenu Content. */
-const MenuBack = forwardRef(function MenuBack({ render, className, style, label = "Back", onClick, ...elementProps }, forwardedRef) {
-	const parentMenu = useSubMenuContext()?.parentMenu ?? null;
-	const handleClick = useCallback((event) => {
-		onClick?.(event);
-		parentMenu?.pop();
-	}, [onClick, parentMenu]);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state: parentMenu?.state ?? {},
-		ref: forwardedRef,
-		props: [{
-			type: "button",
-			"aria-label": label,
-			onClick: handleClick
-		}, elementProps]
-	});
-});
-//#endregion
-export { MenuBack };
-
-//# sourceMappingURL=menu-back.js.map

package/dist/dev/ui/menu/menu-back.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-back.js","names":[],"sources":["../../../../src/ui/menu/menu-back.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSubMenuContext } from './context';\n\nexport interface MenuBackProps extends UIComponentProps<'button', MenuState> {\n  /** Accessible label for the back button. */\n  label?: string;\n}\n\n/** Button that navigates back to the parent menu view. Place at the top of a submenu Content. */\nexport const MenuBack = forwardRef<HTMLButtonElement, MenuBackProps>(function MenuBack(\n  { render, className, style, label = 'Back', onClick, ...elementProps },\n  forwardedRef\n) {\n  const subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      parentMenu?.pop();\n    },\n    [onClick, parentMenu]\n  );\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state: parentMenu?.state ?? ({} as MenuState),\n      ref: forwardedRef,\n      props: [\n        {\n          type: 'button' as const,\n          'aria-label': label,\n          onClick: handleClick,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuBack {\n  export type Props = MenuBackProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAeA,MAAa,WAAW,WAA6C,SAAS,SAC5E,EAAE,QAAQ,WAAW,OAAO,QAAQ,QAAQ,SAAS,GAAG,gBACxD,cACA;CAEA,MAAM,aADa,mBAAmB,EACP,cAAc;CAE7C,MAAM,cAAc,aACjB,UAA+C;AAC9C,YAAU,MAAM;AAChB,cAAY,KAAK;IAEnB,CAAC,SAAS,WAAW,CACtB;AAED,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,YAAY,SAAU,EAAE;EAC/B,KAAK;EACL,OAAO,CACL;GACE,MAAM;GACN,cAAc;GACd,SAAS;GACV,EACD,aACD;EACF,CACF;EACD"}

package/dist/dev/ui/menu/menu-item-setting-provider.js

@@ -1,72 +0,0 @@
-"use client";
-import { MenuItemSettingContextProvider } from "./context.js";
-import { useAudioTrackOptions } from "../audio-track/use-audio-track-options.js";
-import { useCaptionsOptions } from "../captions-radio-group/use-captions-options.js";
-import { usePlaybackRateOptions } from "../playback-rate/use-playback-rate-options.js";
-import { useQualityOptions } from "../quality/use-quality-options.js";
-import { jsx } from "react/jsx-runtime";
-import { CAPTIONS_OFF_VALUE } from "@videojs/core";
-//#region src/ui/menu/menu-item-setting-provider.tsx
-function PlaybackRateMenuItemSettingProvider({ children }) {
-	const playbackRate = usePlaybackRateOptions();
-	if (!playbackRate) return children;
-	const { state, options, value } = playbackRate;
-	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
-		value: {
-			type: "playback-rate",
-			label: options.find((option) => option.value === value)?.label ?? "",
-			availability: state.availability
-		},
-		children
-	});
-}
-function CaptionsMenuItemSettingProvider({ children }) {
-	const captions = useCaptionsOptions();
-	if (!captions) return children;
-	const { state, options, value } = captions;
-	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
-		value: {
-			type: "captions",
-			label: value === CAPTIONS_OFF_VALUE ? "Off" : options.find((option) => option.value === value)?.label ?? "Off",
-			availability: state.availability
-		},
-		children
-	});
-}
-function QualityMenuItemSettingProvider({ children }) {
-	const quality = useQualityOptions();
-	if (!quality) return children;
-	const { state, options, value } = quality;
-	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
-		value: {
-			type: "quality",
-			label: options.find((option) => option.value === value)?.label ?? "Auto",
-			availability: state.availability
-		},
-		children
-	});
-}
-function AudioTrackMenuItemSettingProvider({ children }) {
-	const audioTrack = useAudioTrackOptions();
-	if (!audioTrack) return children;
-	const { state, options, value } = audioTrack;
-	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
-		value: {
-			type: "audio-track",
-			label: options.find((option) => option.value === value)?.label ?? "",
-			availability: state.availability
-		},
-		children
-	});
-}
-function MenuItemSettingProvider({ type, children }) {
-	if (type === "playback-rate") return /* @__PURE__ */ jsx(PlaybackRateMenuItemSettingProvider, { children });
-	if (type === "quality") return /* @__PURE__ */ jsx(QualityMenuItemSettingProvider, { children });
-	if (type === "audio-track") return /* @__PURE__ */ jsx(AudioTrackMenuItemSettingProvider, { children });
-	if (type === "captions") return /* @__PURE__ */ jsx(CaptionsMenuItemSettingProvider, { children });
-	return children;
-}
-//#endregion
-export { MenuItemSettingProvider };
-
-//# sourceMappingURL=menu-item-setting-provider.js.map

package/dist/dev/ui/menu/menu-item-setting-provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-item-setting-provider.js","names":[],"sources":["../../../../src/ui/menu/menu-item-setting-provider.tsx"],"sourcesContent":["'use client';\n\nimport { CAPTIONS_OFF_VALUE } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { useAudioTrackOptions } from '../audio-track/use-audio-track-options';\nimport { useCaptionsOptions } from '../captions-radio-group/use-captions-options';\nimport { usePlaybackRateOptions } from '../playback-rate/use-playback-rate-options';\nimport { useQualityOptions } from '../quality/use-quality-options';\nimport { MenuItemSettingContextProvider } from './context';\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuItemSettingProviderProps {\n  type: MenuItemSettingType;\n  children: ReactNode;\n}\n\nfunction PlaybackRateMenuItemSettingProvider({ children }: { children: ReactNode }): ReactNode {\n  const playbackRate = usePlaybackRateOptions();\n  if (!playbackRate) return children;\n\n  const { state, options, value } = playbackRate;\n  const label = options.find((option) => option.value === value)?.label ?? '';\n\n  return (\n    <MenuItemSettingContextProvider value={{ type: 'playback-rate', label, availability: state.availability }}>\n      {children}\n    </MenuItemSettingContextProvider>\n  );\n}\n\nfunction CaptionsMenuItemSettingProvider({ children }: { children: ReactNode }): ReactNode {\n  const captions = useCaptionsOptions();\n  if (!captions) return children;\n\n  const { state, options, value } = captions;\n  const label =\n    value === CAPTIONS_OFF_VALUE ? 'Off' : (options.find((option) => option.value === value)?.label ?? 'Off');\n\n  return (\n    <MenuItemSettingContextProvider value={{ type: 'captions', label, availability: state.availability }}>\n      {children}\n    </MenuItemSettingContextProvider>\n  );\n}\n\nfunction QualityMenuItemSettingProvider({ children }: { children: ReactNode }): ReactNode {\n  const quality = useQualityOptions();\n  if (!quality) return children;\n\n  const { state, options, value } = quality;\n  const label = options.find((option) => option.value === value)?.label ?? 'Auto';\n\n  return (\n    <MenuItemSettingContextProvider value={{ type: 'quality', label, availability: state.availability }}>\n      {children}\n    </MenuItemSettingContextProvider>\n  );\n}\n\nfunction AudioTrackMenuItemSettingProvider({ children }: { children: ReactNode }): ReactNode {\n  const audioTrack = useAudioTrackOptions();\n  if (!audioTrack) return children;\n\n  const { state, options, value } = audioTrack;\n  const label = options.find((option) => option.value === value)?.label ?? '';\n\n  return (\n    <MenuItemSettingContextProvider value={{ type: 'audio-track', label, availability: state.availability }}>\n      {children}\n    </MenuItemSettingContextProvider>\n  );\n}\n\nexport function MenuItemSettingProvider({ type, children }: MenuItemSettingProviderProps): ReactNode {\n  if (type === 'playback-rate')\n    return <PlaybackRateMenuItemSettingProvider>{children}</PlaybackRateMenuItemSettingProvider>;\n  if (type === 'quality') return <QualityMenuItemSettingProvider>{children}</QualityMenuItemSettingProvider>;\n  if (type === 'audio-track') return <AudioTrackMenuItemSettingProvider>{children}</AudioTrackMenuItemSettingProvider>;\n  if (type === 'captions') return <CaptionsMenuItemSettingProvider>{children}</CaptionsMenuItemSettingProvider>;\n  return children;\n}\n"],"mappings":";;;;;;;;;AAiBA,SAAS,oCAAoC,EAAE,YAAgD;CAC7F,MAAM,eAAe,wBAAwB;AAC7C,KAAI,CAAC,aAAc,QAAO;CAE1B,MAAM,EAAE,OAAO,SAAS,UAAU;AAGlC,QACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAiB,OAHpD,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,EAAE,SAAS;GAGA,cAAc,MAAM;GAAc;EACtG;EAC8B,CAAA;;AAIrC,SAAS,gCAAgC,EAAE,YAAgD;CACzF,MAAM,WAAW,oBAAoB;AACrC,KAAI,CAAC,SAAU,QAAO;CAEtB,MAAM,EAAE,OAAO,SAAS,UAAU;AAIlC,QACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAY,OAH3D,UAAU,qBAAqB,QAAS,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,EAAE,SAAS;GAGjC,cAAc,MAAM;GAAc;EACjG;EAC8B,CAAA;;AAIrC,SAAS,+BAA+B,EAAE,YAAgD;CACxF,MAAM,UAAU,mBAAmB;AACnC,KAAI,CAAC,QAAS,QAAO;CAErB,MAAM,EAAE,OAAO,SAAS,UAAU;AAGlC,QACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAW,OAH9C,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,EAAE,SAAS;GAGN,cAAc,MAAM;GAAc;EAChG;EAC8B,CAAA;;AAIrC,SAAS,kCAAkC,EAAE,YAAgD;CAC3F,MAAM,aAAa,sBAAsB;AACzC,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,EAAE,OAAO,SAAS,UAAU;AAGlC,QACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAe,OAHlD,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,EAAE,SAAS;GAGF,cAAc,MAAM;GAAc;EACpG;EAC8B,CAAA;;AAIrC,SAAgB,wBAAwB,EAAE,MAAM,YAAqD;AACnG,KAAI,SAAS,gBACX,QAAO,oBAAC,qCAAD,EAAsC,UAA+C,CAAA;AAC9F,KAAI,SAAS,UAAW,QAAO,oBAAC,gCAAD,EAAiC,UAA0C,CAAA;AAC1G,KAAI,SAAS,cAAe,QAAO,oBAAC,mCAAD,EAAoC,UAA6C,CAAA;AACpH,KAAI,SAAS,WAAY,QAAO,oBAAC,iCAAD,EAAkC,UAA2C,CAAA;AAC7G,QAAO"}

package/dist/dev/ui/menu/menu-item-type.d.ts

@@ -1,5 +0,0 @@
-//#region src/ui/menu/menu-item-type.d.ts
-type MenuItemSettingType = 'playback-rate' | 'quality' | 'audio-track' | 'captions';
-//#endregion
-export { MenuItemSettingType };
-//# sourceMappingURL=menu-item-type.d.ts.map

package/dist/dev/ui/menu/menu-item-type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-item-type.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-type.ts"],"mappings":";KAAY,mBAAA"}

package/dist/dev/ui/menu/menu-item-value.d.ts

@@ -1,14 +0,0 @@
-import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
-import { MenuState } from "@videojs/core";
-
-//#region src/ui/menu/menu-item-value.d.ts
-interface MenuItemValueProps extends UIComponentProps<'span', MenuState> {}
-/** Displays the current value for a settings menu item from `Menu.Item` or `Menu.Trigger` context. */
-declare const MenuItemValue: _$react.ForwardRefExoticComponent<Omit<MenuItemValueProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
-declare namespace MenuItemValue {
-  type Props = MenuItemValueProps;
-}
-//#endregion
-export { MenuItemValue, MenuItemValueProps };
-//# sourceMappingURL=menu-item-value.d.ts.map

package/dist/dev/ui/menu/menu-item-value.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-item-value.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-value.tsx"],"mappings":";;;;;UASiB,kBAAA,SAA2B,gBAAA,SAAyB,SAAA;;cAGxD,aAAA,EAAa,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,kBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAoBT,aAAA;EAAA,KACH,KAAA,GAAQ,kBAAA;AAAA"}

package/dist/dev/ui/menu/menu-item-value.js

@@ -1,28 +0,0 @@
-"use client";
-import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext, useOptionalMenuItemSettingContext } from "./context.js";
-import { forwardRef } from "react";
-//#region src/ui/menu/menu-item-value.tsx
-/** Displays the current value for a settings menu item from `Menu.Item` or `Menu.Trigger` context. */
-const MenuItemValue = forwardRef(function MenuItemValue({ render, className, style, ...elementProps }, forwardedRef) {
-	const { state, stateAttrMap } = useMenuContext();
-	const setting = useOptionalMenuItemSettingContext();
-	if (!setting) return null;
-	return renderElement("span", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap,
-		ref: forwardedRef,
-		props: [{
-			"aria-live": "off",
-			children: setting.label
-		}, elementProps]
-	});
-});
-//#endregion
-export { MenuItemValue };
-
-//# sourceMappingURL=menu-item-value.js.map

package/dist/dev/ui/menu/menu-item-value.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-item-value.js","names":[],"sources":["../../../../src/ui/menu/menu-item-value.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useOptionalMenuItemSettingContext } from './context';\n\nexport interface MenuItemValueProps extends UIComponentProps<'span', MenuState> {}\n\n/** Displays the current value for a settings menu item from `Menu.Item` or `Menu.Trigger` context. */\nexport const MenuItemValue = forwardRef<HTMLSpanElement, MenuItemValueProps>(function MenuItemValue(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useMenuContext();\n  const setting = useOptionalMenuItemSettingContext();\n  if (!setting) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ 'aria-live': 'off' as const, children: setting.label }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuItemValue {\n  export type Props = MenuItemValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAAgD,SAAS,cACpF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,gBAAgB;CAChD,MAAM,UAAU,mCAAmC;AACnD,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,aAAa;GAAgB,UAAU,QAAQ;GAAO,EAAE,aAAa;EAChF,CACF;EACD"}

package/dist/dev/ui/menu/menu-view.d.ts

@@ -1,15 +0,0 @@
-import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
-import { MenuState } from "@videojs/core";
-
-//#region src/ui/menu/menu-view.d.ts
-interface MenuViewProps extends UIComponentProps<'div', MenuState> {}
-/** Root menu view inside the menu viewport. */
-declare const MenuView: _$react.ForwardRefExoticComponent<Omit<MenuViewProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
-declare namespace MenuView {
-  type Props = MenuViewProps;
-  type State = MenuState;
-}
-//#endregion
-export { MenuView, MenuViewProps };
-//# sourceMappingURL=menu-view.d.ts.map

package/dist/dev/ui/menu/menu-view.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-view.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-view.tsx"],"mappings":";;;;;UAUiB,aAAA,SAAsB,gBAAA,QAAwB,SAAA;;cAGlD,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,aAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiBJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}

package/dist/dev/ui/menu/menu-view.js

@@ -1,23 +0,0 @@
-"use client";
-import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext } from "./context.js";
-import { getMenuRootViewAttrs } from "@videojs/core/dom";
-import { forwardRef } from "react";
-//#region src/ui/menu/menu-view.tsx
-/** Root menu view inside the menu viewport. */
-const MenuView = forwardRef(function MenuView({ render, className, style, ...elementProps }, forwardedRef) {
-	const { state } = useMenuContext();
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		ref: [forwardedRef],
-		props: [getMenuRootViewAttrs(), elementProps]
-	});
-});
-//#endregion
-export { MenuView };
-
-//# sourceMappingURL=menu-view.js.map

package/dist/dev/ui/menu/menu-view.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-view.js","names":[],"sources":["../../../../src/ui/menu/menu-view.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { getMenuRootViewAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuViewProps extends UIComponentProps<'div', MenuState> {}\n\n/** Root menu view inside the menu viewport. */\nexport const MenuView = forwardRef<HTMLDivElement, MenuViewProps>(function MenuView(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [getMenuRootViewAttrs(), elementProps],\n    }\n  );\n});\n\nexport namespace MenuView {\n  export type Props = MenuViewProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;AAElC,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,sBAAsB,EAAE,aAAa;EAC9C,CACF;EACD"}

package/docs/reference/simple-hls-audio-only.md

@@ -1,93 +0,0 @@
-# SimpleHlsAudioOnly
-
-Audio-only HLS element that plays the audio rendition of an HLS stream
-
-Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/).
-
-## Examples
-
-### Basic Usage
-
-App.tsx
-
-App.css
-
-```
-import { SimpleHlsAudioOnly } from '@videojs/react/media/simple-hls-audio-only';
-
-export default function BasicUsage() {
-  return (
-    <SimpleHlsAudioOnly
-      className="simple-hls-audio-only"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      controls
-    />
-  );
-}
-```
-```
-.simple-hls-audio-only {
-  width: 100%;
-  height: 54px;
-}
-```
-
-## API Reference
-
-### Host Properties
-
-Property
-
-Type
-
-Default
-
-Details
-
-`engine`
-
-`Composition<SimpleHlsAudioOnlyEngineState, SimpleHlsAudioOnlyEngineContext>`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
-
-`preload`
-
-`'' | 'none' | 'metadata' | 'auto'`
-
-`''`
-
-▸
-
-Description
-
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-
-`src`
-
-`string`
-
-`''`
-
-### Attributes
-
-Renders a native `<audio>` element and accepts these media attributes as React props. The standard ones behave as described in the [MDN media attributes reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio): `autopictureinpicture``autoPlay``controls``controlslist``crossOrigin``disablepictureinpicture``disableremoteplayback``loading``loop``muted``playsInline``poster``preload``src``stream-type`
-
-### Events
-
-Handle these media events with React event props (e.g. `onPlay`, `onTimeUpdate`). See [media events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events): `abort``canplay``canplaythrough``durationchange``emptied``ended``error``loadeddata``loadedmetadata``loadstart``pause``play``playing``progress``ratechange``seeked``seeking``stalled``suspend``timeupdate``volumechange``waiting`
-
-These media events have no React prop — attach a listener through a `ref` with `addEventListener`: `addtrack``change``removetrack`
-
-This element dispatches no events beyond the media events above.
-
-### Methods
-
-Supports these methods from the native media API. See [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) for the core methods: `addTextTrack``canPlayType``load``pause``play`
-
-In React, call these through a `ref` to the element.

package/docs/reference/simple-hls-video.md

@@ -1,150 +0,0 @@
-# SimpleHlsVideo
-
-Lightweight HLS video element with minimal bundle size
-
-Lightweight HLS video element optimized for minimal bundle size. For full hls.js feature support, use [HlsJsVideo](/docs/framework/html/reference/hlsjs-video/) instead.
-
-## Examples
-
-### Basic Usage
-
-App.tsx
-
-App.css
-
-```
-import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video';
-
-export default function BasicUsage() {
-  return (
-    <SimpleHlsVideo
-      className="simple-hls-video"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      autoPlay
-      muted
-      playsInline
-      loop
-    />
-  );
-}
-```
-```
-.simple-hls-video {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-}
-```
-
-## API Reference
-
-### Host Properties
-
-Property
-
-Type
-
-Default
-
-Details
-
-`engine`
-
-`Composition<SimpleHlsEngineState, SimpleHlsEngineContext>`
-
-`—`
-
-▸
-
-Description
-
-Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
-
-`preload`
-
-`'' | 'none' | 'metadata' | 'auto'`
-
-`''`
-
-▸
-
-Description
-
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-
-`src`
-
-`string`
-
-`''`
-
-### Attributes
-
-Renders a native `<video>` element and accepts these media attributes as React props. The standard ones behave as described in the [MDN media attributes reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video): `autopictureinpicture``autoPlay``controls``controlslist``crossOrigin``disablepictureinpicture``disableremoteplayback``loading``loop``muted``playsInline``poster``preload``src``stream-type`
-
-### Events
-
-Handle these media events with React event props (e.g. `onPlay`, `onTimeUpdate`). See [media events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events): `abort``canplay``canplaythrough``durationchange``emptied``ended``error``loadeddata``loadedmetadata``loadstart``pause``play``playing``progress``ratechange``resize``seeked``seeking``stalled``suspend``timeupdate``volumechange``waiting`
-
-These media events have no React prop — attach a listener through a `ref` with `addEventListener`: `addtrack``change``enterpictureinpicture``leavepictureinpicture``removetrack`
-
-This element dispatches no events beyond the media events above.
-
-### Methods
-
-Supports these methods from the native media API. See [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) for the core methods: `addTextTrack``canPlayType``exitFullscreen``exitPictureInPicture``load``pause``play``requestFullscreen``requestPictureInPicture`
-
-In React, call these through a `ref` to the element.
-
-### CSS Custom Properties
-
-Variable
-
-Details
-
-`--media-video-border-radius`
-
-▸
-
-Description
-
-Border radius of the video element.
-
-`--media-object-fit`
-
-▸
-
-Description
-
-Object fit for the video.
-
-`--media-object-position`
-
-▸
-
-Description
-
-Object position for the video.
-
-`--media-caption-track-duration`
-
-▸
-
-Description
-
-Duration of the caption track transition.
-
-`--media-caption-track-delay`
-
-▸
-
-Description
-
-Delay before the caption track transition.
-
-`--media-caption-track-y`
-
-▸
-
-Description
-
-Vertical offset of the caption track.