@netless/app-slide 0.3.0-canary.11 → 0.3.0-canary.13

package/src/connect.ts

@@ -0,0 +1,116 @@
+import type { AppContext, Storage, WhiteBoardView } from "@netless/window-manager";
+import type { SideEffectManager } from "side-effect-manager";
+import type { SlideViewer } from "./SlideViewer";
+import type { Attributes } from "./typings";
+
+import { get } from "./utils";
+
+export interface ConnectParams {
+  context: AppContext;
+  storage: Storage<Attributes>;
+  viewer: SlideViewer;
+  sideEffect: SideEffectManager;
+  logger: { info: (msg: string) => void };
+}
+
+export function connect({ context, storage, viewer, sideEffect, logger }: ConnectParams) {
+  const log = logger.info.bind(logger);
+
+  let whiteboard: WhiteBoardView | null = null;
+
+  viewer.prepare(({ width, height, slideCount }) => {
+    if (context.destroyed) return;
+    width && context.box.setStageRatio(height / width);
+    whiteboard = context.createWhiteBoardView({ size: slideCount });
+    whiteboard.setBaseRect({ width, height });
+    kick_start();
+  });
+
+  const { slide } = viewer;
+
+  function dump_state(state: unknown = storage.state.state) {
+    return JSON.stringify(state);
+  }
+
+  function kick_start() {
+    if (storage.state.state) {
+      log("[Slide] restore " + dump_state());
+      slide.setSlideState(storage.state.state);
+    } else if (context.isAddApp) {
+      log("[Slide] kick start");
+      slide.renderSlide(1);
+    } else {
+      log("[Slide] wait for restore");
+      const timeoutID = sideEffect.add(() => {
+        const timer = setInterval(() => {
+          if (!storage.state.state) {
+            log("[Slide] timeout");
+            slide.renderSlide(1);
+          }
+        }, 15 * 1000);
+        return () => clearInterval(timer);
+      });
+      const disposerID = sideEffect.push(
+        storage.on("stateChanged", () => {
+          if (storage.state.state) {
+            log("[Slide] restore " + dump_state());
+            slide.setSlideState(storage.state.state);
+            sideEffect.flush(disposerID);
+            sideEffect.flush(timeoutID);
+          }
+        })
+      );
+    }
+  }
+
+  // setup sync event
+  slide.on("stateChange", () => {
+    if (context.isWritable) {
+      // log("[Slide] save state " + dump_state(slide.slideState));
+      storage.setState({ state: slide.slideState });
+    }
+  });
+  slide.on("syncDispatch", payload => {
+    if (context.isWritable) {
+      log("[Slide] dispatch " + dump_state(get(payload, "uuid")));
+      context.dispatchMagixEvent("syncDispatch", payload);
+    }
+  });
+  sideEffect.push(
+    context.addMagixEventListener(
+      "syncDispatch",
+      ({ payload }) => {
+        log("[Slide] receive " + dump_state(get(payload, "uuid")));
+        slide.emit("syncReceive", payload);
+      },
+      { fireSelfEventAfterCommit: true }
+    )
+  );
+
+  // save state
+  slide.on("slideChange", page => {
+    if (context.isWritable && whiteboard) {
+      log("[Slide] page to " + page);
+      whiteboard.jumpPage(page - 1);
+    }
+  });
+
+  // handle ui events
+  viewer.setReadonly(!context.isWritable);
+  sideEffect.push(
+    context.emitter.on("writableChange", w => {
+      viewer.setReadonly(!w);
+    })
+  );
+
+  sideEffect.addEventListener(window, "keydown", ev => {
+    if (context.box.focus) {
+      if (ev.key === "ArrowUp" || ev.key === "ArrowLeft") {
+        viewer.slide.prevStep();
+      }
+      if (ev.key === "ArrowRight" || ev.key === "ArrowDown") {
+        viewer.slide.nextStep();
+      }
+    }
+  });
+}

package/src/constants.ts

@@ -1,3 +1,3 @@
-export const namespace = "netless-app-slide";
+export const class_name = "netless-app-slide";
 
 export const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";

package/src/icons/index.ts

@@ -0,0 +1,5 @@
+export { sidebarSVG } from "./sidebar";
+export { arrowLeftSVG } from "./arrow-left";
+export { playSVG } from "./play";
+export { pauseSVG } from "./pause";
+export { arrowRightSVG } from "./arrow-right";

package/src/index.ts

@@ -1,17 +1,21 @@
-import type { AppContext, NetlessApp, Player, WhiteBoardView } from "@netless/window-manager";
-import type { AddHooks, AppOptions, Attributes, MagixEvents, SlideState } from "./typings";
+import type { NetlessApp } from "@netless/window-manager";
 import type { SlideViewerOptions } from "./SlideViewer";
+import type { AddHooks, AppOptions, Attributes, MagixEvents, SlideState } from "./typings";
 
 export type { SlideState, AddHooks, AppOptions, Attributes, MagixEvents, SlideViewerOptions };
 
-import ColorString from "color-string";
-import { SideEffectManager } from "side-effect-manager";
 import { Slide } from "@netless/slide";
-import { SlideViewer } from "./SlideViewer";
-import { refrigerator, addHooks } from "./Refrigerator";
+import { SideEffectManager } from "side-effect-manager";
+
 import { DefaultUrl } from "./constants";
+import { addHooks, refrigerator } from "./Refrigerator";
+import { SlideViewer } from "./SlideViewer";
+import { Logger } from "./Logger";
+import { connect } from "./connect";
+import { previewSlide } from "./preview";
+import { make_bg_color, make_timestamp } from "./utils";
 
-export { Slide, SlideViewer, refrigerator, addHooks, DefaultUrl };
+export { Slide, SlideViewer, refrigerator, addHooks, DefaultUrl, previewSlide };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const usePlugin = /* @__PURE__ */ Slide.usePlugin.bind(Slide) as (plugin: any) => void;
@@ -21,16 +25,19 @@ export const version = __APP_VERSION__;
 const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
   kind: "Slide",
   setup(context) {
-    console.log("[Slide] setup @ " + __APP_VERSION__);
+    console.log("[Slide] setup @ " + __APP_VERSION__ + " (" + context.appId + ")");
 
-    if (!context.storage.state.taskId) {
+    const logger = new Logger(context);
+    logger.info("[Slide] setup @ " + __APP_VERSION__);
+
+    if (!context.attributes.taskId) {
       throw new Error("[Slide] no taskId");
     }
 
+    const storage = context.createStorage("slide", context.attributes);
+
     const appOptions = context.getAppOptions() || {};
-    const options = appOptions.renderOptions || {};
-    const logger = make_logger(context, appOptions.debug);
-    logger.info("[Slide] setup @ " + __APP_VERSION__);
+    const renderOptions = appOptions.renderOptions || {};
 
     const sideEffect = new SideEffectManager();
 
@@ -38,18 +45,17 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
     const viewer = new SlideViewer({
       interactive: true,
       mode: "interactive",
-      resize: true,
       enableGlobalClick: true,
       timestamp: make_timestamp(context),
       logger: appOptions.logger || logger,
       renderOptions: {
-        minFPS: options.minFPS || 25,
-        maxFPS: options.maxFPS || 30,
-        autoFPS: options.autoFPS ?? true,
-        autoResolution: options.autoResolution ?? true,
-        resolution: options.resolution,
-        maxResolutionLevel: options.maxResolutionLevel,
-        transactionBgColor: options.transactionBgColor || make_bg_color(context.box.$content),
+        minFPS: renderOptions.minFPS || 25,
+        maxFPS: renderOptions.maxFPS || 30,
+        autoFPS: renderOptions.autoFPS ?? true,
+        autoResolution: renderOptions.autoResolution ?? true,
+        resolution: renderOptions.resolution,
+        maxResolutionLevel: renderOptions.maxResolutionLevel,
+        transactionBgColor: renderOptions.transactionBgColor || make_bg_color(context.box.$content),
       },
       rtcAudio: appOptions.rtcAudio,
       useLocalCache: appOptions.useLocalCache,
@@ -57,33 +63,47 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       loaderDelegate: appOptions.loaderDelegate,
       navigatorDelegate: appOptions.navigatorDelegate,
       fixedFrameSize: appOptions.fixedFrameSize,
-      taskId: context.storage.state.taskId,
-      url: context.storage.state.url,
+      taskId: storage.state.taskId,
+      url: storage.state.url,
     });
 
     // For debugging.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (viewer as any).context = context;
+    Object.assign(viewer, { context, logger });
 
-    sideEffect.addDisposer(refrigerator.set(context.appId, viewer));
+    sideEffect.push(refrigerator.set(context.appId, viewer));
 
     if (import.meta.env.DEV) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (window as any).slideViewer = viewer;
     }
 
+    // Log more
+    sideEffect.push(viewer.events.on("freeze", () => logger.info("[Slide] freeze")));
+    sideEffect.push(viewer.events.on("unfreeze", () => logger.info("[Slide] unfreeze")));
+    sideEffect.push(
+      viewer.events.on("prepareError", error =>
+        logger.info("[Slide] fetch slide info failed: " + error.message)
+      )
+    );
+    sideEffect.push(
+      viewer.events.on("renderError", ({ error, index }) =>
+        logger.info("[Slide] render failed " + `[${index}]: ${error.message}`)
+      )
+    );
+
     // Mount UI
     context.box.mountStyles(SlideViewer.styles);
     context.box.mountStage(viewer.$slide);
     context.box.mountFooter(viewer.$footer);
     context.box.mountContent(viewer.$content);
-    sideEffect.addDisposer(() => viewer.destroy());
+    sideEffect.push(() => viewer.destroy());
 
     // Connect UI with Netless App
-    connect({ context, viewer, sideEffect, logger });
+    connect({ context, storage, viewer, sideEffect, logger });
 
-    onUnmount(context, () => {
+    context.emitter.on("destroy", () => {
       logger.info("[Slide] destroy");
+      logger.destroy();
       sideEffect.flushAll();
     });
 
@@ -92,186 +112,3 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
 };
 
 export default SlideApp;
-
-export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
-  const { container, ...slideOptions } = options;
-  const wrapper = document.createElement("div");
-  wrapper.className = "netless-app-slide-preview-wrapper";
-  const viewer = new SlideViewer(slideOptions);
-  wrapper.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
-  wrapper.appendChild(viewer.$content);
-  wrapper.appendChild(viewer.$footer);
-  container.appendChild(wrapper);
-  viewer.prepare(() => viewer.slide.renderSlide(1));
-  return viewer;
-}
-
-if (import.meta.env.DEV) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (window as any).previewSlide = previewSlide;
-}
-
-function make_timestamp(context: AppContext): () => number {
-  const room = context.room;
-  const player = context.displayer as Player;
-  if (room) {
-    return () => room.calibrationTimestamp;
-  } else if (player) {
-    return () => player.beginTimestamp + player.progressTime;
-  } else {
-    return () => Date.now();
-  }
-}
-
-function make_logger(context: AppContext, debug?: boolean): { info: (msg: string) => void } {
-  void debug; // not used for now
-  if (import.meta.env.DEV) {
-    return { info: console.debug.bind(console) };
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (context.displayer as any).logger;
-}
-
-function make_bg_color(el: HTMLElement): string {
-  try {
-    let bg = window.getComputedStyle(el).backgroundColor;
-    if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
-      bg = hex(bg);
-      console.log("[Slide] guess bg color:", bg);
-      return bg;
-    }
-    if (el.parentElement) {
-      return make_bg_color(el.parentElement);
-    }
-  } catch {
-    // ignored
-  }
-  return "#ffffff";
-}
-
-// https://github.com/Qix-/color-convert/blob/8dfdbbc6b46fa6a305bf394d942cc1b08e23fca5/conversions.js#L616
-function hex(color: string): string {
-  const result = ColorString.get(color);
-  if (result && result.model === "rgb") {
-    const args = result.value;
-
-    const integer =
-      ((Math.round(args[0]) & 0xff) << 16) +
-      ((Math.round(args[1]) & 0xff) << 8) +
-      (Math.round(args[2]) & 0xff);
-
-    const string = integer.toString(16);
-    return "#" + "000000".substring(string.length) + string;
-  } else {
-    return color;
-  }
-}
-
-function onUnmount(context: AppContext, callback: () => void) {
-  context.emitter.on("destroy", callback);
-}
-
-interface ConnectParams {
-  context: AppContext;
-  viewer: SlideViewer;
-  sideEffect: SideEffectManager;
-  logger: { info: (msg: string) => void };
-}
-
-function connect({ context, viewer, sideEffect, logger }: ConnectParams) {
-  const log = import.meta.env.DEV ? console.log.bind(console) : logger.info.bind(logger);
-
-  let whiteboard: WhiteBoardView | null = null;
-
-  viewer.prepare(({ width, height, slideCount }) => {
-    if (context.destroyed) return;
-    width && context.box.setStageRatio(height / width);
-    whiteboard = context.createWhiteBoardView({ size: slideCount });
-    whiteboard.setBaseRect({ width, height });
-    kick_start();
-  });
-
-  const { slide } = viewer;
-
-  function kick_start() {
-    if (context.storage.state.state) {
-      log("[Slide] restore", { ...context.storage.state.state });
-      slide.setSlideState(context.storage.state.state);
-    } else if (context.isAddApp) {
-      log("[Slide] kick start");
-      slide.renderSlide(1);
-    } else {
-      log("[Slide] wait for restore");
-      const timeoutID = sideEffect.add(() => {
-        const timer = setInterval(() => {
-          if (!context.storage.state.state) {
-            log("[Slide] timeout");
-            slide.renderSlide(1);
-          }
-        }, 15 * 1000);
-        return () => clearInterval(timer);
-      });
-      const disposerID = sideEffect.addDisposer(
-        context.storage.addStateChangedListener(() => {
-          if (context.storage.state.state) {
-            log("[Slide] restore", { ...context.storage.state.state });
-            slide.setSlideState(context.storage.state.state);
-            sideEffect.flush(disposerID);
-            sideEffect.flush(timeoutID);
-          }
-        })
-      );
-    }
-  }
-
-  // setup sync event
-  slide.on("stateChange", () => {
-    if (context.isWritable) {
-      log("[Slide] save state", { ...slide.slideState });
-      context.storage.setState({ state: slide.slideState });
-    }
-  });
-  slide.on("syncDispatch", payload => {
-    if (context.isWritable) {
-      log("[Slide] dispatch", { ...payload });
-      context.dispatchMagixEvent("syncDispatch", payload);
-    }
-  });
-  sideEffect.addDisposer(
-    context.addMagixEventListener(
-      "syncDispatch",
-      ({ payload }) => {
-        log("[Slide] receive", { ...payload });
-        slide.emit("syncReceive", payload);
-      },
-      { fireSelfEventAfterCommit: true }
-    )
-  );
-
-  // save state
-  slide.on("slideChange", page => {
-    if (context.isWritable && whiteboard) {
-      log("[Slide] page to", page);
-      whiteboard.jumpPage(page - 1);
-    }
-  });
-
-  // handle ui events
-  viewer.setReadonly(!context.isWritable);
-  sideEffect.addDisposer(
-    context.emitter.on("writableChange", w => {
-      viewer.setReadonly(!w);
-    })
-  );
-
-  sideEffect.addEventListener(window, "keydown", ev => {
-    if (context.box.focus) {
-      if (ev.key === "ArrowUp" || ev.key === "ArrowLeft") {
-        viewer.slide.prevStep();
-      }
-      if (ev.key === "ArrowRight" || ev.key === "ArrowDown") {
-        viewer.slide.nextStep();
-      }
-    }
-  });
-}

package/src/preview.ts

@@ -0,0 +1,21 @@
+import type { SlideViewerOptions } from "./SlideViewer";
+
+import { SlideViewer } from "./SlideViewer";
+
+export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
+  const { container, ...slideOptions } = options;
+  const wrapper = document.createElement("div");
+  wrapper.className = "netless-app-slide-preview-wrapper";
+  const viewer = new SlideViewer(slideOptions);
+  wrapper.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
+  wrapper.appendChild(viewer.$content);
+  wrapper.appendChild(viewer.$footer);
+  container.appendChild(wrapper);
+  viewer.prepare(() => viewer.slide.renderSlide(1));
+  return viewer;
+}
+
+if (import.meta.env.DEV) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any).previewSlide = previewSlide;
+}

package/src/typings.ts

@@ -29,9 +29,7 @@ export interface AppOptions
     | "navigatorDelegate"
     | "fixedFrameSize"
     | "logger"
-  > {
-  debug?: boolean;
-}
+  > {}
 
 export interface ILogger {
   info?(msg: string): void;

package/src/utils.ts

@@ -1,3 +1,93 @@
+import type { AppContext, Player } from "@netless/window-manager";
+
+import ColorString from "color-string";
+import { class_name } from "./constants";
+
 export function noop() {
   return;
 }
+
+export function h<K extends keyof HTMLElementTagNameMap>(tag: K) {
+  return document.createElement(tag);
+}
+
+export function hc<K extends keyof HTMLElementTagNameMap>(tag: K, name: string) {
+  const el = h(tag);
+  set_class(el, name);
+  return el;
+}
+
+export function append(parent: HTMLElement, child: HTMLElement) {
+  return parent.appendChild(child);
+}
+
+export function wrap_class(name: string) {
+  return `${class_name}-${name}`;
+}
+
+export function set_class(el: HTMLElement, name: string) {
+  el.className = wrap_class(name);
+}
+
+export function trim_slash(s: string) {
+  return s.endsWith("/") ? s.slice(0, -1) : s;
+}
+
+export function get(o: unknown, k: string): unknown {
+  if (typeof o === "object" && o !== null) return (o as Record<string, unknown>)[k];
+}
+
+export function block<T = void>(): [p: Promise<T>, resolve: (t: T) => void] {
+  let resolve!: (t: T) => void;
+  const p = new Promise<T>(r => {
+    resolve = r;
+  });
+  return [p, resolve];
+}
+
+export function make_timestamp(context: AppContext): () => number {
+  const room = context.room;
+  const player = context.displayer as Player;
+  if (room) {
+    return () => room.calibrationTimestamp;
+  } else if (player) {
+    return () => player.beginTimestamp + player.progressTime;
+  } else {
+    return () => Date.now();
+  }
+}
+
+export function make_bg_color(el: HTMLElement): string {
+  try {
+    let bg = window.getComputedStyle(el).backgroundColor;
+    if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+      bg = hex(bg);
+      console.log("[Slide] guess bg color:", bg);
+      return bg;
+    }
+    if (el.parentElement) {
+      return make_bg_color(el.parentElement);
+    }
+  } catch {
+    // ignored
+  }
+  return "#ffffff";
+}
+
+// https://github.com/Qix-/color-convert/blob/8dfdbbc6b46fa6a305bf394d942cc1b08e23fca5/conversions.js#L616
+export function hex(color: string): string {
+  const result = ColorString.get(color);
+  if (result && result.model === "rgb") {
+    const args = result.value;
+
+    const integer =
+      ((Math.round(args[0]) & 0xff) << 16) +
+      ((Math.round(args[1]) & 0xff) << 8) +
+      (Math.round(args[2]) & 0xff);
+
+    const string = integer.toString(16);
+    return "#" + "000000".substring(string.length) + string;
+  } else {
+    return color;
+  }
+}