@netless/app-slide 0.2.50 → 0.2.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.50",
+  "version": "0.2.52",
   "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.2.0",
+    "@netless/slide": "^1.2.1",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",

package/src/DocsViewer/index.ts

@@ -17,14 +17,20 @@ export interface DocsViewerPage {
 
 export interface DocsViewerConfig {
   readonly: boolean;
-  onNewPageIndex: (index: number) => void;
+  onNewPageIndex: (index: number, origin?: string) => void;
   onPlay?: () => void;
   urlInterrupter?: (url: string) => Promise<string>;
   onPagesReady?: (pages: DocsViewerPage[]) => void;
 }
 
 export class DocsViewer {
-  public constructor({ readonly, onNewPageIndex, onPlay, onPagesReady, urlInterrupter }: DocsViewerConfig) {
+  public constructor({
+    readonly,
+    onNewPageIndex,
+    onPlay,
+    onPagesReady,
+    urlInterrupter,
+  }: DocsViewerConfig) {
     this.readonly = readonly;
     this.onNewPageIndex = onNewPageIndex;
     this.onPlay = onPlay;
@@ -35,9 +41,9 @@ export class DocsViewer {
   }
 
   protected readonly: boolean;
-  protected onNewPageIndex: (index: number) => void;
+  protected onNewPageIndex: (index: number, origin?: string) => void;
   protected onPlay?: () => void;
-  protected onPagesReady?: (pages: DocsViewerPage[]) => void
+  protected onPagesReady?: (pages: DocsViewerPage[]) => void;
   protected urlInterrupter: (url: string) => Promise<string> | string;
 
   private _pages: DocsViewerPage[] = [];
@@ -147,7 +153,7 @@ export class DocsViewer {
           ev.preventDefault();
           ev.stopPropagation();
           ev.stopImmediatePropagation();
-          this.onNewPageIndex(Number(pageIndex));
+          this.onNewPageIndex(Number(pageIndex), "preview");
           this.togglePreview(false);
         }
       });
@@ -174,7 +180,7 @@ export class DocsViewer {
     }
     // Promise.all(), but no closure
     for (let i = 0, len = this.pages.length; i < len; i++) {
-      previewSRCs[i] = await previewSRCs[i]
+      previewSRCs[i] = await previewSRCs[i];
     }
 
     this.pages.forEach((page, i) => {
@@ -270,7 +276,7 @@ export class DocsViewer {
         if (this.readonly) {
           return;
         }
-        this.onNewPageIndex(this.pageIndex - 1);
+        this.onNewPageIndex(this.pageIndex - 1, "navigation");
       });
       $pageJumps.appendChild($btnPageBack);
 
@@ -299,7 +305,7 @@ export class DocsViewer {
         if (this.readonly) {
           return;
         }
-        this.onNewPageIndex(this.pageIndex + 1);
+        this.onNewPageIndex(this.pageIndex + 1, "navigation");
       });
       $pageJumps.appendChild($btnPageNext);
 
@@ -321,7 +327,7 @@ export class DocsViewer {
           return;
         }
         if ($pageNumberInput.value) {
-          this.onNewPageIndex(Number($pageNumberInput.value) - 1);
+          this.onNewPageIndex(Number($pageNumberInput.value) - 1, "input");
         }
       });
 

package/src/SlideController/index.ts

@@ -39,9 +39,14 @@ export interface SlideControllerOptions {
   onTransitionEnd: () => void;
   onError: (args: { error: Error; index: number }) => void;
   onRenderError?: (error: Error, pageIndex: number) => void;
+  onNavigate?: (index: number, origin?: string) => void;
   showRenderError?: boolean;
 }
 
+const noop = function noop() {
+  // do nothing
+};
+
 type MagixEventListener = Parameters<
   AppContext<Attributes, MagixEvents>["addMagixEventListener"]
 >[1];
@@ -51,6 +56,7 @@ export class SlideController {
   public readonly slide: Slide;
   public readonly showRenderError: boolean;
   public readonly onRenderError?: (error: Error, pageIndex: number) => void;
+  public readonly onNavigate: (index: number, origin?: string) => void;
 
   private readonly room?: Room;
   private readonly player?: Player;
@@ -74,14 +80,16 @@ export class SlideController {
     onPageChanged,
     onTransitionStart,
     onTransitionEnd,
+    onNavigate,
     onError,
     onRenderError,
     showRenderError,
   }: SlideControllerOptions) {
-    this.onRenderStart = onRenderStart
+    this.onRenderStart = onRenderStart;
     this.onPageChanged = onPageChanged;
     this.onTransitionStart = onTransitionStart;
     this.onTransitionEnd = onTransitionEnd;
+    this.onNavigate = onNavigate || noop;
     this.onError = onError;
     this.onRenderError = onRenderError;
     this.showRenderError = showRenderError ?? true;
@@ -116,9 +124,16 @@ export class SlideController {
     };
   });
 
-  public jumpToPage(page: number) {
+  // origin = why it happens
+  // - undefined: via fastboard dispatchDocsEvent()
+  // - input: via bottom-right page number input box
+  // - preview: via the left preview menu's item
+  // - navigation: via the footer's back/next button
+  // - keydown: via global arrow left/right keydown
+  public jumpToPage(page: number, origin?: string) {
     if (this.ready) {
       page = clamp(page, 1, this.pageCount);
+      this.onNavigate(page, origin);
       this.slide.renderSlide(page);
     }
   }
@@ -244,8 +259,7 @@ export class SlideController {
       setTimeout(this.pollReadyState, 500);
     } else {
       this.pollCount = 0;
-      log("[Slide] renderSlide 1 (retry after timeout)");
-      this.slide.renderSlide(1);
+      log("[Slide] init timeout");
     }
   };
 

package/src/SlideDocsViewer/index.ts

@@ -3,12 +3,16 @@ import type { SlideController, SlideControllerOptions } from "../SlideController
 
 import { SideEffectManager } from "side-effect-manager";
 import { createDocsViewerPages } from "../SlideController";
-import { DocsViewer, DocsViewerPage } from "../DocsViewer";
+import { DocsViewer, type DocsViewerPage } from "../DocsViewer";
 import { logger } from "../utils/logger";
 import { isEditable } from "../utils/helpers";
 
 export const ClickThroughAppliances = new Set(["clicker"]);
 
+const noop = function noop() {
+  // do nothing
+};
+
 export type MountSlideOptions = Omit<SlideControllerOptions, "context" | "onPageChanged"> & {
   onReady: () => void;
 };
@@ -22,6 +26,7 @@ export interface SlideDocsViewerConfig {
   appId: string;
   urlInterrupter?: (url: string) => Promise<string>;
   onPagesReady?: (pages: DocsViewerPage[]) => void;
+  onNavigate?: (index: number, origin?: string) => void;
 }
 
 export interface SavePdfConfig {
@@ -37,6 +42,7 @@ export class SlideDocsViewer {
   protected readonly whiteboardView: SlideDocsViewerConfig["view"];
   protected readonly mountSlideController: SlideDocsViewerConfig["mountSlideController"];
   protected readonly mountWhiteboard: SlideDocsViewerConfig["mountWhiteboard"];
+  protected readonly onNavigate: (index: number, origin?: string) => void;
   private readonly baseScenePath: string;
   private readonly appId: string;
   private isViewMounted = false;
@@ -50,11 +56,13 @@ export class SlideDocsViewer {
     appId,
     urlInterrupter,
     onPagesReady,
+    onNavigate,
   }: SlideDocsViewerConfig) {
     this.box = box;
     this.whiteboardView = view;
     this.mountSlideController = mountSlideController;
     this.mountWhiteboard = mountWhiteboard;
+    this.onNavigate = onNavigate || noop;
     this.baseScenePath = baseScenePath;
     this.appId = appId;
     this.viewer = new DocsViewer({
@@ -101,11 +109,13 @@ export class SlideDocsViewer {
           case "ArrowUp":
           case "ArrowLeft": {
             this.slideController.slide.prevStep();
+            this.onNavigate(this.slideController.page, "keydown");
             break;
           }
           case "ArrowRight":
           case "ArrowDown": {
             this.slideController.slide.nextStep();
+            this.onNavigate(this.slideController.page, "keydown");
             break;
           }
           default: {
@@ -154,6 +164,7 @@ export class SlideDocsViewer {
       onTransitionStart: this.viewer.setPlaying,
       onTransitionEnd: this.viewer.setPaused,
       onReady: this.refreshPages,
+      onNavigate: this.onNavigate,
       onError: this.onError,
     });
 
@@ -271,9 +282,9 @@ export class SlideDocsViewer {
     }
   };
 
-  protected onNewPageIndex = (index: number) => {
+  protected onNewPageIndex = (index: number, origin?: string) => {
     if (this.slideController) {
-      this.slideController.jumpToPage(index + 1);
+      this.slideController.jumpToPage(index + 1, origin);
     }
   };
 

package/src/index.ts

@@ -147,6 +147,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
         context,
         ...options,
         onPageChanged,
+        onNavigate: options.onNavigate,
         onRenderError: appOptions.onRenderError,
         showRenderError: appOptions.showRenderError,
       });
@@ -181,7 +182,10 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
       onPagesReady: ({ length }) => {
         const index = docsViewer?.viewer.pageIndex || 0;
         context.dispatchAppEvent("pageStateChange", { index, length });
-      }
+      },
+      onNavigate: (page, origin) => {
+        log("[Slide] user navigate to", page, origin ? `(${origin})` : "");
+      },
     });
 
     if (import.meta.env.DEV) {

package/src/utils/tracker.ts

@@ -1,6 +1,6 @@
-import type { Displayer } from "white-web-sdk"
-import type { ISlideConfig } from "@netless/slide"
+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;
-}
+  return (displayer as unknown as { tracker: ISlideConfig["whiteTracker"] }).tracker;
+};