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

package/dist/dev/player/create-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.tsx"],"mappings":";;;;;;UAsBiB,kBAAA,kBAAoC,gBAAA;EACnD,QAAA,EAAU,QAAA;EACV,WAAA;AAAA;AAAA,UAGe,aAAA;EACf,QAAA,EAAU,SAAA;AAAA;AAAA,UAGK,kBAAA,eAAiC,WAAA;EAChD,QAAA,EAAU,EAAA,CAAG,aAAA;EACb,SAAA,SAAkB,SAAA;EAClB,SAAA,EAAW,aAAA,CAAc,KAAA;EACzB,QAAA,QAAgB,KAAA;AAAA;AAAA,KAGN,aAAA,eAA4B,WAAA;EAAA,IAClC,KAAA;EAAA,IACA,QAAA,GAAW,KAAA,EAAO,eAAA,CAAgB,KAAA,MAAW,CAAA,GAAI,CAAA;AAAA;;AATvD;;;;;iBAkBgB,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;;iBAQ5E,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;;iBAQ5E,YAAA,wBAAoC,gBAAA,GAAA,CAClD,MAAA,EAAQ,kBAAA,CAAmB,QAAA,IAC1B,kBAAA,CAAmB,WAAA,CAAY,QAAA"}
+{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.tsx"],"mappings":";;;;;;UAuBiB,kBAAA,kBAAoC,gBAAA;EACnD,QAAA,EAAU,QAAA;EACV,WAAA;AAAA;AAAA,UAGe,aAAA;EACf,QAAA,EAAU,SAAA;AAAA;AAAA,UAGK,kBAAA,eAAiC,WAAA;EAChD,QAAA,EAAU,EAAA,CAAG,aAAA;EACb,SAAA,SAAkB,SAAA;EAClB,SAAA,EAAW,aAAA,CAAc,KAAA;EACzB,QAAA,QAAgB,KAAA;AAAA;AAAA,KAGN,aAAA,eAA4B,WAAA;EAAA,IAClC,KAAA;EAAA,IACA,QAAA,GAAW,KAAA,EAAO,eAAA,CAAgB,KAAA,MAAW,CAAA,GAAI,CAAA;AAAA;;AATvD;;;;;iBAkBgB,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;;iBAQ5E,YAAA,CAAa,MAAA,EAAQ,kBAAA,CAAmB,aAAA,IAAiB,kBAAA,CAAmB,gBAAA;;;;;;;iBAQ5E,YAAA,wBAAoC,gBAAA,GAAA,CAClD,MAAA,EAAQ,kBAAA,CAAmB,QAAA,IAC1B,kBAAA,CAAmB,WAAA,CAAY,QAAA"}

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

@@ -1,19 +1,25 @@
 "use client";
 import { Container, PlayerContextProvider, useMedia, usePlayerContext } from "./context.js";
 import { useDestroy } from "../utils/use-destroy.js";
+import { createPopupGroup } from "@videojs/core/dom";
 import { combine, createStore } from "@videojs/store";
 import { useStore } from "@videojs/store/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/player/create-player.tsx
 function createPlayer(config) {
 	function Provider({ children }) {
-		const [store] = useState(() => createStore()(combine(...config.features)));
+		const [store, setStore] = useState(() => createStore()(combine(...config.features)));
+		const [popupGroup] = useState(() => createPopupGroup());
 		const [media, setMedia] = useState(null);
 		const [container, setContainer] = useState(null);
 		useDestroy(store);
 		useEffect(() => {
 			if (!media) return;
+			if (store.destroyed) {
+				setStore(createStore()(combine(...config.features)));
+				return;
+			}
 			return store.attach({
 				media,
 				container
@@ -24,13 +30,19 @@ function createPlayer(config) {
 			store
 		]);
 		return /* @__PURE__ */ jsx(PlayerContextProvider, {
-			value: {
+			value: useMemo(() => ({
 				store,
 				media,
 				setMedia,
 				container,
-				setContainer
-			},
+				setContainer,
+				popupGroup
+			}), [
+				store,
+				media,
+				container,
+				popupGroup
+			]),
 			children
 		});
 	}

package/dist/dev/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,uBAAD;GAAuB,OAAO;IAAE;IAAO;IAAO;IAAU;IAAW;IAAc;GAC9E;GACqB,CAAA;;AAI5B,KAAe,OAAO,YACpB,UAAS,cAAc,GAAG,OAAO,YAAY;CAG/C,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":["'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 { createPopupGroup } 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, useMemo, 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, setStore] = useState(() => createStore<PlayerTarget>()(combine(...config.features)));\n    const [popupGroup] = useState(() => createPopupGroup());\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\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(createStore<PlayerTarget>()(combine(...config.features)));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(\n      () => ({ store, media, setMedia, container, setContainer, popupGroup }),\n      [store, media, container, popupGroup]\n    );\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\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":";;;;;;;;;AAsEA,SAAgB,aAAa,QAAoF;CAC/G,SAAS,SAAS,EAAE,YAAsC;EACxD,MAAM,CAAC,OAAO,YAAY,eAAe,aAA2B,CAAC,QAAQ,GAAG,OAAO,SAAS,CAAC,CAAC;EAClG,MAAM,CAAC,cAAc,eAAe,kBAAkB,CAAC;EACvD,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;EACtD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAEpE,aAAW,MAAM;AAEjB,kBAAgB;AACd,OAAI,CAAC,MAAO;AAKZ,OAAI,MAAM,WAAW;AACnB,aAAS,aAA2B,CAAC,QAAQ,GAAG,OAAO,SAAS,CAAC,CAAC;AAClE;;AAGF,UAAO,MAAM,OAAO;IAAE;IAAO;IAAW,CAAC;KACxC;GAAC;GAAO;GAAW;GAAM,CAAC;AAO7B,SAAO,oBAAC,uBAAD;GAAuB,OALhB,eACL;IAAE;IAAO;IAAO;IAAU;IAAW;IAAc;IAAY,GACtE;IAAC;IAAO;IAAO;IAAW;IAAW,CACtC;GAE4C;GAAiC,CAAA;;AAGhF,KAAe,OAAO,YACpB,UAAS,cAAc,GAAG,OAAO,YAAY;CAG/C,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,kBAAkB;AACpC,SAAO,SAAS,OAAO,SAAgB;;AAGzC,QAAO;EACL;EACA;EACA;EACA;EACD"}