@netless/app-slide 0.3.0-canary.7 → 0.3.0-canary.8

package/src/SlideViewer.ts

@@ -395,6 +395,7 @@ export class SlideViewer {
   readonly footer = create_footer();
   readonly $content: HTMLElement;
   readonly $footer: HTMLElement;
+  readonly $overlay: HTMLElement;
 
   readonly slide;
 
@@ -408,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 => {
@@ -474,11 +478,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/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;