@player-ui/react 0.4.0 → 0.4.1-next.1

package/dist/index.cjs.js

@@ -14,19 +14,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
@@ -39,14 +39,23 @@ const ReactAsset = (props) => {
   } else if ("asset" in props) {
     unwrapped = props.asset;
   }
-  if (!unwrapped || typeof unwrapped !== "object" || (unwrapped == null ? void 0 : unwrapped.type) === void 0) {
-    throw Error(`Cannot determine asset type.`);
+  if (!unwrapped) {
+    throw Error(`Cannot determine asset type for props: ${JSON.stringify(props)}`);
+  }
+  if (typeof unwrapped !== "object") {
+    throw Error(`Asset was not an object got (${typeof unwrapped}) instead: ${unwrapped}`);
+  }
+  if (unwrapped.type === void 0) {
+    const info = unwrapped.id === void 0 ? JSON.stringify(props) : `id: ${unwrapped.id}`;
+    throw Error(`Asset is missing type for ${info}`);
   }
   const Impl = registry == null ? void 0 : registry.get(unwrapped);
   if (!Impl) {
     throw Error(`No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}`);
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Impl, __spreadValues$3({}, unwrapped));
+  return /* @__PURE__ */ React__default["default"].createElement(Impl, __spreadValues$4({
+    key: unwrapped.id
+  }, unwrapped));
 };
 
 const PlayerContext = React__default["default"].createContext({});
@@ -115,24 +124,24 @@ function useGetConstant(key) {
   return player == null ? void 0 : player.constantsController.getConstants(key, "constants");
 }
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
 const ReactPlayer$1 = ({ view }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(ReactAsset, __spreadValues$2({}, view));
+  return /* @__PURE__ */ React__default["default"].createElement(ReactAsset, __spreadValues$3({}, view));
 };
 
 class OnUpdatePlugin {
@@ -162,6 +171,22 @@ class OnUpdatePlugin {
   }
 }
 
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
 var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -182,8 +207,8 @@ var __async$1 = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const WEB_PLAYER_VERSION = "0.4.0";
-const COMMIT = "39b851fc45e4903eae2f5b0697dea142c890443c";
+const WEB_PLAYER_VERSION = "0.4.1-next.1";
+const COMMIT = "fdebd2f39275b88fe5d721a64db743f850cf0910";
 const _window = typeof window === "undefined" ? void 0 : window;
 class ReactPlayer {
   constructor(options) {
@@ -213,7 +238,7 @@ class ReactPlayer {
       }
     });
     onUpdatePlugin.apply(this.player);
-    this.Component = this.hooks.webComponent.call(this.createReactComp());
+    this.Component = this.createReactPlayerComponent();
     this.reactPlayerInfo = {
       playerVersion: this.player.getVersion(),
       playerCommit: this.player.getCommit(),
@@ -244,13 +269,9 @@ class ReactPlayer {
   getReactPlayerCommit() {
     return this.reactPlayerInfo.reactPlayerCommit;
   }
-  createReactComp() {
-    const ActualPlayerComp = this.hooks.playerComponent.call(ReactPlayer$1);
-    const ReactPlayerComponent = () => {
-      const view = reactSubscribe.useSubscribedState(this.viewUpdateSubscription);
-      if (this.options.suspend) {
-        this.viewUpdateSubscription.suspend();
-      }
+  createReactPlayerComponent() {
+    const BaseComp = this.hooks.webComponent.call(this.createReactComp());
+    const ReactPlayerComponent = (props) => {
       return /* @__PURE__ */ React__default["default"].createElement(reactErrorBoundary.ErrorBoundary, {
         fallbackRender: () => null,
         onError: (err) => {
@@ -261,15 +282,26 @@ class ReactPlayer {
         }
       }, /* @__PURE__ */ React__default["default"].createElement(PlayerContext.Provider, {
         value: { player: this.player }
-      }, /* @__PURE__ */ React__default["default"].createElement(AssetContext.Provider, {
+      }, /* @__PURE__ */ React__default["default"].createElement(BaseComp, __spreadValues$2({}, props))));
+    };
+    return ReactPlayerComponent;
+  }
+  createReactComp() {
+    const ActualPlayerComp = this.hooks.playerComponent.call(ReactPlayer$1);
+    const WebPlayerComponent = () => {
+      const view = reactSubscribe.useSubscribedState(this.viewUpdateSubscription);
+      if (this.options.suspend) {
+        this.viewUpdateSubscription.suspend();
+      }
+      return /* @__PURE__ */ React__default["default"].createElement(AssetContext.Provider, {
         value: {
           registry: this.assetRegistry
         }
       }, view && /* @__PURE__ */ React__default["default"].createElement(ActualPlayerComp, {
         view
-      }))));
+      }));
     };
-    return ReactPlayerComponent;
+    return WebPlayerComponent;
   }
   setWaitForNextViewUpdate() {
     const shouldCallResetHook = this.options.suspend && this.hooks.onBeforeViewReset.isUsed();

package/dist/index.d.ts

@@ -100,6 +100,7 @@ declare class ReactPlayer {
     getReactPlayerVersion(): string;
     /** Returns the git commit used to build the React Player version */
     getReactPlayerCommit(): string;
+    private createReactPlayerComponent;
     private createReactComp;
     /**
      * Call this method to force the ReactPlayer to wait for the next view-update before performing the next render.

package/dist/index.esm.js

@@ -7,19 +7,19 @@ import { Registry } from '@player-ui/partial-match-registry';
 import { ErrorBoundary } from 'react-error-boundary';
 import { MetricsCorePluginSymbol, RequestTimeWebPlugin } from '@player-ui/metrics-plugin';
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
@@ -32,14 +32,23 @@ const ReactAsset = (props) => {
   } else if ("asset" in props) {
     unwrapped = props.asset;
   }
-  if (!unwrapped || typeof unwrapped !== "object" || (unwrapped == null ? void 0 : unwrapped.type) === void 0) {
-    throw Error(`Cannot determine asset type.`);
+  if (!unwrapped) {
+    throw Error(`Cannot determine asset type for props: ${JSON.stringify(props)}`);
+  }
+  if (typeof unwrapped !== "object") {
+    throw Error(`Asset was not an object got (${typeof unwrapped}) instead: ${unwrapped}`);
+  }
+  if (unwrapped.type === void 0) {
+    const info = unwrapped.id === void 0 ? JSON.stringify(props) : `id: ${unwrapped.id}`;
+    throw Error(`Asset is missing type for ${info}`);
   }
   const Impl = registry == null ? void 0 : registry.get(unwrapped);
   if (!Impl) {
     throw Error(`No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}`);
   }
-  return /* @__PURE__ */ React.createElement(Impl, __spreadValues$3({}, unwrapped));
+  return /* @__PURE__ */ React.createElement(Impl, __spreadValues$4({
+    key: unwrapped.id
+  }, unwrapped));
 };
 
 const PlayerContext = React.createContext({});
@@ -108,24 +117,24 @@ function useGetConstant(key) {
   return player == null ? void 0 : player.constantsController.getConstants(key, "constants");
 }
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
 const ReactPlayer$1 = ({ view }) => {
-  return /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$2({}, view));
+  return /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$3({}, view));
 };
 
 class OnUpdatePlugin {
@@ -155,6 +164,22 @@ class OnUpdatePlugin {
   }
 }
 
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
 var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -175,8 +200,8 @@ var __async$1 = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const WEB_PLAYER_VERSION = "0.4.0";
-const COMMIT = "39b851fc45e4903eae2f5b0697dea142c890443c";
+const WEB_PLAYER_VERSION = "0.4.1-next.1";
+const COMMIT = "fdebd2f39275b88fe5d721a64db743f850cf0910";
 const _window = typeof window === "undefined" ? void 0 : window;
 class ReactPlayer {
   constructor(options) {
@@ -206,7 +231,7 @@ class ReactPlayer {
       }
     });
     onUpdatePlugin.apply(this.player);
-    this.Component = this.hooks.webComponent.call(this.createReactComp());
+    this.Component = this.createReactPlayerComponent();
     this.reactPlayerInfo = {
       playerVersion: this.player.getVersion(),
       playerCommit: this.player.getCommit(),
@@ -237,13 +262,9 @@ class ReactPlayer {
   getReactPlayerCommit() {
     return this.reactPlayerInfo.reactPlayerCommit;
   }
-  createReactComp() {
-    const ActualPlayerComp = this.hooks.playerComponent.call(ReactPlayer$1);
-    const ReactPlayerComponent = () => {
-      const view = useSubscribedState(this.viewUpdateSubscription);
-      if (this.options.suspend) {
-        this.viewUpdateSubscription.suspend();
-      }
+  createReactPlayerComponent() {
+    const BaseComp = this.hooks.webComponent.call(this.createReactComp());
+    const ReactPlayerComponent = (props) => {
       return /* @__PURE__ */ React.createElement(ErrorBoundary, {
         fallbackRender: () => null,
         onError: (err) => {
@@ -254,15 +275,26 @@ class ReactPlayer {
         }
       }, /* @__PURE__ */ React.createElement(PlayerContext.Provider, {
         value: { player: this.player }
-      }, /* @__PURE__ */ React.createElement(AssetContext.Provider, {
+      }, /* @__PURE__ */ React.createElement(BaseComp, __spreadValues$2({}, props))));
+    };
+    return ReactPlayerComponent;
+  }
+  createReactComp() {
+    const ActualPlayerComp = this.hooks.playerComponent.call(ReactPlayer$1);
+    const WebPlayerComponent = () => {
+      const view = useSubscribedState(this.viewUpdateSubscription);
+      if (this.options.suspend) {
+        this.viewUpdateSubscription.suspend();
+      }
+      return /* @__PURE__ */ React.createElement(AssetContext.Provider, {
         value: {
           registry: this.assetRegistry
         }
       }, view && /* @__PURE__ */ React.createElement(ActualPlayerComp, {
         view
-      }))));
+      }));
     };
-    return ReactPlayerComponent;
+    return WebPlayerComponent;
   }
   setWaitForNextViewUpdate() {
     const shouldCallResetHook = this.options.suspend && this.hooks.onBeforeViewReset.isUsed();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@player-ui/react",
-  "version": "0.4.0",
+  "version": "0.4.1-next.1",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -11,10 +11,10 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@player-ui/player": "0.4.0",
-    "@player-ui/partial-match-registry": "0.4.0",
-    "@player-ui/metrics-plugin": "0.4.0",
-    "@player-ui/react-subscribe": "0.4.0",
+    "@player-ui/player": "0.4.1-next.1",
+    "@player-ui/partial-match-registry": "0.4.1-next.1",
+    "@player-ui/metrics-plugin": "0.4.1-next.1",
+    "@player-ui/react-subscribe": "0.4.1-next.1",
     "react-error-boundary": "^3.1.3",
     "tapable-ts": "^0.2.3",
     "@babel/runtime": "7.15.4"
@@ -60,6 +60,14 @@
     {
       "name": "Kelly Harrop",
       "url": "https://github.com/kharrop"
+    },
+    {
+      "name": "Alejandro Fimbres",
+      "url": "https://github.com/lexfm"
+    },
+    {
+      "name": "Rafael Campos",
+      "url": "https://github.com/rafbcampos"
     }
   ]
 }

package/src/asset/index.tsx

@@ -29,12 +29,24 @@ export const ReactAsset = (
     unwrapped = (props as unknown as AssetWrapper).asset;
   }
 
-  if (
-    !unwrapped ||
-    typeof unwrapped !== 'object' ||
-    unwrapped?.type === undefined
-  ) {
-    throw Error(`Cannot determine asset type.`);
+  if (!unwrapped) {
+    throw Error(
+      `Cannot determine asset type for props: ${JSON.stringify(props)}`
+    );
+  }
+
+  if (typeof unwrapped !== 'object') {
+    throw Error(
+      `Asset was not an object got (${typeof unwrapped}) instead: ${unwrapped}`
+    );
+  }
+
+  if (unwrapped.type === undefined) {
+    const info =
+      unwrapped.id === undefined
+        ? JSON.stringify(props)
+        : `id: ${unwrapped.id}`;
+    throw Error(`Asset is missing type for ${info}`);
   }
 
   const Impl = registry?.get(unwrapped);
@@ -45,5 +57,5 @@ export const ReactAsset = (
     );
   }
 
-  return <Impl {...unwrapped} />;
+  return <Impl key={unwrapped.id} {...unwrapped} />;
 };

package/src/player.tsx

@@ -19,8 +19,8 @@ import type { ReactPlayerProps } from './app';
 import PlayerComp from './app';
 import OnUpdatePlugin from './plugins/onupdate-plugin';
 
-const WEB_PLAYER_VERSION = '0.4.0';
-const COMMIT = '39b851fc45e4903eae2f5b0697dea142c890443c';
+const WEB_PLAYER_VERSION = '0.4.1-next.1';
+const COMMIT = 'fdebd2f39275b88fe5d721a64db743f850cf0910';
 
 export interface DevtoolsGlobals {
   /** A global for a plugin to load to Player for devtools */
@@ -138,7 +138,7 @@ export class ReactPlayer {
 
     onUpdatePlugin.apply(this.player);
 
-    this.Component = this.hooks.webComponent.call(this.createReactComp());
+    this.Component = this.createReactPlayerComponent();
     this.reactPlayerInfo = {
       playerVersion: this.player.getVersion(),
       playerCommit: this.player.getCommit(),
@@ -182,17 +182,11 @@ export class ReactPlayer {
     return this.reactPlayerInfo.reactPlayerCommit;
   }
 
-  private createReactComp(): React.ComponentType<ReactPlayerComponentProps> {
-    const ActualPlayerComp = this.hooks.playerComponent.call(PlayerComp);
-
-    /** the component to use to render Player */
-    const ReactPlayerComponent = () => {
-      const view = useSubscribedState<View>(this.viewUpdateSubscription);
-
-      if (this.options.suspend) {
-        this.viewUpdateSubscription.suspend();
-      }
+  private createReactPlayerComponent(): React.ComponentType<ReactPlayerComponentProps> {
+    const BaseComp = this.hooks.webComponent.call(this.createReactComp());
 
+    /** Wrap the Error boundary and context provider after the hook call to catch anything wrapped by the hook */
+    const ReactPlayerComponent = (props: ReactPlayerComponentProps) => {
       return (
         <ErrorBoundary
           fallbackRender={() => null}
@@ -205,13 +199,7 @@ export class ReactPlayer {
           }}
         >
           <PlayerContext.Provider value={{ player: this.player }}>
-            <AssetContext.Provider
-              value={{
-                registry: this.assetRegistry,
-              }}
-            >
-              {view && <ActualPlayerComp view={view} />}
-            </AssetContext.Provider>
+            <BaseComp {...props} />
           </PlayerContext.Provider>
         </ErrorBoundary>
       );
@@ -220,6 +208,31 @@ export class ReactPlayer {
     return ReactPlayerComponent;
   }
 
+  private createReactComp(): React.ComponentType<ReactPlayerComponentProps> {
+    const ActualPlayerComp = this.hooks.playerComponent.call(PlayerComp);
+
+    /** the component to use to render the player */
+    const WebPlayerComponent = () => {
+      const view = useSubscribedState<View>(this.viewUpdateSubscription);
+
+      if (this.options.suspend) {
+        this.viewUpdateSubscription.suspend();
+      }
+
+      return (
+        <AssetContext.Provider
+          value={{
+            registry: this.assetRegistry,
+          }}
+        >
+          {view && <ActualPlayerComp view={view} />}
+        </AssetContext.Provider>
+      );
+    };
+
+    return WebPlayerComponent;
+  }
+
   /**
    * Call this method to force the ReactPlayer to wait for the next view-update before performing the next render.
    * If the `suspense` option is set, this will suspend while an update is pending, otherwise nothing will be rendered.