@netless/fastboard-core 0.2.11 → 0.3.0-canary.0

package/src/impl/FastboardPlayer.ts

@@ -0,0 +1,201 @@
+import type { MountParams, PublicEvent } from "@netless/window-manager";
+import type {
+  Player,
+  PlayerPhase as PlayerPhaseEnum,
+  PlayerCallbacks,
+  PlayerState,
+  PlayerSeekingResult,
+  ReplayRoomParams,
+  ViewCallbacks,
+  WhiteWebSdkConfiguration,
+} from "white-web-sdk";
+
+import { WhiteWebSdk } from "white-web-sdk";
+import { WindowManager } from "@netless/window-manager";
+import { readable, writable } from "../utils";
+import { ensure_window_manager } from "../internal";
+
+class FastboardPlayerBase {
+  public constructor(readonly sdk: WhiteWebSdk, readonly player: Player, readonly manager: WindowManager) {}
+
+  protected _destroyed = false;
+  protected _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("FastboardApp has been destroyed");
+    }
+  }
+
+  protected _addPlayerListener<K extends keyof PlayerCallbacks>(name: K, listener: PlayerCallbacks[K]) {
+    this._assertNotDestroyed();
+    this.player.callbacks.on(name, listener);
+    return () => this.player.callbacks.off(name, listener);
+  }
+
+  protected _addManagerListener<K extends keyof PublicEvent>(
+    name: K,
+    listener: (value: PublicEvent[K]) => void
+  ) {
+    this._assertNotDestroyed();
+    this.manager.emitter.on(name, listener);
+    return () => this.manager.emitter.off(name, listener);
+  }
+
+  protected _addMainViewListener<K extends keyof ViewCallbacks>(name: K, listener: ViewCallbacks[K]) {
+    this._assertNotDestroyed();
+    this.manager.mainView.callbacks.on(name, listener);
+    return () => this.manager.mainView.callbacks.off(name, listener);
+  }
+
+  public destroy() {
+    this._destroyed = true;
+    this.manager.destroy();
+    return this.player.callbacks.off();
+  }
+}
+
+type PlayerPhase = `${PlayerPhaseEnum}`;
+
+export type { PlayerPhase, PlayerSeekingResult };
+
+export class FastboardPlayer extends FastboardPlayerBase {
+  /**
+   * Render this player to some DOM.
+   */
+  bindContainer(container: HTMLElement) {
+    this._assertNotDestroyed();
+    this.manager.bindContainer(container);
+  }
+
+  /**
+   * Move window-manager's collector to some place.
+   */
+  bindCollector(container: HTMLElement) {
+    this._assertNotDestroyed();
+    this.manager.bindCollectorContainer(container);
+  }
+
+  readonly currentTime = writable(
+    this.player.progressTime,
+    set => this._addPlayerListener("onProgressTimeChanged", set),
+    this.player.seekToProgressTime.bind(this.player)
+  );
+
+  readonly phase = readable<PlayerPhase>(this.player.phase, set =>
+    this._addPlayerListener("onPhaseChanged", set)
+  );
+
+  readonly canplay = readable(this.player.isPlayable, set =>
+    this._addPlayerListener("onIsPlayableChanged", set)
+  );
+
+  private _setSpeed!: (value: number) => void;
+  readonly speed = writable(
+    this.player.playbackSpeed,
+    set => {
+      this._setSpeed = set;
+    },
+    value => {
+      this.player.playbackSpeed = value;
+      this._setSpeed(value);
+    }
+  );
+
+  private _setReady!: (value: boolean) => void;
+  readonly ready = readable(false, set => {
+    this._setReady = set;
+  });
+
+  private _setDuration!: (value: number) => void;
+  readonly duration = readable(0, set => {
+    this._setDuration = set;
+  });
+
+  readonly state = readable<PlayerState | null>(null, set => {
+    const update = () => set(this.player.state);
+    this.player.callbacks.once("onLoadFirstFrame", () => {
+      this._setDuration(this.player.timeDuration);
+      this._setReady(true);
+      update();
+    });
+    return this._addPlayerListener("onPlayerStateChanged", update);
+  });
+
+  seek(timestamp: number) {
+    this._assertNotDestroyed();
+    return this.player.seekToProgressTime(timestamp);
+  }
+
+  play() {
+    this._assertNotDestroyed();
+    this.player.play();
+  }
+
+  pause() {
+    this._assertNotDestroyed();
+    this.player.pause();
+  }
+
+  stop() {
+    this._assertNotDestroyed();
+    this.player.stop();
+  }
+
+  setSpeed(value: number) {
+    this._assertNotDestroyed();
+    this.speed.set(value);
+  }
+}
+
+export interface FastboardReplayOptions {
+  sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState">;
+  replayRoom: Omit<ReplayRoomParams, "useMultiViews"> & {
+    callbacks?: Partial<PlayerCallbacks>;
+  };
+  managerConfig?: Omit<MountParams, "room">;
+}
+
+/**
+ * Create a FastboardApp instance.
+ * @example
+ * let player = await replayFastboard({
+ *   sdkConfig: {
+ *     appIdentifier: import.meta.env.VITE_APPID,
+ *     region: 'cn-hz',
+ *   },
+ *   replayRoom: {
+ *     uid: unique_id,
+ *     uuid: import.meta.env.VITE_ROOM_UUID,
+ *     roomToken: import.meta.env.VITE_ROOM_TOKEN,
+ *   },
+ * })
+ */
+export async function replayFastboard({
+  sdkConfig,
+  replayRoom: { callbacks, ...replayRoomParams },
+  managerConfig,
+}: FastboardReplayOptions) {
+  const sdk = new WhiteWebSdk({
+    ...sdkConfig,
+    useMobXState: true,
+  });
+
+  const player = await sdk.replayRoom(
+    {
+      ...ensure_window_manager(replayRoomParams),
+      useMultiViews: true,
+    },
+    callbacks
+  );
+
+  const managerPromise = WindowManager.mount({
+    cursor: true,
+    ...managerConfig,
+    room: player,
+  });
+
+  player.play();
+  const manager = await managerPromise;
+  player.pause();
+
+  return new FastboardPlayer(sdk, player, manager);
+}

package/src/impl/index.ts

@@ -0,0 +1,4 @@
+export * from "./FastboardApp";
+export * from "./FastboardPlayer";
+
+import "../behaviors";

package/src/index.ts

@@ -1,3 +1,2 @@
-import "./behaviors/register-slide";
-
-export * from "./minimal";
+export * from "./utils";
+export * from "./impl";

package/src/internal.ts

@@ -0,0 +1,14 @@
+import type { JoinRoomParams, ReplayRoomParams } from "white-web-sdk";
+import type { PublicEvent } from "@netless/window-manager";
+import { WindowManager } from "@netless/window-manager";
+
+export function ensure_window_manager<T extends JoinRoomParams | ReplayRoomParams>(joinRoom: T): T {
+  if (!joinRoom.invisiblePlugins || !joinRoom.invisiblePlugins.includes(WindowManager)) {
+    joinRoom.invisiblePlugins = [...(joinRoom.invisiblePlugins || []), WindowManager];
+  }
+  return joinRoom;
+}
+
+export function transform_app_status(status: PublicEvent["loadApp"]["status"]) {
+  return status === "start" ? "loading" : status === "failed" ? "failed" : "idle";
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./store";
+export * from "./misc";
+export * from "./uid";
+export * from "./warn";

package/src/utils/misc.ts

@@ -0,0 +1,49 @@
+import type { ConvertedFile, SceneDefinition, Size } from "white-web-sdk";
+
+export function getImageSize(url: string, fallback: Size) {
+  return new Promise<Size>(resolve => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(fallback);
+    img.src = url;
+  });
+}
+
+export function makeSlideParams(scenes: SceneDefinition[]) {
+  const emptyScenes: SceneDefinition[] = [];
+  let taskId = "";
+  let url = "";
+
+  // e.g. "ppt(x)://cdn/prefix/dynamicConvert/{taskId}/1.slide"
+  const pptSrcRE = /^pptx?(?<prefix>:\/\/\S+?dynamicConvert)\/(?<taskId>\w+)\//;
+
+  for (const { name, ppt } of scenes) {
+    // make sure scenesWithoutPPT.length === scenes.length
+    emptyScenes.push({ name });
+
+    if (!ppt || !ppt.src.startsWith("ppt")) {
+      continue;
+    }
+    const match = pptSrcRE.exec(ppt.src);
+    if (!match || !match.groups) {
+      continue;
+    }
+    taskId = match.groups.taskId;
+    url = "https" + match.groups.prefix;
+    break;
+  }
+
+  return { scenes: emptyScenes, taskId, url };
+}
+
+export function convertedFileToScene(f: ConvertedFile, i: number): SceneDefinition {
+  return {
+    name: String(i + 1),
+    ppt: {
+      src: f.conversionFileUrl,
+      width: f.width,
+      height: f.height,
+      previewURL: f.preview,
+    },
+  };
+}

package/src/utils/store.ts

@@ -0,0 +1,87 @@
+// This is a simple mimic of svelte/store.
+export type Subscriber<T> = (value: T) => void;
+export type Unsubscriber = () => void;
+export type Updater<T> = (value: T) => T;
+export type StartStopNotifier<T> = (set: Subscriber<T>) => Unsubscriber | void;
+
+export interface Readable<T> {
+  readonly value: T;
+  subscribe(this: void, run: Subscriber<T>): Unsubscriber;
+  reaction(this: void, run: Subscriber<T>): Unsubscriber;
+}
+
+export interface Writable<T> extends Readable<T> {
+  set(this: void, value: T): void;
+  update(this: void, updater: Updater<T>): void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}
+
+function safe_not_equal(a: unknown, b: unknown) {
+  return a != a ? b == b : a !== b || (a && typeof a === "object") || typeof a === "function";
+}
+
+export function readable<T>(value: T, start: StartStopNotifier<T> = noop): Readable<T> {
+  let stop: Unsubscriber | undefined;
+  const subscribers = new Set<Subscriber<T>>();
+  function set(new_value: T) {
+    if (safe_not_equal(value, new_value)) {
+      value = new_value;
+      if (stop) {
+        for (const run of subscribers) {
+          run(value);
+        }
+      }
+    }
+  }
+  function subscribe(run: Subscriber<T>) {
+    subscribers.add(run);
+    if (subscribers.size === 1) {
+      stop = start(set) || noop;
+    }
+    run(value);
+    return () => {
+      subscribers.delete(run);
+      if (subscribers.size === 0) {
+        stop && stop();
+        stop = undefined;
+      }
+    };
+  }
+  function reaction(run: Subscriber<T>) {
+    subscribers.add(run);
+    if (subscribers.size === 1) {
+      stop = start(set) || noop;
+    }
+    return () => {
+      subscribers.delete(run);
+      if (subscribers.size === 0) {
+        stop && stop();
+        stop = undefined;
+      }
+    };
+  }
+  return {
+    get value() {
+      return value;
+    },
+    subscribe,
+    reaction,
+  };
+}
+
+export function writable<T>(value: T, start: StartStopNotifier<T> = noop, set: Subscriber<T>): Writable<T> {
+  const internal = readable(value, start);
+  return {
+    get value() {
+      return internal.value;
+    },
+    subscribe: internal.subscribe,
+    reaction: internal.reaction,
+    set,
+    update(fn: Updater<T>) {
+      set(fn(value));
+    },
+  };
+}

package/src/utils/uid.ts

@@ -0,0 +1,12 @@
+// Copy from https://github.com/crimx/side-effect-manager/blob/main/src/gen-uid.ts
+const SOUP = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const SOUP_LEN = 62; // SOUP.length
+const ID_LEN = 20;
+const reusedIdCarrier = /* @__PURE__ */ Array(ID_LEN);
+
+export function genUID() {
+  for (let i = 0; i < ID_LEN; i++) {
+    reusedIdCarrier[i] = SOUP.charAt(Math.random() * SOUP_LEN);
+  }
+  return reusedIdCarrier.join("");
+}

package/src/utils/warn.ts

@@ -0,0 +1,11 @@
+const warnings = {
+  "no-ppt-in-scenes":
+    "You're probably inserting the slide app in a wrong way, there shouldn't exist `scenes[0].ppt`.",
+} as const;
+const warned = new Set<string>();
+
+export function warn(id: keyof typeof warnings) {
+  if (warned.has(id)) return;
+  warned.add(id);
+  console.warn(warnings[id]);
+}