@player-ui/react 0.8.0--canary.307.9621 → 0.8.0--canary.410.15865

package/dist/cjs/index.cjs

@@ -0,0 +1,686 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  AssetContext: () => AssetContext,
+  ManagedPlayer: () => ManagedPlayer,
+  PlayerContext: () => PlayerContext,
+  ReactAsset: () => ReactAsset,
+  ReactPlayer: () => ReactPlayer2,
+  WebPlayer: () => WebPlayer,
+  buildUrl: () => buildUrl,
+  callOrReturn: () => callOrReturn,
+  isEmptyObject: () => isEmptyObject,
+  isFunction: () => isFunction,
+  removeEmptyValuesFromObject: () => removeEmptyValuesFromObject,
+  trimSlashes: () => trimSlashes,
+  useAssetProps: () => useAssetProps,
+  useGetConstant: () => useGetConstant,
+  useGetConstantByType: () => useGetConstantByType,
+  useLogger: () => useLogger,
+  usePersistentStateMachine: () => usePersistentStateMachine,
+  usePlayer: () => usePlayer,
+  useReactPlayer: () => useReactPlayer,
+  useRequestTime: () => useRequestTime
+});
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("@player-ui/player"), module.exports);
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/player.tsx
+var import_react4 = __toESM(require("react"));
+var import_tapable_ts = require("tapable-ts");
+var import_react_subscribe = require("@player-ui/react-subscribe");
+var import_partial_match_registry = require("@player-ui/partial-match-registry");
+var import_player2 = require("@player-ui/player");
+var import_react_error_boundary = require("react-error-boundary");
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/asset/index.tsx
+var import_react = __toESM(require("react"));
+var import_fuse = __toESM(require("fuse.js"));
+var AssetContext = import_react.default.createContext({});
+var ReactAsset = (props) => {
+  const { registry } = import_react.default.useContext(AssetContext);
+  let unwrapped;
+  if ("type" in props && "id" in props) {
+    unwrapped = props;
+  } else if ("asset" in props) {
+    unwrapped = props.asset;
+  }
+  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}`);
+  }
+  if (!registry || registry.isRegistryEmpty()) {
+    throw Error(`No asset found in registry. This could happen for one of the following reasons: 
+
+      1. You might have no assets registered or no plugins added to the Player instance. 
+
+      2. You might have mismatching versions of React Asset Registry Context. 
+
+      See https://player-ui.github.io/latest/tools/cli#player-dependency-versions-check for tips about how to debug and fix this problem`);
+  }
+  const Impl = registry?.get(unwrapped);
+  if (!Impl) {
+    const matchList = [];
+    registry.forEach((asset) => {
+      matchList.push(asset.key);
+    });
+    const fuse = new import_fuse.default(matchList, { keys: ["type", "key"] });
+    const similarType = JSON.stringify(
+      fuse.search(unwrapped.type)[0].item
+    );
+    throw Error(
+      `No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}. Did you mean ${similarType}? 
+ 
+      Registered Asset matching functions are listed below: 
+
+      ${JSON.stringify(matchList)}`
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(Impl, { key: unwrapped.id, ...unwrapped });
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/player-context.ts
+var import_react2 = __toESM(require("react"));
+var PlayerContext = import_react2.default.createContext({});
+var usePlayer = () => {
+  const { player } = import_react2.default.useContext(PlayerContext);
+  return player;
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/use-logger.ts
+var import_player = require("@player-ui/player");
+var noopLogger = new import_player.NoopLogger();
+function useLogger() {
+  const player = usePlayer();
+  return player?.logger ?? noopLogger;
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/use-asset-props.tsx
+function useAssetProps(asset) {
+  return {
+    id: asset.id,
+    "data-asset-type": asset.type
+  };
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/helpers.ts
+function trimSlashes(str) {
+  return str.replace(/^\/+|\/+$/g, "");
+}
+function removeEmptyValuesFromObject(obj) {
+  return Object.keys(obj).reduce(
+    (acc, key) => {
+      const value = obj[key];
+      if (value !== null && value !== void 0) {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function isEmptyObject(obj) {
+  return Object.keys(obj).length === 0 && obj.constructor === Object;
+}
+function isFunction(maybeFn) {
+  return Boolean(maybeFn instanceof Function || typeof maybeFn === "function");
+}
+function callOrReturn(maybeFn, fnArgs) {
+  if (isFunction(maybeFn)) {
+    return maybeFn(fnArgs);
+  }
+  return maybeFn;
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/url.ts
+function buildUrl(url, params = {}) {
+  const baseUrl = new URL(url);
+  if (params && isEmptyObject(params)) {
+    return baseUrl.toString();
+  }
+  Object.keys(params).forEach((key) => {
+    const value = params[key];
+    baseUrl.searchParams.append(key, String(value));
+  });
+  return baseUrl.toString();
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/shared-constants.tsx
+function useGetConstantByType(type, key) {
+  const player = usePlayer();
+  return player?.constantsController.getConstants(key, type);
+}
+function useGetConstant(key) {
+  const player = usePlayer();
+  return player?.constantsController.getConstants(key, "constants");
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/app.tsx
+var import_react3 = __toESM(require("react"));
+var ReactPlayer = ({ view }) => {
+  return /* @__PURE__ */ import_react3.default.createElement(ReactAsset, { ...view });
+};
+var app_default = ReactPlayer;
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/plugins/onupdate-plugin.ts
+var OnUpdatePlugin = class {
+  constructor(onUpdate) {
+    this.name = "view-update";
+    this.onUpdateCallback = onUpdate;
+  }
+  apply(player) {
+    const updateTap = (updatedView) => {
+      this.onUpdateCallback(updatedView);
+    };
+    const viewTap = (view) => {
+      view.hooks.onUpdate.tap(this.name, updateTap);
+    };
+    player.hooks.view.tap(this.name, viewTap);
+    const currentPlayerState = player.getState();
+    if (currentPlayerState.status === "in-progress") {
+      const { currentView } = currentPlayerState.controllers.view;
+      if (currentView) {
+        viewTap(currentView);
+        const { lastUpdate } = currentView;
+        if (lastUpdate) {
+          this.onUpdateCallback(lastUpdate);
+        }
+      }
+    }
+  }
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/player.tsx
+var WEB_PLAYER_VERSION = "__VERSION__";
+var COMMIT = "__GIT_COMMIT__";
+var _window = typeof window === "undefined" ? void 0 : window;
+var ReactPlayer2 = class {
+  constructor(options) {
+    this.assetRegistry = new import_partial_match_registry.Registry();
+    this.hooks = {
+      /**
+       * A hook to create a React Component to be used for Player, regardless of the current flow state
+       */
+      webComponent: new import_tapable_ts.SyncWaterfallHook(),
+      /**
+       * A hook to create a React Component that's used to render a specific view.
+       * It will be called for each view update from the core player.
+       * Typically this will just be `Asset`
+       */
+      playerComponent: new import_tapable_ts.SyncWaterfallHook(),
+      /**
+       * A hook to execute async tasks before the view resets to undefined
+       */
+      onBeforeViewReset: new import_tapable_ts.AsyncParallelHook()
+    };
+    this.viewUpdateSubscription = new import_react_subscribe.Subscribe();
+    this.options = options ?? {};
+    const Devtools = _window?.__PLAYER_DEVTOOLS_PLUGIN;
+    const onUpdatePlugin = new OnUpdatePlugin(
+      this.viewUpdateSubscription.publish
+    );
+    const plugins = options?.plugins ?? [];
+    if (Devtools) {
+      plugins.push(new Devtools());
+    }
+    const playerPlugins = plugins.filter(
+      (p) => Boolean(p.apply)
+    );
+    this.player = options?.player ?? new import_player2.Player({ plugins: playerPlugins });
+    plugins.forEach((plugin) => {
+      if (plugin.applyReact) {
+        plugin.applyReact(this);
+      }
+    });
+    onUpdatePlugin.apply(this.player);
+    this.Component = this.createReactPlayerComponent();
+    this.reactPlayerInfo = {
+      playerVersion: this.player.getVersion(),
+      playerCommit: this.player.getCommit(),
+      reactPlayerVersion: WEB_PLAYER_VERSION,
+      reactPlayerCommit: COMMIT
+    };
+  }
+  /** Returns the current version of the underlying core Player */
+  getPlayerVersion() {
+    return this.reactPlayerInfo.playerVersion;
+  }
+  /** Returns the git commit used to build this core Player version */
+  getPlayerCommit() {
+    return this.reactPlayerInfo.playerCommit;
+  }
+  /** Find instance of [Plugin] that has been registered to the web player */
+  findPlugin(symbol) {
+    return this.options.plugins?.find((el) => el.symbol === symbol);
+  }
+  /** Register and apply [Plugin] if one with the same symbol is not already registered. */
+  registerPlugin(plugin) {
+    if (!plugin.applyReact)
+      return;
+    plugin.applyReact(this);
+    this.options.plugins?.push(plugin);
+  }
+  /** Returns the current version of the running React Player */
+  getReactPlayerVersion() {
+    return this.reactPlayerInfo.reactPlayerVersion;
+  }
+  /** Returns the git commit used to build the React Player version */
+  getReactPlayerCommit() {
+    return this.reactPlayerInfo.reactPlayerCommit;
+  }
+  createReactPlayerComponent() {
+    const BaseComp = this.hooks.webComponent.call(this.createReactComp());
+    const ReactPlayerComponent = (props) => {
+      return /* @__PURE__ */ import_react4.default.createElement(
+        import_react_error_boundary.ErrorBoundary,
+        {
+          fallbackRender: () => null,
+          onError: (err) => {
+            const playerState = this.player.getState();
+            if (playerState.status === "in-progress") {
+              playerState.fail(err);
+            }
+          }
+        },
+        /* @__PURE__ */ import_react4.default.createElement(PlayerContext.Provider, { value: { player: this.player } }, /* @__PURE__ */ import_react4.default.createElement(BaseComp, { ...props }))
+      );
+    };
+    return ReactPlayerComponent;
+  }
+  createReactComp() {
+    const ActualPlayerComp = this.hooks.playerComponent.call(app_default);
+    const WebPlayerComponent = () => {
+      const view = (0, import_react_subscribe.useSubscribedState)(this.viewUpdateSubscription);
+      this.viewUpdateSubscription.suspend();
+      return /* @__PURE__ */ import_react4.default.createElement(
+        AssetContext.Provider,
+        {
+          value: {
+            registry: this.assetRegistry
+          }
+        },
+        view && /* @__PURE__ */ import_react4.default.createElement(ActualPlayerComp, { view })
+      );
+    };
+    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.
+   */
+  setWaitForNextViewUpdate() {
+    const shouldCallResetHook = this.hooks.onBeforeViewReset.isUsed();
+    return this.viewUpdateSubscription.reset(
+      shouldCallResetHook ? this.hooks.onBeforeViewReset.call() : void 0
+    );
+  }
+  start(flow) {
+    this.setWaitForNextViewUpdate();
+    return this.player.start(flow).finally(async () => {
+      await this.setWaitForNextViewUpdate();
+    });
+  }
+};
+var WebPlayer = ReactPlayer2;
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/hooks.tsx
+var import_player3 = require("@player-ui/player");
+var import_react5 = __toESM(require("react"));
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/plugins/tapstate-plugin.ts
+var StateTapPlugin = class {
+  constructor(callback) {
+    this.name = "statetap";
+    this.callbackFunction = callback;
+  }
+  apply(player) {
+    player.hooks.state.tap("usePlayer", (newPlayerState) => {
+      this.callbackFunction(newPlayerState);
+    });
+  }
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/hooks.tsx
+var useReactPlayer = (options) => {
+  const [playerState, setPlayerState] = import_react5.default.useState(import_player3.NOT_STARTED_STATE);
+  const reactPlayer = import_react5.default.useMemo(() => {
+    const rp = new ReactPlayer2({
+      player: options?.player,
+      plugins: [
+        ...options?.plugins ?? [],
+        new StateTapPlugin(setPlayerState)
+      ]
+    });
+    return rp;
+  }, []);
+  const { player } = reactPlayer;
+  return {
+    reactPlayer,
+    player,
+    playerState
+  };
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/manager/managed-player.tsx
+var import_react7 = __toESM(require("react"));
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/manager/request-time.tsx
+var import_react6 = require("react");
+var import_metrics_plugin = require("@player-ui/metrics-plugin");
+var useRequestTime = () => {
+  const requestTimeRef = (0, import_react6.useRef)({});
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      requestTimeRef.current = {};
+    };
+  }, [requestTimeRef]);
+  const getRequestTime = (0, import_react6.useCallback)(() => {
+    const { end, start } = requestTimeRef.current;
+    if (end && start) {
+      return end - start;
+    }
+  }, [requestTimeRef]);
+  function withRequestTime(nextPromise) {
+    const getTime = typeof performance === "undefined" ? Date : performance;
+    requestTimeRef.current = { start: getTime.now() };
+    return nextPromise.finally(() => {
+      requestTimeRef.current = {
+        ...requestTimeRef.current,
+        end: getTime.now()
+      };
+    });
+  }
+  const RequestTimeMetricsPlugin = (0, import_react6.useMemo)(() => {
+    return {
+      name: "RequestTimeMetricsPlugin",
+      apply(player) {
+        player.applyTo(
+          import_metrics_plugin.MetricsCorePluginSymbol,
+          (metricsCorePlugin) => {
+            new import_metrics_plugin.RequestTimeWebPlugin(getRequestTime).apply(metricsCorePlugin);
+          }
+        );
+      }
+    };
+  }, [getRequestTime]);
+  return { withRequestTime, RequestTimeMetricsPlugin };
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/manager/managed-player.tsx
+function identityMiddleware(next) {
+  return next;
+}
+var ManagedState = class {
+  constructor({
+    middleware
+  }) {
+    this.middleware = middleware;
+    this.callbacks = [];
+  }
+  /** Add a listener to state changes */
+  addListener(callback) {
+    this.callbacks.push(callback);
+    return () => {
+      this.callbacks = this.callbacks.filter((s) => s !== callback);
+    };
+  }
+  /** start the managed flow */
+  start(options) {
+    const initialState = {
+      value: "not_started",
+      context: {
+        playerConfig: options.playerConfig,
+        reactPlayer: new ReactPlayer2(options.playerConfig),
+        manager: options.manager
+      }
+    };
+    this.setState(initialState);
+    return this;
+  }
+  /** reset starts from nothing */
+  reset() {
+    if (this.state?.value === "error") {
+      const { playerConfig, manager } = this.state.context;
+      this.start({ playerConfig, manager });
+    } else {
+      throw new Error("Flow must be in error state to reset");
+    }
+  }
+  /** restart starts from the last result */
+  restart() {
+    if (this.state?.value === "error") {
+      const { playerConfig, manager, prevResult, reactPlayer } = this.state.context;
+      this.setState({
+        value: "completed",
+        context: {
+          playerConfig,
+          manager,
+          result: prevResult,
+          reactPlayer
+        }
+      });
+    } else {
+      throw new Error("Flow must be in error state to restart");
+    }
+  }
+  async setState(state) {
+    this.state = state;
+    this.callbacks.forEach((c) => {
+      c.onState(state);
+    });
+    const { manager, reactPlayer, playerConfig } = state.context;
+    try {
+      const nextState = await this.processState(state, {
+        manager,
+        reactPlayer,
+        playerConfig
+      });
+      if (nextState) {
+        this.setState(nextState);
+      }
+    } catch (e) {
+      this.setState({
+        value: "error",
+        context: {
+          manager,
+          reactPlayer,
+          playerConfig,
+          error: e
+        }
+      });
+    }
+  }
+  async processState(state, context) {
+    if (state.value === "not_started" || state.value === "completed") {
+      const prevResult = state.value === "completed" ? state.context.result : void 0;
+      const middleware = this.middleware?.next ?? identityMiddleware;
+      return {
+        value: "pending",
+        context: {
+          ...context,
+          prevResult,
+          next: middleware(state.context.manager.next(prevResult))
+        }
+      };
+    }
+    if (state.value === "pending") {
+      const nextResult = await state.context.next;
+      if (nextResult.done) {
+        return {
+          value: "ended",
+          context: {
+            ...context,
+            result: state.context.prevResult
+          }
+        };
+      }
+      return {
+        value: "loaded",
+        context: {
+          ...context,
+          prevResult: state.context.prevResult,
+          flow: nextResult.value
+        }
+      };
+    }
+    if (state.value === "loaded") {
+      return {
+        value: "running",
+        context: {
+          ...context,
+          flow: state.context.flow,
+          prevResult: state.context.prevResult,
+          result: state.context.reactPlayer.start(state.context.flow)
+        }
+      };
+    }
+    if (state.value === "running") {
+      const result = await state.context.result;
+      return {
+        value: "completed",
+        context: {
+          ...context,
+          result
+        }
+      };
+    }
+  }
+};
+var managedPlayerStateMachines = /* @__PURE__ */ new WeakMap();
+var usePersistentStateMachine = (options) => {
+  const keyRef = import_react7.default.useRef({
+    _key: Symbol("managed-player")
+  });
+  const managedState = managedPlayerStateMachines.get(keyRef.current) ?? new ManagedState({ middleware: options.middleware });
+  managedPlayerStateMachines.set(keyRef.current, managedState);
+  const [state, setState] = import_react7.default.useState(managedState.state);
+  import_react7.default.useEffect(() => {
+    const unsub = managedState.addListener({
+      onState: (s) => {
+        setState(s);
+      }
+    });
+    if (managedState.state === void 0) {
+      managedState.start(options);
+    }
+    return unsub;
+  }, []);
+  return { managedState, state };
+};
+var ManagedPlayer = (props) => {
+  const { withRequestTime, RequestTimeMetricsPlugin } = useRequestTime();
+  const { state, managedState } = usePersistentStateMachine({
+    manager: props.manager,
+    middleware: { next: withRequestTime },
+    playerConfig: {
+      plugins: [...props?.plugins ?? [], RequestTimeMetricsPlugin],
+      player: props.player
+    }
+  });
+  import_react7.default.useEffect(() => {
+    if (state?.value === "ended") {
+      props.onComplete?.(state?.context.result);
+    } else if (state?.value === "error") {
+      props.onError?.(state?.context.error);
+    } else if (state?.value === "running") {
+      props.onStartedFlow?.();
+    }
+  }, [state]);
+  import_react7.default.useEffect(() => {
+    return () => {
+      const playerState = state?.context.reactPlayer.player.getState();
+      if (state?.value === "running" && playerState?.status === "in-progress") {
+        props.manager.terminate?.(playerState.controllers.data.serialize());
+      }
+    };
+  }, [props.manager, state?.context.reactPlayer.player, state?.value]);
+  if (state?.value === "error") {
+    if (props.fallbackComponent) {
+      return /* @__PURE__ */ import_react7.default.createElement(
+        props.fallbackComponent,
+        {
+          reset: () => {
+            managedState.reset();
+          },
+          retry: () => {
+            managedState.restart();
+          },
+          error: state.context.error
+        }
+      );
+    }
+    if (!props.onError) {
+      throw state.context.error;
+    }
+  }
+  if (state?.context.reactPlayer) {
+    const { Component } = state.context.reactPlayer;
+    return /* @__PURE__ */ import_react7.default.createElement(Component, null);
+  }
+  return null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AssetContext,
+  ManagedPlayer,
+  PlayerContext,
+  ReactAsset,
+  ReactPlayer,
+  WebPlayer,
+  buildUrl,
+  callOrReturn,
+  isEmptyObject,
+  isFunction,
+  removeEmptyValuesFromObject,
+  trimSlashes,
+  useAssetProps,
+  useGetConstant,
+  useGetConstantByType,
+  useLogger,
+  usePersistentStateMachine,
+  usePlayer,
+  useReactPlayer,
+  useRequestTime,
+  ...require("@player-ui/player")
+});
+//# sourceMappingURL=index.cjs.map