@netless/app-slide 0.1.4 → 0.2.0

package/dist/utils/logger.d.ts

@@ -1,18 +1,30 @@
+import type { AppContext, Displayer } from "@netless/window-manager";
 import type { SlideController } from "../SlideController";
 declare type DebugMessage = {
     slide: boolean | "__instance" | "__debug";
 };
+declare type RoomLogger = {
+    debug: (...args: any) => void;
+    info: (...args: any) => void;
+    warn: (...args: any) => void;
+};
 declare class Logger {
     enable: boolean;
     apps: Record<string, {
-        context?: any;
-        controller?: SlideController;
+        context?: AppContext | null;
+        controller?: SlideController | null;
     }>;
+    setAppContext(appId: string, context: AppContext | null): void;
+    setAppController(appId: string, controller: SlideController | null): void;
+    deleteApp(appId: string): void;
     level: "debug" | "verbose";
+    roomLogger: RoomLogger | null;
     constructor(enable: boolean);
-    log(...args: Parameters<Console["log"]>): void;
-    verbose(...args: Parameters<Console["log"]>): void;
-    dispose(appId: string): void;
+    initialize(): void;
+    dispose(): void;
+    log(...args: any[]): void;
+    verbose(...args: any[]): void;
+    warn(...args: any[]): void;
     /**
      * @example
      * window.postMessage({ slide: '__debug' })
@@ -21,6 +33,7 @@ declare class Logger {
     _onMessage: (ev: MessageEvent<DebugMessage> | CustomEvent<DebugMessage>) => 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 declare const log: (...args: any[]) => void;
+export declare const verbose: (...args: any[]) => void;
+export declare const setRoomLogger: (displayer: Displayer) => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.2.10",
+    "@netless/slide": "^0.3.3",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.0",
     "side-effect-manager": "^0.1.5",
@@ -22,6 +22,5 @@
     "build": "vite build && npm run types",
     "build:dev": "vite build --mode development && npm run types",
     "cleanup": "rimraf ./dist"
-  },
-  "readme": "## @netless/app-slide\n\nNetless App for viewing animated slides, in our new engine.\n\n[中文](./README-zh.md)\n\n### Usage\n\n```ts\nimport type { Attributes as SlideAttributes } from \"@netless/app-slide\";\n\n// 1. register before joining room\nWindowManager.register({\n  kind: \"Slide\",\n  appOptions: {\n    // turn on to show debug controller\n    debug: false,\n  },\n  src: async () => {\n    const app = await import(\"@netless/app-slide\");\n    return app.default ?? app;\n  },\n});\n\n// 2. when joined room, add ppt to whiteboard\nmanager.addApp({\n  kind: \"Slide\",\n  options: {\n    scenePath: `/ppt/${uuid}`, // [1]\n    title: \"a.pptx\",\n  },\n  attributes: {\n    taskId: \"1234567...\", // [2]\n    url: \"https://convertcdn.netless.link/dynamicConvert\", // [3]\n  } as SlideAttributes,\n});\n```\n\nParameters:\n\n1. (**required**) `scenePath`\n\n   Which scene to be put on top of slides.\n\n2. (**required**) `taskId`\n\n   The [PPT conversion](https://developer.netless.link/server-en/home/server-conversion) task id.\n\n3. (optional) `url`\n\n   The base url of ppt resources, `https://convertcdn.netless.link/dynamicConvert` by default.\n\n### Preview\n\n```ts\nimport { previewSlide } from \"@netless/app-slide\";\n\nconst previewer = previewSlide({\n  container: document.getElementById(\"preview\"),\n  taskId: \"1234567...\",\n});\n\npreviewer.destroy();\n```\n\n### License\n\nMIT @ [netless](https://github.com/netless-io)\n"
+  }
 }

package/src/SlideController/index.ts

@@ -8,7 +8,7 @@
 // 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 { AppContext, Player, Room } from "@netless/window-manager";
+import type { AppContext, Player, Room, Displayer } from "@netless/window-manager";
 import type { SyncEvent } from "@netless/slide";
 import type { Attributes, MagixEvents, MagixPayload, SlideState } from "../typings";
 import type { AppOptions } from "..";
@@ -17,7 +17,7 @@ import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
 import { clamp } from "../utils/helpers";
 import { cachedGetBgColor } from "../utils/bgcolor";
-import { logger, log, verbose } from "../utils/logger";
+import { logger, log, verbose, setRoomLogger } from "../utils/logger";
 export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
 
 export const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";
@@ -71,10 +71,13 @@ export class SlideController {
     this.onTransitionStart = onTransitionStart;
     this.onTransitionEnd = onTransitionEnd;
     this.onError = onError;
+
     this.context = context;
     this.room = context.getRoom();
     this.player = this.room ? undefined : (context.getDisplayer() as Player);
+    setRoomLogger((this.room || this.player) as Displayer);
     this.slide = this.createSlide(anchor);
+
     // the adder does not need to sync state
     this.syncStateOnceFlag = !this.context.isAddApp;
     this.visible = document.visibilityState === "visible";
@@ -85,11 +88,16 @@ export class SlideController {
   public ready = false;
   private resolveReady!: () => void;
   public readonly readyPromise = new Promise<void>(resolve => {
-    this.resolveReady = () =>
-      setTimeout(() => {
-        this.ready = true;
-        resolve();
-      }, 1000);
+    this.resolveReady = () => {
+      if (this.ready) {
+        log("[Slide] render end");
+      } else {
+        setTimeout(() => {
+          this.ready = true;
+          resolve();
+        }, 1000);
+      }
+    };
   });
 
   public jumpToPage(page: number) {
@@ -113,7 +121,7 @@ export class SlideController {
     slide.setResource(taskId, url || DefaultUrl);
     if (state) {
       // if we already have state, try restore from it
-      log("[Slide] init with state", state);
+      log("[Slide] init with state", JSON.stringify(state));
       this.syncStateOnceFlag = false;
       slide.setSlideState(state);
     } else if (context.isAddApp) {
@@ -171,7 +179,7 @@ export class SlideController {
         type: SLIDE_EVENTS.syncDispatch,
         payload: event,
       };
-      log("[Slide] dispatch", event);
+      verbose("[Slide] dispatch", JSON.stringify(event));
       this.context.dispatchMagixEvent(SLIDE_EVENTS.syncDispatch, payload);
     }
   };
@@ -180,7 +188,7 @@ export class SlideController {
     const { type, payload } = ev.payload;
     if (type === SLIDE_EVENTS.syncDispatch) {
       this.syncStateOnce();
-      log("[Slide] receive", payload);
+      verbose("[Slide] receive", JSON.stringify(payload));
       this.slide.emit(SLIDE_EVENTS.syncReceive, payload);
     }
   };
@@ -193,7 +201,7 @@ export class SlideController {
       }
       const { state } = this.context.storage.state;
       if (state) {
-        log("[Slide] sync with state (once)", state);
+        log("[Slide] sync with state (once)", JSON.stringify(state));
         this.slide.setSlideState(state);
         this.syncStateOnceFlag = false;
       }
@@ -220,7 +228,7 @@ export class SlideController {
       setTimeout(this.pollReadyState, 500);
     } else {
       this.pollCount = 0;
-      log("[Slide] renderSlide (retry after timeout)", 1);
+      log("[Slide] renderSlide 1 (retry after timeout)");
       this.slide.renderSlide(1);
     }
   };
@@ -249,7 +257,7 @@ export class SlideController {
       renderOptions: {
         minFPS: this.context.getAppOptions()?.minFPS || 25,
         maxFPS: this.context.getAppOptions()?.maxFPS || 30,
-        autoFPS: true,
+        autoFPS: this.context.getAppOptions()?.autoFPS ?? true,
         autoResolution: this.context.getAppOptions()?.autoResolution ?? true,
         resolution: this.context.getAppOptions()?.resolution,
         transactionBgColor: this.context.getAppOptions()?.bgColor || cachedGetBgColor(anchor),

package/src/SlideDocsViewer/index.ts

@@ -4,6 +4,7 @@ import type { SlideController, SlideControllerOptions } from "../SlideController
 import { SideEffectManager } from "side-effect-manager";
 import { createDocsViewerPages } from "../SlideController";
 import { DocsViewer } from "../DocsViewer";
+import { logger } from "../utils/logger";
 
 export const ClickThroughAppliances = new Set(["clicker"]);
 
@@ -119,7 +120,7 @@ export class SlideDocsViewer {
 
   protected onError = ({ error }: { error: Error }) => {
     this.viewer.setPaused();
-    console.warn("[Slide] render error", error);
+    logger.warn("[Slide] render error", error);
   };
 
   protected refreshPages = () => {

package/src/SlidePreviewer/index.ts

@@ -4,7 +4,6 @@ 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 {
@@ -180,7 +179,6 @@ export class SlidePreviewer {
   public destroy() {
     this.sideEffect.flushAll();
     if (this.slide && !this.destroyed) {
-      log("[Slide] destroy slide (once)");
       this.slide.destroy();
       this.destroyed = true;
     }

package/src/index.ts

@@ -37,6 +37,8 @@ export interface AppOptions {
   minFPS?: number;
   /** maximal fps @default 30 */
   maxFPS?: number;
+  /** automatically decrease fps @default true */
+  autoFPS?: boolean;
   /** whether to re-scale automatically @default true */
   autoResolution?: boolean;
 }
@@ -48,6 +50,7 @@ export interface Controller {
   prevStep: () => boolean;
   nextPage: () => boolean;
   prevPage: () => boolean;
+  jumpToPage: (page: number) => boolean;
 }
 
 const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
@@ -90,7 +93,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
           syncSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath);
           synced = true;
         }
-        log("[Slide] page to", page, synced);
+        log("[Slide] page to", page, synced ? "(synced)" : "");
         docsViewer.viewer.setPageIndex(page - 1);
       }
     };
@@ -102,7 +105,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
         onPageChanged,
       });
       if (useFreezer) apps.set(context.appId, slideController);
-      (logger.apps[context.appId] ||= {}).controller = slideController;
+      logger.setAppController(context.appId, slideController);
       if (import.meta.env.DEV) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).slideController = slideController;
@@ -114,7 +117,8 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
           syncSceneWithSlide(room, context, slideController.slide, baseScenePath);
           synced = true;
         }
-        log("[Slide] page to", slideController.slide.slideState.currentSlideIndex, synced);
+        const page = slideController.slide.slideState.currentSlideIndex;
+        log("[Slide] page to", page, synced ? "(synced)" : "", "(on ready)");
       });
       return slideController;
     };
@@ -135,10 +139,10 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
     const sideEffect = new SideEffectManager();
 
     sideEffect.add(() => {
-      (logger.apps[context.appId] ||= {}).context = context;
+      logger.setAppContext(context.appId, context);
       logger.enable = context.getAppOptions()?.debug || import.meta.env.DEV;
       logger.level = import.meta.env.DEV ? "verbose" : "debug";
-      return () => logger.dispose(context.appId);
+      return () => logger.deleteApp(context.appId);
     });
 
     if (room) {
@@ -155,7 +159,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
     }
 
     context.emitter.on("destroy", () => {
-      log("[Slide]: destroy");
+      log("[Slide] destroy", context.appId);
       if (useFreezer) apps.delete(context.appId);
       sideEffect.flushAll();
       if (docsViewer) {
@@ -212,6 +216,17 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
         }
         return false;
       },
+      jumpToPage: (newPage: number) => {
+        const controller = docsViewer?.slideController;
+        if (controller) {
+          const { page, pageCount } = controller;
+          if (pageCount > 0 && page > 0 && page <= pageCount) {
+            controller.jumpToPage(newPage);
+            return true;
+          }
+        }
+        return false;
+      },
     };
   },
 };

package/src/utils/freezer.ts

@@ -9,22 +9,26 @@ export interface FreezableSlide {
 export let useFreezer = false;
 export const FreezerLength = 2;
 
+const inspect = (arr: string[]) => {
+  return "[" + arr + "]";
+};
+
 export const apps = {
   map: new Map<string, FreezableSlide>(),
   queue: [] as string[],
   validateQueue() {
-    log("[Slide] freezer: validate", this.queue);
+    log("[Slide] freezer: validate", inspect(this.queue));
     while (this.queue.length > FreezerLength) {
       const appId = this.queue.pop() as string;
       const slide = this.map.get(appId);
       if (slide) {
-        log("[Slide] freezer: validate-freeze", appId, this.queue);
+        log("[Slide] freezer: validate-freeze", appId, inspect(this.queue));
         slide.freeze();
       }
     }
   },
   set(appId: string, slide: FreezableSlide) {
-    log("[Slide] freezer: add", appId, this.queue);
+    log("[Slide] freezer: add", appId, inspect(this.queue));
     this.map.set(appId, slide);
     if (!this.queue.includes(appId)) {
       this.queue.unshift(appId);
@@ -32,9 +36,9 @@ export const apps = {
     this.validateQueue();
   },
   delete(appId: string) {
-    log("[Slide] freezer: delete", appId, this.queue);
     this.map.delete(appId);
     this.queue = this.queue.filter(id => id !== appId);
+    log("[Slide] freezer: delete", appId, inspect(this.queue));
   },
   focus(appId: string) {
     const slide = this.map.get(appId);
@@ -44,7 +48,7 @@ export const apps = {
     }
     this.queue.unshift(appId);
     this.validateQueue();
-    log("[Slide] freezer: focus", appId, this.queue);
+    log("[Slide] freezer: focus", appId, inspect(this.queue));
     if (slide) {
       slide.unfreeze();
     }

package/src/utils/logger.ts

@@ -1,30 +1,76 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { AppContext, Displayer } from "@netless/window-manager";
 import type { SlideController } from "../SlideController";
 import { isObj } from "./helpers";
 
 type DebugMessage = { slide: boolean | "__instance" | "__debug" };
 
+type RoomLogger = {
+  debug: (...args: any) => void;
+  info: (...args: any) => void;
+  warn: (...args: any) => void;
+};
+
 class Logger {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public apps: Record<string, { context?: any; controller?: SlideController }> = {};
+  public apps: Record<
+    string,
+    { context?: AppContext | null; controller?: SlideController | null }
+  > = {};
+
+  setAppContext(appId: string, context: AppContext | null) {
+    (this.apps[appId] ||= {}).context = context;
+    this.log(`[Slide] new ${appId}`);
+  }
+
+  setAppController(appId: string, controller: SlideController | null) {
+    (this.apps[appId] ||= {}).controller = controller;
+  }
+
+  deleteApp(appId: string) {
+    delete this.apps[appId];
+    this.log(`[Slide] delete ${appId}`);
+  }
+
   public level: "debug" | "verbose" = import.meta.env.DEV ? "verbose" : "debug";
+
+  public roomLogger: RoomLogger | null = null;
+
   constructor(public enable: boolean) {
+    this.initialize();
+  }
+
+  initialize() {
     window.addEventListener("message", this._onMessage);
   }
-  log(...args: Parameters<Console["log"]>) {
-    if (this.enable) {
+
+  dispose() {
+    window.removeEventListener("message", this._onMessage);
+  }
+
+  log(...args: any[]) {
+    if (this.roomLogger) {
+      this.roomLogger.info(...args);
+    } else if (this.enable) {
       console.log(...args);
     }
   }
-  verbose(...args: Parameters<Console["log"]>) {
-    if (this.enable && this.level === "verbose") {
+
+  verbose(...args: any[]) {
+    if (this.roomLogger) {
+      this.roomLogger.debug(...args);
+    } else if (this.enable && this.level === "verbose") {
       console.log(...args);
     }
   }
-  dispose(appId: string) {
-    this.enable = false;
-    delete this.apps[appId];
-    window.removeEventListener("message", this._onMessage);
+
+  warn(...args: any[]) {
+    if (this.roomLogger) {
+      this.roomLogger.warn(...args);
+    } else {
+      console.warn(...args);
+    }
   }
+
   /**
    * @example
    * window.postMessage({ slide: '__debug' })
@@ -52,6 +98,9 @@ class Logger {
   };
 }
 
-export const logger = new Logger(import.meta.env.DEV);
-export const log = logger.log.bind(logger);
-export const verbose = logger.verbose.bind(logger);
+export const logger = /** @__PURE__ */ new Logger(import.meta.env.DEV);
+export const log = /** @__PURE__ */ logger.log.bind(logger);
+export const verbose = /** @__PURE__ */ logger.verbose.bind(logger);
+export const setRoomLogger = (displayer: Displayer) => {
+  logger.roomLogger = (displayer as any).logger;
+};