@netless/app-presentation 0.1.13-beta.4 → 0.1.14

package/src/app-presentation.ts

@@ -7,10 +7,10 @@ import type {
   ReadonlyTeleBox,
   Room,
   SceneDefinition,
-  Size,
   View,
   WindowManager,
 } from "@netless/window-manager";
+import type { Size } from "white-web-sdk";
 
 import { disposableStore } from "@wopjs/disposable";
 import { listen } from "@wopjs/dom";
@@ -263,12 +263,11 @@ export const setupBlurThumbnailDegradation = (config: {
   const { context, view, pages, pageIndex$, app, dispose } = config;
   const box = context.getBox();
   const boxBlurClass = box.wrapClassName("blur");
-  // Two separate flags: `blurEpisode` covers the whole blurred period (pages
-  // without a thumbnail don't end it, so a later page degrades again), while
-  // `reDegradeEnabled` only turns off when the degraded thumbnail itself
-  // fails, so we don't fight the SDK's background onError retry.
+  // A failed thumbnail is pinned only for its page during this blur episode.
   let blurEpisode = false;
-  let reDegradeEnabled = false;
+  let failedThumbnailPageIndex: number | null = null;
+  const canReDegrade = (): boolean =>
+    blurEpisode && failedThumbnailPageIndex !== pageIndex$.value;
   // Duplicate focus(false) deliveries are unavoidable (multiple sources in
   // the host). Preview-resource clearing is the only non-idempotent DOM op
   // in the blur path, so gate it on this flag until focus restores it.
@@ -340,15 +339,18 @@ export const setupBlurThumbnailDegradation = (config: {
       app.suspendPreviewResources();
     }
     const page = pages[pageIndex$.value];
-    if (!page || !hasUsableThumbnail(page) || reDegradeEnabled) {
+    if (!page || !hasUsableThumbnail(page) || canReDegrade()) {
       degrade();
     }
   };
 
   const restoreFocusedResources = (): void => {
+    // TeleBox can restore before the host delivers its activity/focus event.
+    // Keep the applied state aligned so the next blur starts a new episode.
+    appliedFocusState = true;
     if (!blurEpisode) return;
     blurEpisode = false;
-    reDegradeEnabled = false;
+    failedThumbnailPageIndex = null;
     previewSuspended = false;
     restore();
     app.preload.resume(pageIndex$.value);
@@ -374,18 +376,23 @@ export const setupBlurThumbnailDegradation = (config: {
   };
 
   const onImgLoad = (ev: Event): void => {
-    if (!blurEpisode || !reDegradeEnabled) return;
+    if (!canReDegrade()) return;
     if (!ownsTarget(ev.target)) return;
     degrade();
   };
 
-  // The degraded thumbnail failed to load: stop re-degrading for this blur
-  // episode so the SDK's onError retry can settle on the full image. Focus
-  // still force-restores afterwards.
+  // Stop re-degrading this page when its thumbnail fails, so the SDK's
+  // onError retry can settle on the full image. Other pages remain eligible.
   const onImgError = (ev: Event): void => {
-    if (!blurEpisode || !reDegradeEnabled) return;
+    if (!canReDegrade()) return;
     if (!ownsTarget(ev.target)) return;
-    reDegradeEnabled = false;
+    const thumbnailURL = pages[pageIndex$.value]?.thumbnail;
+    if (
+      thumbnailURL &&
+      resolveImageUrl(ev.target.src) === resolveImageUrl(thumbnailURL)
+    ) {
+      failedThumbnailPageIndex = pageIndex$.value;
+    }
   };
 
   const applyActivity = (): void => {
@@ -397,7 +404,7 @@ export const setupBlurThumbnailDegradation = (config: {
       restoreFocusedResources();
     } else {
       blurEpisode = true;
-      reDegradeEnabled = true;
+      failedThumbnailPageIndex = null;
       degrade();
       app.preload.pause();
       suspendCachedResources();
@@ -447,27 +454,16 @@ export const setupBlurThumbnailDegradation = (config: {
   });
 };
 
-const createLogger = (room: Room | undefined): Logger => {
-  if (room && (room as any).logger) {
-    return (...args) => (room as any).logger.info(...args);
-  } else {
-    return (...args) => console.log(...args);
-  }
+const getLogger = (context: AppContext) =>
+  (context.getWindowManager() as any)?.Logger ?? (context.getRoom() as any)?.logger;
+
+const createLogger = (context: AppContext): Logger => {
+  return (...args) => getLogger(context)?.info?.(...args);
 };
 
-const createDiagnosticLogger = (
+export const createDiagnosticLogger = (
   context: AppContext,
 ): PresentationDiagnosticLogger => {
-  const createAppLogger = (context as any).createLogger;
-  if (typeof createAppLogger === "function") {
-    return createAppLogger.call(context, "camera", {
-      debounceTime: 300,
-      maxWaitTime: 2000,
-    });
-  }
-
-  // Compatibility fallback for WindowManager versions without AppContext.createLogger().
-  const roomLogger = (context.getRoom() as any)?.logger;
   const prefix = `[Presentation][${context.appId}][camera]`;
   const emit = (
     level: "info" | "warn" | "error",
@@ -475,6 +471,7 @@ const createDiagnosticLogger = (
     ...data: unknown[]
   ) => {
     try {
+      const roomLogger = getLogger(context);
       const printer = roomLogger?.[level];
       if (typeof printer === "function")
         printer.call(roomLogger, `${prefix}[${event}]`, ...data);
@@ -554,10 +551,8 @@ export const NetlessAppPresentation: NetlessApp<
 
     const options = context.getAppOptions() || {};
     const room = context.getRoom();
-    const log = options.log || createLogger(room);
-    const roomLogger = (room as any)?.logger;
-    const warn: Logger = (...data) =>
-      roomLogger?.warn ? roomLogger.warn(...data) : log(...data);
+    const log = options.log || createLogger(context);
+    const warn: Logger = (...data) => getLogger(context)?.warn?.(...data);
     const configuredOriginSize = context.storage.state.originSize;
     const originSize = isValidSize(configuredOriginSize)
       ? {
@@ -927,6 +922,7 @@ export const NetlessAppPresentation: NetlessApp<
         view,
         options.thumbnail,
         options.useClipView,
+        error => getLogger(context)?.error?.("[Presentation] thumbnail URL parsing failed", context.appId, error),
       ),
     );
     app.contentDOM.dataset.appPresentationVersion = __VERSION__;
@@ -1522,8 +1518,8 @@ export const NetlessAppPresentation: NetlessApp<
     // `SetupResult | Promise<SetupResult>` declaration is the minimum version.
     const setupReadyTimeout = options.setupReadyTimeout ?? DEFAULT_SETUP_READY_TIMEOUT;
     return prepareScenesPromise.then(async () => {
-      // Keep the serial setup queue honest: resolve only once the current
-      // page image is actually visible (or the bounded wait gives up).
+      // Wait for the current page image or its first failure. The SDK owns
+      // background-image retries, so a failed request must not fail setup.
       const result = await waitForCurrentPageImage(
         () => findBackgroundImage(view), setupReadyTimeout, () => disposed,
         {
@@ -1532,10 +1528,7 @@ export const NetlessAppPresentation: NetlessApp<
         },
       );
       if (disposed) throw new Error("[Presentation] disposed before setup ready");
-      if (result === "error" && (context as any).waitForActualSetupReady) {
-        throw new Error("[Presentation] setup page image failed to load");
-      }
-      if (result === "error" && !disposed) {
+      if (result === "error") {
         warn("[Presentation] setup page image failed to load; continuing setup");
       }
       return controller;
@@ -1597,6 +1590,7 @@ function createPresentation(
   view: View,
   thumbnail?: (src: string) => string,
   useClipView?: boolean,
+  onThumbnailError?: (error: unknown) => void,
 ): AppPresentation {
   box.mountStyles(styles);
 
@@ -1605,6 +1599,7 @@ function createPresentation(
     readonly: box.readonly,
     jumpPage,
     thumbnail,
+    onThumbnailError,
   });
   app.box = box;
   box.mountContent(app.contentDOM);

package/src/camera-reference.ts

@@ -1,4 +1,4 @@
-import type { Camera, Rectangle, Size } from "@netless/window-manager"
+import type { Camera, Rectangle, Size } from "white-web-sdk"
 
 export function isValidSize(size: Size | null | undefined): size is Size {
   return Boolean(

package/src/presentation.ts

@@ -18,6 +18,7 @@ export interface PresentationConfig {
   readonly pages: PresentationPage[]
   readonly readonly?: boolean
   readonly thumbnail?: (src: string) => string
+  readonly onThumbnailError?: (error: unknown) => void
 }
 
 /**
@@ -59,6 +60,7 @@ export class Presentation implements IDisposable<void> {
   readonly dispose = disposableStore()
   readonly pages: PresentationPage[]
   readonly preload: Preload
+  readonly onThumbnailError?: (error: unknown) => void
 
   dom: Element | DocumentFragment
   contentDOM: HTMLDivElement
@@ -81,6 +83,7 @@ export class Presentation implements IDisposable<void> {
   constructor(config: PresentationConfig) {
     this.pages = config.pages
     this.preload = new Preload(this.pages)
+    this.onThumbnailError = config.onThumbnailError
     if (config.thumbnail) this.thumbnail = config.thumbnail
     this.dispose.add(this.preload)
     this.readonly = config.readonly ?? false
@@ -329,7 +332,11 @@ export class Presentation implements IDisposable<void> {
       url.searchParams.set('x-oss-process', 'image/resize,l_50')
       return url.toString()
     } catch (err) {
-      console.error(err)
+      try {
+        this.onThumbnailError?.(err)
+      } catch {
+        // A diagnostic failure must not change the thumbnail fallback.
+      }
       return src
     }
   }