feat: reinitialize player on changes in player config or UI config

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Example ([#10](https://github.com/bitmovin/bitmovin-player-react/pull/10))
 - Contribution guide ([#10](https://github.com/bitmovin/bitmovin-player-react/pull/10))
 - Issue template ([#10](https://github.com/bitmovin/bitmovin-player-react/pull/10))
+- Reinitialize the player on changes in the player config or UI config ([#12](https://github.com/bitmovin/bitmovin-player-react/pull/12))
 
 ### Changed
 

README.md

@@ -47,7 +47,7 @@ export function MyComponent() {
 
 ## Dynamically update player source config
 
-`BitmovinPlayer` keeps track of the source config and reloads the player when the source config changes:
+`BitmovinPlayer` keeps track of the source config and reloads the source on changes:
 
 ```tsx
 const playerSources: Array<SourceConfig | undefined> = [
@@ -87,6 +87,56 @@ export function MyComponent() {
 }
 ```
 
+## Dynamically update player config and UI config
+
+`BitmovinPlayer` keeps track of the player config and UI config and reinitializes the player (destroys the old instance and creates a new one) on changes :
+
+```ts
+const playerConfigs: Array<PlayerConfig> = [
+  {
+    key: "<key>",
+    playback: {
+      autoplay: true,
+      muted: true,
+    },
+  },
+  {
+    key: "<key>",
+    playback: {
+      autoplay: false,
+      muted: false,
+    },
+  },
+];
+
+export function MyComponent() {
+  const [playerConfig, setPlayerConfig] = useState(playerConfigs[0]);
+
+  useEffect(() => {
+    let lastConfigIndex = 0;
+
+    const intervalId = setInterval(() => {
+      const newIndex = ++lastConfigIndex % playerConfigs.length;
+
+      console.log(`Switching to player config ${newIndex}`, playerConfigs[newIndex]);
+
+      setPlayerConfig(playerConfigs[newIndex]);
+    }, 15_000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <Fragment>
+      <h1>Dynamic player config demo</h1>
+      <BitmovinPlayer config={playerConfig} source={playerSource} />
+    </Fragment>
+  );
+}
+```
+
+The same applies to the `customUi` object.
+
 ## Attach event listeners
 
 ```tsx
@@ -145,24 +195,26 @@ export function MyComponent() {
 You can use `UIContainer` from https://www.npmjs.com/package/bitmovin-player-ui to customize the player UI:
 
 ```tsx
-import { PlaybackToggleOverlay, UIContainer } from "bitmovin-player-ui";
+import { PlaybackToggleOverlay, UIContainer, CustomUi } from "bitmovin-player-ui";
 
 // Ensure this function returns a new instance of the `UIContainer` on every call.
 const uiContainerFactory = () =>
   new UIContainer({
     components: [new PlaybackToggleOverlay()],
   });
 
+const customUi: CustomUi = {
+  containerFactory: uiContainerFactory
+};
+
 export function MyComponent() {
   return (
     <Fragment>
       <h1>UI container demo</h1>
       <BitmovinPlayer
         source={playerSource}
         config={playerConfig}
-        customUi={{
-          containerFactory: uiContainerFactory,
-        }}
+        customUi={customUi}
       />
     </Fragment>
   );
@@ -174,7 +226,7 @@ export function MyComponent() {
 You can use `UIVariant`s from https://www.npmjs.com/package/bitmovin-player-ui to customize the player UI:
 
 ```tsx
-import { UIVariant } from "bitmovin-player-ui";
+import { UIVariant, CustomUi } from "bitmovin-player-ui";
 
 // Ensure this function returns a new instance of the `UIVariant[]` on every call.
 const uiVariantsFactory = (): UIVariant[] => [
@@ -198,16 +250,18 @@ const uiVariantsFactory = (): UIVariant[] => [
   },
 ];
 
+const customUi: CustomUi = {
+  variantsFactory: uiVariantsFactory
+};
+
 export function MyComponent() {
   return (
     <Fragment>
       <h1>UI variants demo</h1>
       <BitmovinPlayer
         source={playerSource}
         config={playerConfig}
-        customUi={{
-          variantsFactory: uiVariantsFactory,
-        }}
+        customUi={customUi}
       />
     </Fragment>
   );
@@ -274,7 +328,7 @@ export function MyComponent() {
 
 ## Possible pitfalls
 
-### Avoid source object recreation on every render
+### Avoid player config, UI config, and source objects recreation on every render
 
 ```tsx
 export function MyComponent() {
@@ -308,6 +362,8 @@ Instead do one of the following:
 - Use `useState` (refer to the "Dynamic source demo" above)
 - Use `useMemo`:
 
+The same applies to the `config`, `source`, and `customUi` objects.
+
 ```tsx
 export function MyComponent() {
   const [_counter, setCounter] = useState(0);

example/package.json

@@ -12,6 +12,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.2.7"
   }

example/src/App.tsx

@@ -1,5 +1,5 @@
 import { PlayerConfig, SourceConfig } from 'bitmovin-player';
-import { BitmovinPlayer } from 'bitmovin-player-react';
+import { BitmovinPlayer, CustomUi } from 'bitmovin-player-react';
 import { ControlBar, PlaybackToggleOverlay, SeekBar, UIContainer, UIVariant } from 'bitmovin-player-ui';
 import { Fragment } from 'react';
 
@@ -39,6 +39,10 @@ const uiVariantsFactory = (): UIVariant[] => [
   },
 ];
 
+const customUi: CustomUi = {
+  variantsFactory: uiVariantsFactory,
+};
+
 export function App() {
   return (
     <Fragment>
@@ -49,13 +53,7 @@ export function App() {
           maxWidth: '800px',
         }}
       >
-        <BitmovinPlayer
-          source={defaultPlayerSource}
-          config={playerConfig}
-          customUi={{
-            variantsFactory: uiVariantsFactory,
-          }}
-        />
+        <BitmovinPlayer source={defaultPlayerSource} config={playerConfig} customUi={customUi} />
       </div>
     </Fragment>
   );