@netless/app-slide 0.3.0-canary.6 → 0.3.0-canary.9

package/src/SlideViewer.ts

@@ -45,15 +45,25 @@ interface PreviewPage {
   thumbnail: string;
 }
 
-async function fetch_slide_info({ taskId, url }: SlideAttributes) {
+interface PreviewInfo {
+  width: number;
+  height: number;
+}
+
+interface SlideInfo {
+  width: number;
+  height: number;
+  slideCount: number;
+}
+
+async function fetch_slide_info({ taskId, url }: SlideAttributes): Promise<{
+  preview: PreviewInfo | null;
+  slide: SlideInfo;
+}> {
   const prefix = make_prefix(taskId, url);
   const imgSrc = `${prefix}/preview/1.png`;
   const jsonUrl = `${prefix}/jsonOutput/slide-1.json`;
 
-  interface PreviewInfo {
-    width: number;
-    height: number;
-  }
   const p1 = new Promise<PreviewInfo | null>(resolve => {
     const image = new Image();
     image.onload = () => resolve(image);
@@ -61,11 +71,6 @@ async function fetch_slide_info({ taskId, url }: SlideAttributes) {
     image.src = imgSrc;
   });
 
-  interface SlideInfo {
-    width: number;
-    height: number;
-    slideCount: number;
-  }
   const p2: Promise<SlideInfo> = fetch(jsonUrl).then(r => r.json());
 
   return { preview: await p1, slide: await p2 };
@@ -381,6 +386,7 @@ export interface SlideViewerInfoResponse {
 
 export class SlideViewer {
   static styles = styles;
+  static fetchSlideInfo = fetch_slide_info;
 
   private readonly sideEffect = new SideEffectManager();
 
@@ -389,6 +395,7 @@ export class SlideViewer {
   readonly footer = create_footer();
   readonly $content: HTMLElement;
   readonly $footer: HTMLElement;
+  readonly $overlay: HTMLElement;
 
   readonly slide;
 
@@ -402,6 +409,9 @@ export class SlideViewer {
     this.$content = this.sidebar.$content;
     this.$footer = this.footer.$footer;
     append(this.$content, this.$slide);
+    this.$overlay = h("div");
+    set_class(this.$overlay, "overlay");
+    append(this.$content, this.$overlay);
 
     let resolveReady: () => void;
     this._readyPromise = new Promise(resolve => {
@@ -449,7 +459,6 @@ export class SlideViewer {
 
     this.slide = new Slide({
       anchor: this.$slide,
-      resize: true,
       mode: "local",
       interactive: true,
       enableGlobalClick: true,
@@ -468,11 +477,23 @@ export class SlideViewer {
     });
 
     this.slide.on("renderEnd", () => {
-      if (!this._ready)
+      if (!this._ready) {
         setTimeout(() => {
           this._ready = true;
           resolveReady();
         }, 1000);
+      } else {
+        this.$overlay.style.opacity = "";
+      }
+    });
+
+    this.slide.on("renderError", ({ error, index }) => {
+      if (this._destroyed) return;
+      if (error) {
+        console.error(error);
+        this.$overlay.textContent = `Error on slide[index=${index}]: ${error.message}`;
+        this.$overlay.style.opacity = "1";
+      }
     });
 
     const fetching = fetch_slide_info(options).then(({ preview, slide }) => {

package/src/index.ts

@@ -6,10 +6,15 @@ export type { SlideState, AddHooks, AppOptions, Attributes, MagixEvents, SlideVi
 
 import ColorString from "color-string";
 import { SideEffectManager } from "side-effect-manager";
+import { Slide } from "@netless/slide";
 import { SlideViewer } from "./SlideViewer";
 import { refrigerator, addHooks } from "./Refrigerator";
+import { DefaultUrl } from "./constants";
 
-export { SlideViewer, refrigerator, addHooks };
+export { Slide, SlideViewer, refrigerator, addHooks, DefaultUrl };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const usePlugin = /* @__PURE__ */ Slide.usePlugin.bind(Slide) as (plugin: any) => void;
 
 export const version = __APP_VERSION__;
 
@@ -22,8 +27,9 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       throw new Error("[Slide] no taskId");
     }
 
-    const options = context.getAppOptions() || {};
-    const logger = make_logger(context);
+    const appOptions = context.getAppOptions() || {};
+    const options = appOptions.renderOptions || {};
+    const logger = make_logger(context, appOptions.debug);
     logger.info("[Slide] setup @ " + __APP_VERSION__);
 
     const sideEffect = new SideEffectManager();
@@ -35,7 +41,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       resize: true,
       enableGlobalClick: true,
       timestamp: make_timestamp(context),
-      logger,
+      logger: appOptions.logger || logger,
       renderOptions: {
         minFPS: options.minFPS || 25,
         maxFPS: options.maxFPS || 30,
@@ -45,7 +51,12 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
         maxResolutionLevel: options.maxResolutionLevel,
         transactionBgColor: options.transactionBgColor || make_bg_color(context.box.$content),
       },
-
+      rtcAudio: appOptions.rtcAudio,
+      useLocalCache: appOptions.useLocalCache,
+      resourceTimeout: appOptions.resourceTimeout,
+      loaderDelegate: appOptions.loaderDelegate,
+      navigatorDelegate: appOptions.navigatorDelegate,
+      fixedFrameSize: appOptions.fixedFrameSize,
       taskId: context.storage.state.taskId,
       url: context.storage.state.url,
     });
@@ -75,15 +86,17 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       logger.info("[Slide] destroy");
       sideEffect.flushAll();
     });
+
+    return viewer;
   },
 };
 
 export default SlideApp;
 
 export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
-  const { container } = options;
+  const { container, ...slideOptions } = options;
   container.style.cssText = "display:flex;flex-direction:column";
-  const viewer = new SlideViewer(options);
+  const viewer = new SlideViewer(slideOptions);
   container.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
   container.appendChild(viewer.$content);
   container.appendChild(viewer.$footer);
@@ -108,7 +121,8 @@ function make_timestamp(context: AppContext): () => number {
   }
 }
 
-function make_logger(context: AppContext): { info: (msg: string) => void } {
+function make_logger(context: AppContext, debug?: boolean): { info: (msg: string) => void } {
+  void debug; // not used for now
   if (import.meta.env.DEV) {
     return { info: console.debug.bind(console) };
   }

package/src/style.scss

@@ -101,6 +101,22 @@ $namespace: "netless-app-slide";
   @include no-user-select;
 }
 
+.#{$namespace}-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 10100;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 0, 0, 0.25);
+  transition: opacity 0.3s;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .#{$namespace}-footer {
   box-sizing: border-box;
   height: 26px;

package/src/typings.ts

@@ -1,4 +1,4 @@
-import type { ISlideRenderOptions, Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
+import type { ISlideConfig, Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
 import type { RegisterParams } from "@netless/window-manager";
 
 export type SlideState = Slide["slideState"];
@@ -18,6 +18,23 @@ export interface MagixEvents {
   [SLIDE_EVENTS.syncDispatch]: SyncEvent;
 }
 
-export interface AppOptions extends ISlideRenderOptions {
+export interface AppOptions
+  extends Pick<
+    ISlideConfig,
+    | "renderOptions"
+    | "rtcAudio"
+    | "useLocalCache"
+    | "resourceTimeout"
+    | "loaderDelegate"
+    | "navigatorDelegate"
+    | "fixedFrameSize"
+    | "logger"
+  > {
   debug?: boolean;
 }
+
+export interface ILogger {
+  info?(msg: string): void;
+  error?(msg: string): void;
+  warn?(msg: string): void;
+}