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

package/dist/default/player/create-player.js

@@ -1,21 +1,56 @@
-'use client';
-
-import { Container, PlayerContextProvider, useMedia, usePlayerContext } from "./context.js";
+import { PlayerContextProvider, useMedia, usePlayerContext } from "./context.js";
 import { useDestroy } from "../utils/use-destroy.js";
+import { combinePlayerFeatureConfigs, setPlayerConfigValue } from "@videojs/core/dom";
 import { combine, createStore } from "@videojs/store";
 import { useStore } from "@videojs/store/react";
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-
+import { pick } from "@videojs/utils/object";
 //#region src/player/create-player.tsx
 function createPlayer(config) {
-	function Provider({ children }) {
-		const [store] = useState(() => createStore()(combine(...config.features)));
+	const slice = combine(...config.features);
+	const featureConfig = combinePlayerFeatureConfigs(config.features);
+	const configKeys = Object.keys(featureConfig);
+	function createConfiguredStore(values) {
+		const store = createStore()(slice);
+		applyConfigValues(store, featureConfig, values);
+		return store;
+	}
+	function Player(props) {
+		const { children } = props;
+		const configValues = pick(props, configKeys);
+		const [store, setStore] = useState(() => createConfiguredStore(configValues));
+		const syncedValues = useRef({
+			store,
+			values: configValues
+		});
 		const [media, setMedia] = useState(null);
 		const [container, setContainer] = useState(null);
 		useDestroy(store);
+		useLayoutEffect(() => {
+			const previous = syncedValues.current;
+			if (previous.store !== store) {
+				syncedValues.current = {
+					store,
+					values: configValues
+				};
+				return;
+			}
+			for (const key of configKeys) {
+				if (Object.is(previous.values[key], configValues[key])) continue;
+				setPlayerConfigValue(store, featureConfig[key], configValues[key]);
+			}
+			syncedValues.current = {
+				store,
+				values: configValues
+			};
+		});
 		useEffect(() => {
 			if (!media) return;
+			if (store.destroyed) {
+				setStore(createConfiguredStore(syncedValues.current.values));
+				return;
+			}
 			return store.attach({
 				media,
 				container
@@ -25,14 +60,19 @@ function createPlayer(config) {
 			container,
 			store
 		]);
+		const value = useMemo(() => ({
+			store,
+			media,
+			setMedia,
+			container,
+			setContainer
+		}), [
+			store,
+			media,
+			container
+		]);
 		return /* @__PURE__ */ jsx(PlayerContextProvider, {
-			value: {
-				store,
-				media,
-				setMedia,
-				container,
-				setContainer
-			},
+			value,
 			children
 		});
 	}
@@ -41,13 +81,15 @@ function createPlayer(config) {
 		return useStore(store, selector);
 	}
 	return {
-		Provider,
-		Container,
+		Player,
 		usePlayer,
 		useMedia
 	};
 }
-
+function applyConfigValues(store, config, values) {
+	for (const key of Object.keys(config)) setPlayerConfigValue(store, config[key], values[key]);
+}
 //#endregion
 export { createPlayer };
+
 //# sourceMappingURL=create-player.js.map

package/dist/default/player/create-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  AnyPlayerFeature,\n  AnyPlayerStore,\n  AudioFeatures,\n  AudioPlayerStore,\n  Media,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { Container, PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n  displayName?: string;\n}\n\nexport interface ProviderProps {\n  children: ReactNode;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  Provider: FC<ProviderProps>;\n  Container: typeof Container;\n  usePlayer: UsePlayerHook<Store>;\n  useMedia: () => Media | null;\n}\n\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  (): Store;\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with typed store, Provider component, Container, and hooks.\n *\n * @label Video\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  function Provider({ children }: ProviderProps): ReactNode {\n    const [store] = useState(() => createStore<PlayerTarget>()(combine(...config.features)));\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    useEffect(() => {\n      if (!media) return;\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    return (\n      <PlayerContextProvider value={{ store, media, setMedia, container, setContainer }}>\n        {children}\n      </PlayerContextProvider>\n    );\n  }\n\n  if (__DEV__ && config.displayName) {\n    Provider.displayName = `${config.displayName}.Provider`;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Provider,\n    Container,\n    usePlayer,\n    useMedia,\n  };\n}\n"],"mappings":";;;;;;;;;;AAqEA,SAAgB,aAAa,QAAoF;CAC/G,SAAS,SAAS,EAAE,YAAsC;EACxD,MAAM,CAAC,SAAS,eAAe,aAA2B,CAAC,QAAQ,GAAG,OAAO,SAAS,CAAC,CAAC;EACxF,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;EACtD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAEpE,aAAW,MAAM;AAEjB,kBAAgB;AACd,OAAI,CAAC,MAAO;AACZ,UAAO,MAAM,OAAO;IAAE;IAAO;IAAW,CAAC;KACxC;GAAC;GAAO;GAAW;GAAM,CAAC;AAE7B,SACE,oBAAC;GAAsB,OAAO;IAAE;IAAO;IAAO;IAAU;IAAW;IAAc;GAC9E;IACqB;;CAQ5B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,kBAAkB;AACpC,SAAO,SAAS,OAAO,SAAgB;;AAGzC,QAAO;EACL;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["import {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  combinePlayerFeatureConfigs,\n  type InferPlayerConfig,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport { pick } from '@videojs/utils/object';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\n/** Configures the feature-backed store and provider component created by {@link createPlayer}. */\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  /** Features combined into the player's store, state, actions, and configuration props. */\n  features: Features;\n\n  /** Name shown for the generated provider component in development tools. */\n  displayName?: string;\n}\n\n/** Props accepted by a generated Player provider. */\nexport type PlayerProps<Config = object> = {\n  [Key in keyof Config]?: Config[Key] | undefined;\n} & {\n  /** Content placed inside the player context. The provider does not render a host element of its own. */\n  children: ReactNode;\n};\n\n/** The provider component and typed hooks produced by {@link createPlayer}. */\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Provides a new player store to its descendants without adding a layout element. */\n  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;\n\n  /** Accesses the configured store, or subscribes to a selected value from it. */\n  usePlayer: UsePlayerHook<Store>;\n\n  /** Returns the media currently attached beneath the generated Player, or `null` before attachment. */\n  useMedia: () => Media | null;\n}\n\n/** Typed player-store hook returned by {@link createPlayer}. */\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  /** Returns the configured player store. */\n  (): Store;\n\n  /**\n   * Subscribes to a value derived from the player state.\n   *\n   * @param selector - Derives the value consumed by the calling component.\n   */\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with a typed Player component and hooks.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Video\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Audio\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Generic\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  const slice = combine(...config.features);\n  const featureConfig = combinePlayerFeatureConfigs(config.features);\n  const configKeys = Object.keys(featureConfig);\n\n  function createConfiguredStore(values: Record<string, unknown>) {\n    const store = createStore<PlayerTarget>()(slice);\n\n    applyConfigValues(store, featureConfig, values);\n    return store;\n  }\n\n  function Player(props: PlayerProps<any>): ReactNode {\n    const { children } = props;\n    // Only inputs declared by selected features are forwarded to store actions.\n    const configValues = pick(props, configKeys);\n    const [store, setStore] = useState(() => createConfiguredStore(configValues));\n    const syncedValues = useRef({ store, values: configValues });\n\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    // Sync committed configuration props to the existing store.\n    useLayoutEffect(() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    });\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container]);\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Player.displayName = config.displayName;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Player,\n    usePlayer,\n    useMedia,\n  };\n}\n\nfunction applyConfigValues(store: object, config: PlayerFeatureConfig, values: Record<string, unknown>): void {\n  for (const key of Object.keys(config)) {\n    setPlayerConfigValue(store, config[key]!, values[key]);\n  }\n}\n"],"mappings":";;;;;;;;;AA6FA,SAAgB,aAAa,QAAoF;CAC/G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CACjE,MAAM,aAAa,OAAO,KAAK,aAAa;CAE5C,SAAS,sBAAsB,QAAiC;EAC9D,MAAM,QAAQ,YAA0B,CAAC,CAAC,KAAK;EAE/C,kBAAkB,OAAO,eAAe,MAAM;EAC9C,OAAO;CACT;CAEA,SAAS,OAAO,OAAoC;EAClD,MAAM,EAAE,aAAa;EAErB,MAAM,eAAe,KAAK,OAAO,UAAU;EAC3C,MAAM,CAAC,OAAO,YAAY,eAAe,sBAAsB,YAAY,CAAC;EAC5E,MAAM,eAAe,OAAO;GAAE;GAAO,QAAQ;EAAa,CAAC;EAE3D,MAAM,CAAC,OAAO,YAAY,SAAuB,IAAI;EACrD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;EAEnE,WAAW,KAAK;EAGhB,sBAAsB;GACpB,MAAM,WAAW,aAAa;GAG9B,IAAI,SAAS,UAAU,OAAO;IAC5B,aAAa,UAAU;KAAE;KAAO,QAAQ;IAAa;IACrD;GACF;GAEA,KAAK,MAAM,OAAO,YAAY;IAC5B,IAAI,OAAO,GAAG,SAAS,OAAO,MAAM,aAAa,IAAI,GAAG;IAExD,qBAAqB,OAAO,cAAc,MAAO,aAAa,IAAI;GACpE;GAEA,aAAa,UAAU;IAAE;IAAO,QAAQ;GAAa;EACvD,CAAC;EAED,gBAAgB;GACd,IAAI,CAAC,OAAO;GAKZ,IAAI,MAAM,WAAW;IACnB,SAAS,sBAAsB,aAAa,QAAQ,MAAM,CAAC;IAC3D;GACF;GAEA,OAAO,MAAM,OAAO;IAAE;IAAO;GAAU,CAAC;EAC1C,GAAG;GAAC;GAAO;GAAW;EAAK,CAAC;EAE5B,MAAM,QAAQ,eAAe;GAAE;GAAO;GAAO;GAAU;GAAW;EAAa,IAAI;GAAC;GAAO;GAAO;EAAS,CAAC;EAE5G,OAAO,oBAAC,uBAAD;GAA8B;GAAQ;EAAgC,CAAA;CAC/E;CAMA,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,iBAAiB;EAEnC,OAAO,SAAS,OAAO,QAAe;CACxC;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF;AAEA,SAAS,kBAAkB,OAAe,QAA6B,QAAuC;CAC5G,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,qBAAqB,OAAO,OAAO,MAAO,OAAO,IAAI;AAEzD"}

package/dist/default/player/popup-group-context.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/player/popup-group-context.tsx
+const PopupGroupContext = createContext(void 0);
+function PopupGroupProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(PopupGroupContext.Provider, {
+		value,
+		children
+	});
+}
+function useOptionalPopupGroup() {
+	return useContext(PopupGroupContext);
+}
+//#endregion
+export { PopupGroupProvider, useOptionalPopupGroup };
+
+//# sourceMappingURL=popup-group-context.js.map

package/dist/default/player/popup-group-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-group-context.js","names":[],"sources":["../../../src/player/popup-group-context.tsx"],"sourcesContent":["import type { PopupGroup } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\n\nconst PopupGroupContext = createContext<PopupGroup | undefined>(undefined);\n\nexport function PopupGroupProvider({ value, children }: { value: PopupGroup; children: ReactNode }): ReactNode {\n  return <PopupGroupContext.Provider value={value}>{children}</PopupGroupContext.Provider>;\n}\n\nexport function useOptionalPopupGroup(): PopupGroup | undefined {\n  return useContext(PopupGroupContext);\n}\n"],"mappings":";;;AAIA,MAAM,oBAAoB,cAAsC,KAAA,CAAS;AAEzE,SAAgB,mBAAmB,EAAE,OAAO,YAAmE;CAC7G,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,wBAAgD;CAC9D,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/default/presets/audio/index.js

@@ -1,8 +1,12 @@
+"use client";
 import { Audio } from "../../media/audio.js";
 import { MinimalAudioSkin } from "./minimal-skin.js";
-import { MinimalAudioSkinTailwind } from "./minimal-skin.tailwind.js";
+import { AudioPlayer, usePlayer } from "./player.js";
 import { AudioSkin } from "./skin.js";
-import { AudioSkinTailwind } from "./skin.tailwind.js";
 import { audioFeatures } from "@videojs/core/dom";
+//#region src/presets/audio/index.ts
+/** Audio-only player preset with playback and volume controls. */
+//#endregion
+export { Audio, AudioPlayer, AudioSkin, MinimalAudioSkin, audioFeatures, usePlayer };
 
-export { Audio, AudioSkin, AudioSkinTailwind, MinimalAudioSkin, MinimalAudioSkinTailwind, audioFeatures };
+//# sourceMappingURL=index.js.map

package/dist/default/presets/audio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/presets/audio/index.ts"],"sourcesContent":["/** Audio-only player preset with playback and volume controls. */\n'use client';\n\nexport { audioFeatures } from '@videojs/core/dom';\nexport { Audio, type AudioProps } from '@/media/audio';\nexport * from './minimal-skin';\nexport { AudioPlayer, type AudioPlayerProps, usePlayer } from './player';\nexport * from './skin';\n"],"mappings":""}