@netless/app-slide 0.2.44 → 0.2.45-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.44",
+  "version": "0.2.45-alpha.2",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",

package/src/SlideController/index.ts

@@ -31,6 +31,7 @@ export const EmptyAttributes: Attributes = {
 export interface SlideControllerOptions {
   context: AppContext<Attributes, MagixEvents, AppOptions>;
   anchor: HTMLDivElement;
+  onRenderStart: () => void;
   onRenderEnd: () => void;
   onPageChanged: (page: number) => void;
   onTransitionStart: () => void;
@@ -54,6 +55,7 @@ export class SlideController {
   private readonly player?: Player;
   private readonly sideEffect = new SideEffectManager();
 
+  private readonly onRenderStart: SlideControllerOptions["onRenderStart"];
   private readonly onPageChanged: SlideControllerOptions["onPageChanged"];
   private readonly onTransitionStart: SlideControllerOptions["onTransitionStart"];
   private readonly onTransitionEnd: SlideControllerOptions["onTransitionEnd"];
@@ -67,6 +69,7 @@ export class SlideController {
   public constructor({
     context,
     anchor,
+    onRenderStart,
     onPageChanged,
     onTransitionStart,
     onTransitionEnd,
@@ -74,6 +77,7 @@ export class SlideController {
     onRenderError,
     showRenderError,
   }: SlideControllerOptions) {
+    this.onRenderStart = onRenderStart
     this.onPageChanged = onPageChanged;
     this.onTransitionStart = onTransitionStart;
     this.onTransitionEnd = onTransitionEnd;
@@ -165,8 +169,8 @@ export class SlideController {
       })
     );
 
+    slide.on(SLIDE_EVENTS.renderStart, this.onRenderStart);
     slide.on(SLIDE_EVENTS.slideChange, this.onPageChanged);
-    slide.on(SLIDE_EVENTS.renderStart, this.onTransitionStart);
     slide.on(SLIDE_EVENTS.renderEnd, this.onTransitionEnd);
     slide.on(SLIDE_EVENTS.mainSeqStepStart, this.onTransitionStart);
     slide.on(SLIDE_EVENTS.mainSeqStepEnd, this.onTransitionEnd);

package/src/SlideDocsViewer/index.ts

@@ -146,6 +146,7 @@ export class SlideDocsViewer {
 
     this.slideController = this.mountSlideController({
       anchor: this.$slide,
+      onRenderStart: this.onRenderStart,
       onRenderEnd: this.onRenderEnd,
       onTransitionStart: this.viewer.setPlaying,
       onTransitionEnd: this.viewer.setPaused,
@@ -174,8 +175,19 @@ export class SlideDocsViewer {
     logger.warn("[Slide] render error", error);
   };
 
+  protected onRenderStart = () => {
+    this.$whiteboardView.classList.add(this.wrapClassName("wb-view-hidden"));
+  };
+
   protected onRenderEnd = () => {
+    // 1. There's no render end event on initial render.
+    // 2. The end event is fired before the page changed event.
+    // So in this callback we will do nothing and we do all "end" works in onPageChanged.
+  };
+
+  public onPageChanged = () => {
     this.$overlay.style.opacity = "";
+    this.$whiteboardView.classList.remove(this.wrapClassName("wb-view-hidden"));
   };
 
   protected refreshPages = () => {

package/src/SlideDocsViewer/style.scss

@@ -8,6 +8,11 @@ $namespace: "netless-app-slide";
   height: 100%;
   z-index: 100;
   overflow: hidden;
+  transition: opacity 0.1s;
+}
+
+.#{$namespace}-wb-view-hidden {
+  opacity: 0;
 }
 
 .#{$namespace}-overlay {

package/src/index.ts

@@ -131,6 +131,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
         }
         log("[Slide] page to", page, synced ? "(synced)" : "");
         docsViewer.viewer.setPageIndex(page - 1);
+        docsViewer.onPageChanged();
       }
     };