@netless/fastboard-core 0.3.6 → 1.0.0-canary.2

package/src/FastboardPlayer.ts

@@ -0,0 +1,240 @@
+import type { Disposer, Readable, StartStopNotifier, Writable } from "./store";
+import type {
+  MountParams,
+  NetlessApp,
+  Player,
+  PlayerCallbacks,
+  PlayerPhase,
+  PlayerSeekingResult,
+  PlayerState,
+  ReplayRoomParams,
+  SyncedStore,
+  WhiteWebSdkConfiguration,
+} from "./typings";
+
+import { WhiteWebSdk } from "white-web-sdk";
+import { WindowManager } from "@netless/window-manager";
+
+import { addPlayerListener, ensureOfficialPlugins } from "./helpers";
+import { createVal } from "./store";
+import { SyncedStorePlugin } from "@netless/synced-store";
+
+// The inheritance is for simplifying the code, so that we can use
+// `prop = f(this.player)` directly in its child class.
+class FastboardPlayerStruct<TEventData> {
+  // Intensionally not class-field to prevent `__publicField` usage.
+  protected declare _disposers: Disposer[];
+  protected declare _destroyed: boolean;
+  protected _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("FastboardPlayer has been destroyed");
+    }
+  }
+  protected _flushAllDisposers() {
+    this._disposers.forEach(disposer => disposer());
+    this._disposers = [];
+  }
+
+  constructor(
+    readonly sdk: WhiteWebSdk,
+    readonly player: Player,
+    readonly manager: WindowManager,
+    readonly syncedStore: SyncedStore<TEventData>
+  ) {
+    this._disposers = [];
+    this._destroyed = false;
+  }
+
+  /** @internal */
+  protected _val<T>(init: T, start: StartStopNotifier<T>): Readable<T>;
+  /** @internal */
+  protected _val<T>(init: T, start: StartStopNotifier<T>, setter: (value: T) => void): Writable<T>;
+  protected _val<T>(init: T, start: StartStopNotifier<T>, setter?: (value: T) => void) {
+    const val = createVal(init, start, setter as (value: T) => void);
+    this._disposers.push(val.dispose.bind(val));
+    return val;
+  }
+}
+
+export class FastboardPlayer<TEventData = any> extends FastboardPlayerStruct<TEventData> {
+  constructor(
+    sdk: WhiteWebSdk,
+    player: Player,
+    manager: WindowManager,
+    syncedStore: SyncedStore<TEventData>
+  ) {
+    super(sdk, player, manager, syncedStore);
+
+    // Guard `app.destroy()` so that network errors won't break fastboard.
+    this._disposers.push(
+      addPlayerListener(this.player, "onStoppedWithError", error => {
+        console.warn("FastboardPlayer was stopped with error.");
+        console.error(error);
+      })
+    );
+  }
+
+  /**
+   * Disconnect from whiteboard room.
+   */
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    this._flushAllDisposers();
+    this.manager.destroy();
+    this.player.callbacks.off();
+  }
+
+  /**
+   * Render this app 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);
+  }
+
+  /**
+   * Player current time in milliseconds.
+   */
+  readonly currentTime = this._val(
+    this.player.progressTime,
+    set => addPlayerListener(this.player, "onProgressTimeChanged", set),
+    time => this.player.seekToProgressTime(time)
+  );
+
+  /**
+   * Player state, like "is it playing?".
+   */
+  readonly phase = this._val<PlayerPhase>(this.player.phase, set =>
+    addPlayerListener(this.player, "onPhaseChanged", set)
+  );
+
+  /**
+   * Will become true after buffering.
+   */
+  readonly canplay = this._val(this.player.isPlayable, set =>
+    addPlayerListener(this.player, "onIsPlayableChanged", set)
+  );
+
+  /** @internal */
+  private _setPlaybackRate!: (value: number) => void;
+  /**
+   * Playback speed, default `1`.
+   */
+  readonly playbackRate = this._val(
+    this.player.playbackSpeed,
+    set => {
+      this._setPlaybackRate = set;
+    },
+    speed => this._setPlaybackRate((this.player.playbackSpeed = speed))
+  );
+
+  /**
+   * Playback duration in milliseconds.
+   */
+  readonly duration = this._val(this.player.timeDuration, _set => {});
+
+  /**
+   * Get state of room at current time.
+   */
+  readonly state = this._val<PlayerState>(this.player.state, set =>
+    addPlayerListener(this.player, "onPlayerStateChanged", () => set(this.player.state))
+  );
+
+  /**
+   * Seek to some time in milliseconds.
+   */
+  seek(timestamp: number): Promise<PlayerSeekingResult> {
+    this._assertNotDestroyed();
+    return this.player.seekToProgressTime(timestamp);
+  }
+
+  /**
+   * Change player state to playing.
+   */
+  play() {
+    this.player.play();
+  }
+
+  /**
+   * Change player state to paused.
+   */
+  pause() {
+    this._assertNotDestroyed();
+    this.player.pause();
+  }
+
+  /**
+   * Change player state to stopped.
+   */
+  stop() {
+    this._assertNotDestroyed();
+    this.player.stop();
+  }
+
+  /**
+   * Set playback speed, the same as `player.playbackRate.set(x)`.
+   */
+  setPlaybackRate(value: number) {
+    this._assertNotDestroyed();
+    this.playbackRate.set(value);
+  }
+}
+
+export interface FastboardReplayOptions {
+  sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState"> & {
+    region: NonNullable<WhiteWebSdkConfiguration["region"]>;
+  };
+  replayRoom: Omit<ReplayRoomParams, "useMultiViews"> & {
+    callbacks?: Partial<PlayerCallbacks>;
+  };
+  managerConfig?: Omit<MountParams, "room">;
+  netlessApps?: NetlessApp[];
+}
+
+export async function replayFastboardCore<TEventData = any>({
+  sdkConfig,
+  replayRoom: { callbacks, ...replayRoomParams },
+  managerConfig,
+  netlessApps,
+}: FastboardReplayOptions) {
+  const sdk = new WhiteWebSdk({
+    ...sdkConfig,
+    useMobXState: true,
+  });
+
+  if (netlessApps) {
+    netlessApps.forEach(app => WindowManager.register({ kind: app.kind, src: app }));
+  }
+
+  const player = await sdk.replayRoom(
+    {
+      ...ensureOfficialPlugins(replayRoomParams),
+      useMultiViews: true,
+    },
+    callbacks
+  );
+
+  const syncedStore = await SyncedStorePlugin.init<TEventData>(player);
+
+  const managerPromise = WindowManager.mount({
+    cursor: true,
+    ...managerConfig,
+    room: player,
+  });
+
+  player.play();
+  const manager = await managerPromise;
+  player.pause();
+  await player.seekToProgressTime(0);
+
+  return new FastboardPlayer<TEventData>(sdk, player, manager, syncedStore);
+}

package/src/helpers.ts

@@ -0,0 +1,57 @@
+import { SyncedStorePlugin } from "@netless/synced-store";
+import { WindowManager } from "@netless/window-manager";
+
+import type {
+  JoinRoomParams,
+  Player,
+  PlayerCallbacks,
+  PublicEvent,
+  ReplayRoomParams,
+  Room,
+  RoomCallbacks,
+  View,
+  ViewCallbacks,
+} from "./typings";
+
+export function addRoomListener<K extends keyof RoomCallbacks>(
+  room: Room,
+  name: K,
+  listener: RoomCallbacks[K]
+): () => void {
+  room.callbacks.on(name, listener);
+  return () => room.callbacks.off(name, listener);
+}
+
+export function addPlayerListener<K extends keyof PlayerCallbacks>(
+  player: Player,
+  name: K,
+  listener: PlayerCallbacks[K]
+): () => void {
+  player.callbacks.on(name, listener);
+  return () => player.callbacks.off(name, listener);
+}
+
+export function addViewListener<K extends keyof ViewCallbacks>(
+  view: View,
+  name: K,
+  listener: (value: ViewCallbacks[K]) => void
+): () => void {
+  view.callbacks.on(name, listener);
+  return () => view.callbacks.off(name, listener);
+}
+
+export function addManagerListener<K extends keyof PublicEvent>(
+  manager: WindowManager,
+  name: K,
+  listener: (value: PublicEvent[K]) => void
+): () => void {
+  return manager.emitter.on(name, listener);
+}
+
+export function ensureOfficialPlugins<T extends JoinRoomParams | ReplayRoomParams>(joinRoom: T): T {
+  const plugins = new Set(joinRoom.invisiblePlugins || []);
+  plugins.add(WindowManager);
+  plugins.add(SyncedStorePlugin);
+  joinRoom.invisiblePlugins = Array.from(plugins);
+  return joinRoom;
+}

package/src/index.ts

@@ -1,3 +1,11 @@
-export * from "./utils";
-export * from "./impl";
-export * from "./behaviors";
+declare const __NAME__: string;
+declare const __VERSION__: string;
+
+export const name = __NAME__;
+export const version = __VERSION__;
+
+export * from "./typings";
+export * from "./helpers";
+export * from "./store";
+export * from "./FastboardApp";
+export * from "./FastboardPlayer";

package/src/store.ts

@@ -0,0 +1,83 @@
+export type Subscriber<T> = (value: T) => void;
+export type Updater<T> = (value: T) => T;
+export type Disposer = () => void;
+export type StartStopNotifier<T> = (set: Subscriber<T>) => Disposer | void;
+
+export interface Readable<T> {
+  readonly value: T;
+  readonly subs: Set<Subscriber<T>>;
+  subscribe(this: Readable<T>, run: Subscriber<T>): Disposer;
+  reaction(this: Readable<T>, run: Subscriber<T>): Disposer;
+  dispose(this: Readable<T>): void;
+}
+
+export interface Writable<T> extends Readable<T> {
+  set(this: Writable<T>, value: T): void;
+  update(this: Writable<T>, updater: Updater<T>): void;
+}
+
+function is_function(x: unknown): x is () => void {
+  return typeof x === "function";
+}
+
+function safe_not_equal(a: unknown, b: unknown): boolean {
+  return a != a ? b == b : a !== b || ((a as boolean) && typeof a === "object") || typeof a === "function";
+}
+
+// This is not svelte/store.
+class Val<T> implements Writable<T> {
+  declare value: T;
+  declare readonly subs: Set<Subscriber<T>>;
+  constructor(value: T) {
+    this.value = value;
+    this.subs = new Set();
+  }
+  subscribe(run: Subscriber<T>): Disposer {
+    this.subs.add(run);
+    run(this.value);
+    return () => this.subs.delete(run);
+  }
+  reaction(run: Subscriber<T>): Disposer {
+    this.subs.add(run);
+    return () => this.subs.delete(run);
+  }
+  set(value: T) {
+    if (safe_not_equal(this.value, value)) {
+      this.value = value;
+      this.subs.forEach(sub => sub(value));
+    }
+  }
+  update(updater: Updater<T>) {
+    this.set(updater(this.value));
+  }
+  dispose() {
+    this.subs.clear();
+  }
+}
+
+/**
+ * ```js
+ * const mediaQuery = matchMedia("(prefers-color-scheme: dark)")
+ * const isDark = createVal(mediaQuery.matches, set => {
+ *   const update = () => set(mediaQuery.matches)
+ *   mediaQuery.addEventListener("change", update)
+ *   return () => mediaQuery.removeEventListener("change", update)
+ * });
+ * ```
+ */
+export function createVal<T>(init: T, start: StartStopNotifier<T>): Readable<T>;
+export function createVal<T>(init: T, start: StartStopNotifier<T>, setter: (value: T) => void): Writable<T>;
+export function createVal<T>(init: T, start: StartStopNotifier<T>, setter?: ((value: T) => void) | null) {
+  const val = new Val(init);
+  const stop = start(val.set.bind(val));
+  if (stop && is_function(stop)) {
+    val.dispose = function dispose() {
+      this.subs.clear();
+      stop();
+    };
+  }
+  if (setter) {
+    val.set = setter;
+  }
+  return val;
+}

package/src/typings.ts

@@ -0,0 +1,42 @@
+import type { ApplianceNames } from "white-web-sdk";
+
+export type { Diff, DiffOne, Storage, SyncedStore } from "@netless/synced-store";
+export type {
+  AddPageParams,
+  MountParams,
+  NetlessApp,
+  PublicEvent,
+  WindowManager,
+} from "@netless/window-manager";
+export type {
+  AnimationMode,
+  ApplianceNames,
+  Camera,
+  CameraState,
+  Color,
+  ConversionResponse,
+  ConvertedFile,
+  HotKey,
+  HotKeys,
+  JoinRoomParams,
+  MemberState,
+  Player,
+  PlayerCallbacks,
+  PlayerPhase,
+  PlayerSeekingResult,
+  PlayerState,
+  Rectangle,
+  ReplayRoomParams,
+  Room,
+  RoomCallbacks,
+  RoomPhase,
+  RoomState,
+  SceneDefinition,
+  ShapeType,
+  View,
+  ViewCallbacks,
+  WhiteWebSdk,
+  WhiteWebSdkConfiguration,
+} from "white-web-sdk";
+
+export type Appliance = `${ApplianceNames}`;

package/src/behaviors/index.ts

@@ -1,62 +0,0 @@
-import type { RegisterParams } from "@netless/window-manager";
-import { WindowManager } from "@netless/window-manager";
-import SlideApp, { apps, addHooks, previewSlide } from "@netless/app-slide";
-
-export type {
-  AppOptions as SlideOptions,
-  Controller as SlideController,
-  PreviewParams,
-  SlidePreviewer,
-} from "@netless/app-slide";
-export { previewSlide, SlideApp, addHooks as addSlideHooks, apps as slideApps };
-
-export interface AppsConfig {
-  [kind: string]: Omit<RegisterParams, "kind">;
-}
-
-const DefaultApps: AppsConfig = {
-  Monaco: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-monaco/0.1.12/dist/main.iife.js",
-  },
-  Countdown: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-countdown/0.0.2/dist/main.iife.js",
-  },
-  GeoGebra: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-geogebra/0.0.4/dist/main.iife.js",
-    appOptions: {
-      HTML5Codebase: "https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d",
-    },
-  },
-  EmbeddedPage: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-embedded-page/0.1.1/dist/main.iife.js",
-  },
-  Plyr: {
-    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-plyr/0.1.3/dist/main.iife.js",
-  },
-};
-
-WindowManager.register({
-  kind: "Slide",
-  appOptions: { debug: false },
-  src: SlideApp,
-  addHooks,
-});
-
-for (const kind in DefaultApps) {
-  if (Object.prototype.hasOwnProperty.call(DefaultApps, kind)) {
-    const options = DefaultApps[kind];
-    WindowManager.register({ kind, ...options });
-  }
-}
-
-export const register = WindowManager.register.bind(WindowManager);
-
-declare let __NAME__: string, __VERSION__: string;
-
-export const version = __VERSION__;
-
-if (typeof window !== "undefined") {
-  let str = (window as { __netlessUA?: string }).__netlessUA || "";
-  str += ` ${__NAME__}@${version} `;
-  (window as { __netlessUA?: string }).__netlessUA = str;
-}