@netless/app-slide 0.3.0-canary.2 → 0.3.0-canary.21

package/src/connect.ts

@@ -0,0 +1,152 @@
+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, wrap_class } 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 });
+
+    viewer._slideTitle = context.box.title;
+    viewer._getWhiteSnapshot = (
+      index: number,
+      canvas: HTMLCanvasElement,
+      ctx: CanvasRenderingContext2D
+    ) => {
+      if (!whiteboard) {
+        return null;
+      }
+      const scenePath = whiteboard.pageState.pages[index - 1];
+      const { width, height } = whiteboard.view.size;
+      canvas.width = width;
+      canvas.height = height;
+      whiteboard.view.screenshotToCanvas(ctx, scenePath, width, height, whiteboard.view.camera);
+    };
+
+    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 (storage.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
+  function disable_whiteboard() {
+    if (whiteboard && whiteboard.view.divElement) {
+      whiteboard.view.divElement.classList.add(wrap_class("wb-view-hidden"));
+    }
+  }
+
+  function enable_whiteboard() {
+    if (whiteboard && whiteboard.view.divElement) {
+      whiteboard.view.divElement.classList.remove(wrap_class("wb-view-hidden"));
+    }
+  }
+
+  viewer.setReadonly(!context.isWritable);
+  sideEffect.push([
+    context.emitter.on("writableChange", () => viewer.setReadonly(!context.isWritable)),
+    viewer.events.on("renderStart", disable_whiteboard),
+    viewer.events.on("renderEnd", enable_whiteboard),
+  ]);
+
+  const isEditable = (el: EventTarget | null) => {
+    if (!el) return false;
+    const tagName = (el as HTMLElement).tagName;
+    return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
+  };
+
+  sideEffect.addEventListener(window, "keydown", ev => {
+    if (!ev || (ev.target as HTMLElement).className === "telebox-quarantine-outer") return;
+    if (context.box.focus && !context.box.readonly && !isEditable(ev.target)) {
+      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/icons/save.ts

@@ -0,0 +1,18 @@
+export function saveSVG(namespace: string): SVGElement {
+  const NS = "http://www.w3.org/2000/svg";
+
+  const $svg = document.createElementNS(NS, "svg");
+  $svg.setAttribute("class", `${namespace}-footer-icon-save`);
+  $svg.setAttribute("viewBox", "0 0 448 512");
+
+  const $path = document.createElementNS(NS, "path");
+  $path.setAttribute("fill", "currentColor");
+  $path.setAttribute(
+    "d",
+    "M224 256c-35.2 0-64 28.8-64 64c0 35.2 28.8 64 64 64c35.2 0 64-28.8 64-64C288 284.8 259.2 256 224 256zM433.1 129.1l-83.9-83.9C341.1 37.06 328.8 32 316.1 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V163.9C448 151.2 442.9 138.9 433.1 129.1zM128 80h144V160H128V80zM400 416c0 8.836-7.164 16-16 16H64c-8.836 0-16-7.164-16-16V96c0-8.838 7.164-16 16-16h16v104c0 13.25 10.75 24 24 24h192C309.3 208 320 197.3 320 184V83.88l78.25 78.25C399.4 163.2 400 164.8 400 166.3V416z"
+  );
+
+  $svg.appendChild($path);
+
+  return $svg;
+}

package/src/icons/spinner.ts

@@ -0,0 +1,37 @@
+export function spinnerSVG(namespace: string): SVGElement {
+  const NS = "http://www.w3.org/2000/svg";
+
+  const $svg = document.createElementNS(NS, "svg");
+  $svg.setAttribute("class", `${namespace}-footer-icon-spinner`);
+  $svg.setAttribute("viewBox", "0 0 512 512");
+
+  const $path = document.createElementNS(NS, "path");
+  $path.setAttribute("fill", "currentColor");
+  $path.setAttribute(
+    "d",
+    "M304 48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zm0 416c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM48 304c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm464-48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM142.9 437c18.7-18.7 18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zm0-294.2c18.7-18.7 18.7-49.1 0-67.9S93.7 56.2 75 75s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zM369.1 437c18.7 18.7 49.1 18.7 67.9 0s18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9z"
+  );
+
+  const $animate = document.createElementNS(NS, "animateTransform");
+  $animate.setAttribute("attributeName", "transform");
+  $animate.setAttribute("attributeType", "xml");
+  $animate.setAttribute("type", "rotate");
+  $animate.setAttribute("from", "0 256 256");
+  $animate.setAttribute("to", "360 256 256");
+  $animate.setAttribute("begin", "0s");
+  $animate.setAttribute("dur", "2s");
+  $animate.setAttribute("fill", "freeze");
+  $animate.setAttribute("repeatCount", "indefinite");
+  $path.appendChild($animate);
+
+  const $progress = document.createElementNS(NS, "text");
+  $progress.setAttribute("x", "125");
+  $progress.setAttribute("y", "345");
+  $progress.setAttribute("data-id", "progress");
+  $progress.style.fontSize = "246px";
+  $progress.textContent = "20";
+  $svg.appendChild($progress);
+  $svg.appendChild($path);
+
+  return $svg;
+}

package/src/index.ts

@@ -1,31 +1,45 @@
-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 { ISlideConfig } from "@netless/slide";
 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 { Slide } from "@netless/slide";
 import { SideEffectManager } from "side-effect-manager";
+
+import { DefaultUrl } from "./constants";
+import { addHooks, refrigerator } from "./Refrigerator";
 import { SlideViewer } from "./SlideViewer";
-import { refrigerator, addHooks } from "./Refrigerator";
+import { Logger } from "./Logger";
+import { connect } from "./connect";
+import { previewSlide } from "./preview";
+import { make_bg_color, make_timestamp } from "./utils";
 
-export { SlideViewer, refrigerator, addHooks };
+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;
 
 export const version = __APP_VERSION__;
 
 const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
   kind: "Slide",
+  config: { enableShadowDOM: false },
   setup(context) {
-    console.log("[Slide] setup @ " + __APP_VERSION__);
+    console.log("[Slide] setup @ " + __APP_VERSION__ + " (" + context.appId + ")");
+
+    const logger = new Logger(context);
+    logger.info("[Slide] setup @ " + __APP_VERSION__);
 
-    if (!context.storage.state.taskId) {
+    if (!context.attributes.taskId) {
       throw new Error("[Slide] no taskId");
     }
 
-    const options = context.getAppOptions() || {};
-    const debug = Boolean(options.debug);
-    const logger = make_logger(context);
-    logger.info("[Slide] setup @ " + __APP_VERSION__);
+    const storage = context.createStorage("slide", context.attributes);
+
+    const appOptions = context.getAppOptions() || {};
+    const renderOptions = appOptions.renderOptions || {};
 
     const sideEffect = new SideEffectManager();
 
@@ -33,213 +47,71 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
     const viewer = new SlideViewer({
       interactive: true,
       mode: "interactive",
-      resize: true,
       enableGlobalClick: true,
-      controller: debug,
       timestamp: make_timestamp(context),
-      logger,
+      logger: appOptions.logger || logger,
+      whiteTracker: (context.displayer as unknown as { tracker: ISlideConfig["whiteTracker"] }).tracker,
       renderOptions: {
-        minFPS: options.minFPS || 25,
-        maxFPS: options.maxFPS || 30,
-        autoFPS: options.autoFPS ?? true,
-        autoResolution: options.autoResolution ?? true,
-        resolution: options.resolution,
-        transactionBgColor: options.bgColor || 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),
       },
-
-      taskId: context.storage.state.taskId,
-      url: context.storage.state.url,
+      rtcAudio: appOptions.rtcAudio,
+      useLocalCache: appOptions.useLocalCache,
+      resourceTimeout: appOptions.resourceTimeout,
+      loaderDelegate: appOptions.loaderDelegate,
+      navigatorDelegate: appOptions.navigatorDelegate,
+      fixedFrameSize: appOptions.fixedFrameSize,
+      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, context.box));
 
     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();
     });
+
+    return viewer;
   },
 };
 
 export default SlideApp;
-
-export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
-  const { container } = options;
-  container.style.cssText = "display:flex;flex-direction:column";
-  const viewer = new SlideViewer(options);
-  container.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
-  container.appendChild(viewer.$content);
-  container.appendChild(viewer.$footer);
-  viewer.prepare(() => viewer.slide.renderSlide(1));
-  return viewer;
-}
-
-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): { info: (msg: string) => void } {
-  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(slideCount);
-    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);
-    })
-  );
-}

package/src/preview.ts

@@ -0,0 +1,21 @@
+import type { SlideViewerOptions } from "./SlideViewer";
+
+import { SlideViewer } from "./SlideViewer";
+import { hc } from "./utils";
+
+export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
+  const { container, ...slideOptions } = options;
+  const wrapper = hc("div", "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;
+}