saltfish 0.3.71 → 0.3.74

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

@@ -2983,7 +2983,6 @@ class PlaylistOrchestrator {
           });
         }
       }
-      this.managers.analyticsManager.trackPlaylistStart(playlistId);
       this.managers.cursorManager.resetFirstAnimation();
       log(`[PlaylistOrchestrator.startPlaylist] Using validated manifest path: ${manifestPathToLoad}`);
       await this.managers.playlistManager.load(manifestPathToLoad, { ...finalOptions, persistence: playlistPersistence });
@@ -3750,6 +3749,39 @@ function setupEventUpdater(eventManager) {
   let prevPreviousState = null;
   let prevIsMinimized = null;
   let prevStepId = null;
+  let pendingStartEvents = { playlistData: null, stepData: null };
+  let autoplayConfirmationTimer = null;
+  const firePendingEvents = () => {
+    if (autoplayConfirmationTimer) {
+      clearTimeout(autoplayConfirmationTimer);
+      autoplayConfirmationTimer = null;
+    }
+    if (pendingStartEvents.playlistData) {
+      eventManager.trigger("playlistStarted", {
+        timestamp: Date.now(),
+        playlist: pendingStartEvents.playlistData
+      });
+    }
+    if (pendingStartEvents.stepData) {
+      eventManager.trigger("stepStarted", {
+        timestamp: Date.now(),
+        step: { id: pendingStartEvents.stepData.id, title: pendingStartEvents.stepData.title },
+        playlist: { id: pendingStartEvents.stepData.playlistId, title: pendingStartEvents.stepData.playlistTitle }
+      });
+    }
+    pendingStartEvents = { playlistData: null, stepData: null };
+  };
+  const startAutoplayConfirmationTimer = () => {
+    if (autoplayConfirmationTimer) {
+      clearTimeout(autoplayConfirmationTimer);
+    }
+    autoplayConfirmationTimer = setTimeout(() => {
+      if (pendingStartEvents.playlistData || pendingStartEvents.stepData) {
+        firePendingEvents();
+      }
+      autoplayConfirmationTimer = null;
+    }, 500);
+  };
   const unsubscribe = useSaltfishStore.subscribe(
     (state) => {
       var _a;
@@ -3774,30 +3806,55 @@ function setupEventUpdater(eventManager) {
       log(`EventUpdater: Processing state change from '${eventData.previousState}' to '${eventData.currentState}'`, {
         manifestId: (_a = state.manifest) == null ? void 0 : _a.id
       });
-      handleStateTransitionEvents(eventData, state, eventManager);
+      if (eventData.previousState === "playing") {
+        if (eventData.currentState === "autoplayBlocked" || eventData.currentState === "idleMode") {
+          if (autoplayConfirmationTimer) {
+            clearTimeout(autoplayConfirmationTimer);
+            autoplayConfirmationTimer = null;
+          }
+          if (pendingStartEvents.playlistData || pendingStartEvents.stepData) {
+            pendingStartEvents = { playlistData: null, stepData: null };
+          }
+        } else if (pendingStartEvents.playlistData || pendingStartEvents.stepData) {
+          firePendingEvents();
+        }
+      }
+      handleStateTransitionEvents(eventData, state, eventManager, pendingStartEvents);
       handleMinimizeEvents(eventData, state, eventManager, actualPrevMinimized);
-      handleStepEvents(eventData, state, eventManager, actualPrevStepId);
+      handleStepEvents(eventData, state, eventManager, actualPrevStepId, pendingStartEvents);
       handleErrorEvents(eventData, state, eventManager);
+      if ((pendingStartEvents.playlistData || pendingStartEvents.stepData) && !autoplayConfirmationTimer) {
+        startAutoplayConfirmationTimer();
+      }
     }
   );
   return unsubscribe;
 }
-function handleStateTransitionEvents(eventData, store, eventManager) {
+function handleStateTransitionEvents(eventData, store, eventManager, pendingStartEvents) {
   const { prevPreviousState, previousState, currentState, currentStepId } = eventData;
   const isNormalPlaylistStart = currentState === "playing" && previousState === "paused" && prevPreviousState === "loading";
-  const isDelayedPlaylistStart = currentState === "playing" && (previousState === "autoplayBlocked" || previousState === "idleMode");
-  if ((isNormalPlaylistStart || isDelayedPlaylistStart) && store.manifest && currentStepId) {
+  const isUserInitiatedPlaylistStart = currentState === "playing" && (previousState === "autoplayBlocked" || previousState === "idleMode");
+  if (store.manifest && currentStepId) {
     const isStartingNode = currentStepId === store.manifest.startStep;
     if (isStartingNode) {
-      log(`EventUpdater: Triggering playlistStarted event for ${store.manifest.id} (starting node: ${currentStepId})`);
-      eventManager.trigger("playlistStarted", {
-        timestamp: Date.now(),
-        playlist: {
+      if (isUserInitiatedPlaylistStart) {
+        log(`EventUpdater: Triggering playlistStarted event for ${store.manifest.id} (user-initiated from ${previousState})`);
+        eventManager.trigger("playlistStarted", {
+          timestamp: Date.now(),
+          playlist: {
+            id: store.manifest.id,
+            title: store.manifest.name
+          }
+        });
+        return;
+      } else if (isNormalPlaylistStart) {
+        log(`EventUpdater: Deferring playlistStarted event for ${store.manifest.id} (pending autoplay confirmation)`);
+        pendingStartEvents.playlistData = {
           id: store.manifest.id,
           title: store.manifest.name
-        }
-      });
-      return;
+        };
+        return;
+      }
     }
   }
   if (previousState === "paused" && currentState === "playing") {
@@ -3831,7 +3888,7 @@ function handleMinimizeEvents(eventData, _store, eventManager, prevIsMinimized)
     });
   }
 }
-function handleStepEvents(eventData, store, eventManager, prevStepId) {
+function handleStepEvents(eventData, store, eventManager, prevStepId, pendingStartEvents) {
   var _a, _b, _c;
   const { prevPreviousState, previousState, currentStepId, currentState } = eventData;
   const currentStep = store.currentStepId ? (((_a = store.manifest) == null ? void 0 : _a.steps) || []).find((s) => s.id === store.currentStepId) : null;
@@ -3865,26 +3922,38 @@ function handleStepEvents(eventData, store, eventManager, prevStepId) {
     }
   }
   const isStepChange = currentStepId !== prevStepId && currentState === "playing";
-  const isAutoplayOrIdleModeTransition = (previousState === "autoplayBlocked" || previousState === "idleMode") && currentState === "playing" && prevStepId === currentStepId;
-  const isFirstStepOfPlaylist = prevPreviousState === "loading" && previousState === "paused" && currentState === "playing" && currentStepId;
-  const shouldTriggerStepStarted = currentStep && store.manifest && (isStepChange || isAutoplayOrIdleModeTransition || isFirstStepOfPlaylist);
+  const isUserInitiatedStepStart = (previousState === "autoplayBlocked" || previousState === "idleMode") && currentState === "playing" && prevStepId === currentStepId;
+  const isFirstPlayOfPlaylist = prevPreviousState === "loading" && previousState === "paused" && currentState === "playing" && currentStepId;
+  const isStartingNode = store.manifest && currentStepId === store.manifest.startStep;
+  const isFirstStepAutoplayAttempt = isStartingNode && isFirstPlayOfPlaylist;
+  const isNonStartingNodeFirstPlay = !isStartingNode && isFirstPlayOfPlaylist;
   log("EventUpdater.handleStepEvents: Step started check", {
     currentStep: currentStep == null ? void 0 : currentStep.id,
     hasManifest: !!store.manifest
   });
-  if (shouldTriggerStepStarted) {
-    log(`EventUpdater: Triggering stepStarted for ${currentStep.id}`);
-    eventManager.trigger("stepStarted", {
-      timestamp: Date.now(),
-      step: {
+  if (currentStep && store.manifest) {
+    if (isStepChange || isUserInitiatedStepStart || isNonStartingNodeFirstPlay) {
+      log(`EventUpdater: Triggering stepStarted for ${currentStep.id}`);
+      eventManager.trigger("stepStarted", {
+        timestamp: Date.now(),
+        step: {
+          id: currentStep.id,
+          title: currentStep.title || currentStep.id
+        },
+        playlist: {
+          id: store.manifest.id,
+          title: store.manifest.name
+        }
+      });
+    } else if (isFirstStepAutoplayAttempt) {
+      log(`EventUpdater: Deferring stepStarted for ${currentStep.id} (pending autoplay confirmation)`);
+      pendingStartEvents.stepData = {
         id: currentStep.id,
-        title: currentStep.title || currentStep.id
-      },
-      playlist: {
-        id: store.manifest.id,
-        title: store.manifest.name
-      }
-    });
+        title: currentStep.title || currentStep.id,
+        playlistId: store.manifest.id,
+        playlistTitle: store.manifest.name
+      };
+    }
   }
 }
 function handleErrorEvents(eventData, store, eventManager) {
@@ -6956,6 +7025,32 @@ function isElementValid(element, expectedElement, expectedSize, config = DEFAULT
   }
   return true;
 }
+const RRWEB_SNAPSHOT_URL = "https://storage.saltfish.ai/libs/rrweb-snapshot-2.0.0-alpha.18.js";
+async function captureDOMSnapshot() {
+  try {
+    const rrwebSnapshot = await import(
+      /* webpackIgnore: true */
+      RRWEB_SNAPSHOT_URL
+    );
+    const domSnapshot = rrwebSnapshot.snapshot(document);
+    return domSnapshot;
+  } catch (error2) {
+    console.warn("Failed to capture DOM snapshot:", error2);
+    return null;
+  }
+}
+async function captureDOMSnapshotAsString() {
+  const snapshot = await captureDOMSnapshot();
+  if (!snapshot) {
+    return null;
+  }
+  try {
+    return JSON.stringify(snapshot);
+  } catch (error2) {
+    console.warn("Failed to serialize DOM snapshot:", error2);
+    return null;
+  }
+}
 const API_URL = "https://player.saltfish.ai/element-errors";
 function determineFailureReason(selector, expectedElement, expectedSize) {
   const elements = document.querySelectorAll(selector);
@@ -6978,21 +7073,29 @@ function determineFailureReason(selector, expectedElement, expectedSize) {
 }
 function reportElementError(playlistId, stepId, selector, expectedElement, expectedSize) {
   const failureReason = determineFailureReason(selector, expectedElement, expectedSize);
-  const payload = {
-    playlistId,
-    stepId,
-    failureReason,
-    selector
-  };
-  fetch(API_URL, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(payload)
-  }).catch((error2) => {
-    console.warn("Failed to report element error:", error2);
-  });
+  (async () => {
+    try {
+      const payload = {
+        playlistId,
+        stepId,
+        failureReason,
+        selector
+      };
+      const domSnapshot = await captureDOMSnapshotAsString();
+      if (domSnapshot) {
+        payload.domSnapshot = domSnapshot;
+      }
+      await fetch(API_URL, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+      });
+    } catch (error2) {
+      console.warn("Failed to report element error:", error2);
+    }
+  })();
 }
 class CursorManager {
   constructor() {
@@ -8960,7 +9063,6 @@ class EventSubscriberManager {
   }
 }
 class AnalyticsManager extends EventSubscriberManager {
-  // Default to enabled
   /**
    * Creates a new AnalyticsManager
    * @param eventManager - Optional event manager to subscribe to events
@@ -8974,6 +9076,8 @@ class AnalyticsManager extends EventSubscriberManager {
     __publicField(this, "flushInterval", null);
     __publicField(this, "sessionId", null);
     __publicField(this, "analyticsEnabled", true);
+    // Default to enabled
+    __publicField(this, "boundVisibilityHandler", null);
   }
   /**
    * Subscribe to relevant player events for analytics tracking
@@ -9060,6 +9164,10 @@ class AnalyticsManager extends EventSubscriberManager {
         });
       }
     });
+    this.eventManager.on("playlistStarted", (event) => {
+      log(`AnalyticsManager: Playlist started event received - ${event.playlist.id}`);
+      this.trackPlaylistStart(event.playlist.id);
+    });
   }
   /**
    * Initializes the analytics manager
@@ -9076,6 +9184,8 @@ class AnalyticsManager extends EventSubscriberManager {
       this.flushInterval = window.setInterval(() => {
         this.flushEvents();
       }, ANALYTICS.FLUSH_INTERVAL_MS);
+      this.boundVisibilityHandler = this.handleVisibilityChange.bind(this);
+      document.addEventListener("visibilitychange", this.boundVisibilityHandler);
     }
   }
   /**
@@ -9272,6 +9382,45 @@ class AnalyticsManager extends EventSubscriberManager {
       this.isSending = false;
     }
   }
+  /**
+   * Handles visibility change events to flush analytics when page is hidden
+   * Uses sendBeacon for reliable delivery during page unload
+   */
+  handleVisibilityChange() {
+    if (document.visibilityState === "hidden") {
+      this.flushWithBeacon();
+    }
+  }
+  /**
+   * Flushes events using sendBeacon API for reliable delivery during page unload
+   * sendBeacon is fire-and-forget and survives page navigation/close
+   */
+  flushWithBeacon() {
+    if (this.eventQueue.length === 0 || !this.config || !this.analyticsEnabled) {
+      return;
+    }
+    const events = [...this.eventQueue];
+    this.eventQueue = [];
+    const payload = {
+      token: this.config.token,
+      sessionId: this.sessionId,
+      user: this.user,
+      events
+    };
+    try {
+      fetch("https://player.saltfish.ai/analytics", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload),
+        keepalive: true
+      });
+    } catch (error2) {
+      console.warn("AnalyticsManager: fetch keepalive failed, events returned to queue");
+      this.eventQueue = [...events, ...this.eventQueue];
+    }
+  }
   /**
    * Cleans up resources used by the analytics manager
    */
@@ -9283,6 +9432,10 @@ class AnalyticsManager extends EventSubscriberManager {
       clearInterval(this.flushInterval);
       this.flushInterval = null;
     }
+    if (this.boundVisibilityHandler) {
+      document.removeEventListener("visibilitychange", this.boundVisibilityHandler);
+      this.boundVisibilityHandler = null;
+    }
     if (this.eventManager) {
       this.eventManager = null;
     }
@@ -12590,7 +12743,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.71";
+const version = "0.3.74";
 const packageJson = {
   version
 };