@netless/app-slide 0.2.106-beta.5 → 0.2.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.106-beta.5",
+  "version": "0.2.106",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
   ],
   "devDependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/slide": "1.4.62-beta.1",
+    "@netless/slide": "1.4.62",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",

package/src/SlideController/index.ts

@@ -2,13 +2,12 @@
 // 1. map slide events to ui
 // 2. make sure to init correctly
 //    - the one with (context.isAddApp === true) should call renderSlide(1)
-//    - others wait for first sync event and restore from sync state
-//    - if none of above happen, force doing renderSlide(1) after timeout
+//    - others restore from sync state, or render page 1 locally if no state exists
 // 3. send/receive slide sync events
 // 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, Displayer } from "@netless/window-manager";
+import type { AppContext, Player, Room } from "@netless/window-manager";
 import type { ISlideConfig, SyncEvent } from "@netless/slide";
 import type { Attributes, MagixEvents, MagixPayload, SlideState } from "../typings";
 import type { AppOptions } from "..";
@@ -73,16 +72,27 @@ function runNextSlideWebGLTask(): void {
   slideWebGLRunning = true;
   const startedAt = performance.now();
   log("[Slide][player-queue] start", task.label, "pending", slideWebGLTasks.length);
-  void Promise.resolve().then(task.run).then(() => {
-    log("[Slide][player-queue] done", task.label, "ms", Math.round(performance.now() - startedAt));
-    task.resolve();
-  }, error => {
-    log("[Slide][player-queue] failed", task.label, error);
-    task.reject(error);
-  }).finally(() => {
-    slideWebGLRunning = false;
-    runNextSlideWebGLTask();
-  });
+  void Promise.resolve()
+    .then(task.run)
+    .then(
+      () => {
+        log(
+          "[Slide][player-queue] done",
+          task.label,
+          "ms",
+          Math.round(performance.now() - startedAt)
+        );
+        task.resolve();
+      },
+      error => {
+        log("[Slide][player-queue] failed", task.label, error);
+        task.reject(error);
+      }
+    )
+    .finally(() => {
+      slideWebGLRunning = false;
+      runNextSlideWebGLTask();
+    });
 }
 
 export function enqueueSlideWebGLTransition(
@@ -156,7 +166,7 @@ export class SlideControllerBase {
     this.context = context;
     this.room = context.getRoom();
     this.player = this.room ? undefined : (context.getDisplayer() as Player);
-    setRoomLogger((this.room || this.player) as Displayer);
+    setRoomLogger(context);
     // this.slide = this.createSlide(anchor, {
     //   whiteTracker: getRoomTracker(context.getDisplayer()),
     // });
@@ -225,10 +235,14 @@ export class SlideControllerBase {
       // otherwise, maybe this slide is just added, let the adder kick start first render
       log("[Slide] init by renderSlide", 1);
       slide.renderSlide(1);
+    } else if (taskId) {
+      // A previous add may have persisted the App before its first render.
+      // Render locally so a restored or read-only client can recover it.
+      void slide.doRenderSlide(1).catch(error => {
+        logger.error("[Slide] initial local render failed", context.appId, error);
+      });
     }
-    // there's still some risk that the adder is left and no first render
-    // so anyway, we start polling the slide's "ready state"
-    // if in the next 20 seconds the slide is not ready, start render first page
+    // Keep tracking the first render for setup diagnostics.
     this.pollReadyState();
   }
 
@@ -333,9 +347,13 @@ export class SlideControllerBase {
         return;
       }
       if (this._toFreeze === 1) {
-        this.freeze();
+        void this.freeze().catch(error =>
+          logger.error("[Slide] deferred freeze failed", this.context.appId, error)
+        );
       } else if (this._toFreeze === -1) {
-        this.unfreeze();
+        void this.unfreeze().catch(error =>
+          logger.error("[Slide] deferred unfreeze failed", this.context.appId, error)
+        );
       }
     } else if (this.pollCount < MaxPollCount) {
       this.pollCount++;
@@ -360,7 +378,7 @@ export class SlideControllerBase {
   }
 
   protected createSlide(anchor: HTMLDivElement, defaults: Partial<ISlideConfig> = {}) {
-    const options = this.context.getAppOptions() || {};
+    const options = (this.context.getAppOptions() || {}) as AppOptions;
     const attribute = this.context.storage.state;
     const slide = new Slide({
       anchor,
@@ -387,7 +405,29 @@ export class SlideControllerBase {
       resourceTimeout: options.resourceTimeout,
       rtcAudio: options.rtcAudio,
       useLocalCache: options.useLocalCache,
-      logger: options.logger,
+      logger: {
+        ...options.logger,
+        error: (message, ...details) => {
+          logger.error(message, ...details);
+          if (options.logger !== logger.roomLogger) {
+            try {
+              options.logger?.error?.(message, ...details);
+            } catch {
+              // Keep the App error even if a custom logger fails.
+            }
+          }
+        },
+        warn: (message, ...details) => {
+          logger.warn(message, ...details);
+          if (options.logger !== logger.roomLogger) {
+            try {
+              options.logger?.warn?.(message, ...details);
+            } catch {
+              // Keep the App warning even if a custom logger fails.
+            }
+          }
+        },
+      },
       whiteTracker: defaults.whiteTracker,
       timestamp: this.timestamp,
       customLinks: attribute.customLinks,
@@ -416,19 +456,29 @@ export class SlideControllerBase {
     if (!this.destroyed) {
       log("[Slide] destroy slide (once)");
       this.destroyed = true;
-      this.destroyPromise = enqueueSlideWebGLTransition(() => new Promise<void>((resolve, reject) => {
-        try {
-          (this.slide.destroy as (
-            onPlayerDestroyed?: () => void,
-            onError?: (error: unknown) => void
-          ) => void).call(this.slide, () => {
-            log("[Slide][player] destroy callback", this.context.appId);
-            resolve();
-          }, reject);
-        } catch (error) {
-          reject(error);
-        }
-      }), true, `destroy:${this.context.appId}`);
+      this.destroyPromise = enqueueSlideWebGLTransition(
+        () =>
+          new Promise<void>((resolve, reject) => {
+            try {
+              (
+                this.slide.destroy as (
+                  onPlayerDestroyed?: () => void,
+                  onError?: (error: unknown) => void
+                ) => void
+              ).call(
+                this.slide,
+                () => {
+                  resolve();
+                },
+                reject
+              );
+            } catch (error) {
+              reject(error);
+            }
+          }),
+        true,
+        `destroy:${this.context.appId}`
+      );
       this.resolveDestroyedSignal();
     }
     return this.destroyPromise ?? Promise.resolve();
@@ -462,7 +512,7 @@ export class SlideControllerBase {
       if (active && this.shouldBeActive()) await this.unfreeze();
       else await this.freeze();
     },
-    error => logger.warn("[Slide] resource transition failed", this.context.appId, error)
+    error => logger.error("[Slide] resource transition failed", this.context.appId, error)
   );
 
   private shouldBeActive = (): boolean => {
@@ -504,20 +554,29 @@ export class SlideControllerBase {
       if (this.ready) {
         log("[Slide] freeze", this.context.appId);
         if (this.invisibleBehavior === "frozen") {
-          await enqueueSlideWebGLTransition(() => {
-            if (this.destroyed) return Promise.resolve();
-            const destroyed = new Promise<void>((resolve, reject) => {
-              const result = (this.slide.frozen as (
-                onPlayerDestroyed?: () => void,
-                onError?: (error: unknown) => void
-              ) => void | Promise<void>).call(this.slide, () => {
-                log("[Slide][player] frozen callback", this.context.appId);
-                resolve();
-              }, reject);
-              if (result) void result.then(resolve, reject);
-            });
-            return Promise.race([destroyed, this.destroyedSignal]);
-          }, false, `freeze:${this.context.appId}`);
+          await enqueueSlideWebGLTransition(
+            () => {
+              if (this.destroyed) return Promise.resolve();
+              const destroyed = new Promise<void>((resolve, reject) => {
+                const result = (
+                  this.slide.frozen as (
+                    onPlayerDestroyed?: () => void,
+                    onError?: (error: unknown) => void
+                  ) => void | Promise<void>
+                ).call(
+                  this.slide,
+                  () => {
+                    resolve();
+                  },
+                  reject
+                );
+                if (result) void result.then(resolve, reject);
+              });
+              return Promise.race([destroyed, this.destroyedSignal]);
+            },
+            false,
+            `freeze:${this.context.appId}`
+          );
         } else {
           this.slide.pause();
         }
@@ -543,33 +602,46 @@ export class SlideControllerBase {
       if (this.ready) {
         log("[Slide] unfreeze", this.context.appId);
         if (this.invisibleBehavior === "frozen") {
-          await enqueueSlideWebGLTransition(() => {
-            if (this.destroyed) return Promise.resolve();
-            const created = new Promise<void>((resolve, reject) => {
-              const result = (this.slide.release as (
-                onRestored?: () => void,
-                onPlayerCreated?: () => void,
-                onError?: (error: unknown) => void
-              ) => void | Promise<void>).call(this.slide, () => {
-                log("[Slide][player] restored callback", this.context.appId);
-                if (this.isLazySetupMode() && !this.shouldBeActive()) return;
-                this.slide.notifyFrameResize();
-                const state = this.context.storage.state.state;
-                if (state) {
-                  log("[Slide] sync storage", JSON.stringify(state));
-                  void this.slide.setSlideState(state).catch(error => {
-                    this.resourceStateUnknown = true;
-                    logger.warn("[Slide] storage sync after release failed", this.context.appId, error);
-                  });
-                }
-              }, () => {
-                log("[Slide][player] created callback", this.context.appId);
-                resolve();
-              }, reject);
-              if (result) void result.then(resolve, reject);
-            });
-            return Promise.race([created, this.destroyedSignal]);
-          }, false, `release:${this.context.appId}`);
+          await enqueueSlideWebGLTransition(
+            () => {
+              if (this.destroyed) return Promise.resolve();
+              const created = new Promise<void>((resolve, reject) => {
+                const result = (
+                  this.slide.release as (
+                    onRestored?: () => void,
+                    onPlayerCreated?: () => void,
+                    onError?: (error: unknown) => void
+                  ) => void | Promise<void>
+                ).call(
+                  this.slide,
+                  () => {
+                    if (this.isLazySetupMode() && !this.shouldBeActive()) return;
+                    this.slide.notifyFrameResize();
+                    const state = this.context.storage.state.state;
+                    if (state) {
+                      log("[Slide] sync storage", JSON.stringify(state));
+                      void this.slide.setSlideState(state).catch(error => {
+                        this.resourceStateUnknown = true;
+                        logger.error(
+                          "[Slide] storage sync after release failed",
+                          this.context.appId,
+                          error
+                        );
+                      });
+                    }
+                  },
+                  () => {
+                    resolve();
+                  },
+                  reject
+                );
+                if (result) void result.then(resolve, reject);
+              });
+              return Promise.race([created, this.destroyedSignal]);
+            },
+            false,
+            `release:${this.context.appId}`
+          );
         } else {
           this.slide.resume();
           this.slide.notifyFrameResize();
@@ -614,7 +686,9 @@ export class SlideControllerBase {
     }
     if (state === "minimized") {
       log("[Slide] freeze because app state is minimized");
-      this.freeze();
+      void this.freeze().catch(error =>
+        logger.error("[Slide] minimized freeze failed", this.context.appId, error)
+      );
     }
   };
 
@@ -629,7 +703,9 @@ export class SlideControllerBase {
     }
     if (appId === this.context.appId && status === "minimized") {
       log("[Slide] freeze because app status is minimized");
-      this.freeze();
+      void this.freeze().catch(error =>
+        logger.error("[Slide] minimized freeze failed", this.context.appId, error)
+      );
     }
   };
 
@@ -658,26 +734,30 @@ export class SlideControllerBase {
   };
 
   protected onVisibilityChange = async () => {
-    this.visible = document.visibilityState === "visible";
-    if (this.isLazySetupMode() || this.managedActivity) {
-      await this.reconcileActivity().catch(() => undefined);
-      return;
-    }
-    const appStatus = this.getAppStatus();
-    if (!this.visible) {
-      this.savedIsFrozen = this.isFrozen;
-      log("[Slide] freeze because tab becomes invisible");
-      if (!this.isFrozen) await this.freeze();
-      return;
-    }
+    try {
+      this.visible = document.visibilityState === "visible";
+      if (this.isLazySetupMode() || this.managedActivity) {
+        await this.reconcileActivity().catch(() => undefined);
+        return;
+      }
+      const appStatus = this.getAppStatus();
+      if (!this.visible) {
+        this.savedIsFrozen = this.isFrozen;
+        log("[Slide] freeze because tab becomes invisible");
+        if (!this.isFrozen) await this.freeze();
+        return;
+      }
 
-    if (appStatus === "minimized") {
-      log("[Slide] do nothing because app state is minimized");
-      return;
-    }
-    if (!this.savedIsFrozen) {
-      log("[Slide] unfreeze because tab becomes visible", { savedIsFrozen: this.savedIsFrozen });
-      await this.unfreeze();
+      if (appStatus === "minimized") {
+        log("[Slide] do nothing because app state is minimized");
+        return;
+      }
+      if (!this.savedIsFrozen) {
+        log("[Slide] unfreeze because tab becomes visible", { savedIsFrozen: this.savedIsFrozen });
+        await this.unfreeze();
+      }
+    } catch (error) {
+      logger.error("[Slide] visibility transition failed", this.context.appId, error);
     }
   };
 }

package/src/SlideDocsViewer/index.ts

@@ -431,12 +431,12 @@ export class SlideDocsViewer {
     if (this.slideController?.onRenderError) {
       this.slideController.onRenderError(error, index);
     }
-    logger.warn("[Slide] render error", error);
+    logger.error("[Slide] render error", this.appId, error);
   };
 
   protected onRenderStart = () => {
-    logger.log("[Slide][notes] hide", this.appId, "scene", this.whiteboardView.focusScenePath);
     this.$whiteboardView.classList.add(this.wrapClassName("wb-view-hidden"));
+    logger.log("[Slide][notes] hide", this.appId, "scene", this.whiteboardView.focusScenePath);
     this.viewer.setPlaying();
   };
 
@@ -448,15 +448,14 @@ export class SlideDocsViewer {
 
   public onPageChanged = () => {
     clearTimeout(this._onPageChangedTimer);
-    logger.log("[Slide][notes] show scheduled", this.appId, "scene", this.whiteboardView.focusScenePath);
     this._onPageChangedTimer = setTimeout(this._onPageChanged, 200) as unknown as number;
   };
 
   protected _onPageChangedTimer = 0;
   protected _onPageChanged = () => {
-    logger.log("[Slide][notes] show", this.appId, "scene", this.whiteboardView.focusScenePath);
     this.$overlay.style.opacity = "";
     this.$whiteboardView.classList.remove(this.wrapClassName("wb-view-hidden"));
+    logger.log("[Slide][notes] show", this.appId, "scene", this.whiteboardView.focusScenePath);
   };
 
   protected refreshPages = () => {
@@ -484,13 +483,19 @@ export class SlideDocsViewer {
         this.offBoxSizeChange = undefined;
         this.contentResizeObserver?.disconnect();
         this.contentResizeObserver = undefined;
-        if (this.slideController) {
-          const controller = this.slideController;
-          this.slideController = null;
-          await controller.destroy();
+        try {
+          if (this.slideController) {
+            const controller = this.slideController;
+            this.slideController = null;
+            await controller.destroy();
+          }
+        } finally {
+          try {
+            this.viewer.unmount();
+          } finally {
+            this.resizableContainer.destroy(this.box);
+          }
         }
-        this.viewer.unmount();
-        this.resizableContainer.destroy(this.box);
         return this;
       });
     }
@@ -505,8 +510,11 @@ export class SlideDocsViewer {
     if (!this.destroyPromise) {
       this.destroyPromise = Promise.resolve().then(async () => {
         this.sideEffect.flushAll();
-        await this.unmount();
-        this.viewer.destroy();
+        try {
+          await this.unmount();
+        } finally {
+          this.viewer.destroy();
+        }
       });
     }
     return this.destroyPromise;

package/src/index.ts

@@ -17,7 +17,7 @@ import {
 } from "./SlideController";
 import { SlideDocsViewer } from "./SlideDocsViewer";
 import { apps, FreezerLength, addHooks, useFreezer } from "./utils/freezer";
-import { log, logger } from "./utils/logger";
+import { log, logger, setRoomLogger } from "./utils/logger";
 import styles from "./style.scss?inline";
 
 export type { PreviewParams } from "./SlidePreviewer";
@@ -130,6 +130,7 @@ export interface AppResult {
 const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
   kind: "Slide",
   setup(context) {
+    setRoomLogger(context);
     console.log("[Slide] setup @ " + version);
 
     if (context.getIsWritable()) {
@@ -185,7 +186,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
     };
 
     const mountSlideController = (options: MountSlideOptions): SlideController => {
-      const appOptions = context.getAppOptions() || {};
+      const appOptions = (context.getAppOptions() || {}) as AppOptions;
 
       const slideController = new SlideController({
         context,
@@ -211,22 +212,25 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).slideController = slideController;
       }
-      slideController.readyPromise.then(options.onReady).then(() => {
-        // Teardown may have destroyed the box while this deferred callback
-        // was pending; syncing scenes against a destroyed app throws.
-        if (disposed) return;
-        const room = context.getRoom();
-        let synced = false;
-        if (room && context.getIsWritable()) {
-          syncSceneWithSlide(room, context, slideController.slide, baseScenePath);
-          synced = true;
-        }
-        const page = slideController.slide.slideState.currentSlideIndex;
-        log("[Slide] page to", page, synced ? "(synced)" : "", "(on ready)");
-        slideController.slide.on("renderEnd", options.onRenderEnd);
-      }).catch(error => {
-        if (!disposed) logger.warn("[Slide] ready callback failed", context.appId, error);
-      });
+      slideController.readyPromise
+        .then(options.onReady)
+        .then(() => {
+          // Teardown may have destroyed the box while this deferred callback
+          // was pending; syncing scenes against a destroyed app throws.
+          if (disposed) return;
+          const room = context.getRoom();
+          let synced = false;
+          if (room && context.getIsWritable()) {
+            syncSceneWithSlide(room, context, slideController.slide, baseScenePath);
+            synced = true;
+          }
+          const page = slideController.slide.slideState.currentSlideIndex;
+          log("[Slide] page to", page, synced ? "(synced)" : "", "(on ready)");
+          slideController.slide.on("renderEnd", options.onRenderEnd);
+        })
+        .catch(error => {
+          if (!disposed) logger.warn("[Slide] ready callback failed", context.appId, error);
+        });
       return slideController;
     };
 
@@ -330,9 +334,13 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
     };
     offDestroy = context.emitter.on("destroy", teardown);
 
-    const mounting = enqueueSlideWebGLTransition(() => {
-      if (!disposed) docsViewer?.mount();
-    }, false, `setup:${context.appId}`);
+    const mounting = enqueueSlideWebGLTransition(
+      () => {
+        if (!disposed) docsViewer?.mount();
+      },
+      false,
+      `setup:${context.appId}`
+    );
 
     // Resolve once the SlideController finished its first render (renderEnd).
     // New lazy hosts retain the real completion after the warning threshold.
@@ -505,22 +513,25 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
     };
 
     const setupReadyTimeout = appOptions?.setupReadyTimeout ?? DEFAULT_SLIDE_SETUP_READY_TIMEOUT;
-    return mounting.then(() => {
-      if (disposed) throw new Error("[Slide] disposed before first render");
-      return waitForFirstRender(setupReadyTimeout);
-    }).then(async () => {
-      if (disposed) throw new Error("[Slide] disposed before first render");
-      if (firstRenderFailed) {
-        throw new Error("[Slide] first render failed before ready");
-      }
-      if (!disposed && !slideControllerRef?.ready) {
-        log("[Slide] setup ready wait timed out, slide keeps loading in background");
-      }
-      return appResult;
-    }).catch(async error => {
-      if (!disposed) await teardown();
-      throw error;
-    }) as unknown as AppResult;
+    return mounting
+      .then(() => {
+        if (disposed) throw new Error("[Slide] disposed before first render");
+        return waitForFirstRender(setupReadyTimeout);
+      })
+      .then(async () => {
+        if (disposed) throw new Error("[Slide] disposed before first render");
+        if (firstRenderFailed) {
+          throw new Error("[Slide] first render failed before ready");
+        }
+        if (!disposed && !slideControllerRef?.ready) {
+          log("[Slide] setup ready wait timed out, slide keeps loading in background");
+        }
+        return appResult;
+      })
+      .catch(async error => {
+        if (!disposed) await teardown();
+        throw error;
+      }) as unknown as AppResult;
   },
 };