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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.106-beta.3",
+  "version": "0.2.106-beta.5",
   "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.61",
+    "@netless/slide": "1.4.62-beta.1",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",

package/src/SlideController/index.ts

@@ -56,6 +56,48 @@ const noop = function noop() {
   // do nothing
 };
 
+type SlideWebGLTask = {
+  label: string;
+  run: () => void | Promise<void>;
+  resolve: () => void;
+  reject: (error: unknown) => void;
+};
+
+const slideWebGLTasks: SlideWebGLTask[] = [];
+let slideWebGLRunning = false;
+
+function runNextSlideWebGLTask(): void {
+  if (slideWebGLRunning) return;
+  const task = slideWebGLTasks.shift();
+  if (!task) return;
+  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();
+  });
+}
+
+export function enqueueSlideWebGLTransition(
+  run: () => void | Promise<void>,
+  priority = false,
+  label = "unspecified"
+): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    const task = { label, run, resolve, reject };
+    if (priority) slideWebGLTasks.unshift(task);
+    else slideWebGLTasks.push(task);
+    runNextSlideWebGLTask();
+  });
+}
+
 type MagixEventListener = Parameters<
   AppContext<Attributes, MagixEvents>["addMagixEventListener"]
 >[1];
@@ -364,13 +406,30 @@ export class SlideControllerBase {
 
   protected destroyed = false;
   protected destroyPromise?: Promise<void>;
+  private resolveDestroyedSignal!: () => void;
+  private readonly destroyedSignal = new Promise<void>(resolve => {
+    this.resolveDestroyedSignal = resolve;
+  });
 
   public destroy(): Promise<void> {
     this.sideEffect.flushAll();
     if (!this.destroyed) {
       log("[Slide] destroy slide (once)");
       this.destroyed = true;
-      this.destroyPromise = Promise.resolve(this.slide.destroy());
+      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.resolveDestroyedSignal();
     }
     return this.destroyPromise ?? Promise.resolve();
   }
@@ -445,7 +504,20 @@ export class SlideControllerBase {
       if (this.ready) {
         log("[Slide] freeze", this.context.appId);
         if (this.invisibleBehavior === "frozen") {
-          await this.slide.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}`);
         } else {
           this.slide.pause();
         }
@@ -469,25 +541,39 @@ export class SlideControllerBase {
     this.isFrozen = false;
     try {
       if (this.ready) {
-        let isNeedSyncState = false;
         log("[Slide] unfreeze", this.context.appId);
         if (this.invisibleBehavior === "frozen") {
-          await this.slide.release(() => {
-            // release 会重建 player，内部 observer 已关闭，需要按当前 frame 尺寸重绘
-            if (!this.isLazySetupMode() || this.shouldBeActive()) this.slide.notifyFrameResize();
-          });
-          isNeedSyncState = true;
+          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}`);
         } else {
           this.slide.resume();
           this.slide.notifyFrameResize();
         }
-        if (isNeedSyncState && (!this.isLazySetupMode() || this.shouldBeActive())) {
-          const state = this.context.storage.state.state;
-          if (state) {
-            log("[Slide] sync storage", JSON.stringify(state));
-            await this.slide.setSlideState(state);
-          }
-        }
       } else {
         this._toFreeze = -1;
       }

package/src/SlideDocsViewer/index.ts

@@ -435,6 +435,7 @@ export class SlideDocsViewer {
   };
 
   protected onRenderStart = () => {
+    logger.log("[Slide][notes] hide", this.appId, "scene", this.whiteboardView.focusScenePath);
     this.$whiteboardView.classList.add(this.wrapClassName("wb-view-hidden"));
     this.viewer.setPlaying();
   };
@@ -447,11 +448,13 @@ 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"));
   };

package/src/index.ts

@@ -13,6 +13,7 @@ import {
   syncSceneWithSlide,
   SlideController,
   SlideControllerBase,
+  enqueueSlideWebGLTransition,
 } from "./SlideController";
 import { SlideDocsViewer } from "./SlideDocsViewer";
 import { apps, FreezerLength, addHooks, useFreezer } from "./utils/freezer";
@@ -126,9 +127,7 @@ export interface AppResult {
   playPptMedia: () => void;
 }
 
-const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
-  teardown(context: import("@netless/window-manager").AppContext): Promise<void>;
-} = {
+const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
   kind: "Slide",
   setup(context) {
     console.log("[Slide] setup @ " + version);
@@ -225,6 +224,8 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
         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;
     };
@@ -329,10 +330,9 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
     };
     offDestroy = context.emitter.on("destroy", teardown);
 
-    docsViewer.mount();
-
-    (SlideApp as any).__teardownByContext ||= new WeakMap<object, () => Promise<void>>();
-    (SlideApp as any).__teardownByContext.set(context, teardown);
+    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.
@@ -357,7 +357,10 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
         // the poll only catches teardown and pre-ready render failures.
         slideControllerRef?.readyPromise.then(
           () => settle(!firstRenderFailed),
-          () => settle(false)
+          () => {
+            firstRenderFailed = true;
+            settle(false);
+          }
         );
         const pollTimer = window.setInterval(() => {
           if (disposed || firstRenderFailed) settle(false);
@@ -502,7 +505,10 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
     };
 
     const setupReadyTimeout = appOptions?.setupReadyTimeout ?? DEFAULT_SLIDE_SETUP_READY_TIMEOUT;
-    return waitForFirstRender(setupReadyTimeout).then(() => {
+    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");
@@ -511,12 +517,11 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
         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;
   },
-  async teardown(context) {
-    await (SlideApp as any).__teardownByContext?.get(context)?.();
-    (SlideApp as any).__teardownByContext?.delete(context);
-  },
 };
 
 export default SlideApp;