@netless/app-slide 0.2.8 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,6 @@
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/app-shared": "0.1.2",
     "@netless/slide": "^0.6.4",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",

package/src/SlideController/index.ts

@@ -31,6 +31,7 @@ export const EmptyAttributes: Attributes = {
 export interface SlideControllerOptions {
   context: AppContext<Attributes, MagixEvents, AppOptions>;
   anchor: HTMLDivElement;
+  onRenderEnd: () => void;
   onPageChanged: (page: number) => void;
   onTransitionStart: () => void;
   onTransitionEnd: () => void;

package/src/SlideDocsViewer/index.ts

@@ -54,10 +54,12 @@ export class SlideDocsViewer {
 
   public $slide!: HTMLDivElement;
   public $whiteboardView!: HTMLDivElement;
+  public $overlay!: HTMLDivElement;
 
   public render() {
     this.viewer.$content.appendChild(this.renderSlideContainer());
     this.viewer.$content.appendChild(this.renderWhiteboardView());
+    this.viewer.$content.appendChild(this.renderOverlay());
     this.sideEffect.addEventListener(window, "keydown", ev => {
       if (this.box.focus && this.slideController) {
         switch (ev.key) {
@@ -79,6 +81,15 @@ export class SlideDocsViewer {
     });
   }
 
+  protected renderOverlay(): HTMLDivElement {
+    if (!this.$overlay) {
+      const $overlay = document.createElement("div");
+      $overlay.className = this.wrapClassName("overlay");
+      this.$overlay = $overlay;
+    }
+    return this.$overlay;
+  }
+
   protected renderSlideContainer(): HTMLDivElement {
     if (!this.$slide) {
       const $slide = document.createElement("div");
@@ -103,6 +114,7 @@ export class SlideDocsViewer {
 
     this.slideController = this.mountSlideController({
       anchor: this.$slide,
+      onRenderEnd: this.onRenderEnd,
       onTransitionStart: this.viewer.setPlaying,
       onTransitionEnd: this.viewer.setPaused,
       onReady: this.refreshPages,
@@ -120,9 +132,15 @@ export class SlideDocsViewer {
 
   protected onError = ({ error }: { error: Error }) => {
     this.viewer.setPaused();
+    this.$overlay.textContent = `Error on slide[page=${this.slideController?.page}]: ${error.message}`;
+    this.$overlay.style.opacity = "1";
     logger.warn("[Slide] render error", error);
   };
 
+  protected onRenderEnd = () => {
+    this.$overlay.style.opacity = "";
+  };
+
   protected refreshPages = () => {
     if (this.slideController) {
       this.viewer.pages = createDocsViewerPages(this.slideController.slide);

package/src/SlideDocsViewer/style.scss

@@ -9,3 +9,19 @@ $namespace: "netless-app-slide";
   z-index: 100;
   overflow: hidden;
 }
+
+.#{$namespace}-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 200;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 0, 0, 0.25);
+  transition: opacity 0.3s;
+  opacity: 0;
+  pointer-events: none;
+}

package/src/index.ts

@@ -141,6 +141,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
         }
         const page = slideController.slide.slideState.currentSlideIndex;
         log("[Slide] page to", page, synced ? "(synced)" : "", "(on ready)");
+        slideController.slide.on("renderEnd", options.onRenderEnd);
       });
       return slideController;
     };