@netless/app-slide 0.0.29 → 0.0.34

package/dist/utils/logger.d.ts

@@ -0,0 +1,20 @@
+import type { SlideController } from "../SlideController";
+declare class Logger {
+    enable: boolean;
+    apps: Record<string, {
+        context?: any;
+        controller?: SlideController;
+    }>;
+    level: "debug" | "verbose";
+    constructor(enable: boolean);
+    log(...args: Parameters<Console["log"]>): void;
+    verbose(...args: Parameters<Console["log"]>): void;
+    dispose(appId: string): void;
+    _onMessage: (ev: MessageEvent<{
+        slide: boolean | "__instance";
+    }>) => void;
+}
+export declare const logger: Logger;
+export declare const log: (...args: Parameters<Console["log"]>) => void;
+export declare const verbose: (...args: Parameters<Console["log"]>) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.0.29",
+  "version": "0.0.34",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,9 +11,9 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.1.34",
-    "@types/color-string": "^1.5.0",
-    "color-string": "^1.7.1",
+    "@netless/slide": "^0.1.37",
+    "@types/color-string": "^1.5.2",
+    "color-string": "^1.8.2",
     "side-effect-manager": "^0.1.5",
     "vanilla-lazyload": "^17.5.0"
   },

package/src/DocsViewer/index.ts

@@ -4,7 +4,6 @@ import { arrowRightSVG } from "./icons/arrow-right";
 import { playSVG } from "./icons/play";
 import { pauseSVG } from "./icons/pause";
 
-import type { ReadonlyTeleBox } from "@netless/window-manager";
 import type { ILazyLoadInstance } from "vanilla-lazyload";
 import LazyLoad from "vanilla-lazyload";
 import { SideEffectManager } from "side-effect-manager";
@@ -18,15 +17,13 @@ export interface DocsViewerPage {
 
 export interface DocsViewerConfig {
   readonly: boolean;
-  box: ReadonlyTeleBox;
   onNewPageIndex: (index: number) => void;
   onPlay?: () => void;
 }
 
 export class DocsViewer {
-  public constructor({ readonly, box, onNewPageIndex, onPlay }: DocsViewerConfig) {
+  public constructor({ readonly, onNewPageIndex, onPlay }: DocsViewerConfig) {
     this.readonly = readonly;
-    this.box = box;
     this.onNewPageIndex = onNewPageIndex;
     this.onPlay = onPlay;
 
@@ -34,7 +31,6 @@ export class DocsViewer {
   }
 
   protected readonly: boolean;
-  protected box: ReadonlyTeleBox;
   protected onNewPageIndex: (index: number) => void;
   protected onPlay?: () => void;
 
@@ -62,11 +58,6 @@ export class DocsViewer {
 
   public pageIndex = 0;
 
-  public mount(): void {
-    this.box.mountContent(this.$content);
-    this.box.mountFooter(this.$footer);
-  }
-
   public unmount(): void {
     this.$content.remove();
     this.$footer.remove();

package/src/SlideController/index.ts

@@ -17,6 +17,7 @@ import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
 import { clamp, deepClone, isObj } from "../utils/helpers";
 import { cachedGetBgColor } from "../utils/bgcolor";
+import { logger, log, verbose } from "../utils/logger";
 export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
 
 export const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";
@@ -39,7 +40,6 @@ export interface SlideControllerOptions {
 export class SlideController {
   public readonly context: SlideControllerOptions["context"];
   public readonly slide: Slide;
-  public readonly debug: boolean;
 
   private readonly channel: string;
   private readonly room?: Room;
@@ -69,7 +69,6 @@ export class SlideController {
     this.channel = `channel-${context.appId}`;
     this.room = context.getRoom();
     this.player = this.room ? undefined : (context.getDisplayer() as Player);
-    this.debug = import.meta.env.DEV || !!context.getAppOptions()?.debug;
     this.slide = this.createSlide(anchor);
     // the adder does not need to sync state
     this.syncStateOnceFlag = !this.context.isAddApp;
@@ -104,16 +103,12 @@ export class SlideController {
     slide.setResource(taskId, url || DefaultUrl);
     if (state) {
       // if we already have state, try restore from it
-      if (this.debug) {
-        console.log("[Slide] init with state", deepClone(state));
-      }
+      log("[Slide] init with state", deepClone(state));
       this.syncStateOnceFlag = false;
       slide.setSlideState(deepClone(state));
     } else if (context.isAddApp) {
       // otherwise, maybe this slide is just added, let the adder kick start first render
-      if (this.debug) {
-        console.log("[Slide] init by renderSlide", 1);
-      }
+      log("[Slide] init by renderSlide", 1);
       slide.renderSlide(1);
     }
     // there's still some risk that the adder is left and no first render
@@ -175,9 +170,7 @@ export class SlideController {
         type: SLIDE_EVENTS.syncDispatch,
         payload: event,
       };
-      if (this.debug) {
-        console.log("[Slide] dispatch", event);
-      }
+      log("[Slide] dispatch", event);
       this.room.dispatchMagixEvent(this.channel, payload);
     }
   };
@@ -187,9 +180,7 @@ export class SlideController {
       const { type, payload } = ev.payload as MagixPayload;
       if (type === SLIDE_EVENTS.syncDispatch) {
         this.syncStateOnce();
-        if (this.debug) {
-          console.log("[Slide] receive", payload);
-        }
+        log("[Slide] receive", payload);
         // only emit the event if the slide state is sync-ed
         if (!this.syncStateOnceFlag) {
           this.slide.emit(SLIDE_EVENTS.syncReceive, payload);
@@ -203,9 +194,7 @@ export class SlideController {
     if (this.syncStateOnceFlag) {
       const { state } = { ...EmptyAttributes, ...this.context.getAttributes() };
       if (state) {
-        if (this.debug) {
-          console.log("[Slide] sync with state (once)", deepClone(state));
-        }
+        log("[Slide] sync with state (once)", deepClone(state));
         this.slide.setSlideState(deepClone(state));
         this.syncStateOnceFlag = false;
       }
@@ -214,20 +203,18 @@ export class SlideController {
 
   private onStateChange = (state: SlideState) => {
     if (this.context.getIsWritable()) {
-      if (import.meta.env.DEV) {
-        console.log("[Slide] state change", JSON.stringify(state, null, 2));
-      }
+      verbose("[Slide] state change", JSON.stringify(state, null, 2));
       this.context.updateAttributes(["state"], state);
     }
   };
 
   private onSeeked = () => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const state = this.context.getAttributes()!.state
+    const state = this.context.getAttributes()!.state;
     if (state) {
       this.slide.setSlideState(deepClone(state));
     }
-  }
+  };
 
   private pollCount = 0;
   private pollReadyState = () => {
@@ -242,9 +229,7 @@ export class SlideController {
       setTimeout(this.pollReadyState, 500);
     } else {
       this.pollCount = 0;
-      if (this.debug) {
-        console.log("[Slide] renderSlide (retry after timeout)", 1);
-      }
+      log("[Slide] renderSlide (retry after timeout)", 1);
       this.slide.renderSlide(1);
     }
   };
@@ -268,7 +253,7 @@ export class SlideController {
       interactive: true,
       mode: "interactive",
       resize: true,
-      controller: this.debug,
+      controller: logger.enable,
       renderOptions: {
         minFPS: 25,
         maxFPS: 30,
@@ -279,7 +264,7 @@ export class SlideController {
       },
       timestamp: this.timestamp,
     });
-    if (this.debug) {
+    if (import.meta.env.DEV) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (window as any).slide = slide;
     }
@@ -291,9 +276,7 @@ export class SlideController {
   public destroy() {
     this.sideEffect.flushAll();
     if (!this.destroyed) {
-      if (this.debug) {
-        console.log("[Slide] destroy slide (once)");
-      }
+      log("[Slide] destroy slide (once)");
       this.slide.destroy();
       this.destroyed = true;
     }
@@ -331,9 +314,7 @@ export class SlideController {
 
   public freeze = () => {
     if (this.ready) {
-      if (this.debug) {
-        console.log("[Slide] freeze", this.context.appId);
-      }
+      log("[Slide] freeze", this.context.appId);
       if (this.freezePromise) {
         this._toFreeze = 1;
       } else if (!this.isFrozen) {
@@ -347,9 +328,7 @@ export class SlideController {
 
   public unfreeze = async () => {
     if (this.ready) {
-      if (this.debug) {
-        console.log("[Slide] unfreeze", this.context.appId);
-      }
+      log("[Slide] unfreeze", this.context.appId);
       if (this.freezePromise) {
         this._toFreeze = -1;
       } else if (this.isFrozen) {

package/src/SlideDocsViewer/index.ts

@@ -5,7 +5,7 @@ import { SideEffectManager } from "side-effect-manager";
 import { createDocsViewerPages } from "../SlideController";
 import { DocsViewer } from "../DocsViewer";
 
-export const ClickThroughAppliances = new Set(["clicker", "selector"]);
+export const ClickThroughAppliances = new Set(["clicker"]);
 
 export type MountSlideOptions = Omit<SlideControllerOptions, "context" | "onPageChanged"> & {
   onReady: () => void;
@@ -35,7 +35,6 @@ export class SlideDocsViewer {
     this.mountWhiteboard = mountWhiteboard;
 
     this.viewer = new DocsViewer({
-      box,
       readonly: box.readonly,
       onNewPageIndex: this.onNewPageIndex,
       onPlay: this.onPlay,
@@ -98,7 +97,8 @@ export class SlideDocsViewer {
   }
 
   public mount() {
-    this.viewer.mount();
+    this.box.mountContent(this.viewer.$content);
+    this.box.mountFooter(this.viewer.$footer);
 
     this.slideController = this.mountSlideController({
       anchor: this.$slide,

package/src/SlidePreviewer/index.ts

@@ -0,0 +1,184 @@
+import { Slide, SLIDE_EVENTS } from "@netless/slide";
+import { DocsViewer } from "../DocsViewer";
+import { createDocsViewerPages, DefaultUrl } from "../SlideController";
+import { cachedGetBgColor } from "../utils/bgcolor";
+import { clamp } from "../utils/helpers";
+import { log } from "../utils/logger";
+import style from "../style.scss?inline";
+
+export interface PreviewParams {
+  container: HTMLElement;
+  taskId: string;
+  url?: string;
+  debug?: boolean;
+}
+
+export default function previewSlide({
+  container,
+  taskId,
+  url = DefaultUrl,
+  debug = import.meta.env.DEV,
+}: PreviewParams) {
+  if (!taskId) {
+    throw new Error("[Slide] taskId is required");
+  }
+
+  container.style.cssText += `display:flex;flex-direction:column`;
+  const previewer = new SlidePreviewer({ target: container });
+  previewer.debug = !!debug;
+
+  previewer.mount(taskId, url);
+
+  return previewer;
+}
+
+if (import.meta.env.DEV) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any).previewSlide = previewSlide;
+}
+
+export class SlidePreviewer {
+  public readonly viewer: DocsViewer;
+  public readonly bgColor: string;
+  public readonly target: HTMLElement;
+  public slide: Slide | null = null;
+  public debug = import.meta.env.DEV;
+
+  public $slide!: HTMLDivElement;
+  public ready = false;
+  private resolveReady!: () => void;
+  public readonly readyPromise = new Promise<void>(resolve => {
+    this.resolveReady = () => {
+      this.ready = true;
+      resolve();
+    };
+  });
+
+  public constructor(config: { target: HTMLElement }) {
+    this.target = config.target;
+    this.bgColor = cachedGetBgColor(this.target);
+    this.viewer = new DocsViewer({
+      readonly: false,
+      onNewPageIndex: this.onNewPageIndex,
+      onPlay: this.onPlay,
+    });
+    this.render();
+  }
+
+  public render() {
+    this.viewer.$content.appendChild(this.renderSlideContainer());
+  }
+
+  public mount(taskId: string, url: string) {
+    this.target.appendChild(this.renderStyle());
+    this.target.appendChild(this.viewer.$content);
+    this.target.appendChild(this.viewer.$footer);
+
+    this.slide = new Slide({
+      anchor: this.$slide,
+      interactive: false,
+      mode: "local",
+      resize: true,
+      controller: this.debug,
+      renderOptions: {
+        minFPS: 25,
+        maxFPS: 30,
+        autoFPS: true,
+        autoResolution: true,
+        transactionBgColor: this.bgColor,
+      },
+    });
+
+    this.registerEventListeners();
+
+    this.slide.setResource(taskId, url);
+    this.slide.renderSlide(1);
+  }
+
+  protected renderStyle(): HTMLElement {
+    const element = document.createElement("style");
+    element.appendChild(document.createTextNode(style));
+    return element;
+  }
+
+  protected registerEventListeners() {
+    if (!this.slide) return;
+    const { slide } = this;
+
+    slide.on(SLIDE_EVENTS.slideChange, this.onPageChanged);
+    slide.on(SLIDE_EVENTS.renderStart, this.onTransitionStart);
+    slide.on(SLIDE_EVENTS.renderEnd, this.onTransitionEnd);
+    slide.on(SLIDE_EVENTS.mainSeqStepStart, this.onTransitionStart);
+    slide.on(SLIDE_EVENTS.mainSeqStepEnd, this.onTransitionEnd);
+    slide.on(SLIDE_EVENTS.renderError, this.onError);
+    slide.on(SLIDE_EVENTS.renderEnd, this.resolveReady);
+
+    this.readyPromise.then(this.refreshPages);
+  }
+
+  protected onPageChanged = (page: number) => {
+    this.viewer.setPageIndex(page - 1);
+  };
+
+  protected onTransitionStart = () => {
+    this.viewer.setPlaying();
+  };
+
+  protected onTransitionEnd = () => {
+    this.viewer.setPaused();
+  };
+
+  protected onError = ({ error }: { error: Error }) => {
+    this.viewer.setPaused();
+    console.warn("[Slide] render error", error);
+  };
+
+  private destroyed = false;
+  public destroy() {
+    if (this.slide && !this.destroyed) {
+      log("[Slide] destroy slide (once)");
+      this.slide.destroy();
+      this.destroyed = true;
+    }
+    this.viewer.destroy();
+  }
+
+  protected refreshPages = () => {
+    if (this.slide) {
+      this.viewer.pages = createDocsViewerPages(this.slide);
+      this.viewer.setPageIndex(this.getPageIndex(this.slide.slideCount));
+    }
+  };
+
+  protected getPageIndex(page: number) {
+    return (page > 0 ? page : 1) - 1;
+  }
+
+  protected renderSlideContainer(): HTMLDivElement {
+    if (!this.$slide) {
+      const $slide = document.createElement("div");
+      $slide.className = this.wrapClassName("slide");
+      $slide.dataset.appKind = "Slide";
+      this.$slide = $slide;
+    }
+    return this.$slide;
+  }
+
+  protected onPlay = () => {
+    if (this.slide) {
+      this.slide.nextStep();
+    }
+  };
+
+  protected onNewPageIndex = (index: number) => {
+    if (this.slide && this.slide.slideCount > 0) {
+      this.slide.renderSlide(clamp(index + 1, 1, this.slide.slideCount));
+    }
+  };
+
+  protected wrapClassName(className: string) {
+    return `${this.namespace}-${className}`;
+  }
+
+  protected namespace = "netless-app-slide";
+}

package/src/index.ts

@@ -14,8 +14,12 @@ import {
 } from "./SlideController";
 import { SlideDocsViewer } from "./SlideDocsViewer";
 import { apps, FreezerLength, addHooks } from "./utils/freezer";
+import { log, logger } from "./utils/logger";
 import styles from "./style.scss?inline";
 
+export type { PreviewParams } from "./SlidePreviewer";
+export { SlidePreviewer, default as previewSlide } from "./SlidePreviewer";
+
 export type { Attributes, AddHooks, FreezableSlide };
 
 export { DefaultUrl, apps, FreezerLength, addHooks };
@@ -48,11 +52,13 @@ const SlideApp: NetlessApp<Attributes> = {
 
     const onPageChanged = (page: number) => {
       const room = context.getRoom();
-      if (docsViewer && docsViewer.slideController && room && context.getIsWritable()) {
-        syncSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath);
-        if (context.getAppOptions()?.debug || import.meta.env.DEV) {
-          console.log("[Slide] page to", page);
+      if (docsViewer && docsViewer.slideController) {
+        let synced = false;
+        if (room && context.getIsWritable()) {
+          syncSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath);
+          synced = true;
         }
+        log("[Slide] page to", page, synced);
         docsViewer.viewer.setPageIndex(page - 1);
       }
     };
@@ -64,6 +70,7 @@ const SlideApp: NetlessApp<Attributes> = {
         onPageChanged,
       });
       apps.set(context.appId, slideController);
+      (logger.apps[context.appId] ||= {}).controller = slideController;
       if (import.meta.env.DEV) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).slideController = slideController;
@@ -86,6 +93,14 @@ const SlideApp: NetlessApp<Attributes> = {
 
     const room = context.getRoom();
     const sideEffect = new SideEffectManager();
+
+    sideEffect.add(() => {
+      (logger.apps[context.appId] ||= {}).context = context;
+      logger.enable = context.getAppOptions()?.debug || import.meta.env.DEV;
+      logger.level = import.meta.env.DEV ? "verbose" : "debug";
+      return () => logger.dispose(context.appId);
+    });
+
     if (room) {
       docsViewer.toggleClickThrough(room.state.memberState.currentApplianceName);
       sideEffect.add(() => {
@@ -100,7 +115,7 @@ const SlideApp: NetlessApp<Attributes> = {
     }
 
     context.emitter.on("destroy", () => {
-      console.log("[Slide]: destroy");
+      log("[Slide]: destroy");
       apps.delete(context.appId);
       sideEffect.flushAll();
       if (docsViewer) {

package/src/utils/bgcolor.ts

@@ -1,4 +1,5 @@
 import ColorString from "color-string";
+import { log } from "./logger";
 
 export function guessBgColor(el: HTMLElement): string {
   try {
@@ -38,9 +39,7 @@ let cachedBgColor = "";
 export function cachedGetBgColor(el: HTMLElement): string {
   if (!cachedBgColor) {
     cachedBgColor = toHex(guessBgColor(el));
-    if (import.meta.env.DEV) {
-      console.log("[Slide] guess bg color", cachedBgColor);
-    }
+    log("[Slide] guess bg color", cachedBgColor);
   }
   return cachedBgColor;
 }

package/src/utils/freezer.ts

@@ -1,4 +1,5 @@
 import type { RegisterParams } from "@netless/window-manager";
+import { log } from "./logger";
 
 export interface FreezableSlide {
   freeze: () => void;
@@ -11,24 +12,18 @@ export const apps = {
   map: new Map<string, FreezableSlide>(),
   queue: [] as string[],
   validateQueue() {
-    if (import.meta.env.DEV) {
-      console.log("[Slide] freezer: validate", this.queue);
-    }
+    log("[Slide] freezer: validate", this.queue);
     while (this.queue.length > FreezerLength) {
       const appId = this.queue.pop() as string;
       const slide = this.map.get(appId);
       if (slide) {
-        if (import.meta.env.DEV) {
-          console.log("[Slide] freezer: validate-freeze", appId, this.queue);
-        }
+        log("[Slide] freezer: validate-freeze", appId, this.queue);
         slide.freeze();
       }
     }
   },
   set(appId: string, slide: FreezableSlide) {
-    if (import.meta.env.DEV) {
-      console.log("[Slide] freezer: add", appId, this.queue);
-    }
+    log("[Slide] freezer: add", appId, this.queue);
     this.map.set(appId, slide);
     if (!this.queue.includes(appId)) {
       this.queue.unshift(appId);
@@ -36,9 +31,7 @@ export const apps = {
     this.validateQueue();
   },
   delete(appId: string) {
-    if (import.meta.env.DEV) {
-      console.log("[Slide] freezer: delete", appId, this.queue);
-    }
+    log("[Slide] freezer: delete", appId, this.queue);
     this.map.delete(appId);
     this.queue = this.queue.filter(id => id !== appId);
   },
@@ -50,9 +43,7 @@ export const apps = {
     }
     this.queue.unshift(appId);
     this.validateQueue();
-    if (import.meta.env.DEV) {
-      console.log("[Slide] freezer: focus", appId, this.queue);
-    }
+    log("[Slide] freezer: focus", appId, this.queue);
     if (slide) {
       slide.unfreeze();
     }

package/src/utils/logger.ts

@@ -0,0 +1,39 @@
+import type { SlideController } from "../SlideController";
+import { isObj } from "./helpers";
+
+class Logger {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public apps: Record<string, { context?: any; controller?: SlideController }> = {};
+  public level: "debug" | "verbose" = import.meta.env.DEV ? "verbose" : "debug";
+  constructor(public enable: boolean) {
+    window.addEventListener("message", this._onMessage);
+  }
+  log(...args: Parameters<Console["log"]>) {
+    if (this.enable) {
+      console.log(...args);
+    }
+  }
+  verbose(...args: Parameters<Console["log"]>) {
+    if (this.enable && this.level === "verbose") {
+      console.log(...args);
+    }
+  }
+  dispose(appId: string) {
+    this.enable = false;
+    delete this.apps[appId];
+    window.removeEventListener("message", this._onMessage);
+  }
+  _onMessage = (ev: MessageEvent<{ slide: boolean | "__instance" }>) => {
+    if (isObj(ev.data)) {
+      if (typeof ev.data.slide === "boolean") {
+        this.enable = ev.data.slide;
+      } else if (ev.data.slide === "__instance") {
+        console.log(this);
+      }
+    }
+  };
+}
+
+export const logger = new Logger(import.meta.env.DEV);
+export const log = logger.log.bind(logger);
+export const verbose = logger.verbose.bind(logger);