@netless/app-slide 0.0.17 → 0.0.21

package/src/index.ts

@@ -1,181 +1,90 @@
-import type { Event, Player, RoomState } from "white-web-sdk";
-import type { Slide, SyncEvent } from "@netless/slide";
 import type { NetlessApp } from "@netless/window-manager";
-import type { SlideController } from "./utils/slide";
+import type { RoomState } from "white-web-sdk";
+import type { MountSlideOptions } from "./SlideDocsViewer";
+import type { Attributes } from "./typings";
 
-import { SLIDE_EVENTS } from "@netless/slide";
-import { ensureAttributes } from "@netless/app-shared";
 import { SideEffectManager } from "side-effect-manager";
+import { ensureAttributes } from "@netless/app-shared";
+import {
+  DefaultUrl,
+  EmptyAttributes,
+  syncSceneWithSlide,
+  SlideController,
+} from "./SlideController";
 import { SlideDocsViewer } from "./SlideDocsViewer";
-import { createSlideController, syncSceneWithSlide } from "./utils/slide";
-import { isObj } from "./utils/helpers";
 import styles from "./style.scss?inline";
 
-export type SlideState = Slide["slideState"];
+export type { Attributes };
 
-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 { DefaultUrl };
 
 const SlideApp: NetlessApp<Attributes> = {
   kind: "Slide",
-  async setup(context) {
-    const box = context.getBox();
-    const view = context.getView();
-    const room = context.getRoom();
-    const displayer = context.getDisplayer();
-    const attrs = ensureAttributes(context, {
-      taskId: "",
-      url: "",
-      state: null,
-    });
+  setup(context) {
+    if (context.getIsWritable()) {
+      ensureAttributes(context, EmptyAttributes);
+    }
 
-    if (!attrs.taskId) {
-      throw new Error(`[Slide] no taskId`);
+    const attributes = context.getAttributes();
+    if (!attributes?.taskId) {
+      throw new Error("[Slide] no taskId");
     }
 
+    const view = context.getView();
     if (!view) {
-      throw new Error(`[Slide] no view, please set scenePath on addApp()`);
+      throw new Error("[Slide] no view, please set scenePath on addApp()");
     }
+    view.disableCameraTransform = true;
 
-    const debug = import.meta.env.DEV || context.getAppOptions()?.debug;
-    const fixElectron = !!context.getAppOptions()?.fixElectron;
-    const resolution = context.getAppOptions()?.resolution;
-
+    const box = context.getBox();
     box.mountStyles(styles);
 
-    const sideEffect = new SideEffectManager();
-    // 因为 view 存在，init scene path 必定存在
+    // must exist because of view
     const baseScenePath = context.getInitScenePath() as string;
-    const channel = `channel-${context.appId}`;
 
-    let theController: SlideController | undefined;
-
-    const timestamp = () => {
-      if (room) {
-        return room.calibrationTimestamp;
-      } else {
-        return (displayer as Player).beginTimestamp + (displayer as Player).progressTime;
-      }
-    };
+    let docsViewer: SlideDocsViewer | null = null;
 
     const onPageChanged = (page: number) => {
-      console.log("[Slide] page to", page);
-      if (context.getIsWritable() && room && theController) {
-        syncSceneWithSlide(room, context, theController.slide, baseScenePath);
+      const room = context.getRoom();
+      if (docsViewer && docsViewer.slideController && room && context.getIsWritable()) {
+        syncSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath);
         docsViewer.viewer.setPageIndex(page - 1);
       }
     };
 
-    const onTransitionStart = () => {
-      docsViewer.viewer.setPlaying();
-    };
-
-    const onTransitionEnd = () => {
-      docsViewer.viewer.setPaused();
-    };
-
-    const onDispatchSyncEvent = (event: SyncEvent) => {
-      if (debug) {
-        console.log("[Slide] dispatch", event);
-      }
-      if (context.getIsWritable() && theController && room) {
-        room.dispatchMagixEvent(channel, { type: SLIDE_EVENTS.syncDispatch, payload: event });
-      }
-    };
-
-    const onStateChange = (slideState: SlideState) => {
-      if (context.getIsWritable()) {
-        context.updateAttributes(["state"], slideState);
-      }
-    };
-
-    sideEffect.add(() => {
-      let first = !context.isAddApp;
-      const magixEventListener = async (ev: Event) => {
-        if (debug) {
-          console.log(
-            "[Slide] receive",
-            ev.payload.payload,
-            "(",
-            !!theController,
-            ev.event === channel,
-            ev.payload.type === SLIDE_EVENTS.syncDispatch,
-            ")"
-          );
-        }
-        if (theController && ev.event === channel && isObj(ev.payload)) {
-          const { type, payload } = ev.payload;
-          if (type === SLIDE_EVENTS.syncDispatch) {
-            if (first && attrs.state) {
-              first = false;
-              theController.setState(attrs.state);
-            }
-            theController.receiveSyncEvent(payload);
-          }
-        }
-      };
-      displayer.addMagixEventListener(channel, magixEventListener, {
-        fireSelfEventAfterCommit: true,
-      });
-      return () => displayer.removeMagixEventListener(channel, magixEventListener);
-    });
-
-    const mountSlideController = async (anchor: HTMLDivElement) => {
-      theController = createSlideController(
-        anchor,
-        attrs.taskId,
-        attrs.url || "https://convertcdn.netless.link/dynamicConvert",
-        debug,
-        JSON.parse(JSON.stringify(attrs.state)),
-        displayer.state.sceneState.index + 1,
+    const mountSlideController = (options: MountSlideOptions): SlideController => {
+      const slideController = new SlideController({
+        context,
+        ...options,
         onPageChanged,
-        onTransitionStart,
-        onTransitionEnd,
-        onDispatchSyncEvent,
-        onStateChange,
-        timestamp,
-        fixElectron,
-        resolution
-      );
-      theController.initialize();
-      await theController.ready;
-      return theController;
+      });
+      if (import.meta.env.DEV) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).slideController = slideController;
+      }
+      slideController.readyPromise.then(options.onReady);
+      return slideController;
     };
 
-    const docsViewer = new SlideDocsViewer({
+    docsViewer = new SlideDocsViewer({
       box,
       view,
       mountSlideController,
       mountWhiteboard: dom => context.mountView(dom),
     });
 
-    try {
-      await docsViewer.mount();
-      view.disableCameraTransform = true;
-    } catch (err) {
-      console.warn(err);
-      console.log("[Slide]: destroy by error");
-      sideEffect.flushAll();
-      docsViewer.destroy();
-      return;
-    }
-
     if (import.meta.env.DEV) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (window as any).slideDoc = docsViewer;
     }
 
+    const room = context.getRoom();
+    const sideEffect = new SideEffectManager();
     if (room) {
       docsViewer.toggleClickThrough(room.state.memberState.currentApplianceName);
       sideEffect.add(() => {
         const onRoomStateChanged = (e: Partial<RoomState>) => {
-          if (e.memberState) {
+          if (e.memberState && docsViewer) {
             docsViewer.toggleClickThrough(e.memberState.currentApplianceName);
           }
         };
@@ -184,15 +93,16 @@ const SlideApp: NetlessApp<Attributes> = {
       });
     }
 
-    context.emitter.on("writableChange", () => {
-      docsViewer.setReadonly(!context.getIsWritable());
-    });
-
     context.emitter.on("destroy", () => {
       console.log("[Slide]: destroy");
       sideEffect.flushAll();
-      docsViewer.destroy();
+      if (docsViewer) {
+        docsViewer.destroy();
+        docsViewer = null;
+      }
     });
+
+    docsViewer.mount();
   },
 };
 

package/src/typings.ts

@@ -0,0 +1,17 @@
+import type { Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
+
+export 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 type MagixPayload = {
+  type: typeof SLIDE_EVENTS.syncDispatch;
+  payload: SyncEvent;
+};

package/src/utils/helpers.ts

@@ -20,3 +20,7 @@ export function isObj(obj: unknown) {
 export function wait(ms: number) {
   return new Promise<void>(resolve => setTimeout(resolve, ms));
 }
+
+export function deepClone<T>(obj: T): T {
+  return JSON.parse(JSON.stringify(obj));
+}

package/dist/utils/slide.d.ts

@@ -1,47 +0,0 @@
-import type { SyncEvent } from "@netless/slide";
-import type { Room } from "white-web-sdk";
-import type { AppContext } from "@netless/window-manager";
-import type { DocsViewerPage } from "../DocsViewer";
-import type { Attributes, SlideState } from "../index";
-import { Slide } from "@netless/slide";
-/**
- * 因为 slide 的 `renderSlide()` 比较耗时，而切 scene 很快，这里让 scene 跟随 slide 的状态。
- *
- * 同时，UI 也应该和 slide 对齐。考虑到快速点击下一页的情况：slide 无法立刻切到下一页。我们应该记住当前的
- * "目标页"，slide 的 `renderEnd` 没触发前不再继续调用 `renderSlide()`。
- */
-export declare function syncSceneWithSlide(room: Room, context: AppContext<Attributes>, slide: Slide, baseScenePath: string): void;
-export declare function createDocsViewerPages(slide: Slide): DocsViewerPage[];
-/**
- * slide 依赖事件回溯 (收到广播事件) 来进行同步进度，每次 `renderSlide()` 等操作都不会实际触发更改，
- * 而是发出一条广播事件，等收到事件后，使用 `slide.emit(SLIDE_EVENTS.syncReceive)` 来实际触发。
- *
- * controller 要保证每个事件都正确反馈给 slide。
- */
-export declare class SlideController {
-    readonly slide: Slide;
-    readonly onPageChanged: (page: number) => void;
-    readonly onTransitionStart: () => void;
-    readonly onTransitionEnd: () => void;
-    readonly onDispatchSyncEvent: (event: SyncEvent) => void;
-    readonly onStateChange: (state: SlideState) => void;
-    private readonly initialState;
-    private readonly initialPage;
-    constructor(slide: Slide, onPageChanged: (page: number) => void, onTransitionStart: () => void, onTransitionEnd: () => void, onDispatchSyncEvent: (event: SyncEvent) => void, onStateChange: (state: SlideState) => void, initialState: SlideState | null, initialPage: number);
-    private resolveReady;
-    private reject;
-    readonly ready: Promise<this>;
-    private onRenderError;
-    initialize(): void;
-    private pollCount;
-    private pollReadyState;
-    receiveSyncEvent(event: SyncEvent): void;
-    setState(state: SlideState): void;
-    isReady(): boolean;
-    private targetingPage;
-    private resetTargetingPage;
-    jumpToPage(page: number): void;
-    destroy(): void;
-}
-export declare function createSlideController(anchor: HTMLDivElement, taskId: string, url: string, controller: boolean, initialState: Slide["slideState"] | null, initialPage: number, onPageChanged: (page: number) => void, onTransitionStart: () => void, onTransitionEnd: () => void, onDispatchSyncEvent: (event: SyncEvent) => void, onStateChange: (state: Slide["slideState"]) => void, timestamp: () => number, _fixElectron: boolean, // eslint-disable-line @typescript-eslint/no-unused-vars
-resolution?: number): SlideController;

package/playground.ts

@@ -1,31 +0,0 @@
-import type { PlaygroundConfigs } from "../playground/typings";
-import type { Attributes } from "./src";
-
-const options: PlaygroundConfigs<Attributes> = [
-  {
-    kind: "Slide",
-    src: () => import("./src"),
-    options: {
-      title: "ByeBye GoodBye",
-      scenePath: `/Slide/5f36bc1041c811ecba2783d2bae94ad0`,
-    },
-    attributes: {
-      taskId: "5f36bc1041c811ecba2783d2bae94ad0",
-      url: "https://convertcdn.netless.group/dynamicConvert",
-    },
-  },
-  {
-    kind: "Slide",
-    src: () => import("./src"),
-    options: {
-      title: "大凉山区",
-      scenePath: `/Slide/8887363041c811ecba2783d2bae94ad0`,
-    },
-    attributes: {
-      taskId: "8887363041c811ecba2783d2bae94ad0",
-      url: "https://convertcdn.netless.group/dynamicConvert",
-    },
-  },
-];
-
-export default options;

package/src/utils/slide.ts

@@ -1,203 +0,0 @@
-import type { SyncEvent } from "@netless/slide";
-import type { Room, ScenePathType } from "white-web-sdk";
-import type { AppContext } from "@netless/window-manager";
-import type { DocsViewerPage } from "../DocsViewer";
-import type { Attributes, SlideState } from "../index";
-
-import { SLIDE_EVENTS, Slide } from "@netless/slide";
-import { clamp } from "./helpers";
-
-/**
- * 因为 slide 的 `renderSlide()` 比较耗时，而切 scene 很快，这里让 scene 跟随 slide 的状态。
- *
- * 同时，UI 也应该和 slide 对齐。考虑到快速点击下一页的情况：slide 无法立刻切到下一页。我们应该记住当前的
- * "目标页"，slide 的 `renderEnd` 没触发前不再继续调用 `renderSlide()`。
- */
-export function syncSceneWithSlide(
-  room: Room,
-  context: AppContext<Attributes>,
-  slide: Slide,
-  baseScenePath: string
-) {
-  const page = slide.slideState.currentSlideIndex;
-  // 如果不存在 currentSlideIndex，可能没初始化完，此时什么都不做
-  if (page == null) return;
-  // 如果 room 不可写，什么也不做
-  if (!context.getIsWritable()) return;
-
-  const scenePath = [baseScenePath, page].join("/");
-  // 这里用 === none 而不是 !== page，是因为这个接口有 bug，最新的 sdk 才修掉
-  if (room.scenePathType(scenePath) === ("none" as ScenePathType.None)) {
-    // 如果不存在对应 scene，重新创建一遍
-    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);
-}
-
-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;
-}
-
-/**
- * slide 依赖事件回溯 (收到广播事件) 来进行同步进度，每次 `renderSlide()` 等操作都不会实际触发更改，
- * 而是发出一条广播事件，等收到事件后，使用 `slide.emit(SLIDE_EVENTS.syncReceive)` 来实际触发。
- *
- * controller 要保证每个事件都正确反馈给 slide。
- */
-export class SlideController {
-  constructor(
-    public readonly slide: Slide,
-    readonly onPageChanged: (page: number) => void,
-    readonly onTransitionStart: () => void,
-    readonly onTransitionEnd: () => void,
-    readonly onDispatchSyncEvent: (event: SyncEvent) => void,
-    readonly onStateChange: (state: SlideState) => void,
-    private readonly initialState: SlideState | null,
-    private readonly initialPage: number
-  ) {
-    slide.on(SLIDE_EVENTS.slideChange, this.resetTargetingPage);
-    slide.on(SLIDE_EVENTS.slideChange, onPageChanged);
-
-    slide.on(SLIDE_EVENTS.renderStart, onTransitionStart);
-    slide.on(SLIDE_EVENTS.renderEnd, onTransitionEnd);
-    // slide.on(SLIDE_EVENTS.animateStart, onTransitionStart);
-    // slide.on(SLIDE_EVENTS.animateEnd, onTransitionEnd);
-    slide.on(SLIDE_EVENTS.mainSeqStepStart, onTransitionStart);
-    slide.on(SLIDE_EVENTS.mainSeqStepEnd, onTransitionEnd);
-
-    slide.on(SLIDE_EVENTS.syncDispatch, onDispatchSyncEvent);
-
-    slide.on(SLIDE_EVENTS.renderError, this.onRenderError);
-    slide.on(SLIDE_EVENTS.renderError, onTransitionEnd);
-
-    slide.on(SLIDE_EVENTS.stateChange, onStateChange);
-
-    this.pollReadyState();
-  }
-
-  private resolveReady!: (slideController: this) => void;
-  private reject!: (error: Error) => void;
-
-  readonly ready = new Promise<this>((resolve, reject) => {
-    this.resolveReady = resolve;
-    this.reject = reject;
-  });
-
-  private onRenderError = ({ error }: { error: Error }) => {
-    console.warn("[Slide] render error", error);
-  };
-
-  initialize() {
-    if (this.initialState) {
-      console.log("[Slide] init with state", this.initialState);
-      this.slide.setSlideState(this.initialState);
-    } else {
-      this.slide.renderSlide(this.initialPage);
-    }
-  }
-
-  private pollCount = 0;
-
-  private pollReadyState = () => {
-    if (this.isReady()) {
-      this.resolveReady(this);
-    } else if (this.pollCount < 60) {
-      this.pollCount++;
-      setTimeout(this.pollReadyState, 500);
-    } else {
-      this.reject(new Error("slide init time out (30s)"));
-    }
-  };
-
-  receiveSyncEvent(event: SyncEvent) {
-    this.slide.emit(SLIDE_EVENTS.syncReceive, event);
-  }
-
-  setState(state: SlideState) {
-    this.slide.setSlideState(state);
-  }
-
-  isReady() {
-    return this.slide.slideCount > 0;
-  }
-
-  private targetingPage = -1;
-
-  private resetTargetingPage = () => {
-    this.targetingPage = -1;
-  };
-
-  jumpToPage(page: number) {
-    if (!this.isReady()) return;
-    page = clamp(page, 1, this.slide.slideCount);
-    if (page === this.targetingPage) return;
-    this.targetingPage = page;
-    this.slide.renderSlide(page);
-  }
-
-  destroy() {
-    this.slide.destroy();
-  }
-}
-
-export function createSlideController(
-  anchor: HTMLDivElement,
-  taskId: string,
-  url: string,
-  controller: boolean,
-  initialState: Slide["slideState"] | null,
-  initialPage: number,
-  onPageChanged: (page: number) => void,
-  onTransitionStart: () => void,
-  onTransitionEnd: () => void,
-  onDispatchSyncEvent: (event: SyncEvent) => void,
-  onStateChange: (state: Slide["slideState"]) => void,
-  timestamp: () => number,
-  _fixElectron: boolean, // eslint-disable-line @typescript-eslint/no-unused-vars
-  resolution?: number
-) {
-  const slide = new Slide({
-    anchor,
-    interactive: true,
-    mode: "interactive",
-    resize: true,
-    controller,
-    renderOptions: {
-      minFPS: 25,
-      maxFPS: 30,
-      autoFPS: true,
-      autoResolution: true,
-      resolution,
-    },
-    timestamp,
-  });
-
-  if (import.meta.env.DEV) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (window as any).slide = slide;
-  }
-
-  slide.setResource(taskId, url);
-
-  return new SlideController(
-    slide,
-    onPageChanged,
-    onTransitionStart,
-    onTransitionEnd,
-    onDispatchSyncEvent,
-    onStateChange,
-    initialState,
-    initialPage
-  );
-}

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "noEmit": false
-  }
-}

package/vite.config.ts

@@ -1,3 +0,0 @@
-import { createViteConfig } from "../../scripts/create-vite-config";
-
-export default createViteConfig();