saltfish 0.3.18 → 0.3.19

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

@@ -2843,6 +2843,9 @@ class PlaylistOrchestrator {
         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) {
           store.setIdleMode();
@@ -3105,6 +3108,7 @@ 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);
@@ -3905,6 +3909,7 @@ const componentsTranscriptCss = "/* \n * Transcript component styles for the Sal
 const componentsErrorCss = "/* \n * Error Display component styles for the Saltfish playlist Player\n * Clean and subtle full-widget error overlay\n */\n\n/* Error display overlay - covers full widget */\n.sf-error-display {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: calc(var(--sf-z-index-controls) + 30);\n  border-radius: var(--sf-border-radius-lg);\n  opacity: 0;\n  transition: opacity var(--sf-transition-slow);\n  pointer-events: auto;\n}\n\n/* Error display visible state */\n.sf-error-display--visible {\n  opacity: 1;\n}\n\n/* Error content container */\n.sf-error-display__content {\n  background-color: rgba(20, 20, 20, 0.9);\n  border-radius: var(--sf-border-radius-md);\n  padding: var(--sf-spacing-lg) var(--sf-spacing-xl);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  transform: translateY(8px);\n  transition: transform var(--sf-transition-slow);\n  max-width: 85%;\n  text-align: center;\n}\n\n/* Error content visible animation */\n.sf-error-display--visible .sf-error-display__content {\n  transform: translateY(0);\n}\n\n/* Error message */\n.sf-error-display__message {\n  color: rgba(255, 255, 255, 0.95);\n  font-size: var(--sf-font-size-md);\n  line-height: 1.5;\n  margin: 0;\n  text-align: center;\n  font-weight: 500;\n}\n\n/* Mobile responsive adjustments */\n@media (max-width: 768px) {\n  .sf-error-display__content {\n    padding: var(--sf-spacing-md) var(--sf-spacing-lg);\n    max-width: 90%;\n  }\n\n  .sf-error-display__message {\n    font-size: var(--sf-font-size-sm);\n  }\n}\n\n/* Minimized player state adjustments */\n.sf-player--minimized .sf-error-display__content {\n  padding: var(--sf-spacing-sm) var(--sf-spacing-md);\n  max-width: 80%;\n}\n\n.sf-player--minimized .sf-error-display__message {\n  font-size: var(--sf-font-size-sm);\n  font-weight: 400;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .sf-error-display__content {\n    background-color: rgba(0, 0, 0, 0.95);\n    border: 2px solid rgba(255, 255, 255, 0.3);\n  }\n\n  .sf-error-display__message {\n    color: rgba(255, 255, 255, 0.95);\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .sf-error-display,\n  .sf-error-display__content {\n    transition: none;\n  }\n}";
 const componentsLoadingCss = "/**\n * Loading spinner styles\n */\n\n.sf-loading-spinner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(2px);\n  z-index: 100;\n  border-radius: 12px;\n  opacity: 1 !important; /* Always visible when shown, overrides parent opacity */\n}\n\n.sf-loading-spinner__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 24px;\n}\n\n.sf-loading-spinner__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #000000;\n  opacity: 0.9;\n}\n\n.sf-loading-spinner__icon svg {\n  width: 60px;\n  height: 60px;\n  /* Remove the rotation animation since we now have internal SVG animation */\n}\n\n.sf-loading-spinner__text {\n  color: #333333;\n  font-size: 14px;\n  font-weight: 500;\n  text-align: center;\n  opacity: 0.8;\n  letter-spacing: 0.5px;\n}\n\n/* CSS keyframe animation removed - using SVG animateTransform instead */\n\n/* Responsive adjustments */\n@media (max-width: 480px) {\n  .sf-loading-spinner__content {\n    padding: 20px;\n    gap: 10px;\n  }\n  \n  .sf-loading-spinner__icon svg {\n    width: 50px;\n    height: 50px;\n  }\n  \n  .sf-loading-spinner__text {\n    font-size: 13px;\n  }\n}";
 const componentsCursorCss = "/*\n * Cursor animation component styles for the Saltfish playlist Player\n * CSP-compliant: All styles use CSS classes and CSS custom properties instead of inline styles\n */\n\n/* Base cursor element */\n.sf-cursor {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 36px;\n  height: 36px;\n  z-index: 9999999;\n  pointer-events: none;\n  display: none;\n  will-change: transform;\n  transform: var(--sf-cursor-transform, translate(0, 0));\n  opacity: var(--sf-cursor-opacity, 1);\n}\n\n.sf-cursor--visible {\n  display: block;\n}\n\n/* Selection element */\n.sf-selection {\n  position: fixed;\n  pointer-events: none;\n  display: none;\n  z-index: 9999998;\n  border: 2px solid var(--sf-selection-color, #ff7614);\n  background: var(--sf-selection-bg-color, rgba(255, 118, 20, 0.1));\n  border-radius: 4px;\n  left: var(--sf-selection-left, 0);\n  top: var(--sf-selection-top, 0);\n  width: var(--sf-selection-width, 0);\n  height: var(--sf-selection-height, 0);\n}\n\n.sf-selection--visible {\n  display: block;\n}\n\n/* Flashlight overlay */\n.sf-flashlight-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  z-index: 999997;\n  display: none;\n  background: var(--sf-flashlight-bg, radial-gradient(circle 150px at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.4) 100%));\n  clip-path: var(--sf-flashlight-clip, none);\n}\n\n.sf-flashlight-overlay--visible {\n  display: block;\n}\n";
+const componentsCompactLabelCss = "/**\n * Compact Label Styles\n * Label that appears next to the player when in compact first step mode\n * Position adapts based on player placement (left/right)\n */\n\n.sf-compact-label {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n\n  /* Typography */\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1.4;\n  color: #ffffff;\n\n  /* Visual styling */\n  background: rgba(0, 0, 0, 0.85);\n  backdrop-filter: blur(10px);\n  padding: 10px 16px;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),\n              0 0 0 1px rgba(255, 255, 255, 0.1);\n\n  /* Ensure it doesn't wrap */\n  white-space: nowrap;\n\n  /* Layering */\n  z-index: 10;\n\n  /* Pointer events - will be enabled via JS when clickable */\n  pointer-events: none;\n  user-select: none;\n\n  /* Smooth transitions for hover effects */\n  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\n              box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\n              background 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Position to the LEFT of player (when player is on the right side) */\n.sf-compact-label--left {\n  right: calc(100% + 16px); /* 16px spacing from player edge */\n  animation: sf-compact-label-enter-from-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n}\n\n/* Position to the RIGHT of player (when player is on the left side) */\n.sf-compact-label--right {\n  left: calc(100% + 16px); /* 16px spacing from player edge */\n  animation: sf-compact-label-enter-from-right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n}\n\n/* Entrance animation from LEFT - slide in from left with fade */\n@keyframes sf-compact-label-enter-from-left {\n  0% {\n    opacity: 0;\n    transform: translateY(-50%) translateX(-20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(-50%) translateX(0);\n  }\n}\n\n/* Entrance animation from RIGHT - slide in from right with fade */\n@keyframes sf-compact-label-enter-from-right {\n  0% {\n    opacity: 0;\n    transform: translateY(-50%) translateX(20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(-50%) translateX(0);\n  }\n}\n\n/* Hover effect - only applies when label is clickable (pointer-events: auto) */\n.sf-compact-label--left:hover,\n.sf-compact-label--right:hover {\n  background: rgba(0, 0, 0, 0.95);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),\n              0 0 0 1px rgba(255, 255, 255, 0.2),\n              0 0 25px rgba(255, 255, 255, 0.08);\n}\n\n.sf-compact-label--left:hover {\n  transform: translateY(-50%) translateX(-2px);\n}\n\n.sf-compact-label--right:hover {\n  transform: translateY(-50%) translateX(2px);\n}\n\n/* Active/click state */\n.sf-compact-label--left:active,\n.sf-compact-label--right:active {\n  transform: translateY(-50%) scale(0.98);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .sf-compact-label {\n    font-size: 12px;\n    padding: 8px 12px;\n  }\n\n  .sf-compact-label--left {\n    right: calc(100% + 12px); /* Slightly less spacing on mobile */\n  }\n\n  .sf-compact-label--right {\n    left: calc(100% + 12px); /* Slightly less spacing on mobile */\n  }\n}\n\n/* Very small screens - position below instead of to the side */\n@media (max-width: 480px) {\n  .sf-compact-label--left,\n  .sf-compact-label--right {\n    left: 50%;\n    right: auto;\n    top: calc(100% + 12px);\n    transform: translateX(-50%);\n    animation: sf-compact-label-enter-below 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n  }\n\n  @keyframes sf-compact-label-enter-below {\n    0% {\n      opacity: 0;\n      transform: translateX(-50%) translateY(-10px);\n    }\n    100% {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0);\n    }\n  }\n}\n";
 const animationsTransitionsCss = "/* \n * Transitions and animations for Saltfish playlist Player\n */\n\n/* Fade in animation */\n@keyframes sf-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.sf-fade-in {\n  animation: sf-fade-in 0.3s ease-in-out forwards;\n}\n\n/* Slide in from bottom animation */\n@keyframes sf-slide-in-bottom {\n  from { transform: translateY(100%); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n.sf-slide-in-bottom {\n  animation: sf-slide-in-bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n}\n\n/* Slide in from right animation */\n@keyframes sf-slide-in-right {\n  from { transform: translateX(100%); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}\n\n.sf-slide-in-right {\n  animation: sf-slide-in-right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n}\n\n/* Scale in animation */\n@keyframes sf-scale-in {\n  from { transform: scale(0.8); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.sf-scale-in {\n  animation: sf-scale-in 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n}\n\n/* Scale out animation */\n@keyframes sf-scale-out {\n  from { transform: scale(1); opacity: 1; }\n  to { transform: scale(0.8); opacity: 0; }\n}\n\n.sf-scale-out {\n  animation: sf-scale-out 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;\n} ";
 const getPlayerStyles = () => `
   ${baseResetCss}
@@ -3917,6 +3922,7 @@ const getPlayerStyles = () => `
   ${componentsErrorCss}
   ${componentsLoadingCss}
   ${componentsCursorCss}
+  ${componentsCompactLabelCss}
 
   ${animationsTransitionsCss}
 `;
@@ -10565,6 +10571,7 @@ class UIManager {
     __publicField(this, "playPauseButton", null);
     __publicField(this, "errorDisplay", null);
     __publicField(this, "loadingSpinner", null);
+    __publicField(this, "compactLabel", null);
     // Button management properties (from ButtonManager)
     __publicField(this, "playbackButtonsVisible", false);
     __publicField(this, "playButton", null);
@@ -10952,6 +10959,73 @@ class UIManager {
       }
     });
   }
+  /**
+   * Shows the compact label next to the player with the provided text
+   */
+  showCompactLabel(labelText) {
+    var _a;
+    if (!this.playerRoot || !labelText) {
+      return;
+    }
+    this.hideCompactLabel();
+    const store = useSaltfishStore.getState();
+    let positionToUse = ((_a = store.playlistOptions) == null ? void 0 : _a.position) || "bottom-right";
+    if (store.currentStepId && store.manifest) {
+      const currentStep = store.manifest.steps.find((step) => step.id === store.currentStepId);
+      if (currentStep == null ? void 0 : currentStep.position) {
+        positionToUse = currentStep.position;
+      }
+    }
+    const isPlayerOnRight = positionToUse === "bottom-right";
+    const labelPositionClass = isPlayerOnRight ? "sf-compact-label--left" : "sf-compact-label--right";
+    this.compactLabel = document.createElement("div");
+    this.compactLabel.className = `sf-compact-label ${labelPositionClass}`;
+    this.compactLabel.textContent = labelText;
+    this.compactLabel.style.cursor = "pointer";
+    this.compactLabel.style.pointerEvents = "auto";
+    this.compactLabel.addEventListener("click", (e) => {
+      var _a2;
+      e.stopPropagation();
+      e.preventDefault();
+      const currentStore = useSaltfishStore.getState();
+      if (currentStore.currentState === "autoplayBlocked" || currentStore.currentState === "idleMode") {
+        currentStore.currentState === "autoplayBlocked" ? "autoplay fallback" : "idle";
+        if (this.videoManager) {
+          this.videoManager.markUserInteraction();
+          this.videoManager.setMuted(false);
+          const videoElement = this.videoManager.getVideoElement();
+          if (videoElement) {
+            videoElement.loop = false;
+            videoElement.currentTime = 0;
+          }
+        } else {
+          const videoElement = (_a2 = this.playerElement) == null ? void 0 : _a2.querySelector(".sf-video-container__video");
+          if (videoElement) {
+            videoElement.muted = false;
+            videoElement.loop = false;
+            videoElement.currentTime = 0;
+          }
+        }
+      } else {
+        if (this.videoManager) {
+          this.videoManager.markUserInteraction();
+        }
+      }
+      if (currentStore.currentState === "paused" || currentStore.currentState === "waitingForInteraction" || currentStore.currentState === "completedWaitingForInteraction" || currentStore.currentState === "autoplayBlocked" || currentStore.currentState === "idleMode" || currentStore.currentState === "error") {
+        currentStore.play();
+      }
+    });
+    this.playerRoot.appendChild(this.compactLabel);
+  }
+  /**
+   * Hides and removes the compact label
+   */
+  hideCompactLabel() {
+    if (this.compactLabel && this.compactLabel.parentNode) {
+      this.compactLabel.parentNode.removeChild(this.compactLabel);
+      this.compactLabel = null;
+    }
+  }
   /**
    * Resets the UI manager to initial state for reuse
    */
@@ -10976,6 +11050,7 @@ class UIManager {
       this.loadingSpinner.destroy();
       this.loadingSpinner = null;
     }
+    this.hideCompactLabel();
     if (this.playerElement && this.playerElement.parentNode) {
       this.playerElement.parentNode.removeChild(this.playerElement);
     }
@@ -11378,7 +11453,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.18";
+const version = "0.3.19";
 const packageJson = {
   version
 };