saltfish/dist/player.min.js

An interactive video-guided tour system for web applications

/*!
 * Saltfish playlist Player v0.1.8
 * (c) 2025
 * Released under the MIT License.
 
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).SaltfishplaylistPlayer=e()}(this,(function(){"use strict";var t=Object.defineProperty,e=(e,n,i)=>((e,n,i)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[n]=i)(e,"symbol"!=typeof n?n+"":n,i);class n{constructor(){e(this,"container",null),e(this,"shadowRoot",null),e(this,"styleElement",null)}create(){if(this.container)return;this.container=document.createElement("div"),this.container.id="saltfish-container",document.body.appendChild(this.container),this.shadowRoot=this.container.attachShadow({mode:"open"}),this.styleElement=document.createElement("style"),this.styleElement.textContent=this.getBaseStyles(),this.shadowRoot.appendChild(this.styleElement);const t=document.createElement("div");t.id="sf-player-root",this.shadowRoot.appendChild(t)}getShadowRoot(){return this.shadowRoot}getRootElement(){return this.shadowRoot?this.shadowRoot.getElementById("sf-player-root"):null}addStyles(t){this.styleElement&&(this.styleElement.textContent+=t)}remove(){this.container&&(document.body.removeChild(this.container),this.container=null,this.shadowRoot=null,this.styleElement=null)}getBaseStyles(){return"\n  /* \n * CSS Reset for the Saltfish playlist Player\n * Minimal reset for the Shadow DOM to ensure consistent rendering\n */\n\n:host {\n  all: initial;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  box-sizing: border-box;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font: inherit;\n  outline: none;\n  padding: 0;\n} \n  /* \n * Variables for the Saltfish playlist Player\n * Defines all design tokens used throughout the application\n */\n\n:host {\n  /* Colors */\n  --sf-primary-color: #4a9bff;\n  --sf-secondary-color: #6ccfff;\n  --sf-background-color: #1e1e1e;\n  --sf-text-color: #ffffff;\n  --sf-button-bg: rgba(0, 0, 0, 0.5);\n  --sf-button-hover-bg: rgba(0, 0, 0, 0.7);\n  --sf-overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.7) 100%);\n  --sf-progress-gradient: linear-gradient(90deg, var(--sf-primary-color), var(--sf-secondary-color));\n  --sf-error-color: #ff4d4d;\n  --sf-error-bg: rgba(255, 77, 77, 0.1);\n  \n  /* Spacing */\n  --sf-spacing-xs: 4px;\n  --sf-spacing-sm: 8px;\n  --sf-spacing-md: 12px;\n  --sf-spacing-lg: 16px;\n  --sf-spacing-xl: 24px;\n  \n  /* Sizes */\n  --sf-player-width: 240px;\n  --sf-player-height: 336px;\n  --sf-player-min-width: 80px;\n  --sf-player-min-height: 80px;\n  --sf-control-button-size: 24px;\n  --sf-play-button-size: 60px;\n  --sf-minimize-button-size: 20px;\n  --sf-mute-button-size: 32px;\n  --sf-cc-button-size: 32px;\n  --sf-cursor-size: 32px;\n  \n  /* Border radius */\n  --sf-border-radius-sm: 4px;\n  --sf-border-radius-md: 8px;\n  --sf-border-radius-lg: 16px;\n  --sf-border-radius-circle: 50%;\n  \n  /* Transitions */\n  --sf-transition-fast: 0.1s ease;\n  --sf-transition-normal: 0.2s ease;\n  --sf-transition-slow: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  \n  /* Shadows */\n  --sf-shadow-small: 0 2px 5px rgba(0, 0, 0, 0.2);\n  --sf-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);\n  --sf-shadow-large: 0 10px 25px rgba(0, 0, 0, 0.2);\n  \n  /* Z-index layering */\n  --sf-z-index-base: 1;\n  --sf-z-index-overlay: 2;\n  --sf-z-index-controls: 10;\n  --sf-z-index-cursor: 9999;\n  --sf-z-index-player: 2147483648;\n  \n  /* Font sizes */\n  --sf-font-size-sm: 14px;\n  --sf-font-size-md: 16px;\n  --sf-font-size-lg: 18px;\n  --sf-font-size-xl: 24px;\n} \n\n/* Mobile device responsive adjustments - make player smaller for mobile screens */\n@media (max-width: 768px) {\n  :host {\n    /* Reduce player size on mobile for better space utilization */\n    --sf-player-width: 180px;        /* 25% smaller than desktop (240px -> 180px) */\n    --sf-player-height: 252px;       /* 25% smaller than desktop (336px -> 252px) */\n    --sf-player-min-width: 60px;     /* Smaller when minimized (80px -> 60px) */\n    --sf-player-min-height: 60px;    /* Smaller when minimized (80px -> 60px) */\n    \n    /* Keep controls touch-friendly despite smaller player size */\n    --sf-play-button-size: 44px;     /* Smaller but still touch-friendly (60px -> 44px) */\n    --sf-control-button-size: 28px;  /* Keep larger for touch targets (24px -> 28px) */\n    --sf-mute-button-size: 26px;     /* Smaller for mobile (32px -> 26px) */\n    --sf-cc-button-size: 26px;       /* Smaller for mobile (32px -> 26px) */\n    --sf-minimize-button-size: 24px; /* Keep larger for touch interaction */\n  }\n}\n\n/* Touch device specific adjustments (tablets and larger touch devices, excluding mobile) */\n@media (pointer: coarse) and (min-width: 769px) {\n  :host {\n    /* Ensure touch-friendly sizes even on larger touch devices */\n    --sf-control-button-size: 28px;\n    --sf-mute-button-size: 38px;\n    --sf-cc-button-size: 38px;\n    --sf-minimize-button-size: 24px; /* Larger touch target for minimize button */\n  }\n} \n  \n  /* \n * Player component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Main player container */\n.sf-player {\n  border-radius: var(--sf-border-radius-lg);\n  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45), 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  transition: all var(--sf-transition-slow);\n  position: relative;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n\n/* Dark gradient overlay at bottom of player */\n.sf-player::before {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of player height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 8px;\n}\n\n/* Hide gradient overlay when minimized */\n.sf-player--minimized::before {\n  display: none;\n}\n\n/* Full-size player state */\n.sf-player:not(.sf-player--minimized) {\n  width: var(--sf-player-width);\n  height: var(--sf-player-height);\n}\n\n/* Autoplay fallback state - ensure play button is visible */\n.sf-player--waiting-for-user-interaction .sf-controls-container__play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n\n/* Also show the center play button in autoplay fallback state */\n.sf-player--waiting-for-user-interaction .sf-player__center-play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  z-index: calc(var(--sf-z-index-controls) + 20) !important; /* Higher z-index to appear above overlay */\n}\n\n/* Make the autoplay fallback state more prominent to indicate need for interaction */\n.sf-player--waiting-for-user-interaction::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n}\n\n/* Player state: minimized */\n.sf-player--minimized {\n  /* Equal width and height are essential for maintaining a perfect circle when using border-radius: 50% */\n  width: var(--sf-player-min-width);\n  height: var(--sf-player-min-height);\n  border-radius: var(--sf-border-radius-circle);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  cursor: pointer;\n  /* Force overriding any inline styles that might be applied */\n  max-width: var(--sf-player-min-width) !important;\n  max-height: var(--sf-player-min-height) !important;\n  min-width: var(--sf-player-min-width) !important;\n  min-height: var(--sf-player-min-height) !important;\n}\n\n/* Hide controls when minimized */\n.sf-player--minimized .sf-controls-container {\n  display: none;\n}\n\n/* Only show the minimize button when hovering on minimized player */\n.sf-player--minimized .sf-player__minimize-button {\n  opacity: 0;\n}\n\n.sf-player--minimized:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Player root element */\n#sf-player-root {\n  position: fixed;\n  z-index: var(--sf-z-index-player);\n}\n\n/* Player error message */\n.sf-player__error {\n  padding: var(--sf-spacing-md);\n  color: var(--sf-error-color);\n  background-color: var(--sf-error-bg);\n  border-radius: var(--sf-border-radius-md);\n  margin: var(--sf-spacing-sm);\n  font-size: var(--sf-font-size-sm);\n  border-left: 4px solid var(--sf-error-color);\n}\n\n/* Minimize button */\n.sf-player__minimize-button {\n  position: absolute;\n  top: calc(var(--sf-spacing-xs) + var(--sf-spacing-md));\n  right: var(--sf-spacing-md);\n  width: var(--sf-minimize-button-size);\n  height: var(--sf-minimize-button-size);\n  background-color: transparent;\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-sm) + 4px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Minimize button hover state */\n.sf-player__minimize-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show minimize button on player hover */\n.sf-player:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Mobile and touch device overrides for minimize button visibility */\n/* Ensure minimize button is always visible on touch devices, even when minimized */\n@media (pointer: coarse) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n}\n\n/* Ensure minimize button is always visible on mobile screens under 768px */\n@media (max-width: 768px) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n}\n\n/* Player title */\n.sf-player__title {\n  position: absolute;\n  top: var(--sf-spacing-md);\n  left: var(--sf-spacing-md);\n  color: var(--sf-text-color);\n  font-size: var(--sf-font-size-md);\n  font-weight: 600;\n  z-index: var(--sf-z-index-controls);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  max-width: 70%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Centered play/pause button overlay */\n.sf-player__center-play-button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--sf-play-button-size);\n  height: var(--sf-play-button-size);\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: var(--sf-border-radius-circle);\n  display: none; /* Hidden by default */\n  justify-content: center;\n  align-items: center;\n  z-index: calc(var(--sf-z-index-controls) + 10); /* Ensure higher z-index than other elements */\n  color: white;\n  border: none;\n  font-size: var(--sf-control-button-size);\n  cursor: pointer;\n  transition: transform var(--sf-transition-normal), background-color var(--sf-transition-normal);\n  backdrop-filter: blur(3px);\n  -webkit-backdrop-filter: blur(3px);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.08);\n  pointer-events: auto; /* Enable pointer events to capture clicks */\n}\n\n/* Center play button hover state */\n.sf-player__center-play-button:hover {\n  transform: translate(-50%, -50%) scale(1.1);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n\n/* Hide center play button in minimized state */\n.sf-player--minimized .sf-player__center-play-button {\n  display: none !important;\n}\n\n/* Exit button for minimized mode */\n.sf-player__exit-button {\n  position: absolute;\n  top: -22px; /* Position it above the player */\n  right: 0;\n  width: 20px;\n  height: 20px;\n  background-color: var(--sf-button-bg);\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: var(--sf-font-size-md);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);\n}\n\n/* Exit button hover state */\n.sf-player__exit-button:hover {\n  transform: scale(1.1);\n  background-color: var(--sf-button-hover-bg);\n}\n\n/* Show exit button on minimized player hover */\n.sf-player--minimized:hover .sf-player__exit-button {\n  opacity: 1;\n}\n\n/* Saltfish logo */\n.sf-player__logo {\n  position: absolute;\n  bottom: var(--sf-spacing-xs);\n  left: 50%;\n  transform: translateX(-50%);\n  width: 41px;\n  height: 15px;\n  z-index: var(--sf-z-index-controls);\n  opacity: 0.7;\n  transition: opacity var(--sf-transition-normal);\n  cursor: pointer;\n}\n\n/* Logo hover state */\n.sf-player:hover .sf-player__logo {\n  opacity: 0.9;\n}\n\n/* Hide logo when minimized */\n.sf-player--minimized .sf-player__logo {\n  display: none;\n} \n  /* \n * Video component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Video container */\n.sf-video-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--sf-border-radius-md);\n  overflow: hidden;\n  pointer-events: auto; /* Ensure clicks on video container are captured */\n}\n\n/* Video element */\n.sf-video-container__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  /* Ensure video is visible on mobile */\n  display: block;\n  background-color: black;\n  /* Add explicit positioning to ensure video is visible */\n  position: relative;\n  z-index: 1;\n}\n\n\n\n/* Mobile-specific video styles */\n@media (max-width: 768px) {\n  \n  .sf-video-container__video {\n    /* Force video dimensions on mobile */\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: cover !important;\n    /* Prevent video from being hidden */\n    opacity: 1 !important;\n    visibility: visible !important;\n    /* Ensure video is above any potential overlays */\n    z-index: 10 !important;\n    position: relative !important;\n    /* Ensure minimum dimensions */\n    min-width: 100px !important;\n    min-height: 100px !important;\n  }\n  \n  /* Make controls more touch-friendly on mobile */\n  .sf-video-container__controls {\n    height: 5px; /* Thicker on mobile for easier touch */\n  }\n  \n  .sf-video-container__mute-button {\n    /* Use CSS variable for consistent sizing */\n    min-width: var(--sf-mute-button-size) !important;\n    min-height: var(--sf-mute-button-size) !important;\n    opacity: 1; /* Always visible on mobile (no hover) */\n  }\n  \n  .sf-video-container__cc-button {\n    /* Use CSS variable for consistent sizing */\n    min-width: var(--sf-cc-button-size) !important;\n    min-height: var(--sf-cc-button-size) !important;\n    opacity: 1; /* Always visible on mobile (no hover) */\n  }\n}\n\n/* Touch device specific styles */\n@media (pointer: coarse) {\n  .sf-video-container__controls:hover {\n    height: 5px; /* Keep consistent height on touch devices */\n  }\n  \n  .sf-video-container__mute-button {\n    opacity: 1; /* Always show on touch devices */\n  }\n  \n  .sf-video-container__cc-button {\n    opacity: 1; /* Always show on touch devices */\n  }\n  \n  .sf-video-container:hover .sf-video-container__mute-button {\n    opacity: 1;\n  }\n}\n\n/* Video in minimized state */\n.sf-player--minimized .sf-video-container {\n  border-radius: var(--sf-border-radius-circle);\n  cursor: pointer;\n  z-index: var(--sf-z-index-base);\n  width: 100%;\n  height: 100%;\n}\n\n.sf-player--minimized .sf-video-container__video {\n  border-radius: var(--sf-border-radius-circle);\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n/* Hide progress bar in minimized state */\n.sf-player--minimized .sf-video-container__controls {\n  display: none !important;\n}\n\n/* Also hide mute button in minimized state */\n.sf-player--minimized .sf-video-container__mute-button {\n  display: none !important;\n}\n\n/* Also hide CC button in minimized state */\n.sf-player--minimized .sf-video-container__cc-button {\n  display: none !important;\n}\n\n/* Progress bar container */\n.sf-video-container__controls {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.25);\n  z-index: var(--sf-z-index-controls);\n  border-radius: var(--sf-border-radius-md) var(--sf-border-radius-md) 0 0;\n  cursor: pointer;\n}\n\n/* Show slightly thicker progress bar on hover for better UX */\n.sf-video-container__controls:hover {\n  height: 5px;\n}\n\n/* Progress indicator */\n.sf-video-container__progress {\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8);\n  width: 0%;\n  transition: width 0.1s linear;\n  border-radius: var(--sf-border-radius-md) 0 0 0;\n  cursor: pointer;\n  transform-origin: left;\n}\n\n/* Mute button */\n.sf-video-container__mute-button {\n  position: absolute;\n  top: calc(var(--sf-spacing-xl) + var(--sf-spacing-xl));\n  right: var(--sf-spacing-xs);\n  width: var(--sf-mute-button-size);\n  height: var(--sf-mute-button-size);\n  background-color: transparent;\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-md) + 2px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Mute button hover state */\n.sf-video-container__mute-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show mute button on container hover */\n.sf-video-container:hover .sf-video-container__mute-button {\n  opacity: 1;\n}\n\n/* CC button */\n.sf-video-container__cc-button {\n  position: absolute;\n  top: calc(var(--sf-spacing-xl) + var(--sf-spacing-xl) + var(--sf-mute-button-size) + var(--sf-spacing-xs));\n  right: var(--sf-spacing-xs);\n  width: var(--sf-cc-button-size);\n  height: var(--sf-cc-button-size);\n  background-color: transparent;\n  border-radius: 50%; /* Ensure perfect circle */\n  padding: 0; /* Remove default button padding */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-md) + 2px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n.sf-video-container__cc-button svg {\n  display: block;\n  margin: auto;\n  width: 60%;\n  height: 60%;\n}\n\n/* CC button hover state */\n.sf-video-container__cc-button:hover {\n  transform: scale(1.1);\n}\n\n/* Hide mute and cc buttons in autoplayBlocked state */\n.sf-player--autoplayBlocked .sf-video-container__mute-button,\n.sf-player--autoplayBlocked .sf-video-container__cc-button {\n  display: none !important;\n}\n\n/* Show mute and cc buttons on hover in playing/paused states */\n.sf-player--playing .sf-video-container:hover .sf-video-container__mute-button,\n.sf-player--playing .sf-video-container:hover .sf-video-container__cc-button,\n.sf-player--paused .sf-video-container:hover .sf-video-container__mute-button,\n.sf-player--paused .sf-video-container:hover .sf-video-container__cc-button {\n  opacity: 1;\n} \n  /* \n * Controls component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Main controls container */\n.sf-controls-container {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  z-index: var(--sf-z-index-controls);\n  pointer-events: auto;\n}\n\n/* Play button */\n.sf-controls-container__play-button {\n  background-color: rgba(0, 0, 0, 0.6);\n  border: none;\n  color: var(--sf-text-color);\n  font-size: var(--sf-control-button-size);\n  cursor: pointer;\n  width: var(--sf-play-button-size);\n  height: var(--sf-play-button-size);\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: transform var(--sf-transition-normal), background-color var(--sf-transition-normal);\n  padding-left: 4px; /* Optical centering for play icon */\n}\n\n/* Button hover state */\n.sf-controls-container__play-button:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n  transform: scale(1.1);\n}\n\n/* Button container for interactive buttons */\n.sf-controls-container__buttons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--sf-spacing-md);\n}\n\n/* Interactive button */\n.sf-controls-container__interactive-button {\n  background-color: rgba(255, 255, 255, 0.2);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  border: none;\n  border-radius: var(--sf-border-radius-md);\n  padding: var(--sf-spacing-xs) var(--sf-spacing-md);\n  font-size: var(--sf-font-size-sm);\n  cursor: pointer;\n  transition: background-color var(--sf-transition-normal), transform var(--sf-transition-fast);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.sf-controls-container__interactive-button:hover {\n  background-color: rgba(255, 255, 255, 0.3);\n  transform: translateY(-2px);\n}\n\n/* \n * Choice buttons container and buttons - positioned inside player\n */\n\n/* Choice buttons container - positioned inside the player at the bottom */\n.sf-choice-buttons-container {\n  position: absolute;\n  bottom: var(--sf-spacing-xl);\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(100% - var(--sf-spacing-lg));\n  max-width: calc(100% - var(--sf-spacing-lg));\n  z-index: calc(var(--sf-z-index-controls) + 1);\n  display: flex;\n  flex-direction: column;\n  gap: var(--sf-spacing-sm);\n  pointer-events: auto;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n/* Choice button styles - solid rounded buttons matching the image */\n.sf-choice-button {\n  width: 100%;\n  max-width: none;\n  background: rgba(0, 0, 0, 4);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  border: none;\n  border-radius: 24px; /* More rounded for pill shape */\n  padding: var(--sf-spacing-md) var(--sf-spacing-md);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: center;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  outline: none;\n  font-family: inherit;\n  margin-bottom: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Hover state for buttons */\n.sf-choice-button:hover {\n  background: rgba(0, 0, 0, 0.9);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8);\n}\n\n/* Active state for all buttons */\n.sf-choice-button:active {\n  transform: translateY(0) scale(0.98);\n  transition: all 0.1s ease;\n}\n\n/* Remove specific action type styling - use consistent dark buttons */\n.sf-choice-button--goto,\n.sf-choice-button--url,\n.sf-choice-button--next,\n.sf-choice-button--dom,\n.sf-choice-button--function {\n  background: rgba(0, 0, 0, 0.4);\n  border: none;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n.sf-choice-button--goto:hover,\n.sf-choice-button--url:hover,\n.sf-choice-button--next:hover,\n.sf-choice-button--dom:hover,\n.sf-choice-button--function:hover {\n  background: rgba(0, 0, 0, 0.9);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);\n}\n\n/* Hide choice buttons in minimized state */\n.sf-player--minimized .sf-choice-buttons-container {\n  display: none;\n}\n\n/* Smaller mobile screens - maintain same layout but with tighter spacing */\n@media (max-width: 480px) {\n  .sf-choice-buttons-container {\n    bottom: var(--sf-spacing-sm);\n    width: calc(100% - var(--sf-spacing-md));\n    max-width: calc(100% - var(--sf-spacing-md));\n    gap: calc(var(--sf-spacing-xs) + 2px);\n  }\n  \n  .sf-choice-button {\n    padding: var(--sf-spacing-sm) var(--sf-spacing-sm);\n    font-size: 11px;\n    border-radius: 20px;\n  }\n}\n\n/* Touch device specific adjustments */\n@media (pointer: coarse) {\n  .sf-choice-buttons-container {\n    gap: var(--sf-spacing-sm);\n  }\n  \n  .sf-choice-button {\n    min-height: 44px; /* Apple's recommended minimum touch target size */\n    padding: var(--sf-spacing-md) var(--sf-spacing-md);\n  }\n} \n  /* \n * Transcript component styles for the Saltfish Playlist Player\n * Following BEM naming convention\n */\n\n/* Transcript container */\n.sf-transcript {\n  position: absolute;\n  bottom: 40px; /* Above the progress bar */\n  left: 0;\n  right: 0;\n  max-height: 200px;\n  background: rgba(0, 0, 0, 0.7);\n  backdrop-filter: blur(8px);\n  margin: 0 var(--sf-spacing-md);\n  overflow: hidden;\n  z-index: var(--sf-z-index-overlay);\n  opacity: 0;\n  transform: translateY(20px);\n  transition: all 0.3s ease-out;\n  pointer-events: none;\n}\n\n/* Visible state */\n.sf-transcript--visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n/* Transcript content */\n.sf-transcript__content {\n  max-height: 180px;\n  overflow-y: auto;\n  padding: var(--sf-spacing-xs);\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;\n}\n\n/* Webkit scrollbar styling */\n.sf-transcript__content::-webkit-scrollbar {\n  width: 4px;\n}\n\n.sf-transcript__content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.sf-transcript__content::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 2px;\n}\n\n.sf-transcript__content::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.5);\n}\n\n/* Transcript segments */\n.sf-transcript__segment {\n  color: rgba(255, 255, 255);\n  font-size: var(--sf-font-size-sm);\n  line-height: 1.4;\n  padding: var(--sf-spacing-xs) 0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  padding-left: var(--sf-spacing-xs);\n  padding-right: var(--sf-spacing-xs);\n}\n\n/* CC button active state */\n.sf-video-container__cc-button--active {\n  background: rgba(255, 255, 255, 0.2);\n  color: #fff;\n}\n\n/* Mobile responsive styles */\n@media (max-width: 768px) {\n  .sf-transcript {\n    bottom: 50px; /* More space on mobile */\n    margin: 0 var(--sf-spacing-sm);\n    max-height: 150px; /* Smaller on mobile */\n  }\n  \n  .sf-transcript__content {\n    max-height: 130px;\n    padding: var(--sf-spacing-sm);\n  }\n  \n  .sf-transcript__segment {\n    font-size: var(--sf-font-size-xs);\n    padding: var(--sf-spacing-xs) var(--sf-spacing-sm);\n  }\n}\n\n/* Touch device optimizations */\n@media (pointer: coarse) {\n  .sf-transcript__segment {\n    padding: var(--sf-spacing-sm) var(--sf-spacing-xs);\n    min-height: 44px; /* Larger touch target */\n    display: flex;\n    align-items: center;\n  }\n}\n\n/* Hide transcript in minimized state */\n.sf-player--minimized .sf-transcript {\n  display: none !important;\n}\n\n/* Animation for transcript appearance */\n@keyframes transcriptFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes transcriptFadeOut {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n}\n  \n  /* \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} \n"}}const i={};var s=Symbol.for("immer-nothing"),r=Symbol.for("immer-draftable"),a=Symbol.for("immer-state");function o(t,...e){throw new Error(`[Immer] minified error nr: ${t}. Full error at: https://bit.ly/3cXEKWf`)}var l=Object.getPrototypeOf;function c(t){return!!t&&!!t[a]}function d(t){var e;return!!t&&(u(t)||Array.isArray(t)||!!t[r]||!!(null==(e=t.constructor)?void 0:e[r])||y(t)||v(t))}var h=Object.prototype.constructor.toString();function u(t){if(!t||"object"!=typeof t)return!1;const e=l(t);if(null===e)return!0;const n=Object.hasOwnProperty.call(e,"constructor")&&e.constructor;return n===Object||"function"==typeof n&&Function.toString.call(n)===h}function p(t,e){0===g(t)?Reflect.ownKeys(t).forEach((n=>{e(n,t[n],t)})):t.forEach(((n,i)=>e(i,n,t)))}function g(t){const e=t[a];return e?e.type_:Array.isArray(t)?1:y(t)?2:v(t)?3:0}function m(t,e){return 2===g(t)?t.has(e):Object.prototype.hasOwnProperty.call(t,e)}function f(t,e,n){const i=g(t);2===i?t.set(e,n):3===i?t.add(n):t[e]=n}function y(t){return t instanceof Map}function v(t){return t instanceof Set}function b(t){return t.copy_||t.base_}function w(t,e){if(y(t))return new Map(t);if(v(t))return new Set(t);if(Array.isArray(t))return Array.prototype.slice.call(t);const n=u(t);if(!0===e||"class_only"===e&&!n){const e=Object.getOwnPropertyDescriptors(t);delete e[a];let n=Reflect.ownKeys(e);for(let i=0;i<n.length;i++){const s=n[i],r=e[s];!1===r.writable&&(r.writable=!0,r.configurable=!0),(r.get||r.set)&&(e[s]={configurable:!0,writable:!0,enumerable:r.enumerable,value:t[s]})}return Object.create(l(t),e)}{const e=l(t);if(null!==e&&n)return{...t};const i=Object.create(e);return Object.assign(i,t)}}function S(t,e=!1){return E(t)||c(t)||!d(t)||(g(t)>1&&(t.set=t.add=t.clear=t.delete=M),Object.freeze(t),e&&Object.entries(t).forEach((([t,e])=>S(e,!0)))),t}function M(){o(2)}function E(t){return Object.isFrozen(t)}var x,I={};function P(t){const e=I[t];return e||o(0),e}function C(){return x}function _(t,e){e&&(P("Patches"),t.patches_=[],t.inversePatches_=[],t.patchListener_=e)}function k(t){T(t),t.drafts_.forEach(D),t.drafts_=null}function T(t){t===x&&(x=t.parent_)}function z(t){return x={drafts_:[],parent_:x,immer_:t,canAutoFreeze_:!0,unfinalizedDrafts_:0}}function D(t){const e=t[a];0===e.type_||1===e.type_?e.revoke_():e.revoked_=!0}function A(t,e){e.unfinalizedDrafts_=e.drafts_.length;const n=e.drafts_[0];return void 0!==t&&t!==n?(n[a].modified_&&(k(e),o(4)),d(t)&&(t=B(e,t),e.parent_||V(e,t)),e.patches_&&P("Patches").generateReplacementPatches_(n[a].base_,t,e.patches_,e.inversePatches_)):t=B(e,n,[]),k(e),e.patches_&&e.patchListener_(e.patches_,e.inversePatches_),t!==s?t:void 0}function B(t,e,n){if(E(e))return e;const i=e[a];if(!i)return p(e,((s,r)=>L(t,i,e,s,r,n))),e;if(i.scope_!==t)return e;if(!i.modified_)return V(t,i.base_,!0),i.base_;if(!i.finalized_){i.finalized_=!0,i.scope_.unfinalizedDrafts_--;const e=i.copy_;let s=e,r=!1;3===i.type_&&(s=new Set(e),e.clear(),r=!0),p(s,((s,a)=>L(t,i,e,s,a,n,r))),V(t,e,!1),n&&t.patches_&&P("Patches").generatePatches_(i,n,t.patches_,t.inversePatches_)}return i.copy_}function L(t,e,n,i,s,r,a){if(c(s)){const a=B(t,s,r&&e&&3!==e.type_&&!m(e.assigned_,i)?r.concat(i):void 0);if(f(n,i,a),!c(a))return;t.canAutoFreeze_=!1}else a&&n.add(s);if(d(s)&&!E(s)){if(!t.immer_.autoFreeze_&&t.unfinalizedDrafts_<1)return;B(t,s),e&&e.scope_.parent_||"symbol"==typeof i||!Object.prototype.propertyIsEnumerable.call(n,i)||V(t,s)}}function V(t,e,n=!1){!t.parent_&&t.immer_.autoFreeze_&&t.canAutoFreeze_&&S(e,n)}var U={get(t,e){if(e===a)return t;const n=b(t);if(!m(n,e))return function(t,e,n){var i;const s=R(e,n);return s?"value"in s?s.value:null==(i=s.get)?void 0:i.call(t.draft_):void 0}(t,n,e);const i=n[e];return t.finalized_||!d(i)?i:i===F(t.base_,e)?(Y(t),t.copy_[e]=H(i,t)):i},has:(t,e)=>e in b(t),ownKeys:t=>Reflect.ownKeys(b(t)),set(t,e,n){const i=R(b(t),e);if(null==i?void 0:i.set)return i.set.call(t.draft_,n),!0;if(!t.modified_){const i=F(b(t),e),o=null==i?void 0:i[a];if(o&&o.base_===n)return t.copy_[e]=n,t.assigned_[e]=!1,!0;if(((s=n)===(r=i)?0!==s||1/s==1/r:s!=s&&r!=r)&&(void 0!==n||m(t.base_,e)))return!0;Y(t),N(t)}var s,r;return t.copy_[e]===n&&(void 0!==n||e in t.copy_)||Number.isNaN(n)&&Number.isNaN(t.copy_[e])||(t.copy_[e]=n,t.assigned_[e]=!0),!0},deleteProperty:(t,e)=>(void 0!==F(t.base_,e)||e in t.base_?(t.assigned_[e]=!1,Y(t),N(t)):delete t.assigned_[e],t.copy_&&delete t.copy_[e],!0),getOwnPropertyDescriptor(t,e){const n=b(t),i=Reflect.getOwnPropertyDescriptor(n,e);return i?{writable:!0,configurable:1!==t.type_||"length"!==e,enumerable:i.enumerable,value:n[e]}:i},defineProperty(){o(11)},getPrototypeOf:t=>l(t.base_),setPrototypeOf(){o(12)}},O={};function F(t,e){const n=t[a];return(n?b(n):t)[e]}function R(t,e){if(!(e in t))return;let n=l(t);for(;n;){const t=Object.getOwnPropertyDescriptor(n,e);if(t)return t;n=l(n)}}function N(t){t.modified_||(t.modified_=!0,t.parent_&&N(t.parent_))}function Y(t){t.copy_||(t.copy_=w(t.base_,t.scope_.immer_.useStrictShallowCopy_))}function H(t,e){const n=y(t)?P("MapSet").proxyMap_(t,e):v(t)?P("MapSet").proxySet_(t,e):function(t,e){const n=Array.isArray(t),i={type_:n?1:0,scope_:e?e.scope_:C(),modified_:!1,finalized_:!1,assigned_:{},parent_:e,base_:t,draft_:null,copy_:null,revoke_:null,isManual_:!1};let s=i,r=U;n&&(s=[i],r=O);const{revoke:a,proxy:o}=Proxy.revocable(s,r);return i.draft_=o,i.revoke_=a,o}(t,e);return(e?e.scope_:C()).drafts_.push(n),n}function X(t){if(!d(t)||E(t))return t;const e=t[a];let n;if(e){if(!e.modified_)return e.base_;e.finalized_=!0,n=w(t,e.scope_.immer_.useStrictShallowCopy_)}else n=w(t,!0);return p(n,((t,e)=>{f(n,t,X(e))})),e&&(e.finalized_=!1),n}p(U,((t,e)=>{O[t]=function(){return arguments[0]=arguments[0][0],e.apply(this,arguments)}})),O.deleteProperty=function(t,e){return O.set.call(this,t,e,void 0)},O.set=function(t,e,n){return U.set.call(this,t[0],e,n,t[0])};var $=new class{constructor(t){this.autoFreeze_=!0,this.useStrictShallowCopy_=!1,this.produce=(t,e,n)=>{if("function"==typeof t&&"function"!=typeof e){const n=e;e=t;const i=this;return function(t=n,...s){return i.produce(t,(t=>e.call(this,t,...s)))}}let i;if("function"!=typeof e&&o(6),void 0!==n&&"function"!=typeof n&&o(7),d(t)){const s=z(this),r=H(t,void 0);let a=!0;try{i=e(r),a=!1}finally{a?k(s):T(s)}return _(s,n),A(i,s)}if(!t||"object"!=typeof t){if(i=e(t),void 0===i&&(i=t),i===s&&(i=void 0),this.autoFreeze_&&S(i,!0),n){const e=[],s=[];P("Patches").generateReplacementPatches_(t,i,e,s),n(e,s)}return i}o(1)},this.produceWithPatches=(t,e)=>{if("function"==typeof t)return(e,...n)=>this.produceWithPatches(e,(e=>t(e,...n)));let n,i;return[this.produce(t,e,((t,e)=>{n=t,i=e})),n,i]},"boolean"==typeof(null==t?void 0:t.autoFreeze)&&this.setAutoFreeze(t.autoFreeze),"boolean"==typeof(null==t?void 0:t.useStrictShallowCopy)&&this.setUseStrictShallowCopy(t.useStrictShallowCopy)}createDraft(t){d(t)||o(8),c(t)&&(t=function(t){return c(t)||o(10),X(t)}(t));const e=z(this),n=H(t,void 0);return n[a].isManual_=!0,T(e),n}finishDraft(t,e){const n=t&&t[a];n&&n.isManual_||o(9);const{scope_:i}=n;return _(i,e),A(void 0,i)}setAutoFreeze(t){this.autoFreeze_=t}setUseStrictShallowCopy(t){this.useStrictShallowCopy_=t}applyPatches(t,e){let n;for(n=e.length-1;n>=0;n--){const i=e[n];if(0===i.path.length&&"replace"===i.op){t=i.value;break}}n>-1&&(e=e.slice(n+1));const i=P("Patches").applyPatches_;return c(t)?i(t,e):this.produce(t,(t=>i(t,e)))}},j=$.produce;$.produceWithPatches.bind($),$.setAutoFreeze.bind($),$.setUseStrictShallowCopy.bind($),$.applyPatches.bind($),$.createDraft.bind($),$.finishDraft.bind($);const W="bottom",q="right",Z="center",J="saltfish_progress",K="saltfish_session",Q="saltfish_anonymous_user_data",G=20,tt="-50%",et="-50%",nt="-100%",it="sf-player--minimized";function st(t,e){void 0!==e?console.info(t,e):console.info(t)}function rt(t,e){console.warn(t)}function at(t,e){void 0!==e?console.error(t,e):console.error(t)}class ot{constructor(t,n){e(this,"currentState"),e(this,"config"),e(this,"context"),e(this,"actionHandlers",{}),this.config=t,this.currentState=t.initial,this.context=n,this.setupDefaultActions(),this.runEntryActions(this.currentState)}setupDefaultActions(){this.actionHandlers={...this.actionHandlers,logStateEntry:t=>{this.currentState},logErrorEvent:(t,e)=>{"ERROR"===(null==e?void 0:e.type)&&e.error.message},logStepTransition:(t,e)=>{"TRANSITION_TO_STEP"===(null==e?void 0:e.type)&&e.step.id},logErrorRecovery:()=>{}}}registerActions(t){this.actionHandlers={...this.actionHandlers,...t},Object.keys(t).join(", ")}executeAction(t,e){if("string"==typeof t){const n=this.actionHandlers[t];n&&n(this.context,e)}else t(this.context,e)}send(t){const e=this.config.states[this.currentState].on[t.type];return e?(this.currentState,e.target,t.type,this.runExitActions(this.currentState),this.updateContextFromEvent(t),e.actions&&e.actions.forEach((e=>this.executeAction(e,t))),this.currentState,this.currentState=e.target,this.runEntryActions(this.currentState),this.currentState,this.currentState):(t.type,this.currentState,this.currentState)}updateContextFromEvent(t){"TRANSITION_TO_STEP"===t.type||"MANIFEST_LOADED"===t.type||"VIDEO_ENDED"===t.type?this.context.currentStep=t.step:"ERROR"===t.type&&(this.context.error=t.error)}getState(){return this.currentState}getContext(){return this.context}updateContext(t){const e=t(this.context);this.context={...this.context,...e}}runEntryActions(t){const e=this.config.states[t];e.entry&&e.entry.forEach((t=>this.executeAction(t)))}runExitActions(t){const e=this.config.states[t];e.exit&&e.exit.forEach((t=>this.executeAction(t)))}}const lt={initial:"idle",states:{idle:{on:{INITIALIZE:{target:"idle"},LOAD_MANIFEST:{target:"loading"}},entry:["logStateEntry"]},loading:{on:{MANIFEST_LOADED:{target:"paused"},ERROR:{target:"error",actions:["logErrorEvent"]}},entry:["logStateEntry"]},playing:{on:{PAUSE:{target:"paused"},MINIMIZE:{target:"minimized"},VIDEO_ENDED:{target:"waitingForInteraction"},AUTOPLAY_FALLBACK:{target:"autoplayBlocked"},TRANSITION_TO_STEP:{target:"playing",actions:["logStepTransition"]},ERROR:{target:"error"},COMPLETE_PLAYLIST:{target:"completed"}},entry:["logStateEntry","startVideoPlayback"],exit:["pauseVideoPlayback"]},paused:{on:{PLAY:{target:"playing"},MINIMIZE:{target:"minimized"},TRANSITION_TO_STEP:{target:"playing",actions:["logStepTransition"]}},entry:["logStateEntry","pauseVideoPlayback"]},minimized:{on:{MAXIMIZE:{target:"paused"}},entry:["logStateEntry","pauseVideoPlayback"]},waitingForInteraction:{on:{PLAY:{target:"playing"},PAUSE:{target:"paused"},MINIMIZE:{target:"minimized"},COMPLETE_PLAYLIST:{target:"completed"},TRANSITION_TO_STEP:{target:"playing",actions:["logStepTransition"]}},entry:["logStateEntry"]},autoplayBlocked:{on:{PLAY:{target:"playing"},TRANSITION_TO_STEP:{target:"playing"},MINIMIZE:{target:"minimized"}},entry:["logStateEntry","startMutedLoopedVideo"]},error:{on:{INITIALIZE:{target:"idle"},PLAY:{target:"playing",actions:["logErrorRecovery"]},AUTOPLAY_FALLBACK:{target:"autoplayBlocked"}},entry:["logStateEntry","handleError"]},completed:{on:{INITIALIZE:{target:"idle"}},entry:["logStateEntry","trackPlaylistComplete"]}}},ct=20,dt=()=>{const t=document.getElementById("saltfish-container");return t&&t.shadowRoot?t:document.documentElement},ht=()=>{if("undefined"!=typeof window){const t=dt(),e=getComputedStyle(t).getPropertyValue("--sf-player-width");return parseInt(e,10)||200}return 200},ut=t=>{const e=t?(()=>{if("undefined"!=typeof window){const t=dt(),e=getComputedStyle(t);return parseInt(e.getPropertyValue("--sf-player-min-width"),10)||80}return 80})():ht();return{width:e,minX:20,maxX:window.innerWidth-e-ct}};class pt{static calculatePosition(t){const{position:e,viewportWidth:n=window.innerWidth,viewportHeight:i=window.innerHeight,playerWidth:s=ht()}=t;let r=G,a=G,o="0",l="0";return e.includes(W)&&(a=i-G,l=nt),e.includes("left")?r=G:e.includes(q)?r=n-s-ct:e.includes(Z)&&(r=n/2,a=i/2,o=tt,l=et),{...this.applyConstraints({x:r,y:a,position:e,viewportWidth:n,viewportHeight:i,playerWidth:s}),transformX:o,transformY:l}}static applyConstraints(t){const{x:e,y:n,position:i,viewportWidth:s,viewportHeight:r,playerWidth:a}=t;let o=e,l=n;return i.includes(W)&&!i.includes(Z)&&(l=r-G),i.includes(q)&&!i.includes(Z)&&(o=Math.max(G,Math.min(o,s-a-ct))),o=Math.max(G,Math.min(o,s-a-ct)),l=Math.max(G,Math.min(l,r-G)),{x:o,y:l}}static calculateDragPosition(t){const{x:e,y:n,position:i,viewportWidth:s=window.innerWidth,viewportHeight:r=window.innerHeight,playerWidth:a=ht()}=t;let o=e,l=n;(null==i?void 0:i.includes(q))&&!i.includes(Z)&&(o=Math.min(o,s-a-ct));const c=s-a-ct;return o=Math.max(20,Math.min(o,c)),l=Math.max(G,Math.min(l,r-G)),{x:o,y:l}}static getTransforms(t){let e="0",n="0";return t.includes(Z)?(e=tt,n=et):t.includes(W)&&(n=nt),{transformX:e,transformY:n}}static shouldForceReposition(t,e,n){return"bottom-left"===t&&!n&&(e===window.innerHeight-G||Math.abs(e-(window.innerHeight-G))<5)}static getPlayerDimensions(){const t=ht();return{width:t,minX:G,maxX:window.innerWidth-t-ct}}}const gt=(t=>{let e;const n=new Set,s=(t,i)=>{const s="function"==typeof t?t(e):t;if(!Object.is(s,e)){const t=e;e=(null!=i?i:"object"!=typeof s||null===s)?s:Object.assign({},e,s),n.forEach((n=>n(e,t)))}},r=()=>e,a={setState:s,getState:r,getInitialState:()=>o,subscribe:t=>(n.add(t),()=>n.delete(t)),destroy:()=>{"production"!==(i?"production":void 0)&&console.warn("[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."),n.clear()}},o=e=t(s,r,a);return a})((t=>(e,n,i)=>(i.setState=(t,n,...i)=>{const s="function"==typeof t?j(t):t;return e(s,n,...i)},t(i.setState,n,i)))(((t,e)=>{const n=new ot(lt,{currentStep:null,error:null});return{config:null,user:null,userData:null,currentState:n.getState(),manifest:null,currentStepId:null,isMinimized:!1,position:null,progress:{},error:null,stateMachine:n,playlistOptions:null,backendPlaylists:[],initialize:async e=>{t((t=>{t.config=e,t.currentState=t.stateMachine.send({type:"INITIALIZE"})}))},setPlaylistOptions:e=>{t((t=>{if(t.playlistOptions=e,e.position){const n=pt.calculatePosition({position:e.position});t.position={x:n.x,y:n.y}}}))},identifyUser:(e,n)=>{const i={id:e,...n};t((t=>{t.user=i}))},setUserData:e=>{t((t=>{t.userData=e}))},setManifest:(e,n)=>{t((t=>{t.manifest=e,t.currentStepId=n,t.currentState=t.stateMachine.send({type:"LOAD_MANIFEST"})}))},play:()=>{const{currentState:n}=e();t((t=>{t.currentState=t.stateMachine.send({type:"PLAY"})}))},pause:()=>{const{currentState:n}=e();t((t=>{t.currentState=t.stateMachine.send({type:"PAUSE"})}))},minimize:()=>{const{currentState:n}=e();t((t=>{"playing"===t.currentState&&(t.currentState=t.stateMachine.send({type:"PAUSE"})),t.currentState=t.stateMachine.send({type:"MINIMIZE"}),t.isMinimized=!0}))},maximize:()=>{t((t=>{t.currentState=t.stateMachine.send({type:"MAXIMIZE"}),t.isMinimized=!1}))},setPosition:(e,n)=>{t((t=>{t.position={x:e,y:n}}))},goToStep:n=>{const{manifest:i}=e();if("completed"!==n){if(i&&i.steps.some((t=>t.id===n))){const e=i.steps.find((t=>t.id===n));t((t=>{var s,r;if(t.currentStepId=n,e&&(t.currentState=t.stateMachine.send({type:"TRANSITION_TO_STEP",step:e}),t.position)){const n=e.position||(null==(s=t.playlistOptions)?void 0:s.position)||"bottom-right",i=pt.calculatePosition({position:n});t.position={x:i.x,y:i.y}}t.progress[i.id]={...t.progress[i.id],lastStepId:n,lastVisited:(new Date).toISOString()},((null==(r=t.playlistOptions)?void 0:r.persistence)??1)&&"undefined"!=typeof window&&localStorage.setItem(J,JSON.stringify(t.progress))}))}}else t((t=>{var e;t.currentState=t.stateMachine.send({type:"COMPLETE_PLAYLIST"});const n=(null==(e=t.playlistOptions)?void 0:e.persistence)??!0;i&&n&&(delete t.progress[i.id],"undefined"!=typeof window&&localStorage.setItem(J,JSON.stringify(t.progress)),i.id)}))},reset:()=>{t((t=>{t.config=null,t.user=null,t.userData=null,t.currentState="idle",t.manifest=null,t.currentStepId=null,t.isMinimized=!1,t.position=null,t.progress={},t.error=null,t.stateMachine=new ot(lt,{currentStep:null,error:null})}))},setError:e=>{t((t=>{t.currentState=t.stateMachine.send({type:"ERROR",error:e}),t.error=e}))},setAutoplayFallback:()=>{t((t=>{t.currentState=t.stateMachine.send({type:"AUTOPLAY_FALLBACK"})}))},setBackendPlaylists:e=>{t((t=>{t.backendPlaylists=e}))},completePlaylist:()=>{t((t=>{var e;const{manifest:n}=t;t.currentState=t.stateMachine.send({type:"COMPLETE_PLAYLIST"});const i=(null==(e=t.playlistOptions)?void 0:e.persistence)??!0;n&&i&&(delete t.progress[n.id],"undefined"!=typeof window&&localStorage.setItem(J,JSON.stringify(t.progress)),n.id)}))},resetForNewPlaylist:()=>{t((t=>{const e=t.config,n=t.user,i=t.userData,s=t.progress;t.manifest=null,t.currentStepId=null,t.isMinimized=!1,t.position=null,t.error=null,t.playlistOptions=null,t.stateMachine=new ot(lt,{currentStep:null,error:null}),t.currentState=t.stateMachine.getState(),t.config=e,t.user=n,t.userData=i,t.progress=s}))},loadPlaylistProgress:(e,n)=>{t((t=>{t.progress[e]=n}))}}}))),mt={getState:()=>gt.getState(),setState:gt.setState,subscribe:gt.subscribe,destroy:gt.destroy};class ft{static isMobile(){return this.getDeviceInfo().isMobile}static isTablet(){return this.getDeviceInfo().isTablet}static isDesktop(){return this.getDeviceInfo().isDesktop}static isTouchDevice(){return this.getDeviceInfo().isTouchDevice}static getOrientation(){return this.getDeviceInfo().orientation}static getDeviceInfo(){if(this.cachedDeviceInfo)return this.cachedDeviceInfo.orientation=this.detectOrientation(),this.cachedDeviceInfo;const t="undefined"!=typeof navigator?navigator.userAgent:"",e=this.detectTouchSupport(),{width:n,height:i}=this.getScreenDimensions(),s=/iPad|Android(?!.*Mobile)|Tablet|tablet/i,r=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(t)&&!s.test(t),a=s.test(t),o=this.getScreenSize(n,i),l="small"===o&&Math.min(n,i)<768,c=r||l&&e,d=a||"medium"===o&&!l&&e&&!c,h={isMobile:c,isTablet:d,isDesktop:!c&&!d,isTouchDevice:e,screenSize:o,orientation:this.detectOrientation(),userAgent:t};return this.cachedDeviceInfo=h,h}static detectTouchSupport(){return"undefined"!=typeof window&&("ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0)}static getScreenDimensions(){return"undefined"==typeof window?{width:1920,height:1080}:{width:window.innerWidth||document.documentElement.clientWidth||1920,height:window.innerHeight||document.documentElement.clientHeight||1080}}static getScreenSize(t,e){const n=Math.min(t,e);return n<768?"small":n<1024?"medium":"large"}static detectOrientation(){if("undefined"==typeof window)return"landscape";const{width:t,height:e}=this.getScreenDimensions();return e>t?"portrait":"landscape"}static clearCache(){this.cachedDeviceInfo=null}static onDeviceChange(t){if("undefined"==typeof window)return()=>{};const e=()=>{try{this.clearCache(),t(this.getDeviceInfo())}catch(t){console.warn("DeviceDetector: Error in device change handler:",t)}};return window.addEventListener("orientationchange",e),window.addEventListener("resize",e),()=>{window.removeEventListener("orientationchange",e),window.removeEventListener("resize",e)}}}e(ft,"cachedDeviceInfo",null);const yt=Object.freeze(Object.defineProperty({__proto__:null,DeviceDetector:ft,isDeviceCompatible:t=>{if(!t||"both"===t)return!0;const e=ft.getDeviceInfo();return"mobile"===t?e.isMobile||e.isTablet:"desktop"===t&&e.isDesktop}},Symbol.toStringTag,{value:"Module"}));class vt{constructor(){e(this,"transcriptContainer",null),e(this,"transcriptContent",null),e(this,"ccButton",null),e(this,"isVisible",!1),e(this,"currentTranscript",null),e(this,"currentSegmentIndex",-1),e(this,"segments",[]),e(this,"videoElement",null),e(this,"timeUpdateListener",null)}initialize(t,e){this.videoElement=t,this.ccButton=e,this.ccButton.addEventListener("click",this.handleCCButtonClick.bind(this)),this.timeUpdateListener=this.handleTimeUpdate.bind(this),this.videoElement.addEventListener("timeup