@netless/app-slide 0.2.29 → 0.2.30

package/dist/main.es.js

@@ -31049,7 +31049,7 @@ void main(void){
         var t3, e2;
         (t3 = this.strokeGraphics) === null || t3 === void 0 || t3.render(), (e2 = this.backgroundGraphics) === null || e2 === void 0 || e2.render(), this.createBackground(), this.subClassRender(), this.createFilledPathMask(), this.createPathFill(), this.createArrow();
       }), "@ShapeImpl[render]"), this.text && this.text.render(t2), t2.addSubMTask(() => Zv(this, void 0, void 0, function* () {
-        var t3, e2, i2, n2, r2, o2, s2, a2, l2, h2, u2;
+        var t3, e2, i2, n2, r2, o2, s2, a2, l2, h2, u2, c2, d2;
         if (((t3 = this.json.textBody) === null || t3 === void 0 ? void 0 : t3.iterateType) === "wd" || ((e2 = this.json.textBody) === null || e2 === void 0 ? void 0 : e2.iterateType) === "lt") {
           if (this.renderContainer.addChild(this.container), this.text) {
             const { x: t4, y: e3 } = (i2 = this.json.scale) !== null && i2 !== void 0 ? i2 : { x: 1, y: 1 };
@@ -31060,12 +31060,12 @@ void main(void){
             if (cg()(this.json.textRotateWithShape) && !this.json.textRotateWithShape) {
               const t5 = this.json.rotation || 0;
               this.text.container.rotation = -t5;
-              const { width: e3 } = this.text;
-              this.text.container.position.x = e3;
+              const { width: e4 } = this.text;
+              this.text.container.position.x = e4;
             }
             this.text.container.zIndex = 100;
-            const t4 = (a2 = this.json.effectList) === null || a2 === void 0 ? void 0 : a2.find((t5) => t5.type === "outerShadow");
-            t4 && t4.sx !== 1 ? this.container.addChild(this.text.container) : this.effectContainer.addChild(this.text.container);
+            const t4 = (a2 = this.json.effectList) === null || a2 === void 0 ? void 0 : a2.find((t5) => t5.type === "outerShadow"), e3 = (l2 = this.json.effectList) === null || l2 === void 0 ? void 0 : l2.find((t5) => t5.type === "softEdge"), i3 = (h2 = this.json.effectList) === null || h2 === void 0 ? void 0 : h2.find((t5) => t5.type === "glow");
+            t4 && t4.sx !== 1 || e3 || i3 ? this.container.addChild(this.text.container) : this.effectContainer.addChild(this.text.container);
           }
           this.renderContainer.addChild(this.container);
         }
@@ -31073,7 +31073,7 @@ void main(void){
           const t4 = Vh.p.create({ width: this.json.width, height: this.json.height, resolution: Math.ceil(this.ctx.renderer.resolution) });
           this.ctx.renderer.render(this.renderContainer, { renderTexture: t4 }), this.ctx.bgTexture = t4;
         }
-        this.json.effectList && this.json.effectList.length > 0 && ((l2 = this.ctx.featureList) === null || l2 === void 0 ? void 0 : l2.effect) && !this.ctx.forceCanvas && (this.effectObject = new qv(this.effectContainer, this.json.effectList, `${this.ctx.taskId}_${this.ctx.slideIndex}_${this.json.id}`, this.ctx, this.json.rotation || 0, new Lh.g(((h2 = this.json.scale) === null || h2 === void 0 ? void 0 : h2.x) || 1, ((u2 = this.json.scale) === null || u2 === void 0 ? void 0 : u2.y) || 1)), function(t4) {
+        this.json.effectList && this.json.effectList.length > 0 && ((u2 = this.ctx.featureList) === null || u2 === void 0 ? void 0 : u2.effect) && !this.ctx.forceCanvas && !this.json.media && (this.effectObject = new qv(this.effectContainer, this.json.effectList, `${this.ctx.taskId}_${this.ctx.slideIndex}_${this.json.id}`, this.ctx, this.json.rotation || 0, new Lh.g(((c2 = this.json.scale) === null || c2 === void 0 ? void 0 : c2.x) || 1, ((d2 = this.json.scale) === null || d2 === void 0 ? void 0 : d2.y) || 1)), function(t4) {
           var e3, i3, n3;
           return ((e3 = t4.fillStyle) === null || e3 === void 0 ? void 0 : e3.fillType) === "gifFill" || (((n3 = (i3 = t4.lineStyle) === null || i3 === void 0 ? void 0 : i3.fill) === null || n3 === void 0 ? void 0 : n3.fillType) === "gifFill" || !!t4.picFill && t4.picFill.fillType === "gifFill");
         }(this.json) && this.effectObject.setFrameCount(-1), this.effectObject.on("ready", () => {
@@ -31157,10 +31157,10 @@ void main(void){
         this.playButton.style.display = "none", this.pauseButton.style.display = "block", this.playCallBackList.forEach((t3) => {
           t3();
         });
-      }, this.playMediaFromCtrl = () => {
-        this.ctx.isPlayerPaused() ? this.ctx.logger.info("Media controller prevent play event with paused state", this.ctx.taskId) : (this.ctx.mode !== "interactive" && this.playMedia(), this.ctx.mode !== "local" && this.ctx.eventHub.emit(ky.mediaPlay, { id: this.targetId, time: this.media.currentTime - this.start }));
-      }, this.pauseMediaFromCtrl = () => {
-        this.ctx.isPlayerPaused() ? this.ctx.logger.info("Media controller prevent pause event with paused state", this.ctx.taskId) : (this.ctx.mode !== "interactive" && this.pauseMedia(), this.ctx.mode !== "local" && this.ctx.eventHub.emit(ky.mediaPause, { id: this.targetId, time: this.media.currentTime - this.start }));
+      }, this._playMediaFromCtrl = () => {
+        this.playMediaFromCtrl(false);
+      }, this._pauseMediaFromCtrl = () => {
+        this.pauseMediaFromCtrl(false);
       }, this.onClickFullScreenButtonHandle = () => {
         this.media.requestFullscreen(), this.ctx.eventHub.emit(ky.fullscreenChange, { targetId: this.targetId, state: true });
       }, this.onClickCancelFullScreenButtonHandle = () => {
@@ -31260,6 +31260,12 @@ void main(void){
         }
       }
     }
+    playMediaFromCtrl(t2) {
+      this.ctx.isPlayerPaused() ? this.ctx.logger.info("Media controller prevent play event with paused state", this.ctx.taskId) : (this.ctx.mode !== "interactive" && this.playMedia(), this.ctx.mode !== "local" && this.ctx.eventHub.emit(ky.mediaPlay, { id: this.targetId, time: this.media.currentTime - this.start, _stateOnly: t2 }));
+    }
+    pauseMediaFromCtrl(t2) {
+      this.ctx.isPlayerPaused() ? this.ctx.logger.info("Media controller prevent pause event with paused state", this.ctx.taskId) : (this.ctx.mode !== "interactive" && this.pauseMedia(), this.ctx.mode === "local" || this.ctx.isRendering || this.ctx.eventHub.emit(ky.mediaPause, { id: this.targetId, time: this.media.currentTime - this.start, _stateOnly: t2 }));
+    }
     setControllerPosition() {
       var t2;
       const { target: e2 } = this, { stageWidth: i2, stageHeight: n2 } = this.ctx, r2 = e2.getGlobalPosition(), o2 = Number((t2 = this.container) === null || t2 === void 0 ? void 0 : t2.getAttribute("data-scale")), s2 = i2 * o2, a2 = 1 / o2 * (300 > s2 ? s2 / 300 : 1);
@@ -31277,11 +31283,11 @@ void main(void){
       i2 === this.ctx.slideIndex ? t2 && this.targetId === e2 ? (this.fullScreenButton.style.display = "none", this.exitFullScreenButton.style.display = "block", this.mediaController.style.display = "flex", this.mediaController.removeEventListener("mouseout", this.onMouseOut, false)) : (this.fullScreenButton.style.display = "block", this.exitFullScreenButton.style.display = "none", this.mediaController.style.display = "none", this.mediaController.addEventListener("mouseout", this.onMouseOut, false)) : this.ctx.logger.info("Media controller prevent fullscreen event with different slide index", this.ctx.taskId);
     }
     bindEvent() {
-      this.mediaController.addEventListener("mouseover", this.showController, false), this.mediaController.addEventListener("mouseout", this.onMouseOut, false), this.progress.addEventListener("mousedown", this.changeMediaProgress, false), this.playButton.addEventListener("click", this.playMediaFromCtrl, false), this.pauseButton.addEventListener("click", this.pauseMediaFromCtrl, false), this.media.on("durationchange", this.getMediaDuration, false), this.media.on("timeupdate", this.mediaTimeUpdate, false), this.media.on("pause", this.onPauseMedia, false), this.media.on("play", this.onPlayMedia, false), this.isVideo && (this.ctx.globalEventHub.on("onFullscreenChange", this.onFullScreenChange), this.fullScreenButton.addEventListener("click", this.onClickFullScreenButtonHandle, false), this.exitFullScreenButton.addEventListener("click", this.onClickCancelFullScreenButtonHandle, false), this.containerObserver = new MutationObserver(this.onContainerSizeChange), this.container && this.containerObserver.observe(this.container, { attributes: true, attributeFilter: ["data-scale", "style"] }));
+      this.mediaController.addEventListener("mouseover", this.showController, false), this.mediaController.addEventListener("mouseout", this.onMouseOut, false), this.progress.addEventListener("mousedown", this.changeMediaProgress, false), this.playButton.addEventListener("click", this._playMediaFromCtrl, false), this.pauseButton.addEventListener("click", this._pauseMediaFromCtrl, false), this.media.on("durationchange", this.getMediaDuration, false), this.media.on("timeupdate", this.mediaTimeUpdate, false), this.media.on("pause", this.onPauseMedia, false), this.media.on("play", this.onPlayMedia, false), this.isVideo && (this.ctx.globalEventHub.on("onFullscreenChange", this.onFullScreenChange), this.fullScreenButton.addEventListener("click", this.onClickFullScreenButtonHandle, false), this.exitFullScreenButton.addEventListener("click", this.onClickCancelFullScreenButtonHandle, false), this.containerObserver = new MutationObserver(this.onContainerSizeChange), this.container && this.containerObserver.observe(this.container, { attributes: true, attributeFilter: ["data-scale", "style"] }));
     }
     unbindEvent() {
       var t2;
-      this.mediaController.removeEventListener("mouseover", this.showController, false), this.mediaController.removeEventListener("mouseout", this.onMouseOut, false), this.progress.removeEventListener("mousedown", this.changeMediaProgress, false), this.playButton.removeEventListener("click", this.playMediaFromCtrl, false), this.pauseButton.removeEventListener("click", this.pauseMediaFromCtrl, false), this.media.removeAllListeners(), this.isVideo && (this.ctx.globalEventHub.removeListener("onFullscreenChange", this.onFullScreenChange), this.fullScreenButton.removeEventListener("click", this.onClickFullScreenButtonHandle, false), this.exitFullScreenButton.removeEventListener("click", this.onClickCancelFullScreenButtonHandle, false), (t2 = this.containerObserver) === null || t2 === void 0 || t2.disconnect());
+      this.mediaController.removeEventListener("mouseover", this.showController, false), this.mediaController.removeEventListener("mouseout", this.onMouseOut, false), this.progress.removeEventListener("mousedown", this.changeMediaProgress, false), this.playButton.removeEventListener("click", this._playMediaFromCtrl, false), this.pauseButton.removeEventListener("click", this._pauseMediaFromCtrl, false), this.media.removeAllListeners(), this.isVideo && (this.ctx.globalEventHub.removeListener("onFullscreenChange", this.onFullScreenChange), this.fullScreenButton.removeEventListener("click", this.onClickFullScreenButtonHandle, false), this.exitFullScreenButton.removeEventListener("click", this.onClickCancelFullScreenButtonHandle, false), (t2 = this.containerObserver) === null || t2 === void 0 || t2.disconnect());
     }
     show() {
       this.setControllerPosition(), this.mediaController.style.display = "flex";
@@ -31376,7 +31382,7 @@ void main(void){
   };
   class r_ extends Za.a {
     constructor(t2) {
-      var e2, i2, n2, r2, o2, s2, a2;
+      var e2, i2, n2, r2;
       super(), this.type = "video", this.sprite = new ep(), this.isPlaying = false, this.isGlobalPause = false, this.fullscreen = false, this.url = "", this.onVideoStalled = () => {
         this.ctx.logger.warn(this.url + ", Failed to fetch data, but trying.", this.ctx.taskId);
       }, this.updateVolume = (t3) => {
@@ -31385,18 +31391,18 @@ void main(void){
         const { targetId: e3, state: i3, slideIndex: n3 } = t3;
         n3 === this.ctx.slideIndex && e3 === this.id && (i3 ? this.requestFullscreen() : this.requestCancelFullscreen());
       }, this.id = t2.id, this.start = (e2 = t2.video.cut) === null || e2 === void 0 ? void 0 : e2.start, this.end = (i2 = t2.video.cut) === null || i2 === void 0 ? void 0 : i2.end, this.fullscreen = (n2 = t2.video.fullscreen) !== null && n2 !== void 0 && n2, this.container = t2.container, this.ctx = t2.ctx, this.ctx.medias[this.id] = this;
-      let l2 = t2.video.src;
-      this.ctx.loaderDelegate && (l2 = this.ctx.loaderDelegate.redirectMedia(l2), this.ctx.logger.info(`redirect media url from ${t2.video.src} to ${l2} by delegate.`, t2.ctx.taskId)), this.videoResource = new Vh.w(l2, { autoLoad: true, autoPlay: false, updateFPS: 30, crossorigin: true }), (r2 = this.videoElement) === null || r2 === void 0 || r2.addEventListener("stalled", this.onVideoStalled), this.url = t2.video.src;
-      let h2 = t2.video.src.replace(/4$/, "3");
-      this.ctx.loaderDelegate && (h2 = this.ctx.loaderDelegate.redirectMedia(h2), this.ctx.logger.info(`redirect media url from ${t2.video.src.replace(/4$/, "3")} to ${h2} by delegate.`, t2.ctx.taskId)), this.rtcAudio = new i_(h2, t2.ctx.runningAudio);
-      const { video: u2, width: c2, height: d2, target: p2 } = t2;
-      this.controller = new t_({ targetId: t2.id, shapeId: t2.shapeId, ctx: t2.ctx, width: c2, height: d2, target: p2, media: this, info: u2, canvasElement: t2.canvasElement }), this.controller.addPlayCallBack(() => {
-        this.sprite.width = c2, this.sprite.height = d2, this.ctx.clock.setTimeout(() => {
+      let o2 = t2.video.src;
+      this.ctx.loaderDelegate && (o2 = this.ctx.loaderDelegate.redirectMedia(o2), this.ctx.logger.info(`redirect media url from ${t2.video.src} to ${o2} by delegate.`, t2.ctx.taskId)), this.videoResource = new Vh.w(o2, { autoLoad: true, autoPlay: false, updateFPS: 30, crossorigin: true }), (r2 = this.videoElement) === null || r2 === void 0 || r2.addEventListener("stalled", this.onVideoStalled), this.url = t2.video.src;
+      let s2 = t2.video.src.replace(/4$/, "3");
+      this.ctx.loaderDelegate && (s2 = this.ctx.loaderDelegate.redirectMedia(s2), this.ctx.logger.info(`redirect media url from ${t2.video.src.replace(/4$/, "3")} to ${s2} by delegate.`, t2.ctx.taskId)), this.rtcAudio = new i_(s2, t2.ctx.runningAudio);
+      const { video: a2, width: l2, height: h2, target: u2 } = t2;
+      this.controller = new t_({ targetId: t2.id, shapeId: t2.shapeId, ctx: t2.ctx, width: l2, height: h2, target: u2, media: this, info: a2, canvasElement: t2.canvasElement }), this.controller.addPlayCallBack(() => {
+        this.sprite.width = l2, this.sprite.height = h2, this.ctx.clock.setTimeout(() => {
           this.sprite.visible = true;
         }, 50);
       });
-      const f2 = new Vh.c(null, { height: d2, width: c2 });
-      f2.resource = this.videoResource, this.videoResource.bind(f2), this.sprite = new ep(), this.sprite.visible = false, this.sprite.texture = new Vh.t(f2), this.sprite.interactive = true, this.container.addChild(this.sprite), this.sprite.on("mouseover", (t3) => {
+      const c2 = new Vh.c(null, { height: h2, width: l2 });
+      c2.resource = this.videoResource, this.videoResource.bind(c2), this.sprite = new ep(), this.sprite.visible = false, this.sprite.texture = new Vh.t(c2), this.sprite.interactive = true, this.container.addChild(this.sprite), this.sprite.on("mouseover", (t3) => {
         t3.stopPropagation(), this.controller.show();
       }), this.sprite.on("mouseout", (t3) => {
         t3.stopPropagation(), this.controller.hide();
@@ -31405,12 +31411,6 @@ void main(void){
         (e3 = this.videoElement) === null || e3 === void 0 || e3.addEventListener(t3, () => {
           t3 === "timeupdate" && this.isPlaying, this.emit(t3);
         });
-      }), (o2 = this.videoElement) === null || o2 === void 0 || o2.addEventListener("playing", () => {
-        this.rtcAudio.play();
-      }), (s2 = this.videoElement) === null || s2 === void 0 || s2.addEventListener("pause", () => {
-        console.log("video pause");
-      }), (a2 = this.videoElement) === null || a2 === void 0 || a2.addEventListener("stalled", () => {
-        console.log("video stalled");
       }), this.ctx.activeMedia.add(this), this.ctx.volumeAdjuster.on("update", this.updateVolume), this.ctx.globalEventHub.on("syncFullscreenVideoState", this.syncFullscreenVideoState);
     }
     get videoElement() {
@@ -31600,12 +31600,12 @@ void main(void){
       if (e2 === "call")
         if (/playFrom\(([0-9.]+)\)/.test(t2)) {
           const e3 = t2.match(/playFrom\(([0-9.]+)\)/), n3 = Number(e3[1] || "0");
-          (i2 = this.mediaPlayer) === null || i2 === void 0 || i2.controller.playMediaFromCtrl(), setTimeout(() => {
+          (i2 = this.mediaPlayer) === null || i2 === void 0 || i2.controller.playMediaFromCtrl(true), setTimeout(() => {
             var t3;
             (t3 = this.mediaPlayer) === null || t3 === void 0 || t3.controller.jumpToTime(n3);
           }, 1e3);
         } else
-          t2 === "custom-pause" ? (n2 = this.mediaPlayer) === null || n2 === void 0 || n2.controller.pauseMediaFromCtrl() : t2 === "togglePause" ? this.mediaPlayer && (this.mediaPlayer.isPlaying ? this.mediaPlayer.controller.pauseMediaFromCtrl() : this.mediaPlayer.controller.playMediaFromCtrl()) : t2 === "stop" && ((r2 = this.mediaPlayer) === null || r2 === void 0 || r2.stop());
+          t2 === "custom-pause" ? (n2 = this.mediaPlayer) === null || n2 === void 0 || n2.controller.pauseMediaFromCtrl(true) : t2 === "togglePause" ? this.mediaPlayer && (this.mediaPlayer.isPlaying ? this.mediaPlayer.controller.pauseMediaFromCtrl(true) : this.mediaPlayer.controller.playMediaFromCtrl(true)) : t2 === "stop" && ((r2 = this.mediaPlayer) === null || r2 === void 0 || r2.stop());
     }
     renderPic() {
       var t2, e2, i2, n2, r2, o2;
@@ -32413,7 +32413,7 @@ void main(void){
         !this.isApplied && i2 && n2 && (this.isApplied = true, (e2 = (t3 = this.timingTarget) === null || t3 === void 0 ? void 0 : t3.cmd) === null || e2 === void 0 || e2.applyCommand(i2, n2));
       }, this.onSeekToStart = () => {
         var t3, e2;
-        (e2 = (t3 = this.timingTarget) === null || t3 === void 0 ? void 0 : t3.cmd) === null || e2 === void 0 || e2.applyCommand("custom-pause", "call");
+        this.commonTimeNode.isInInteractiveSeq || (e2 = (t3 = this.timingTarget) === null || t3 === void 0 ? void 0 : t3.cmd) === null || e2 === void 0 || e2.applyCommand("custom-pause", "call");
       }, this.onSeekToEnd = () => {
       }, this.commonTimeNode.on("timeNodeStart", () => {
         this.isApplied = false;
@@ -33344,7 +33344,7 @@ void main(void){
     createCtx(t2) {
       const { task: e2 } = this.stageStates[t2];
       e2.addMTask(() => Py(this, void 0, void 0, function* () {
-        const e3 = new Gm(this.loader), i2 = new Za.a(), n2 = { taskId: this.taskId, mode: this.mode, renderer: this.renderer, graphicsTexture: new Km(), stageWidth: 0, stageHeight: 0, ticker: this.ticker, timingTargets: new $m(i2), eventHub: i2, view: this.view, medias: /* @__PURE__ */ Object.create(null), lastViewedIndex: 0, conflictTimeNodeManager: new Qm(), clock: this.clock, spriteTexture: e3, slideIndex: t2, objectPoolGroup: this.objPoolGroup, hasBackgroundFillShape: false, slideScopeEventHub: new Za.a(), logger: this.logger, sdfManager: this.sdfManager, loaderDelegate: this.loaderDelegate, runningAudio: this.runningAudio, activeMedia: this.activeMedia, isPlayerPaused: this.isPlayerPaused, timingEventHub: new Za.a(), maxResolution: this.maxResolution, animatedIds: /* @__PURE__ */ new Set(), volumeAdjuster: this.volumeAdjuster, forceCanvas: this.forceCanvas, globalEventHub: this.globalEventHub };
+        const e3 = new Gm(this.loader), i2 = new Za.a(), n2 = { taskId: this.taskId, mode: this.mode, renderer: this.renderer, graphicsTexture: new Km(), stageWidth: 0, stageHeight: 0, ticker: this.ticker, timingTargets: new $m(i2), eventHub: i2, view: this.view, medias: /* @__PURE__ */ Object.create(null), lastViewedIndex: 0, conflictTimeNodeManager: new Qm(), clock: this.clock, spriteTexture: e3, slideIndex: t2, objectPoolGroup: this.objPoolGroup, hasBackgroundFillShape: false, slideScopeEventHub: new Za.a(), logger: this.logger, sdfManager: this.sdfManager, loaderDelegate: this.loaderDelegate, runningAudio: this.runningAudio, activeMedia: this.activeMedia, isPlayerPaused: this.isPlayerPaused, timingEventHub: new Za.a(), maxResolution: this.maxResolution, animatedIds: /* @__PURE__ */ new Set(), volumeAdjuster: this.volumeAdjuster, forceCanvas: this.forceCanvas, globalEventHub: this.globalEventHub, isRendering: false };
         this.stageCtxs[t2] = n2;
       }), "@StagePool[createCtx]");
     }
@@ -33688,7 +33688,7 @@ void main(void){
         const r2 = yield this.stagePool.getStage(t2), o2 = `snapshot-${t2}-${this.isForward ? "start" : "end"}`, s2 = yield this.localStorage.getItem(o2);
         if (!r2)
           return;
-        this.translateEvent(r2.ctx.eventHub, [ky.mainSeqStepChange, ky.mainSeqStateChange, ky.hyperlinkTrigger, ky.interactiveSeqAction, ky.mainSeqStepStart, ky.mainSeqStepEnd, ky.animateStart, ky.animateEnd, ky.mediaPlay, ky.mediaPause, ky.mediaSeek, ky.mediaStop, ky.requestGotoSlide, ky.requestNextSlide, ky.requestPrevSlide, ky.interactiveSeqStateChange, ky.userInput, ky.fullscreenChange]), this.currentIndex = Number(t2);
+        r2.ctx.isRendering = true, this.translateEvent(r2.ctx.eventHub, [ky.mainSeqStepChange, ky.mainSeqStateChange, ky.hyperlinkTrigger, ky.interactiveSeqAction, ky.mainSeqStepStart, ky.mainSeqStepEnd, ky.animateStart, ky.animateEnd, ky.mediaPlay, ky.mediaPause, ky.mediaSeek, ky.mediaStop, ky.requestGotoSlide, ky.requestNextSlide, ky.requestPrevSlide, ky.interactiveSeqStateChange, ky.userInput, ky.fullscreenChange]), this.currentIndex = Number(t2);
         const { width: a2, height: l2, slideCount: h2 } = r2.json;
         this.slideCount = h2, this.designWidth = a2, this.designHeight = l2, (e2 = this.currentStage) === null || e2 === void 0 || e2.clearOnSlideChange();
         const u2 = this.currentStage;
@@ -33711,7 +33711,7 @@ void main(void){
             }
           (n2 = this.transactionPlayer) === null || n2 === void 0 || n2.dispose();
         }
-        this.isForward ? yield r2.startTiming() : r2.setMainSeqApplied(), r2.ctx.slideScopeEventHub.emit("slide-render", r2.ctx.slideIndex), this.emit(ky.renderEnd, t2), this.emit(ky.slideChange, t2), this.preload(t2 + 1).catch((e3) => {
+        this.isForward ? yield r2.startTiming() : r2.setMainSeqApplied(), r2.ctx.slideScopeEventHub.emit("slide-render", r2.ctx.slideIndex), this.emit(ky.renderEnd, t2), this.emit(ky.slideChange, t2), r2.ctx.isRendering = false, this.preload(t2 + 1).catch((e3) => {
           this.errorChannel.emit("error", Tm.transform(e3), t2 + 1);
         }), this.preload(t2 - 1).catch((e3) => {
           this.errorChannel.emit("error", Tm.transform(e3), t2 - 1);
@@ -35626,9 +35626,9 @@ void main(void){
   }
   var aT = { syncDispatch: "syncDispatch", syncReceive: "syncReceive", syncEventLag: "syncEventLag", renderStart: "renderStart", renderEnd: "renderEnd", renderError: "renderError", slideChange: "slideChange", mainSeqStepStart: "mainSeqStepStart", mainSeqStepEnd: "mainSeqStepEnd", animateStart: "animateStart", animateEnd: "animateEnd", stateChange: "stateChange", slideStepEnd: "slideEnd", slideStepStart: "slideStart" }, lT = { taskId: "", url: "", currentSlideIndex: -1, mainSeqStep: -1, mainSeqState: null, mediaState: /* @__PURE__ */ Object.create(null), interactiveSeqState: /* @__PURE__ */ Object.create(null) }, hT = "";
   try {
-    hT = "0.10.1-beta";
+    hT = "0.10.2-beta.1";
   } catch (t2) {
-    hT = "-dev";
+    hT = "dev";
   }
   var uT = null;
   try {
@@ -35844,12 +35844,16 @@ void main(void){
         r2.emit(aT.mainSeqStepEnd, t4);
       }), o2.on(ky.mediaPlay, function(t4) {
         var e4, i4 = (e4 = r2.__slideState.mediaState[t4.id]) !== null && e4 !== void 0 ? e4 : {};
-        i4.type = "play", i4.time = r2.timestamp() - 1e3 * t4.time, r2.__slideState.mediaState[t4.id] = i4, r2.emitSyncDispatch({ slideIndex: r2.__slideState.currentSlideIndex, type: "mediaPlay", id: t4.id, state: i4 }), r2.emitStateChange();
+        i4.type = "play", i4.time = r2.timestamp() - 1e3 * t4.time, r2.__slideState.mediaState[t4.id] = i4, t4._stateOnly ? r2.config.mode === "interactive" && r2.receiveSyncHandler({ slideIndex: r2.__slideState.currentSlideIndex, type: "mediaPlay", id: t4.id, state: i4 }).catch(function(t5) {
+          r2.logger.error(t5 == null ? void 0 : t5.message, r2.taskId);
+        }) : r2.emitSyncDispatch({ slideIndex: r2.__slideState.currentSlideIndex, type: "mediaPlay", id: t4.id, state: i4 }), r2.emitStateChange();
       }), o2.on(ky.mediaStop, function(t4) {
         delete r2.__slideState.mediaState[t4.id], r2.emitStateChange();
       }), o2.on(ky.mediaPause, function(t4) {
         var e4, i4 = (e4 = r2.__slideState.mediaState[t4.id]) !== null && e4 !== void 0 ? e4 : {};
-        i4.type = "pause", i4.time = t4.time, r2.__slideState.mediaState[t4.id] = i4, r2.emitSyncDispatch({ slideIndex: r2.__slideState.currentSlideIndex, type: "mediaPause", id: t4.id, state: i4 }), r2.emitStateChange();
+        i4.type = "pause", i4.time = t4.time, r2.__slideState.mediaState[t4.id] = i4, t4._stateOnly ? r2.config.mode === "interactive" && r2.receiveSyncHandler({ slideIndex: r2.__slideState.currentSlideIndex, type: "mediaPause", id: t4.id, state: i4 }).catch(function(t5) {
+          r2.logger.error(t5 == null ? void 0 : t5.message, r2.taskId);
+        }) : r2.emitSyncDispatch({ slideIndex: r2.__slideState.currentSlideIndex, type: "mediaPause", id: t4.id, state: i4 }), r2.emitStateChange();
       }), o2.on(ky.mediaSeek, function(t4) {
         var e4, i4 = (e4 = r2.__slideState.mediaState[t4.id]) !== null && e4 !== void 0 ? e4 : {};
         t4.isPlaying ? (i4.type = "play", i4.time = r2.timestamp() - 1e3 * t4.time) : (i4.type = "pause", i4.time = t4.time), r2.__slideState.mediaState[t4.id] = i4, r2.emitSyncDispatch({ slideIndex: r2.__slideState.currentSlideIndex, type: "mediaSeek", id: t4.id, time: t4.time, state: i4 }), r2.emitStateChange();
@@ -38691,7 +38695,7 @@ class SlidePreviewer {
   }
 }
 const usePlugin = /* @__PURE__ */ Slide.Slide.usePlugin.bind(Slide.Slide);
-const version = "0.2.29";
+const version = "0.2.30";
 const SlideApp = {
   kind: "Slide",
   setup(context) {