@netless/app-slide 0.0.29 → 0.0.34

package/dist/main.es.js

@@ -29882,7 +29882,7 @@ void main() {
       this.scaleExt = { x: 1, y: 1 }, this.scaleOrigin = { x: 1, y: 1 }, this.designScale = { x: 1, y: 1 }, this.bound = new fe(0, 0, 1, 1), this.pptX = 0, this.pptY = 0, this.presetSubType = 0, this.designWidth = 0, this.designHeight = 0, this.designX = 0, this.designY = 0, this.hasPreset = false, this.container = new Fe(), this.ctx = e3, this.style = new uu(this.container, t3.hardHidden), this.designGlobalPosition = { x: n2.x + ((r3 = (i2 = t3.position) === null || i2 === void 0 ? void 0 : i2.x) !== null && r3 !== void 0 ? r3 : 0), y: n2.y + ((s3 = (o3 = t3.position) === null || o3 === void 0 ? void 0 : o3.y) !== null && s3 !== void 0 ? s3 : 0) }, (t3.hlinkClick || t3.hlinkHover) && (this.hyperlink = new lu(this.container, this.ctx), t3.hlinkHover && ((a2 = this.hyperlink) === null || a2 === void 0 || a2.addAction(t3.hlinkHover, "hover")), t3.hlinkClick && ((u2 = this.hyperlink) === null || u2 === void 0 || u2.addAction(t3.hlinkClick, "click")));
     }
     updateScale() {
-      this.container.scale.x = this.designScale.x * this.scaleExt.x * this.scaleOrigin.x, this.container.scale.y = this.designScale.y * this.scaleExt.y * this.scaleOrigin.y;
+      this.container && (this.container.scale.x = this.designScale.x * this.scaleExt.x * this.scaleOrigin.x, this.container.scale.y = this.designScale.y * this.scaleExt.y * this.scaleOrigin.y);
     }
     updateTransform(t3) {
       var e3, n2, i2, r3, o3, s3, a2, u2;
@@ -29904,7 +29904,7 @@ void main() {
       return cu(this.designWidth / this.ctx.stageWidth);
     }
     get design_ppt_h() {
-      return cu(this.designHeight / this.ctx.stageHeight);
+      return cu((this.designHeight || this.container.height) / this.ctx.stageHeight);
     }
     get design_ppt_x() {
       return cu(this.designX / this.ctx.stageWidth);
@@ -29919,10 +29919,12 @@ void main() {
       this.scaleExt.x = t3 * this.ctx.stageWidth / this.designWidth, this.updateScale();
     }
     get ppt_h() {
-      return this.scaleExt.y * this.scaleOrigin.y * this.designHeight / this.ctx.stageHeight;
+      const t3 = this.designHeight || this.container.height;
+      return this.scaleExt.y * this.scaleOrigin.y * t3 / this.ctx.stageHeight;
     }
     set ppt_h(t3) {
-      this.scaleExt.y = t3 * this.ctx.stageHeight / this.designHeight, this.updateScale();
+      const e3 = this.designHeight || this.container.height;
+      this.scaleExt.y = t3 * this.ctx.stageHeight / e3, this.updateScale();
     }
     get ppt_x() {
       return (this.container.position.x - this.container.pivot.x) / this.ctx.stageWidth;
@@ -30788,8 +30790,9 @@ void main() {
       }, this.targetId = t3.targetId, this.ctx = t3.ctx, this.height = t3.height, this.width = t3.width, this.sprite = t3.sprite, this.media = t3.media, this.info = t3.info, this.canvasElement = t3.canvasElement, this.getMedianContainer(), this.createMediaController(), this.info.cut && (this.start = (e3 = this.info.cut.start) !== null && e3 !== void 0 ? e3 : 0, this.end = (n2 = this.info.cut.end) !== null && n2 !== void 0 ? n2 : 0);
     }
     getMedianContainer() {
-      let t3 = document.getElementById("median-container");
-      t3 || (t3 = document.createElement("div"), t3.id = "median-container", this.canvasElement.parentElement.appendChild(t3)), this.container = t3;
+      var t3;
+      let e3 = (t3 = this.canvasElement.parentElement) === null || t3 === void 0 ? void 0 : t3.querySelector(".median-container");
+      e3 || (e3 = document.createElement("div"), e3.className = "median-container", this.canvasElement.parentElement.appendChild(e3)), this.container = e3;
     }
     static formatTime(t3) {
       let e3 = "00:00";
@@ -31075,7 +31078,7 @@ void main() {
       var t3, e3, n2;
       return sl(this, void 0, void 0, function* () {
         const i2 = this.ctx.fillTexture.getTexture(this.picTextureId);
-        i2.texture && (this.picSprite.texture = i2.texture), this.picMask.texture = this.backgroundMask.texture, this.picSprite.mask = this.picMask, this.picSprite.width = this.designWidth, this.picSprite.height = this.designHeight, this.container.addChild(this.picSprite), this.container.addChild(this.picMask), ((t3 = this.media) === null || t3 === void 0 ? void 0 : t3.type) === "video" ? (this.mediaPlayer = new il({ id: this.json.id + "-video", ctx: this.ctx, video: this.media, height: this.designHeight, width: this.designWidth, sprite: this.picSprite, container: this.container, canvasElement: this.ctx.view }), ((e3 = this.mediaPlayer) === null || e3 === void 0 ? void 0 : e3.sprite) && (this.mediaPlayer.sprite.mask = this.picMask)) : ((n2 = this.media) === null || n2 === void 0 ? void 0 : n2.type) === "audio" && (this.mediaPlayer = new ol({ id: this.json.id + "-audio", ctx: this.ctx, audio: this.media, height: this.designHeight, width: this.designWidth, sprite: this.picSprite, container: this.container, canvasElement: this.ctx.view })), this.mediaPlayer && (this.picSprite.interactive = true, this.picSprite.on("mouseover", () => {
+        i2.texture && (this.picSprite.texture = i2.texture), this.picMask.texture = this.backgroundMask.texture, this.picSprite.mask = this.picMask, this.picSprite.width = this.designWidth, this.picSprite.height = this.designHeight, this.container.addChild(this.picSprite), this.container.addChild(this.picMask), ((t3 = this.media) === null || t3 === void 0 ? void 0 : t3.type) === "video" && this.media.src ? (this.mediaPlayer = new il({ id: this.json.id + "-video", ctx: this.ctx, video: this.media, height: this.designHeight, width: this.designWidth, sprite: this.picSprite, container: this.container, canvasElement: this.ctx.view }), ((e3 = this.mediaPlayer) === null || e3 === void 0 ? void 0 : e3.sprite) && (this.mediaPlayer.sprite.mask = this.picMask)) : ((n2 = this.media) === null || n2 === void 0 ? void 0 : n2.type) === "audio" && this.media.src && (this.mediaPlayer = new ol({ id: this.json.id + "-audio", ctx: this.ctx, audio: this.media, height: this.designHeight, width: this.designWidth, sprite: this.picSprite, container: this.container, canvasElement: this.ctx.view })), this.mediaPlayer && (this.picSprite.interactive = true, this.picSprite.on("mouseover", () => {
           this.mediaPlayer.showController();
         }), this.picSprite.on("mouseout", () => {
           this.mediaPlayer.hideController();
@@ -31798,7 +31801,7 @@ void main() {
   };
   class Hl extends s2.a {
     constructor(t3) {
-      super(), this.uuid = Date.now().toString(32) + Math.random().toString(32).substring(2), this.isSub = false, this.isShadow = false, this.startCount = 0, this.applyCount = 0, this.isReverse = false, this.isConflictDispose = false, this.isIterateEnd = false, this.parentTimeNode = null, this.isActive = false, this.isDestroy = false, this.shouldSeekOnStart = false, this.repeatTimeoutId = "", this.iterateShadows = [], this.isIterate = false, this.iterateType = "el", this.iterateIndex = 0, this.children = [], this.subList = [], this.duration = 0, this.timeDelta = 0, this.isNegativeSpeed = false, this.handleEndCond = () => {
+      super(), this.uuid = Date.now().toString(32) + Math.random().toString(32).substring(2), this.isSub = false, this.isShadow = false, this.startCount = 0, this.applyCount = 0, this.isReverse = false, this.isConflictDispose = false, this.isIterateEnd = false, this.parentTimeNode = null, this.isActive = false, this.isDestroy = false, this.shouldSeekOnStart = false, this.repeatTimeoutId = "", this.iterateShadows = [], this.isEndEventsEmitted = false, this.isIterate = false, this.iterateType = "el", this.iterateIndex = 0, this.children = [], this.subList = [], this.duration = 0, this.timeDelta = 0, this.isNegativeSpeed = false, this.handleEndCond = () => {
         this.isActive && (this.isActive = false, this.dispose());
       }, this.handleActive = (t4 = true) => {
         if (this.isActive = true, this.applyCount += 1, this.json.iterate || this.emit("timeNodeStart", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse }), this.startCount > 0 && this.json.restart) {
@@ -31914,7 +31917,7 @@ void main() {
       this.duration <= t3 && this.duration > 0 ? (this.emit("timeUpdate", { delta: this.duration, duration: this.duration, isReverse: this.isReverse }), this.ctx.eventHub.emit(Uh.animateEnd), this.ctx.ticker.remove(this.updateTimeLine)) : this.duration > t3 && (this.ctx.eventHub.emit(Uh.animateStart), this.ctx.ticker.add(this.updateTimeLine));
     }
     startTimeLine(t3 = true) {
-      if (t3 && (this.eventHubs.global.emit(`time ${this.json.id} begin`), this.eventHubs.global.emit(`time ${this.json.id} onBegin`), this.eventHubs.runtime.emit(`runtime ${this.json.id} begin`)), this.json.iterate)
+      if (t3 && (this.isEndEventsEmitted = false, this.eventHubs.global.emit(`time ${this.json.id} begin`), this.eventHubs.global.emit(`time ${this.json.id} onBegin`), this.eventHubs.runtime.emit(`runtime ${this.json.id} begin`)), this.json.iterate)
         return void this.startIterate();
       this.timeDelta = 0, this.emit("timelineStart", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse });
       const e3 = 1e3 / this.ctx.ticker.maxFPS;
@@ -31995,7 +31998,7 @@ void main() {
       });
     }
     seekToStart(t3 = true) {
-      if (this.isActive = false, this.dispose(), this.timeDelta = 0, this.emit("seekToStart"), this.json.iterate && !this.isIterate)
+      if (this.isEndEventsEmitted = false, this.isActive = false, this.dispose(), this.timeDelta = 0, this.emit("seekToStart"), this.json.iterate && !this.isIterate)
         return this.isIterateEnd = true, void this.iterateShadows.forEach((e3) => e3.seekToStart(t3));
       if (t3)
         for (let t4 = this.subList.length - 1; t4 >= 0; t4--) {
@@ -32028,7 +32031,7 @@ void main() {
       return this.children.length > 0 && (t3 = t3 && this.children.every((t4) => t4.commonTimeNode.isTimeNodeEnd())), this.json.repeatCount && (t3 = t3 && this.applyCount >= this.json.repeatCount), this.json.autoRev && (t3 = t3 && !this.isReverse), t3 = t3 && this.isNatureTimeEnd(), !!this.isConflictDispose || (!(!this.isIterateEnd || !this.json.iterate) || t3);
     }
     emitEndEvents() {
-      this.eventHubs.global.emit(`time ${this.json.id} end`), this.eventHubs.global.emit(`time ${this.json.id} onEnd`), this.eventHubs.runtime.emit(`runtime ${this.json.id} end`), this.emit("timeNodeEnd", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse });
+      this.isEndEventsEmitted || (this.isEndEventsEmitted = true, this.eventHubs.global.emit(`time ${this.json.id} end`), this.eventHubs.global.emit(`time ${this.json.id} onEnd`), this.eventHubs.runtime.emit(`runtime ${this.json.id} end`), this.emit("timeNodeEnd", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse }));
     }
     collectStartValue() {
       this.emit("timeNodeCreate"), this.children.forEach((t3) => t3.commonTimeNode.collectStartValue());
@@ -32215,7 +32218,7 @@ void main() {
     }
     destroy() {
       var t3;
-      super.destroy(), this.ctx.eventHub.removeAllListeners(), this.ctx.graphicsTexture.destroy(), this.ctx.fillTexture.destroy(), this.globalEventHub.removeAllListeners(), (t3 = this.timing) === null || t3 === void 0 || t3.destroy();
+      this.ctx.eventHub.removeAllListeners(), this.ctx.graphicsTexture.destroy(), this.ctx.fillTexture.destroy(), this.globalEventHub.removeAllListeners(), (t3 = this.timing) === null || t3 === void 0 || t3.destroy(), super.destroy();
     }
     mainSeqStep() {
       var t3, e3;
@@ -35016,7 +35019,7 @@ void main(void){
     }, e3.prototype.createController = function() {
       this.player && (this.playerController = new kd({ player: this.player, params: this.player.config || {}, target: this.frame }));
     }, e3.prototype.setMedianControllerAttribute = function() {
-      this.medianController.id = "median-container", this.medianController.style.position = "absolute", this.medianController.style.left = "0", this.medianController.style.top = "0", this.medianController.style.zIndex = "2";
+      this.medianController.className = "median-container", this.medianController.style.position = "absolute", this.medianController.style.left = "0", this.medianController.style.top = "0", this.medianController.style.zIndex = "2";
     }, e3.prototype.frameResizeHandler = function() {
       var t4 = this.frame.getBoundingClientRect(), e4 = t4.width, n2 = t4.height;
       this.frameWidth = e4, this.frameHeight = n2, this.resizeView();
@@ -35428,9 +35431,10 @@ swizzle$1.wrap = function(fn) {
 };
 var colorNames = colorName;
 var swizzle2 = simpleSwizzle.exports;
+var hasOwnProperty = Object.hasOwnProperty;
 var reverseNames = {};
 for (var name in colorNames) {
-  if (colorNames.hasOwnProperty(name)) {
+  if (hasOwnProperty.call(colorNames, name)) {
     reverseNames[colorNames[name]] = name;
   }
 }
@@ -35467,9 +35471,9 @@ cs.get.rgb = function(string) {
   }
   var abbr = /^#([a-f0-9]{3,4})$/i;
   var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
-  var rgba = /^rgba?\(\s*([+-]?\d+)\s*,?\s*([+-]?\d+)\s*,?\s*([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+  var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
   var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
-  var keyword = /(\w+)/;
+  var keyword = /^(\w+)$/;
   var rgb = [0, 0, 0, 1];
   var match;
   var i;
@@ -35499,7 +35503,7 @@ cs.get.rgb = function(string) {
     }
     if (match[4]) {
       if (match[5]) {
-        rgb[3] = parseInt(match[4], 0) * 0.01;
+        rgb[3] = parseFloat(match[4]) * 0.01;
       } else {
         rgb[3] = parseFloat(match[4]);
       }
@@ -35510,7 +35514,7 @@ cs.get.rgb = function(string) {
     }
     if (match[4]) {
       if (match[5]) {
-        rgb[3] = parseInt(match[4], 0) * 0.01;
+        rgb[3] = parseFloat(match[4]) * 0.01;
       } else {
         rgb[3] = parseFloat(match[4]);
       }
@@ -35519,10 +35523,10 @@ cs.get.rgb = function(string) {
     if (match[1] === "transparent") {
       return [0, 0, 0, 0];
     }
-    rgb = colorNames[match[1]];
-    if (!rgb) {
+    if (!hasOwnProperty.call(colorNames, match[1])) {
       return null;
     }
+    rgb = colorNames[match[1]];
     rgb[3] = 1;
     return rgb;
   } else {
@@ -35542,7 +35546,7 @@ cs.get.hsl = function(string) {
   var match = string.match(hsl);
   if (match) {
     var alpha = parseFloat(match[4]);
-    var h = (parseFloat(match[1]) + 360) % 360;
+    var h = (parseFloat(match[1]) % 360 + 360) % 360;
     var s2 = clamp(parseFloat(match[2]), 0, 100);
     var l = clamp(parseFloat(match[3]), 0, 100);
     var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
@@ -35600,10 +35604,45 @@ function clamp(num, min, max) {
   return Math.min(Math.max(min, num), max);
 }
 function hexDouble(num) {
-  var str = num.toString(16).toUpperCase();
+  var str = Math.round(num).toString(16).toUpperCase();
   return str.length < 2 ? "0" + str : str;
 }
 var ColorString = colorString.exports;
+class Logger {
+  constructor(enable) {
+    this.enable = enable;
+    this.apps = {};
+    this.level = "debug";
+    this._onMessage = (ev) => {
+      if (isObj(ev.data)) {
+        if (typeof ev.data.slide === "boolean") {
+          this.enable = ev.data.slide;
+        } else if (ev.data.slide === "__instance") {
+          console.log(this);
+        }
+      }
+    };
+    window.addEventListener("message", this._onMessage);
+  }
+  log(...args) {
+    if (this.enable) {
+      console.log(...args);
+    }
+  }
+  verbose(...args) {
+    if (this.enable && this.level === "verbose") {
+      console.log(...args);
+    }
+  }
+  dispose(appId) {
+    this.enable = false;
+    delete this.apps[appId];
+    window.removeEventListener("message", this._onMessage);
+  }
+}
+const logger = new Logger(false);
+const log = logger.log.bind(logger);
+const verbose = logger.verbose.bind(logger);
 function guessBgColor(el) {
   try {
     const bg = window.getComputedStyle(el).backgroundColor;
@@ -35632,6 +35671,7 @@ let cachedBgColor = "";
 function cachedGetBgColor(el) {
   if (!cachedBgColor) {
     cachedBgColor = toHex(guessBgColor(el));
+    log("[Slide] guess bg color", cachedBgColor);
   }
   return cachedBgColor;
 }
@@ -35684,7 +35724,6 @@ class SlideController {
     onTransitionEnd,
     onError
   }) {
-    var _a;
     this.sideEffect = new o();
     this.ready = false;
     this.readyPromise = new Promise((resolve) => {
@@ -35699,9 +35738,7 @@ class SlideController {
           type: Slide.SLIDE_EVENTS.syncDispatch,
           payload: event
         };
-        if (this.debug) {
-          console.log("[Slide] dispatch", event);
-        }
+        log("[Slide] dispatch", event);
         this.room.dispatchMagixEvent(this.channel, payload);
       }
     };
@@ -35710,9 +35747,7 @@ class SlideController {
         const { type, payload } = ev.payload;
         if (type === Slide.SLIDE_EVENTS.syncDispatch) {
           this.syncStateOnce();
-          if (this.debug) {
-            console.log("[Slide] receive", payload);
-          }
+          log("[Slide] receive", payload);
           if (!this.syncStateOnceFlag) {
             this.slide.emit(Slide.SLIDE_EVENTS.syncReceive, payload);
           }
@@ -35721,6 +35756,7 @@ class SlideController {
     };
     this.onStateChange = (state) => {
       if (this.context.getIsWritable()) {
+        verbose("[Slide] state change", JSON.stringify(state, null, 2));
         this.context.updateAttributes(["state"], state);
       }
     };
@@ -35743,9 +35779,7 @@ class SlideController {
         setTimeout(this.pollReadyState, 500);
       } else {
         this.pollCount = 0;
-        if (this.debug) {
-          console.log("[Slide] renderSlide (retry after timeout)", 1);
-        }
+        log("[Slide] renderSlide (retry after timeout)", 1);
         this.slide.renderSlide(1);
       }
     };
@@ -35765,9 +35799,7 @@ class SlideController {
     this.freezePromise = null;
     this.freeze = () => {
       if (this.ready) {
-        if (this.debug) {
-          console.log("[Slide] freeze", this.context.appId);
-        }
+        log("[Slide] freeze", this.context.appId);
         if (this.freezePromise) {
           this._toFreeze = 1;
         } else if (!this.isFrozen) {
@@ -35780,9 +35812,7 @@ class SlideController {
     };
     this.unfreeze = async () => {
       if (this.ready) {
-        if (this.debug) {
-          console.log("[Slide] unfreeze", this.context.appId);
-        }
+        log("[Slide] unfreeze", this.context.appId);
         if (this.freezePromise) {
           this._toFreeze = -1;
         } else if (this.isFrozen) {
@@ -35801,7 +35831,6 @@ class SlideController {
     this.channel = `channel-${context.appId}`;
     this.room = context.getRoom();
     this.player = this.room ? void 0 : context.getDisplayer();
-    this.debug = !!((_a = context.getAppOptions()) == null ? void 0 : _a.debug);
     this.slide = this.createSlide(anchor);
     this.syncStateOnceFlag = !this.context.isAddApp;
     this.initialize();
@@ -35821,15 +35850,11 @@ class SlideController {
     const { taskId, url, state } = __spreadValues(__spreadValues({}, EmptyAttributes), this.context.getAttributes());
     slide.setResource(taskId, url || DefaultUrl);
     if (state) {
-      if (this.debug) {
-        console.log("[Slide] init with state", deepClone(state));
-      }
+      log("[Slide] init with state", deepClone(state));
       this.syncStateOnceFlag = false;
       slide.setSlideState(deepClone(state));
     } else if (context.isAddApp) {
-      if (this.debug) {
-        console.log("[Slide] init by renderSlide", 1);
-      }
+      log("[Slide] init by renderSlide", 1);
       slide.renderSlide(1);
     }
     this.pollReadyState();
@@ -35868,9 +35893,7 @@ class SlideController {
     if (this.syncStateOnceFlag) {
       const { state } = __spreadValues(__spreadValues({}, EmptyAttributes), this.context.getAttributes());
       if (state) {
-        if (this.debug) {
-          console.log("[Slide] sync with state (once)", deepClone(state));
-        }
+        log("[Slide] sync with state (once)", deepClone(state));
         this.slide.setSlideState(deepClone(state));
         this.syncStateOnceFlag = false;
       }
@@ -35892,7 +35915,7 @@ class SlideController {
       interactive: true,
       mode: "interactive",
       resize: true,
-      controller: this.debug,
+      controller: logger.enable,
       renderOptions: {
         minFPS: 25,
         maxFPS: 30,
@@ -35903,17 +35926,12 @@ class SlideController {
       },
       timestamp: this.timestamp
     });
-    if (this.debug) {
-      window.slide = slide;
-    }
     return slide;
   }
   destroy() {
     this.sideEffect.flushAll();
     if (!this.destroyed) {
-      if (this.debug) {
-        console.log("[Slide] destroy slide (once)");
-      }
+      log("[Slide] destroy slide (once)");
       this.slide.destroy();
       this.destroyed = true;
     }
@@ -36620,7 +36638,7 @@ if (runningOnBrowser) {
   autoInitialize(LazyLoad, window.lazyLoadOptions);
 }
 class DocsViewer {
-  constructor({ readonly, box, onNewPageIndex, onPlay }) {
+  constructor({ readonly, onNewPageIndex, onPlay }) {
     this._pages = [];
     this.pageIndex = 0;
     this.setPaused = () => {
@@ -36634,7 +36652,6 @@ class DocsViewer {
     this.isSmallBox = false;
     this.sideEffect = new o();
     this.readonly = readonly;
-    this.box = box;
     this.onNewPageIndex = onNewPageIndex;
     this.onPlay = onPlay;
     this.render();
@@ -36648,10 +36665,6 @@ class DocsViewer {
   get pages() {
     return this._pages;
   }
-  mount() {
-    this.box.mountContent(this.$content);
-    this.box.mountFooter(this.$footer);
-  }
   unmount() {
     this.$content.remove();
     this.$footer.remove();
@@ -36892,7 +36905,7 @@ class DocsViewer {
     return `${this.namespace}-${className}`;
   }
 }
-const ClickThroughAppliances = new Set(["clicker", "selector"]);
+const ClickThroughAppliances = new Set(["clicker"]);
 class SlideDocsViewer {
   constructor({ box, view, mountSlideController, mountWhiteboard }) {
     this.slideController = null;
@@ -36944,7 +36957,6 @@ class SlideDocsViewer {
     this.mountSlideController = mountSlideController;
     this.mountWhiteboard = mountWhiteboard;
     this.viewer = new DocsViewer({
-      box,
       readonly: box.readonly,
       onNewPageIndex: this.onNewPageIndex,
       onPlay: this.onPlay
@@ -36995,7 +37007,8 @@ class SlideDocsViewer {
     return this.$whiteboardView;
   }
   mount() {
-    this.viewer.mount();
+    this.box.mountContent(this.viewer.$content);
+    this.box.mountFooter(this.viewer.$footer);
     this.slideController = this.mountSlideController({
       anchor: this.$slide,
       onTransitionStart: this.viewer.setPlaying,
@@ -37041,15 +37054,18 @@ const apps = {
   map: new Map(),
   queue: [],
   validateQueue() {
+    log("[Slide] freezer: validate", this.queue);
     while (this.queue.length > FreezerLength) {
       const appId = this.queue.pop();
       const slide = this.map.get(appId);
       if (slide) {
+        log("[Slide] freezer: validate-freeze", appId, this.queue);
         slide.freeze();
       }
     }
   },
   set(appId, slide) {
+    log("[Slide] freezer: add", appId, this.queue);
     this.map.set(appId, slide);
     if (!this.queue.includes(appId)) {
       this.queue.unshift(appId);
@@ -37057,6 +37073,7 @@ const apps = {
     this.validateQueue();
   },
   delete(appId) {
+    log("[Slide] freezer: delete", appId, this.queue);
     this.map.delete(appId);
     this.queue = this.queue.filter((id) => id !== appId);
   },
@@ -37068,6 +37085,7 @@ const apps = {
     }
     this.queue.unshift(appId);
     this.validateQueue();
+    log("[Slide] freezer: focus", appId, this.queue);
     if (slide) {
       slide.unfreeze();
     }
@@ -37079,6 +37097,139 @@ const addHooks = (emitter) => {
   });
 };
 var styles = ".netless-app-slide-content{position:relative;height:100%;overflow:hidden}.netless-app-slide-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-slide-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-slide-preview-active .netless-app-slide-preview-mask{display:block}.netless-app-slide-preview-active .netless-app-slide-preview{transform:translate(0)}.netless-app-slide-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-slide-preview-page:hover,.netless-app-slide-preview-page.netless-app-slide-preview-page-active{border-color:#444e601a}.netless-app-slide-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-slide-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-slide-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-slide-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:rgba(249,249,252,.9);transition:opacity .4s}.netless-app-slide-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none}.netless-app-slide-footer-btn:hover{background:rgba(237,237,240,.9)}.netless-app-slide-footer-btn>svg{width:100%;height:100%}.netless-app-slide-footer-btn>svg:nth-of-type(2){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-slide-footer-btn~.netless-app-slide-footer-btn{margin-left:15px}.netless-app-slide-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-slide-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-slide-page-number-input{border:none;outline:none;width:1.5em;text-align:right;border-radius:2px;color:currentColor;background:transparent;transition:background .4s;user-select:text}.netless-app-slide-page-number-input:hover,.netless-app-slide-page-number-input:focus,.netless-app-slide-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-slide-readonly .netless-app-slide-footer-btn{cursor:not-allowed}.netless-app-slide-readonly .netless-app-slide-footer-btn:hover{background:transparent}.netless-app-slide-readonly .netless-app-slide-page-number-input{cursor:not-allowed}.netless-app-slide-readonly .netless-app-slide-page-number-input:hover,.netless-app-slide-readonly .netless-app-slide-page-number-input:focus,.netless-app-slide-readonly .netless-app-slide-page-number-input:active{background:transparent;box-shadow:none}.netless-app-slide-readonly .netless-app-slide-page-number-input:disabled{color:inherit}.netless-app-slide-readonly.netless-app-slide-float-footer{display:none}.netless-app-slide-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-slide-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-slide-slide canvas{transform:scale(var(--netless-app-slide-scale, 1))}\n";
+function previewSlide({
+  container,
+  taskId,
+  url = DefaultUrl,
+  debug = false
+}) {
+  if (!taskId) {
+    throw new Error("[Slide] taskId is required");
+  }
+  container.style.cssText += `display:flex;flex-direction:column`;
+  const previewer = new SlidePreviewer({ target: container });
+  previewer.debug = !!debug;
+  previewer.mount(taskId, url);
+  return previewer;
+}
+class SlidePreviewer {
+  constructor(config) {
+    this.slide = null;
+    this.debug = false;
+    this.ready = false;
+    this.readyPromise = new Promise((resolve) => {
+      this.resolveReady = () => {
+        this.ready = true;
+        resolve();
+      };
+    });
+    this.onPageChanged = (page) => {
+      this.viewer.setPageIndex(page - 1);
+    };
+    this.onTransitionStart = () => {
+      this.viewer.setPlaying();
+    };
+    this.onTransitionEnd = () => {
+      this.viewer.setPaused();
+    };
+    this.onError = ({ error }) => {
+      this.viewer.setPaused();
+      console.warn("[Slide] render error", error);
+    };
+    this.destroyed = false;
+    this.refreshPages = () => {
+      if (this.slide) {
+        this.viewer.pages = createDocsViewerPages(this.slide);
+        this.viewer.setPageIndex(this.getPageIndex(this.slide.slideCount));
+      }
+    };
+    this.onPlay = () => {
+      if (this.slide) {
+        this.slide.nextStep();
+      }
+    };
+    this.onNewPageIndex = (index) => {
+      if (this.slide && this.slide.slideCount > 0) {
+        this.slide.renderSlide(clamp$1(index + 1, 1, this.slide.slideCount));
+      }
+    };
+    this.namespace = "netless-app-slide";
+    this.target = config.target;
+    this.bgColor = cachedGetBgColor(this.target);
+    this.viewer = new DocsViewer({
+      readonly: false,
+      onNewPageIndex: this.onNewPageIndex,
+      onPlay: this.onPlay
+    });
+    this.render();
+  }
+  render() {
+    this.viewer.$content.appendChild(this.renderSlideContainer());
+  }
+  mount(taskId, url) {
+    this.target.appendChild(this.renderStyle());
+    this.target.appendChild(this.viewer.$content);
+    this.target.appendChild(this.viewer.$footer);
+    this.slide = new Slide.Slide({
+      anchor: this.$slide,
+      interactive: false,
+      mode: "local",
+      resize: true,
+      controller: this.debug,
+      renderOptions: {
+        minFPS: 25,
+        maxFPS: 30,
+        autoFPS: true,
+        autoResolution: true,
+        transactionBgColor: this.bgColor
+      }
+    });
+    this.registerEventListeners();
+    this.slide.setResource(taskId, url);
+    this.slide.renderSlide(1);
+  }
+  renderStyle() {
+    const element = document.createElement("style");
+    element.appendChild(document.createTextNode(styles));
+    return element;
+  }
+  registerEventListeners() {
+    if (!this.slide)
+      return;
+    const { slide } = this;
+    slide.on(Slide.SLIDE_EVENTS.slideChange, this.onPageChanged);
+    slide.on(Slide.SLIDE_EVENTS.renderStart, this.onTransitionStart);
+    slide.on(Slide.SLIDE_EVENTS.renderEnd, this.onTransitionEnd);
+    slide.on(Slide.SLIDE_EVENTS.mainSeqStepStart, this.onTransitionStart);
+    slide.on(Slide.SLIDE_EVENTS.mainSeqStepEnd, this.onTransitionEnd);
+    slide.on(Slide.SLIDE_EVENTS.renderError, this.onError);
+    slide.on(Slide.SLIDE_EVENTS.renderEnd, this.resolveReady);
+    this.readyPromise.then(this.refreshPages);
+  }
+  destroy() {
+    if (this.slide && !this.destroyed) {
+      log("[Slide] destroy slide (once)");
+      this.slide.destroy();
+      this.destroyed = true;
+    }
+    this.viewer.destroy();
+  }
+  getPageIndex(page) {
+    return (page > 0 ? page : 1) - 1;
+  }
+  renderSlideContainer() {
+    if (!this.$slide) {
+      const $slide = document.createElement("div");
+      $slide.className = this.wrapClassName("slide");
+      $slide.dataset.appKind = "Slide";
+      this.$slide = $slide;
+    }
+    return this.$slide;
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+}
 const SlideApp = {
   kind: "Slide",
   setup(context) {
@@ -37099,23 +37250,26 @@ const SlideApp = {
     const baseScenePath = context.getInitScenePath();
     let docsViewer = null;
     const onPageChanged = (page) => {
-      var _a;
       const room2 = context.getRoom();
-      if (docsViewer && docsViewer.slideController && room2 && context.getIsWritable()) {
-        syncSceneWithSlide(room2, context, docsViewer.slideController.slide, baseScenePath);
-        if (((_a = context.getAppOptions()) == null ? void 0 : _a.debug) || false) {
-          console.log("[Slide] page to", page);
+      if (docsViewer && docsViewer.slideController) {
+        let synced = false;
+        if (room2 && context.getIsWritable()) {
+          syncSceneWithSlide(room2, context, docsViewer.slideController.slide, baseScenePath);
+          synced = true;
         }
+        log("[Slide] page to", page, synced);
         docsViewer.viewer.setPageIndex(page - 1);
       }
     };
     const mountSlideController = (options) => {
+      var _a, _b;
       const slideController = new SlideController(__spreadProps(__spreadValues({
         context
       }, options), {
         onPageChanged
       }));
       apps.set(context.appId, slideController);
+      ((_a = logger.apps)[_b = context.appId] || (_a[_b] = {})).controller = slideController;
       slideController.readyPromise.then(options.onReady);
       return slideController;
     };
@@ -37127,6 +37281,13 @@ const SlideApp = {
     });
     const room = context.getRoom();
     const sideEffect = new o();
+    sideEffect.add(() => {
+      var _a, _b, _c;
+      ((_a = logger.apps)[_b = context.appId] || (_a[_b] = {})).context = context;
+      logger.enable = ((_c = context.getAppOptions()) == null ? void 0 : _c.debug) || false;
+      logger.level = "debug";
+      return () => logger.dispose(context.appId);
+    });
     if (room) {
       docsViewer.toggleClickThrough(room.state.memberState.currentApplianceName);
       sideEffect.add(() => {
@@ -37140,7 +37301,7 @@ const SlideApp = {
       });
     }
     context.emitter.on("destroy", () => {
-      console.log("[Slide]: destroy");
+      log("[Slide]: destroy");
       apps.delete(context.appId);
       sideEffect.flushAll();
       if (docsViewer) {
@@ -37151,5 +37312,5 @@ const SlideApp = {
     docsViewer.mount();
   }
 };
-export { DefaultUrl, FreezerLength, addHooks, apps, SlideApp as default };
+export { DefaultUrl, FreezerLength, SlidePreviewer, addHooks, apps, SlideApp as default, previewSlide };
 //# sourceMappingURL=main.es.js.map