@netless/app-slide 0.2.48 → 0.2.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.48",
+  "version": "0.2.50",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/slide": "^1.1.11",
+    "@netless/slide": "^1.2.0",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",

package/src/DocsViewer/index.ts

@@ -20,13 +20,15 @@ export interface DocsViewerConfig {
   onNewPageIndex: (index: number) => void;
   onPlay?: () => void;
   urlInterrupter?: (url: string) => Promise<string>;
+  onPagesReady?: (pages: DocsViewerPage[]) => void;
 }
 
 export class DocsViewer {
-  public constructor({ readonly, onNewPageIndex, onPlay, urlInterrupter }: DocsViewerConfig) {
+  public constructor({ readonly, onNewPageIndex, onPlay, onPagesReady, urlInterrupter }: DocsViewerConfig) {
     this.readonly = readonly;
     this.onNewPageIndex = onNewPageIndex;
     this.onPlay = onPlay;
+    this.onPagesReady = onPagesReady;
     this.urlInterrupter = urlInterrupter || (url => url);
 
     this.render();
@@ -35,6 +37,7 @@ export class DocsViewer {
   protected readonly: boolean;
   protected onNewPageIndex: (index: number) => void;
   protected onPlay?: () => void;
+  protected onPagesReady?: (pages: DocsViewerPage[]) => void
   protected urlInterrupter: (url: string) => Promise<string> | string;
 
   private _pages: DocsViewerPage[] = [];
@@ -43,6 +46,9 @@ export class DocsViewer {
     this._pages = value;
     this.refreshPreview().then(this.refreshBtnSidebar.bind(this));
     this.refreshTotalPage();
+    if (this.onPagesReady) {
+      this.onPagesReady(value);
+    }
   }
 
   public get pages() {

package/src/SlideController/index.ts

@@ -9,7 +9,7 @@
 // 5. pages information are loaded dynamically by the slide package
 
 import type { AppContext, Player, Room, Displayer } from "@netless/window-manager";
-import type { SyncEvent } from "@netless/slide";
+import type { ISlideConfig, SyncEvent } from "@netless/slide";
 import type { Attributes, MagixEvents, MagixPayload, SlideState } from "../typings";
 import type { AppOptions } from "..";
 
@@ -18,6 +18,7 @@ import { Slide, SLIDE_EVENTS } from "@netless/slide";
 import { clamp } from "../utils/helpers";
 import { cachedGetBgColor } from "../utils/bgcolor";
 import { logger, log, verbose, setRoomLogger } from "../utils/logger";
+import { getRoomTracker } from "../utils/tracker";
 export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
 
 export const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";
@@ -89,7 +90,9 @@ export class SlideController {
     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);
+    this.slide = this.createSlide(anchor, {
+      whiteTracker: getRoomTracker(context.getDisplayer()),
+    });
 
     // the adder does not need to sync state
     this.syncStateOnceFlag = !this.context.isAddApp;
@@ -259,7 +262,7 @@ export class SlideController {
     return this.slide.slideState.currentSlideIndex;
   }
 
-  private createSlide(anchor: HTMLDivElement) {
+  private createSlide(anchor: HTMLDivElement, defaults: Partial<ISlideConfig> = {}) {
     const options = this.context.getAppOptions() || {};
     const slide = new Slide({
       anchor,
@@ -286,6 +289,7 @@ export class SlideController {
       rtcAudio: options.rtcAudio,
       useLocalCache: options.useLocalCache,
       logger: options.logger,
+      whiteTracker: defaults.whiteTracker,
       timestamp: this.timestamp,
     });
     if (import.meta.env.DEV) {

package/src/SlideDocsViewer/index.ts

@@ -3,7 +3,7 @@ import type { SlideController, SlideControllerOptions } from "../SlideController
 
 import { SideEffectManager } from "side-effect-manager";
 import { createDocsViewerPages } from "../SlideController";
-import { DocsViewer } from "../DocsViewer";
+import { DocsViewer, DocsViewerPage } from "../DocsViewer";
 import { logger } from "../utils/logger";
 import { isEditable } from "../utils/helpers";
 
@@ -21,6 +21,7 @@ export interface SlideDocsViewerConfig {
   baseScenePath: string;
   appId: string;
   urlInterrupter?: (url: string) => Promise<string>;
+  onPagesReady?: (pages: DocsViewerPage[]) => void;
 }
 
 export interface SavePdfConfig {
@@ -48,6 +49,7 @@ export class SlideDocsViewer {
     baseScenePath,
     appId,
     urlInterrupter,
+    onPagesReady,
   }: SlideDocsViewerConfig) {
     this.box = box;
     this.whiteboardView = view;
@@ -60,6 +62,7 @@ export class SlideDocsViewer {
       onNewPageIndex: this.onNewPageIndex,
       onPlay: this.onPlay,
       urlInterrupter,
+      onPagesReady,
     });
 
     this.sideEffect.add(() => {

package/src/index.ts

@@ -133,6 +133,10 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
         docsViewer.viewer.setPageIndex(page - 1);
         docsViewer.viewer.setPaused();
         docsViewer.onPageChanged();
+        const length = docsViewer.viewer.pages.length;
+        if (length > 0) {
+          context.dispatchAppEvent("pageStateChange", { index: page - 1, length });
+        }
       }
     };
 
@@ -174,6 +178,10 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
       baseScenePath,
       appId: context.appId,
       urlInterrupter: context.getAppOptions()?.urlInterrupter,
+      onPagesReady: ({ length }) => {
+        const index = docsViewer?.viewer.pageIndex || 0;
+        context.dispatchAppEvent("pageStateChange", { index, length });
+      }
     });
 
     if (import.meta.env.DEV) {

package/src/utils/tracker.ts

@@ -0,0 +1,6 @@
+import type { Displayer } from "white-web-sdk"
+import type { ISlideConfig } from "@netless/slide"
+
+export const getRoomTracker = (displayer: Displayer): ISlideConfig["whiteTracker"] => {
+  return (displayer as any).tracker;
+}