refactor(slide): add log about user navigation

netless-io · Jan 30, 2024 · 4671bd7 · 4671bd7
1 parent cbdb144
commit 4671bd7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/packages/app-slide/src/DocsViewer/index.ts b/packages/app-slide/src/DocsViewer/index.ts
@@ -17,7 +17,7 @@ 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;
@@ -41,7 +41,7 @@ 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 urlInterrupter: (url: string) => Promise<string> | string;
@@ -153,7 +153,7 @@ export class DocsViewer {
           ev.preventDefault();
           ev.stopPropagation();
           ev.stopImmediatePropagation();
-          this.onNewPageIndex(Number(pageIndex));
+          this.onNewPageIndex(Number(pageIndex), "preview");
           this.togglePreview(false);
         }
       });
@@ -276,7 +276,7 @@ export class DocsViewer {
         if (this.readonly) {
           return;
         }
-        this.onNewPageIndex(this.pageIndex - 1);
+        this.onNewPageIndex(this.pageIndex - 1, "navigation");
       });
       $pageJumps.appendChild($btnPageBack);
 
@@ -305,7 +305,7 @@ export class DocsViewer {
         if (this.readonly) {
           return;
         }
-        this.onNewPageIndex(this.pageIndex + 1);
+        this.onNewPageIndex(this.pageIndex + 1, "navigation");
       });
       $pageJumps.appendChild($btnPageNext);
 
@@ -327,7 +327,7 @@ export class DocsViewer {
           return;
         }
         if ($pageNumberInput.value) {
-          this.onNewPageIndex(Number($pageNumberInput.value) - 1);
+          this.onNewPageIndex(Number($pageNumberInput.value) - 1, "input");
         }
       });
 

diff --git a/packages/app-slide/src/SlideController/index.ts b/packages/app-slide/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,6 +80,7 @@ export class SlideController {
     onPageChanged,
     onTransitionStart,
     onTransitionEnd,
+    onNavigate,
     onError,
     onRenderError,
     showRenderError,
@@ -82,6 +89,7 @@ export class SlideController {
     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);
     }
   }

diff --git a/packages/app-slide/src/SlideDocsViewer/index.ts b/packages/app-slide/src/SlideDocsViewer/index.ts
@@ -9,6 +9,10 @@ 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);
     }
   };
 

diff --git a/packages/app-slide/src/index.ts b/packages/app-slide/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,
       });
@@ -182,6 +183,9 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
         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) {