@netless/app-slide 0.0.17 → 0.0.21

package/dist/typings.d.ts

@@ -0,0 +1,14 @@
+import type { Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
+export declare type SlideState = Slide["slideState"];
+export interface Attributes {
+    /** convert task id */
+    taskId: string;
+    /** base url of converted resources */
+    url: string;
+    /** internal state of slide, do not change */
+    state: SlideState | null;
+}
+export declare type MagixPayload = {
+    type: typeof SLIDE_EVENTS.syncDispatch;
+    payload: SyncEvent;
+};

package/dist/utils/helpers.d.ts

@@ -3,3 +3,4 @@ export declare function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent |
 export declare function preventEvent(ev: Event): void;
 export declare function isObj(obj: unknown): boolean;
 export declare function wait(ms: number): Promise<void>;
+export declare function deepClone<T>(obj: T): T;

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.0.17",
+  "version": "0.0.21",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "README-zh.md"
+  ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.1.18",
+    "@netless/slide": "^0.1.25",
     "side-effect-manager": "^0.1.3",
     "vanilla-lazyload": "^17.5.0"
   },

package/src/DocsViewer/index.ts

@@ -5,6 +5,7 @@ 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";
 
@@ -127,11 +128,21 @@ export class DocsViewer {
     return this.$content;
   }
 
+  private previewLazyLoad?: ILazyLoadInstance;
+
   protected renderPreview(): HTMLElement {
     if (!this.$preview) {
       const $preview = document.createElement("div");
       $preview.className = this.wrapClassName("preview") + " tele-fancy-scrollbar";
       this.$preview = $preview;
+      this.sideEffect.add(() => {
+        this.previewLazyLoad = new LazyLoad({
+          container: this.$preview,
+          elements_selector: `.${this.wrapClassName("preview-page>img")}`,
+        });
+        return () => this.previewLazyLoad?.destroy();
+      });
+
       this.refreshPreview();
 
       this.sideEffect.addEventListener($preview, "click", ev => {
@@ -189,13 +200,7 @@ export class DocsViewer {
       $preview.appendChild($page);
     });
 
-    this.sideEffect.add(() => {
-      const previewLazyLoad = new LazyLoad({
-        container: this.$preview,
-        elements_selector: `.${this.wrapClassName("preview-page>img")}`,
-      });
-      return () => previewLazyLoad.destroy();
-    }, "preview-lazyload");
+    this.previewLazyLoad?.update();
   }
 
   protected renderPreviewMask(): HTMLElement {

package/src/SlideController/helpers.ts

@@ -0,0 +1,39 @@
+import type { AppContext, Room } from "@netless/window-manager";
+import type { ScenePathType } from "white-web-sdk";
+import type { Slide } from "@netless/slide";
+import type { DocsViewerPage } from "../DocsViewer";
+import type { Attributes } from "../typings";
+
+export function createDocsViewerPages(slide: Slide): DocsViewerPage[] {
+  const { width, height, slideCount, slideState } = slide;
+  const { taskId, url } = slideState;
+  const pages: DocsViewerPage[] = [];
+  for (let i = 1; i <= slideCount; ++i) {
+    pages.push({ width, height, thumbnail: `${url}/${taskId}/preview/${i}.png`, src: "ppt" });
+  }
+  return pages;
+}
+
+// because `renderSlide()` is slow, but switching between scenes in whiteboard is fast
+// so here we make scenes sync with slide page
+export function syncSceneWithSlide(
+  room: Room,
+  context: AppContext<Attributes>,
+  slide: Slide,
+  baseScenePath: string
+) {
+  const page = slide.slideState.currentSlideIndex;
+  if (!(page > 0) || !context.getIsWritable()) return;
+
+  const scenePath = [baseScenePath, page].join("/");
+
+  if (room.scenePathType(scenePath) !== ("page" as ScenePathType.Page)) {
+    room.removeScenes(baseScenePath);
+    const count = slide.slideCount;
+    const scenes: { name: string }[] = [];
+    for (let i = 1; i <= count; ++i) scenes.push({ name: `${i}` });
+    room.putScenes(baseScenePath, scenes);
+  }
+
+  context.setScenePath(scenePath);
+}

package/src/SlideController/index.ts

@@ -0,0 +1,257 @@
+// this controller does these things:
+// 1. map slide events to ui
+// 2. make sure to init correctly
+//    - the one with (context.isAddApp === true) should call renderSlide(1)
+//    - others wait for first sync event and restore from sync state
+//    - if none of above happen, force doing renderSlide(1) after timeout
+// 3. send/receive slide sync events
+// 4. automatically re-create scenes to sync strokes, a view must be existing
+// 5. pages information are loaded dynamically by the slide package
+
+import type { Event as MagixEvent } from "white-web-sdk";
+import type { AppContext, Player, Room } from "@netless/window-manager";
+import type { SyncEvent } from "@netless/slide";
+import type { Attributes, MagixPayload, SlideState } from "../typings";
+
+import { SideEffectManager } from "side-effect-manager";
+import { Slide, SLIDE_EVENTS } from "@netless/slide";
+import { clamp, deepClone, isObj } from "../utils/helpers";
+export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
+
+export const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";
+export const MaxPollCount = 40; // 500ms * 40 times = 20s
+export const EmptyAttributes: Attributes = {
+  taskId: "",
+  url: "",
+  state: null,
+};
+
+export interface SlideControllerOptions {
+  context: AppContext<Attributes>;
+  anchor: HTMLDivElement;
+  onPageChanged: (page: number) => void;
+  onTransitionStart: () => void;
+  onTransitionEnd: () => void;
+  onError: (args: { error: Error }) => void;
+}
+
+export class SlideController {
+  public readonly context: SlideControllerOptions["context"];
+  public readonly slide: Slide;
+  public readonly debug: boolean;
+
+  private readonly channel: string;
+  private readonly room?: Room;
+  private readonly player?: Player;
+  private readonly sideEffect = new SideEffectManager();
+
+  private readonly onPageChanged: SlideControllerOptions["onPageChanged"];
+  private readonly onTransitionStart: SlideControllerOptions["onTransitionStart"];
+  private readonly onTransitionEnd: SlideControllerOptions["onTransitionEnd"];
+  private readonly onError: SlideControllerOptions["onError"];
+
+  public constructor({
+    context,
+    anchor,
+    onPageChanged,
+    onTransitionStart,
+    onTransitionEnd,
+    onError,
+  }: SlideControllerOptions) {
+    this.onPageChanged = onPageChanged;
+    this.onTransitionStart = onTransitionStart;
+    this.onTransitionEnd = onTransitionEnd;
+    this.onError = onError;
+    this.context = context;
+    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);
+    this.initialize();
+  }
+
+  public jumpToPage(page: number) {
+    if (this.ready) {
+      page = clamp(page, 1, this.pageCount);
+      this.slide.renderSlide(page);
+    }
+  }
+
+  private initialize() {
+    this.registerEventListeners();
+    this.kickStart();
+  }
+
+  private kickStart() {
+    const { context, slide } = this;
+    const { taskId, url, state } = { ...EmptyAttributes, ...this.context.getAttributes() };
+    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));
+      }
+      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);
+      }
+      slide.renderSlide(1);
+    }
+    // there's still some risk that the adder is left and no first render
+    // so anyway, we start polling the slide's "ready state"
+    // if in the next 20 seconds the slide is not ready, start render first page
+    this.pollReadyState();
+  }
+
+  private registerEventListeners() {
+    const { context, slide } = this;
+
+    this.sideEffect.add(() => {
+      const displayer = context.getDisplayer();
+      displayer.addMagixEventListener(this.channel, this.magixEventListener, {
+        fireSelfEventAfterCommit: true,
+      });
+      // here we do not pass second param -- the listener
+      // because channel name is already unique, just make it simpler
+      return () => displayer.removeMagixEventListener(this.channel);
+    });
+
+    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.stateChange, this.onStateChange);
+    slide.on(SLIDE_EVENTS.syncDispatch, this.onSyncDispatch);
+  }
+
+  private onSyncDispatch = (event: SyncEvent) => {
+    if (this.context.getIsWritable() && this.room) {
+      const payload: MagixPayload = {
+        type: SLIDE_EVENTS.syncDispatch,
+        payload: event,
+      };
+      if (this.debug) {
+        console.log("[Slide] dispatch", event);
+      }
+      this.room.dispatchMagixEvent(this.channel, payload);
+    }
+  };
+
+  private magixEventListener = (ev: MagixEvent) => {
+    if (ev.event === this.channel && isObj(ev.payload)) {
+      const { type, payload } = ev.payload as MagixPayload;
+      if (type === SLIDE_EVENTS.syncDispatch) {
+        this.syncStateOnce();
+        if (this.debug) {
+          console.log("[Slide] receive", payload);
+        }
+        this.slide.emit(SLIDE_EVENTS.syncReceive, payload);
+      }
+    }
+  };
+
+  private syncStateOnceFlag = true;
+  private syncStateOnce() {
+    // sync state before the first event, so that they can be in the correct order
+    if (this.syncStateOnceFlag) {
+      const { state } = { ...EmptyAttributes, ...this.context.getAttributes() };
+      if (state) {
+        if (this.debug) {
+          console.log("[Slide] sync with state (once)", deepClone(state));
+        }
+        this.slide.setSlideState(deepClone(state));
+        this.syncStateOnceFlag = false;
+      }
+    }
+  }
+
+  private onStateChange = (state: SlideState) => {
+    if (this.context.getIsWritable()) {
+      this.context.updateAttributes(["state"], state);
+    }
+  };
+
+  private resolveReady!: () => void;
+  public readonly readyPromise = new Promise<void>(resolve => {
+    this.resolveReady = resolve;
+  });
+
+  private pollCount = 0;
+  private pollReadyState = () => {
+    if (this.ready) {
+      this.resolveReady();
+    } else if (this.pollCount < MaxPollCount) {
+      this.pollCount++;
+      setTimeout(this.pollReadyState, 500);
+    } else {
+      this.pollCount = 0;
+      if (this.debug) {
+        console.log("[Slide] renderSlide (retry after timeout)", 1);
+      }
+      this.slide.renderSlide(1);
+    }
+  };
+
+  public get ready() {
+    return this.slide.slideCount > 0;
+  }
+
+  public get pageCount() {
+    return this.slide.slideCount;
+  }
+
+  public get page() {
+    return this.slide.slideState.currentSlideIndex;
+  }
+
+  private createSlide(anchor: HTMLDivElement) {
+    const slide = new Slide({
+      anchor,
+      interactive: true,
+      mode: "interactive",
+      resize: true,
+      controller: this.debug,
+      renderOptions: {
+        minFPS: 25,
+        maxFPS: 30,
+        autoFPS: true,
+        autoResolution: true,
+        resolution: this.context.getAppOptions()?.resolution,
+      },
+      timestamp: this.timestamp,
+    });
+    if (this.debug) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window as any).slide = slide;
+    }
+    return slide;
+  }
+
+  private destroyed = false;
+
+  public destroy() {
+    this.sideEffect.flushAll();
+    if (!this.destroyed) {
+      if (this.debug) {
+        console.log("[Slide] destroy (once)");
+      }
+      this.slide.destroy();
+      this.destroyed = true;
+    }
+  }
+
+  public timestamp = () => {
+    if (this.room && this.room.calibrationTimestamp) {
+      return this.room.calibrationTimestamp;
+    } else if (this.player) {
+      return this.player.beginTimestamp + this.player.progressTime;
+    } else {
+      return Date.now();
+    }
+  };
+}

package/src/SlideDocsViewer/index.ts

@@ -1,18 +1,20 @@
-import type { ApplianceNames } from "white-web-sdk";
 import type { ReadonlyTeleBox, AnimationMode, View } from "@netless/window-manager";
-import type { Slide } from "@netless/slide";
-import type { SlideController } from "../utils/slide";
+import type { SlideController, SlideControllerOptions } from "../SlideController";
 
 import { SideEffectManager } from "side-effect-manager";
-import { createDocsViewerPages } from "../utils/slide";
+import { createDocsViewerPages } from "../SlideController";
 import { DocsViewer } from "../DocsViewer";
 
-const ClickThroughAppliances = new Set(["clicker", "selector"]);
+export const ClickThroughAppliances = new Set(["clicker", "selector"]);
+
+export type MountSlideOptions = Omit<SlideControllerOptions, "context" | "onPageChanged"> & {
+  onReady: () => void;
+};
 
 export interface SlideDocsViewerConfig {
   box: ReadonlyTeleBox;
   view: View;
-  mountSlideController: (anchor: HTMLDivElement) => Promise<SlideController>;
+  mountSlideController: (options: MountSlideOptions) => SlideController;
   mountWhiteboard: (dom: HTMLDivElement) => void;
 }
 
@@ -38,6 +40,14 @@ export class SlideDocsViewer {
       onPlay: this.onPlay,
     });
 
+    this.sideEffect.add(() => {
+      const handler = (readonly: boolean): void => {
+        this.setReadonly(readonly);
+      };
+      box.events.on("readonly", handler);
+      return () => box.events.off("readonly", handler);
+    });
+
     this.render();
   }
 
@@ -87,11 +97,16 @@ export class SlideDocsViewer {
     return this.$whiteboardView;
   }
 
-  public async mount() {
+  public mount() {
     this.viewer.mount();
-    this.slideController = await this.mountSlideController(this.$slide);
-    this.viewer.pages = createDocsViewerPages(this.slideController.slide);
-    this.viewer.setPageIndex(this.getPageIndex(this.slideController.slide));
+
+    this.slideController = this.mountSlideController({
+      anchor: this.$slide,
+      onTransitionStart: this.viewer.setPlaying,
+      onTransitionEnd: this.viewer.setPaused,
+      onReady: this.refreshPages,
+      onError: this.onError,
+    });
 
     this.scaleDocsToFit();
     this.sideEffect.add(() => {
@@ -102,8 +117,21 @@ export class SlideDocsViewer {
     return this;
   }
 
-  protected getPageIndex(slide: Slide) {
-    return (slide.slideState.currentSlideIndex || 1) - 1;
+  protected onError = ({ error }: { error: Error }) => {
+    this.viewer.setPaused();
+    console.warn("[Slide] render error", error);
+  };
+
+  protected refreshPages = () => {
+    if (this.slideController) {
+      this.viewer.pages = createDocsViewerPages(this.slideController.slide);
+      this.viewer.setPageIndex(this.getPageIndex(this.slideController.page));
+      this.scaleDocsToFit();
+    }
+  };
+
+  protected getPageIndex(page: number) {
+    return (page > 0 ? page : 1) - 1;
   }
 
   public unmount() {
@@ -125,7 +153,7 @@ export class SlideDocsViewer {
     this.viewer.destroy();
   }
 
-  public toggleClickThrough(tool?: ApplianceNames) {
+  public toggleClickThrough(tool?: string) {
     this.$whiteboardView.style.pointerEvents =
       !tool || ClickThroughAppliances.has(tool) ? "none" : "auto";
   }