@netless/app-slide 0.2.31-beta.3 → 0.2.31

package/dist/main.es.js

@@ -31185,7 +31185,7 @@ void main(void){
       }), this.onPauseMedia = () => {
         this.playButton.style.display = "block", this.pauseButton.style.display = "none";
       }, this.onPlayMedia = () => {
-        this.media.fullscreen && this.onClickFullScreenButtonHandle(), this.playButton.style.display = "none", this.pauseButton.style.display = "block", this.playCallBackList.forEach((t3) => {
+        this.playButton.style.display = "none", this.pauseButton.style.display = "block", this.playCallBackList.forEach((t3) => {
           t3();
         });
       }, this._playMediaFromCtrl = () => {
@@ -31193,7 +31193,7 @@ void main(void){
       }, this._pauseMediaFromCtrl = () => {
         this.pauseMediaFromCtrl(false), this.delayHide();
       }, this.onClickFullScreenButtonHandle = () => {
-        this.fullscreenStatus = true, this.media.requestFullscreen(), this.ctx.eventHub.emit(Gy.fullscreenChange, { targetId: this.targetId, state: true }), this.delayHide();
+        this.fullscreenPlay();
       }, this.onClickCancelFullScreenButtonHandle = () => {
         this.fullscreenStatus = false, this.media.requestCancelFullscreen(), this.ctx.eventHub.emit(Gy.fullscreenChange, { targetId: this.targetId, state: false }), this.delayHide();
       }, this.onFullScreenChange = (t3) => {
@@ -31319,6 +31319,9 @@ void main(void){
     addPlayCallBack(t2) {
       this.playCallBackList.push(t2);
     }
+    fullscreenPlay() {
+      this.fullscreenStatus = true, this.ctx.mode !== "interactive" && this.media.requestFullscreen(), this.ctx.mode !== "local" && this.ctx.eventHub.emit(Gy.fullscreenChange, { targetId: this.targetId, state: true }), this.delayHide();
+    }
     changeFullScreenState(t2, e2, i2) {
       i2 === this.ctx.slideIndex && (t2 && this.targetId === e2 ? this.fullscreenStatus = t2 : this.fullscreenStatus = false, this.fullscreenStatus ? (this.fullScreenButton.style.display = "none", this.exitFullScreenButton.style.display = "block") : (this.fullScreenButton.style.display = "block", this.exitFullScreenButton.style.display = "none"), this.setControllerPosition());
     }
@@ -31499,8 +31502,8 @@ void main(void){
         const e2 = this.videoElement;
         e2 && e2.videoWidth <= 0 || (Hy.RtcAudioClazz ? (this.videoElement && (this.videoElement.volume = 0, this.videoElement.muted = true), this.rtcAudio.once("play", () => {
           var t3;
-          (t3 = this.videoElement) === null || t3 === void 0 || t3.play();
-        }), this.rtcAudio.play()) : yield (t2 = this.videoElement) === null || t2 === void 0 ? void 0 : t2.play());
+          (t3 = this.videoElement) === null || t3 === void 0 || t3.play(), this.fullscreen && this.controller.fullscreenPlay();
+        }), this.rtcAudio.play()) : (yield (t2 = this.videoElement) === null || t2 === void 0 ? void 0 : t2.play(), this.fullscreen && this.controller.fullscreenPlay()));
       });
     }
     load() {
@@ -31567,7 +31570,7 @@ void main(void){
   };
   class p_ extends Za.a {
     constructor(t2) {
-      super(), this.type = "audio", this.isPlaying = false, this.isGlobalPause = false, this.fullscreen = false, this.updateVolume = (t3) => {
+      super(), this.type = "audio", this.isPlaying = false, this.isGlobalPause = false, this.updateVolume = (t3) => {
         this.audioPlayer.volume(t3);
       }, this.id = t2.id;
       let e2 = t2.audio.src;
@@ -33616,7 +33619,7 @@ void main(void){
   const ky = { randomBar: "RandomLines", circle: "Shape", ripple: "Ripples", wipe: "Erase", dissolve: "Dissolve", morph: "Smooth", fade: "FadeInOut", push: "Push", split: "Separation", reveal: "Display", pull: "Uncover", cover: "Cover", flash: "Flash", checker: "Checkerboard", blinds: "WindowShades", curtains: "Curtain", fallOver: "Fall", drape: "Suspension", wheel: "Clock", comb: "Combing", warp: "Scale", peelOff: "PeelOff", flip: "Flip", gallery: "Gallery", switch: "Switch", prism: "Prism", doors: "Doors" }, Gy = { mainSeqStepChange: "mainSeqStepChange", mainSeqStateChange: "mainSeqStateChange", interactiveSeqStateChange: "interactiveSeqStateChange", interactiveSeqAction: "interactiveSeqAction", mainSeqStepStart: "mainSeqStepStart", mainSeqStepEnd: "mainSeqStepEnd", slideChange: "slideChange", renderStart: "renderStart", renderEnd: "renderEnd", hyperlinkTrigger: "hyperlinkTrigger", animateStart: "animateStart", animateEnd: "animateEnd", mediaSeek: "mediaSeek", mediaPlay: "mediaPlay", mediaPause: "mediaPause", mediaStop: "mediaStop", requestNextSlide: "requestNextSlide", requestPrevSlide: "requestPrevSlide", requestGotoSlide: "requestGotoSlide", userInput: "userInput", fullscreenChange: "fullscreenChange", changeLocalFullscreenState: "changeLocalFullscreenState" };
   class Hy extends Za.a {
     constructor(t2, e2 = {}) {
-      super(), this.errorChannel = new Za.a(), this.transactionPlayer = null, this.isForward = true, this.drawCall = 0, this.scale = 1, this._isPaused = false, this.maxResolution = new Lh.g(0, 0), this.isNVIDIA = false, this.fps = new bm(), this.designWidth = 0, this.designHeight = 0, this.currentIndex = 0, this.slideCount = 0, this.runtime = { drawCall: 0, fps: 0 }, this.globalEventHub = new Za.a(), this.globalVideoSprite = new ep(), this.onMousemoveTimeout = null, this.cacheFunctionMap = /* @__PURE__ */ new Map(), this.isPlayerPaused = () => this._isPaused, this.onWebGLLost = () => {
+      super(), this.errorChannel = new Za.a(), this.transactionPlayer = null, this.isForward = true, this.drawCall = 0, this.scale = 1, this._isPaused = false, this.maxResolution = new Lh.g(0, 0), this.isNVIDIA = false, this.fps = new bm(), this.designWidth = 0, this.designHeight = 0, this.currentIndex = 0, this.slideCount = 0, this.runtime = { drawCall: 0, fps: 0 }, this.globalEventHub = new Za.a(), this.globalVideoBackground = new Jd(), this.globalVideoSprite = new ep(), this.onMousemoveTimeout = null, this.cacheFunctionMap = /* @__PURE__ */ new Map(), this.isPlayerPaused = () => this._isPaused, this.onWebGLLost = () => {
         this.errorChannel.emit("error", new Tm(gm.CanvasCrash, "webgl context lost."));
       }, this.fullscreenOnMousemove = ({ index: t3, targetId: e3 }) => {
         this.globalEventHub.emit("controllerShowStatusChange", { slideIndex: t3, targetId: e3, status: true }), this.onMousemoveTimeout && clearTimeout(this.onMousemoveTimeout), this.onMousemoveTimeout = setTimeout(() => {
@@ -33624,31 +33627,42 @@ void main(void){
         }, s_.hoverHiddeDelay);
       }, this.fullscreenOnMouseleave = ({ index: t3, targetId: e3 }) => {
         this.globalEventHub.emit("controllerShowStatusChange", { slideIndex: t3, targetId: e3, status: false });
+      }, this.calculateFullscreenVideoPosition = (t3) => {
+        const { width: e3, height: i3 } = t3, { designWidth: n3, designHeight: r2 } = this, o2 = Math.min(n3 / e3, r2 / i3);
+        return { x: (n3 - e3 * o2) / 2, y: (r2 - i3 * o2) / 2, width: e3 * o2, height: i3 * o2 };
       }, this.onRequestFullscreenVideo = (t3) => {
         const { texture: e3, index: i3, targetId: n3 } = t3;
-        if (i3 === this.currentIndex)
-          if (this.onRequestCancelFullscreenVideo(), this.globalVideoSprite.texture = e3, this.globalVideoSprite.width = this.designWidth, this.globalVideoSprite.height = this.designHeight, this.globalVideoSprite.interactive = true, this.app.stage.addChild(this.globalVideoSprite), this.globalEventHub.emit("onFullscreenChange", { status: true, targetId: n3, slideIndex: this.currentIndex }), n_.isDesktop()) {
-            const t4 = { handleEvent: () => {
-              this.fullscreenOnMouseleave({ index: i3, targetId: n3 });
-            } };
-            this.app.view.addEventListener("mouseout", t4, false);
-            const e4 = { handleEvent: () => {
-              this.globalEventHub.emit("controllerShowStatusChange", { slideIndex: i3, targetId: n3, status: true });
-            } };
-            this.app.view.addEventListener("mouseover", e4, false);
-            const r2 = { handleEvent: () => {
-              this.fullscreenOnMousemove({ index: i3, targetId: n3 });
-            } };
-            this.app.view.addEventListener("mousemove", r2, false), (this.cacheFunctionMap.has("move") || this.cacheFunctionMap.has("out") || this.cacheFunctionMap.has("over")) && this.clearFullscreenEventListenersWithAppView(), this.cacheFunctionMap.set("over", e4), this.cacheFunctionMap.set("move", r2), this.cacheFunctionMap.set("out", t4);
-          } else {
-            const t4 = { handleEvent: () => {
-              this.fullscreenOnMousemove({ index: i3, targetId: n3 });
-            } };
-            this.app.view.addEventListener("touchstart", t4, false), this.cacheFunctionMap.has("touch") && this.clearFullscreenEventListenersWithAppView(), this.cacheFunctionMap.set("touch", t4);
-          }
+        if (i3 !== this.currentIndex)
+          return void e3.destroy(false);
+        this.onRequestCancelFullscreenVideo(), this.globalVideoBackground.width = this.designWidth, this.globalVideoBackground.height = this.designHeight, this.globalVideoBackground.beginFill(0, 1), this.globalVideoBackground.drawRect(0, 0, this.designWidth, this.designHeight), this.globalVideoBackground.endFill(), this.globalVideoBackground.interactive = true, this.app.stage.addChild(this.globalVideoBackground);
+        const { x: r2, y: o2, width: s2, height: a2 } = this.calculateFullscreenVideoPosition(e3);
+        this.globalVideoSprite.texture = e3, this.globalVideoSprite.width = s2, this.globalVideoSprite.height = a2, this.globalVideoSprite.position.x = r2, this.globalVideoSprite.position.y = o2, this.globalVideoBackground.addChild(this.globalVideoSprite), this.globalEventHub.emit("onFullscreenChange", { status: true, targetId: n3, slideIndex: this.currentIndex }), this.clearFullscreenEventListenersWithAppView();
+        const l2 = { handleEvent: () => {
+          var t4;
+          (t4 = this.currentStage) === null || t4 === void 0 || t4.ctx.eventHub.emit(Gy.userInput);
+        } };
+        if (this.app.view.addEventListener("pointerdown", l2, false), this.cacheFunctionMap.set("pointerdown", l2), n_.isDesktop()) {
+          const t4 = { handleEvent: () => {
+            this.fullscreenOnMouseleave({ index: i3, targetId: n3 });
+          } };
+          this.app.view.addEventListener("mouseout", t4, false);
+          const e4 = { handleEvent: () => {
+            this.globalEventHub.emit("controllerShowStatusChange", { slideIndex: i3, targetId: n3, status: true });
+          } };
+          this.app.view.addEventListener("mouseover", e4, false);
+          const r3 = { handleEvent: () => {
+            this.fullscreenOnMousemove({ index: i3, targetId: n3 });
+          } };
+          this.app.view.addEventListener("mousemove", r3, false), this.cacheFunctionMap.set("mouseover", e4), this.cacheFunctionMap.set("mousemove", r3), this.cacheFunctionMap.set("mouseout", t4);
+        } else {
+          const t4 = { handleEvent: () => {
+            this.fullscreenOnMousemove({ index: i3, targetId: n3 });
+          } };
+          this.app.view.addEventListener("touchstart", t4, false), this.cacheFunctionMap.set("touchstart", t4);
+        }
       }, this.onRequestCancelFullscreenVideo = (t3 = false) => {
         var e3, i3;
-        this.globalVideoSprite.texture.destroy(false), this.app.stage.removeChild(this.globalVideoSprite), this.globalEventHub.emit("onFullscreenChange", { status: false, slideIndex: this.currentIndex, targetId: (e3 = this.currentStage) === null || e3 === void 0 ? void 0 : e3.ctx.latestChangeFullscreenTargetId }), this.clearFullscreenEventListenersWithAppView(), t3 && this.emit(Gy.changeLocalFullscreenState, { status: false, slideIndex: this.currentIndex, targetId: (i3 = this.currentStage) === null || i3 === void 0 ? void 0 : i3.ctx.latestChangeFullscreenTargetId });
+        this.globalVideoSprite.texture.destroy(false), this.globalVideoBackground.removeChild(this.globalVideoSprite), this.app.stage.removeChild(this.globalVideoBackground), this.globalEventHub.emit("onFullscreenChange", { status: false, slideIndex: this.currentIndex, targetId: (e3 = this.currentStage) === null || e3 === void 0 ? void 0 : e3.ctx.latestChangeFullscreenTargetId }), this.clearFullscreenEventListenersWithAppView(), t3 && this.emit(Gy.changeLocalFullscreenState, { status: false, slideIndex: this.currentIndex, targetId: (i3 = this.currentStage) === null || i3 === void 0 ? void 0 : i3.ctx.latestChangeFullscreenTargetId });
       }, this.logger = t2.logger, this.mode = t2.mode, this.volumeAdjuster = t2.volumeAdjuster, this.localStorage = new Ly(this.logger), this.cachedExtract = new Fy(this.localStorage), this.config = { minFPS: $a()(e2.minFPS) ? 30 : e2.minFPS, maxFPS: $a()(e2.maxFPS) ? 40 : e2.maxFPS, resolution: $a()(e2.resolution) ? 1 : e2.resolution, autoFPS: !$a()(e2.autoFPS) && e2.autoFPS, autoResolution: !$a()(e2.autoResolution) && e2.autoResolution, transactionBgColor: $a()(e2.transactionBgColor) ? 0 : e2.transactionBgColor, maxResolutionLevel: this.getMaxResolution(e2.maxResolutionLevel), forceCanvas: !$a()(e2.forceCanvas) && e2.forceCanvas, enableNvidiaDetect: !$a()(e2.enableNvidiaDetect) && e2.enableNvidiaDetect }, this.updateMaxResolutionLevel(this.config.maxResolutionLevel), this.loader = new Lm(this.localStorage, t2.useLocalCache, this.logger, t2.resourceTimeout, t2.loadDelegate);
       const i2 = Ph.isWebGLSupported();
       this.app = new Xh({ antialias: true, autoDensity: false, backgroundColor: 16777215, forceCanvas: this.config.forceCanvas || !i2 }), this.updateConfig(this.config), this.app.ticker.maxFPS = 60, this.app.ticker.minFPS = this.config.minFPS, this.app.ticker.maxFPS = this.config.maxFPS, this.app.view.style.zIndex = "1", this.app.stage.sortableChildren = true;
@@ -33948,7 +33962,9 @@ void main(void){
       });
     }
     clearFullscreenEventListenersWithAppView() {
-      this.cacheFunctionMap.has("move") && (this.app.view.removeEventListener("mousemove", this.cacheFunctionMap.get("move"), false), this.cacheFunctionMap.delete("move")), this.cacheFunctionMap.has("out") && (this.app.view.removeEventListener("mouseout", this.cacheFunctionMap.get("out"), false), this.cacheFunctionMap.delete("out")), this.cacheFunctionMap.has("over") && (this.app.view.removeEventListener("mouseover", this.cacheFunctionMap.get("over"), false), this.cacheFunctionMap.delete("over")), this.cacheFunctionMap.has("touch") && (this.app.view.removeEventListener("touchstart", this.cacheFunctionMap.get("touch"), false), this.cacheFunctionMap.delete("touch"));
+      ["mousemove", "mouseout", "mouseover", "touchstart", "pointerdown"].forEach((t2) => {
+        this.cacheFunctionMap.has(t2) && (this.app.view.removeEventListener(t2, this.cacheFunctionMap.get(t2), false), this.cacheFunctionMap.delete(t2));
+      });
     }
     syncFullscreenVideoState(t2) {
       this.globalEventHub.emit("syncFullscreenVideoState", t2);
@@ -35669,7 +35685,7 @@ void main(void){
   }
   var lT = { 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" }, hT = { taskId: "", url: "", currentSlideIndex: -1, mainSeqStep: -1, mainSeqState: null, mediaState: /* @__PURE__ */ Object.create(null), interactiveSeqState: /* @__PURE__ */ Object.create(null) }, uT = "";
   try {
-    uT = "0.10.3-beta.2";
+    uT = "0.10.3-beta.4";
   } catch (t2) {
     uT = "dev";
   }
@@ -38739,7 +38755,7 @@ class SlidePreviewer {
   }
 }
 const usePlugin = /* @__PURE__ */ Slide.Slide.usePlugin.bind(Slide.Slide);
-const version = "0.2.31-beta.3";
+const version = "0.2.31";
 const SlideApp = {
   kind: "Slide",
   setup(context) {