saltfish 0.3.31 → 0.3.34

package/dist/saltfish-playlist-player.es.js

@@ -903,8 +903,8 @@ const playerStateMachineConfig = {
         "TRANSITION_TO_STEP": { target: "playing" },
         "MINIMIZE": { target: "minimized" }
       },
-      entry: ["logStateEntry", "startMutedLoopedVideo", "hideVideoControls", "showPlayButton", "enablePlayButtonProminent"],
-      exit: ["disablePlayButtonProminent", "showVideoControls"]
+      entry: ["logStateEntry", "enterCompactMode", "startMutedLoopedVideo", "hideVideoControls", "showPlayButton", "enablePlayButtonProminent"],
+      exit: ["disablePlayButtonProminent", "showVideoControls", "exitCompactMode"]
     },
     "idleMode": {
       on: {
@@ -913,7 +913,7 @@ const playerStateMachineConfig = {
         "MINIMIZE": { target: "minimized" }
       },
       entry: ["logStateEntry", "startIdleModeVideo", "hideVideoControls", "showPlayButton", "enablePlayButtonProminent"],
-      exit: ["disablePlayButtonProminent", "showVideoControls"]
+      exit: ["disablePlayButtonProminent", "showVideoControls", "exitCompactMode"]
     },
     "error": {
       on: {
@@ -2732,7 +2732,7 @@ class PlaylistOrchestrator {
           { component: "PlaylistOrchestrator", method: "startPlaylist", playlistId }
         );
       }
-      const isPlaylistRunning = store.manifest && (store.currentState === "playing" || store.currentState === "paused" || store.currentState === "loading" || store.currentState === "waitingForInteraction" || store.currentState === "autoplayBlocked" || store.currentState === "minimized");
+      const isPlaylistRunning = store.manifest && (store.currentState === "playing" || store.currentState === "paused" || store.currentState === "loading" || store.currentState === "waitingForInteraction" || store.currentState === "autoplayBlocked" || store.currentState === "minimized" || store.currentState === "idleMode");
       if (isPlaylistRunning) {
         log("PlaylistOrchestrator: Starting new playlist while another is running, resetting state");
         if (this.managerOrchestrator) {
@@ -2843,15 +2843,15 @@ class PlaylistOrchestrator {
           this.managers.cursorManager.setColor(updatedStore.manifest.cursorColor);
         }
         const isTriggeredAutomatically = finalOptions._triggeredByTriggerManager === true;
-        const isFirstStep = updatedStore.currentStepId === ((_e = updatedStore.manifest.steps[0]) == null ? void 0 : _e.id);
-        if (updatedStore.manifest.compactFirstStep && isFirstStep && isTriggeredAutomatically) {
-          const playerElement = this.managers.uiManager.getPlayerElement();
-          playerElement == null ? void 0 : playerElement.classList.add("sf-player--compact");
-          if (updatedStore.manifest.compactLabel) {
-            this.managers.uiManager.showCompactLabel(updatedStore.manifest.compactLabel);
-          }
-        }
         if (updatedStore.manifest.idleMode && isTriggeredAutomatically) {
+          const isFirstStep = updatedStore.currentStepId === ((_e = updatedStore.manifest.steps[0]) == null ? void 0 : _e.id);
+          if (updatedStore.manifest.compactFirstStep && isFirstStep) {
+            const playerElement = this.managers.uiManager.getPlayerElement();
+            playerElement == null ? void 0 : playerElement.classList.add("sf-player--compact");
+            if (updatedStore.manifest.compactLabel) {
+              this.managers.uiManager.showCompactLabel(updatedStore.manifest.compactLabel);
+            }
+          }
           store.setIdleMode();
         } else {
           store.play();
@@ -2912,6 +2912,9 @@ class StateMachineActionHandler {
   constructor(managers) {
     __publicField(this, "managers");
     __publicField(this, "destroyCallback", null);
+    __publicField(this, "cursorAnimationListener", null);
+    __publicField(this, "cursorAnimationVideoElement", null);
+    __publicField(this, "cursorAnimationStepId", null);
     this.managers = managers;
   }
   /**
@@ -2971,6 +2974,12 @@ class StateMachineActionHandler {
       disablePlayButtonProminent: () => {
         this.handleDisablePlayButtonProminent();
       },
+      enterCompactMode: () => {
+        this.handleEnterCompactMode();
+      },
+      exitCompactMode: () => {
+        this.handleExitCompactMode();
+      },
       triggerPlaylistDismissed: () => {
         this.handleTriggerPlaylistDismissed();
       },
@@ -3044,6 +3053,87 @@ class StateMachineActionHandler {
     return null;
   }
   destroy() {
+    this.cleanupCursorAnimationListener();
+  }
+  /**
+   * Cleans up the active cursor animation time listener
+   * @param stepId - Optional step ID to verify we're cleaning up the right listener
+   */
+  cleanupCursorAnimationListener(stepId) {
+    if (stepId && this.cursorAnimationStepId && stepId !== this.cursorAnimationStepId) {
+      log(`StateMachineActionHandler: Skipping cleanup - stepId mismatch (requested: ${stepId}, current: ${this.cursorAnimationStepId})`);
+      return;
+    }
+    if (this.cursorAnimationListener && this.cursorAnimationVideoElement) {
+      this.cursorAnimationVideoElement.removeEventListener("timeupdate", this.cursorAnimationListener);
+      this.cursorAnimationListener = null;
+      this.cursorAnimationVideoElement = null;
+      this.cursorAnimationStepId = null;
+    }
+  }
+  /**
+   * Schedules a cursor animation to run either immediately or at a specific video time
+   * Note: Works for both video and audio-only steps (audio files use the same video element)
+   */
+  scheduleCursorAnimation(animation, stepId) {
+    this.cleanupCursorAnimationListener();
+    let showAtSeconds = animation.showAtSeconds ?? 0;
+    if (typeof showAtSeconds !== "number" || !isFinite(showAtSeconds)) {
+      showAtSeconds = 0;
+    }
+    if (showAtSeconds < 0) {
+      showAtSeconds = 0;
+    }
+    if (showAtSeconds <= 0) {
+      this.managers.cursorManager.animate(animation);
+    } else {
+      const videoElement = this.managers.videoManager.getVideoElement();
+      if (!videoElement) {
+        return;
+      }
+      let animationTriggered = false;
+      let warningLogged = false;
+      const timeUpdateHandler = () => {
+        if (animationTriggered) {
+          return;
+        }
+        const currentTime = videoElement.currentTime;
+        const duration = videoElement.duration;
+        if (duration && !isNaN(duration) && showAtSeconds > duration && !warningLogged) {
+          warningLogged = true;
+          animationTriggered = true;
+          this.cleanupCursorAnimationListener();
+          this.managers.cursorManager.animate(animation);
+          return;
+        }
+        if (currentTime >= showAtSeconds) {
+          animationTriggered = true;
+          this.cleanupCursorAnimationListener();
+          this.managers.cursorManager.animate(animation);
+        }
+      };
+      const endedHandler = () => {
+        if (!animationTriggered) {
+          const store = getSaltfishStore();
+          if (store.currentStepId !== stepId) {
+            log(`StateMachineActionHandler: Video ended but step changed (was ${stepId}, now ${store.currentStepId}). Not triggering cursor animation.`);
+            this.cleanupCursorAnimationListener(stepId);
+            return;
+          }
+          videoElement.duration;
+          animationTriggered = true;
+          this.managers.cursorManager.animate(animation);
+          this.cleanupCursorAnimationListener();
+        }
+      };
+      this.cursorAnimationListener = () => {
+        timeUpdateHandler();
+      };
+      this.cursorAnimationVideoElement = videoElement;
+      this.cursorAnimationStepId = stepId;
+      videoElement.addEventListener("timeupdate", this.cursorAnimationListener);
+      videoElement.addEventListener("ended", endedHandler, { once: true });
+    }
   }
   /**
    * Validates URL requirement for a specific step with retry logic
@@ -3110,9 +3200,6 @@ class StateMachineActionHandler {
       }
     }
     this.managers.uiManager.updatePosition();
-    const playerElement = this.managers.uiManager.getPlayerElement();
-    playerElement == null ? void 0 : playerElement.classList.remove("sf-player--compact");
-    this.managers.uiManager.hideCompactLabel();
     this.managers.uiManager.showPlayer();
     const videoUrl = this.getVideoUrl(currentStep);
     const isAudioFallback = this.isUsingAudioFallback(currentStep);
@@ -3134,17 +3221,7 @@ class StateMachineActionHandler {
       if (currentStep.buttons) {
         this.managers.interactionManager.createButtons(currentStep.buttons);
       }
-      log(`StateMachineActionHandler: Processing cursor animations for step ${currentStep.id}`);
       log(`StateMachineActionHandler: Step has cursor animations: ${!!(currentStep.cursorAnimations && currentStep.cursorAnimations.length > 0)}`);
-      if (currentStep.cursorAnimations && currentStep.cursorAnimations.length > 0) {
-        log(`StateMachineActionHandler: Setting cursor visibility to true for step ${currentStep.id}`);
-        this.managers.cursorManager.setShouldShowCursor(true);
-        log(`StateMachineActionHandler: Starting cursor animation for step ${currentStep.id} with target: ${currentStep.cursorAnimations[0].targetSelector || "no target"}`);
-        this.managers.cursorManager.animate(currentStep.cursorAnimations[0]);
-      } else {
-        log(`StateMachineActionHandler: Setting cursor visibility to false for step ${currentStep.id} - step has no cursor animations`);
-        this.managers.cursorManager.setShouldShowCursor(false);
-      }
       const hasSpecialTransitions = currentStep.buttons && currentStep.buttons.length > 0 || currentStep.transitions.some(
         (t) => t.type === "dom-click" || t.type === "url-path" || t.type === "dom-element-visible"
       );
@@ -3233,6 +3310,14 @@ class StateMachineActionHandler {
         log("StateMachineActionHandler: Video loaded successfully, playing");
         this.managers.uiManager.hideError();
         loadTranscriptForStep();
+        if (currentStep.cursorAnimations && currentStep.cursorAnimations.length > 0) {
+          log(`StateMachineActionHandler: Setting cursor visibility and scheduling animation for step ${currentStep.id}`);
+          this.managers.cursorManager.setShouldShowCursor(true);
+          this.scheduleCursorAnimation(currentStep.cursorAnimations[0], currentStep.id);
+        } else {
+          log(`StateMachineActionHandler: Setting cursor visibility to false for step ${currentStep.id} - step has no cursor animations`);
+          this.managers.cursorManager.setShouldShowCursor(false);
+        }
         if (isAudioFallback) {
           this.managers.videoManager.startAudioVisualization();
         } else {
@@ -3378,6 +3463,24 @@ class StateMachineActionHandler {
   handleDisablePlayButtonProminent() {
     this.managers.uiManager.disablePlayButtonProminent();
   }
+  handleEnterCompactMode() {
+    var _a, _b, _c, _d;
+    const store = getSaltfishStore();
+    const isFirstStep = store.manifest && store.currentStepId === ((_a = store.manifest.steps[0]) == null ? void 0 : _a.id);
+    const shouldBeCompact = isFirstStep && ((_b = store.manifest) == null ? void 0 : _b.compactFirstStep) && ((_c = store.playlistOptions) == null ? void 0 : _c._triggeredByTriggerManager);
+    if (shouldBeCompact) {
+      const playerElement = this.managers.uiManager.getPlayerElement();
+      playerElement == null ? void 0 : playerElement.classList.add("sf-player--compact");
+      if ((_d = store.manifest) == null ? void 0 : _d.compactLabel) {
+        this.managers.uiManager.showCompactLabel(store.manifest.compactLabel);
+      }
+    }
+  }
+  handleExitCompactMode() {
+    const playerElement = this.managers.uiManager.getPlayerElement();
+    playerElement == null ? void 0 : playerElement.classList.remove("sf-player--compact");
+    this.managers.uiManager.hideCompactLabel();
+  }
   handleTriggerPlaylistDismissed() {
     const store = getSaltfishStore();
     if (store.manifest && this.managers.eventManager) {
@@ -3655,6 +3758,9 @@ const _ManagerOrchestrator = class _ManagerOrchestrator {
     // Store updater unsubscribe functions
     __publicField(this, "uiUpdaterUnsubscribe", null);
     __publicField(this, "eventUpdaterUnsubscribe", null);
+    __publicField(this, "cursorAnimationListener", null);
+    __publicField(this, "cursorAnimationVideoElement", null);
+    __publicField(this, "cursorAnimationStepId", null);
     // Initialization state
     __publicField(this, "isInitialized", false);
     this.managers = managers;
@@ -3699,6 +3805,86 @@ const _ManagerOrchestrator = class _ManagerOrchestrator {
       stepTimeoutUnsubscribe();
     };
   }
+  /**
+   * Cleans up the active cursor animation time listener
+   * @param stepId - Optional step ID to verify we're cleaning up the right listener
+   */
+  cleanupCursorAnimationListener(stepId) {
+    if (stepId && this.cursorAnimationStepId && stepId !== this.cursorAnimationStepId) {
+      log(`ManagerOrchestrator: Skipping cleanup - stepId mismatch (requested: ${stepId}, current: ${this.cursorAnimationStepId})`);
+      return;
+    }
+    if (this.cursorAnimationListener && this.cursorAnimationVideoElement) {
+      this.cursorAnimationVideoElement.removeEventListener("timeupdate", this.cursorAnimationListener);
+      this.cursorAnimationListener = null;
+      this.cursorAnimationVideoElement = null;
+      this.cursorAnimationStepId = null;
+    }
+  }
+  /**
+   * Schedules a cursor animation to run either immediately or at a specific video time
+   * Note: Works for both video and audio-only steps (audio files use the same video element)
+   */
+  scheduleCursorAnimation(animation, stepId) {
+    this.cleanupCursorAnimationListener();
+    let showAtSeconds = animation.showAtSeconds ?? 0;
+    if (typeof showAtSeconds !== "number" || !isFinite(showAtSeconds)) {
+      showAtSeconds = 0;
+    }
+    if (showAtSeconds < 0) {
+      showAtSeconds = 0;
+    }
+    if (showAtSeconds <= 0) {
+      this.managers.cursorManager.animate(animation);
+    } else {
+      const videoElement = this.managers.videoManager.getVideoElement();
+      if (!videoElement) {
+        return;
+      }
+      let animationTriggered = false;
+      let warningLogged = false;
+      const timeUpdateHandler = () => {
+        if (animationTriggered) {
+          return;
+        }
+        const currentTime = videoElement.currentTime;
+        const duration = videoElement.duration;
+        if (duration && !isNaN(duration) && showAtSeconds > duration && !warningLogged) {
+          warningLogged = true;
+          animationTriggered = true;
+          this.cleanupCursorAnimationListener();
+          this.managers.cursorManager.animate(animation);
+          return;
+        }
+        if (currentTime >= showAtSeconds) {
+          animationTriggered = true;
+          this.cleanupCursorAnimationListener();
+          this.managers.cursorManager.animate(animation);
+        }
+      };
+      const endedHandler = () => {
+        if (!animationTriggered) {
+          const store = getSaltfishStore();
+          if (store.currentStepId !== stepId) {
+            log(`ManagerOrchestrator: Video ended but step changed (was ${stepId}, now ${store.currentStepId}). Not triggering cursor animation.`);
+            this.cleanupCursorAnimationListener(stepId);
+            return;
+          }
+          videoElement.duration;
+          animationTriggered = true;
+          this.managers.cursorManager.animate(animation);
+          this.cleanupCursorAnimationListener();
+        }
+      };
+      this.cursorAnimationListener = () => {
+        timeUpdateHandler();
+      };
+      this.cursorAnimationVideoElement = videoElement;
+      this.cursorAnimationStepId = stepId;
+      videoElement.addEventListener("timeupdate", this.cursorAnimationListener);
+      videoElement.addEventListener("ended", endedHandler, { once: true });
+    }
+  }
   /**
    * Handle store state changes
    */
@@ -3730,7 +3916,7 @@ const _ManagerOrchestrator = class _ManagerOrchestrator {
       const currentStep = manifest == null ? void 0 : manifest.steps.find((step) => step.id === store.currentStepId);
       if ((currentStep == null ? void 0 : currentStep.cursorAnimations) && currentStep.cursorAnimations.length > 0) {
         this.managers.cursorManager.setShouldShowCursor(true);
-        this.managers.cursorManager.animate(currentStep.cursorAnimations[0]);
+        this.scheduleCursorAnimation(currentStep.cursorAnimations[0], store.currentStepId || "unknown");
       }
     } else if (store.currentState === "completed" || store.currentState === "closing") {
       this.cleanupPlaylist();
@@ -3749,6 +3935,7 @@ const _ManagerOrchestrator = class _ManagerOrchestrator {
    */
   cleanupCurrentPlaylist() {
     try {
+      this.cleanupCursorAnimationListener();
       if (this.eventUpdaterUnsubscribe) {
         this.eventUpdaterUnsubscribe();
         this.eventUpdaterUnsubscribe = null;
@@ -3840,6 +4027,7 @@ const _ManagerOrchestrator = class _ManagerOrchestrator {
         isMinimized: store.isMinimized,
         manifestId: (_a = store.manifest) == null ? void 0 : _a.id
       });
+      this.cleanupCursorAnimationListener();
       if (this.uiUpdaterUnsubscribe) {
         this.uiUpdaterUnsubscribe();
         this.uiUpdaterUnsubscribe = null;
@@ -11584,7 +11772,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.31";
+const version = "0.3.34";
 const packageJson = {
   version
 };