@hyperstream/videoplayer 0.1.5 → 0.1.7

package/dist/index.mjs

@@ -26394,311 +26394,319 @@ function SimpleVideoPlayer({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showSettingsMenu]);
-  return /* @__PURE__ */ jsxs16("div", { className: "w-full h-full", "data-hyperstream-player": "true", children: [
-    /* @__PURE__ */ jsx31("div", { className: "relative h-full", children: /* @__PURE__ */ jsxs16(
-      "div",
-      {
-        ref: containerRef,
-        className: `
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: "w-full h-full text-left text-base font-sans leading-normal antialiased",
+      "data-hyperstream-player": "true",
+      style: { color: "white" },
+      children: [
+        /* @__PURE__ */ jsx31("div", { className: "relative h-full", children: /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            ref: containerRef,
+            className: `
             relative w-full h-full bg-black rounded-lg overflow-hidden shadow-lg 
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d0d684]/70 focus-visible:ring-offset-1
           `,
-        onMouseEnter: handleContainerMouseEnter,
-        onMouseLeave: handleContainerMouseLeave,
-        onMouseMove: handleContainerMouseMove,
-        onClick: handleContainerClick,
-        tabIndex: 0,
-        role: "application",
-        "aria-label": "Video player",
-        children: [
-          /* @__PURE__ */ jsx31(ErrorBoundary, { componentName: "PopupOverlay", brandColor, children: /* @__PURE__ */ jsx31(React34.Suspense, { fallback: null, children: /* @__PURE__ */ jsx31(
-            PopupOverlay3,
-            {
-              activePopup,
-              activePopupStyles,
-              videoPopupsData,
-              formData,
-              formErrors,
-              activeResponses: interactiveResponses,
-              currentStep,
-              currentQuestionIndex: popupCurrentQuestionIndex,
-              quizCompleted: popupIsQuizCompleted,
-              showResults,
-              handlePopupAction,
-              handlePopupClose,
-              handleFormFieldChange,
-              handleFormSubmit,
-              handleMultiStepSubmit,
-              handleNextStep,
-              handlePrevStep,
-              handleInteractiveResponse,
-              handleQuizCompletion: popupQuizCompletion,
-              handleNextQuestion: popupNextQuestion,
-              handlePrevQuestion: popupPrevQuestion,
-              logEvent,
-              videoRef,
-              defaultUrl: hyperstreamUrl || "",
-              url: url || ""
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx31(
-            "video",
-            {
-              ref: videoRef,
-              className: `
+            onMouseEnter: handleContainerMouseEnter,
+            onMouseLeave: handleContainerMouseLeave,
+            onMouseMove: handleContainerMouseMove,
+            onClick: handleContainerClick,
+            tabIndex: 0,
+            role: "application",
+            "aria-label": "Video player",
+            children: [
+              /* @__PURE__ */ jsx31(ErrorBoundary, { componentName: "PopupOverlay", brandColor, children: /* @__PURE__ */ jsx31(React34.Suspense, { fallback: null, children: /* @__PURE__ */ jsx31(
+                PopupOverlay3,
+                {
+                  activePopup,
+                  activePopupStyles,
+                  videoPopupsData,
+                  formData,
+                  formErrors,
+                  activeResponses: interactiveResponses,
+                  currentStep,
+                  currentQuestionIndex: popupCurrentQuestionIndex,
+                  quizCompleted: popupIsQuizCompleted,
+                  showResults,
+                  handlePopupAction,
+                  handlePopupClose,
+                  handleFormFieldChange,
+                  handleFormSubmit,
+                  handleMultiStepSubmit,
+                  handleNextStep,
+                  handlePrevStep,
+                  handleInteractiveResponse,
+                  handleQuizCompletion: popupQuizCompletion,
+                  handleNextQuestion: popupNextQuestion,
+                  handlePrevQuestion: popupPrevQuestion,
+                  logEvent,
+                  videoRef,
+                  defaultUrl: hyperstreamUrl || "",
+                  url: url || ""
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx31(
+                "video",
+                {
+                  ref: videoRef,
+                  className: `
               w-full h-full
               ${videoAspectRatio ? "absolute inset-0" : ""}
             `,
-              style: {
-                objectFit,
-                filter: mobileOptimization.isMobile ? `brightness(${brightnessLevel})` : void 0
-              },
-              playsInline: true,
-              "webkit-playsinline": "true",
-              crossOrigin: "anonymous",
-              autoPlay: autoplay,
-              muted: autoplay ? true : muted,
-              preload: autoplay ? "auto" : batteryOptimization.lowPowerMode ? "none" : connectionOptimization.saveData ? "metadata" : "auto",
-              onPlay: videoEventHandlers.onPlay,
-              onPause: videoEventHandlers.onPause,
-              onEnded: videoEventHandlers.onEnded,
-              onTimeUpdate: videoEventHandlers.onTimeUpdate,
-              onVolumeChange: videoEventHandlers.onVolumeChange,
-              onRateChange: videoEventHandlers.onRateChange,
-              onLoadStart: videoEventHandlers.onLoadStart,
-              onLoadedMetadata: videoEventHandlers.onLoadedMetadata,
-              onCanPlay: videoEventHandlers.onCanPlay,
-              onWaiting: videoEventHandlers.onWaiting,
-              onError: videoEventHandlers.onError,
-              onSeeking: videoEventHandlers.onSeeking,
-              onSeeked: videoEventHandlers.onSeeked
-            }
-          ),
-          /* @__PURE__ */ jsx31(AnimatePresence, { children: /* @__PURE__ */ jsx31(
-            PosterOverlay,
-            {
-              isVisible: !!poster && showPoster,
-              posterUrl: poster,
-              onPlay: togglePlay,
-              onPosterLoad: () => {
-                debugLog("\u2705 Poster loaded successfully");
-                contentDispatch(contentActions.setLoaded(true));
-              },
-              onPosterError: () => {
-                console.error("\u274C Failed to load poster image:", poster);
-                contentDispatch(contentActions.error());
-              },
-              brandColor
-            }
-          ) }),
-          /* @__PURE__ */ jsx31(AnimatePresence, { children: /* @__PURE__ */ jsx31(
-            LoadingSpinner,
-            {
-              isVisible: isBuffering,
-              brandColor,
-              size: "md"
-            }
-          ) }),
-          /* @__PURE__ */ jsx31(
-            PasswordDialog,
-            {
-              isOpen: showPasswordDialog,
-              password: passwordInput,
-              onPasswordChange: (value) => authDispatch(authActions.setPasswordInput(value)),
-              onSubmit: handlePasswordSubmit,
-              onCancel: handlePasswordCancel,
-              isLoading: isAuthenticating,
-              error: passwordError,
-              brandColor
-            }
-          ),
-          /* @__PURE__ */ jsx31(AnimatePresence, { children: /* @__PURE__ */ jsx31(
-            ErrorDisplay,
-            {
-              isVisible: hasError,
-              error,
-              onRetry: retry,
-              brandColor
-            }
-          ) }),
-          /* @__PURE__ */ jsx31(React34.Suspense, { fallback: null, children: /* @__PURE__ */ jsx31(
-            VideoOverlays2,
-            {
-              showSkipIndicator,
-              isPictureInPicture,
-              isSeeking,
-              seekingTime,
-              duration,
-              isPlaying,
-              isBuffering,
-              hasError,
-              showSeekbarTutorial,
-              showPoster,
-              showControls,
-              currentUrl,
-              videoTitle: (currentPlaylistItem == null ? void 0 : currentPlaylistItem.title) || videoTitle,
-              playbackRate,
-              showGestureIndicator,
-              gestureType,
-              volume,
-              brightnessLevel,
-              watermark: effectiveWatermark,
-              brandColor,
-              onTogglePlay: togglePlay
-            }
-          ) }),
-          /* @__PURE__ */ jsx31(ErrorBoundary, { componentName: "CaptionOverlay", minimal: true, children: /* @__PURE__ */ jsx31(
-            CaptionOverlay,
-            {
-              captionsEnabled,
-              currentCaption,
-              containerWidth: containerDimensions.width,
-              showControls
-            }
-          ) }),
-          showUpNext && hasNextTrack && /* @__PURE__ */ jsx31(
-            UpNextOverlay,
-            {
-              nextVideoTitle: (() => {
-                var _a;
-                const idx = peekNextIndex();
-                return idx !== null ? ((_a = effectivePlaylist.items[idx]) == null ? void 0 : _a.title) || "Next Video" : "Next Video";
-              })(),
-              countdownSeconds: upNextCountdown,
-              isPaused: !isPlaying,
-              brandColor,
-              onPlayNext: () => {
-                setShowUpNext(false);
-                handleNextTrack();
-              },
-              onCancel: () => {
-                setUpNextCancelled(true);
-                setShowUpNext(false);
-                toast2({
-                  title: "Auto-play cancelled",
-                  description: "Video will stop at the end.",
-                  duration: 2e3
-                });
-              }
-            }
-          ),
-          !showSeekbarTutorial && /* @__PURE__ */ jsx31(
-            ControlBar,
-            {
-              isPlaying,
-              currentTime,
-              duration,
-              buffered,
-              isBuffering,
-              playbackRate,
-              volume,
-              isMuted,
-              isFullscreen,
-              isPictureInPicture,
-              pipSupported,
-              pipButtonDisabled: pipButtonState.disabled,
-              pipButtonReason: pipButtonState.reason,
-              showControls,
-              containerWidth: containerDimensions.width,
-              brandColor,
-              showChaptersButton: chaptersData.length > 0,
-              showCaptionsButton: effectiveCaptions.length > 0,
-              showSettingsButton: true,
-              showPipButton: containerDimensions.width >= 640,
-              showDockButton: chaptersData.length > 0 || transcriptData.length > 0,
-              showPlaylistButton: effectivePlaylist.items.length > 0,
-              onTogglePlaylist: handleTogglePlaylist,
-              onNextTrack: handleNextTrack,
-              onPrevTrack: handlePrevTrack,
-              hasNextTrack,
-              hasPrevTrack,
-              isPlaylistMode,
-              hasChapters: chaptersData.length > 0,
-              hasCaptions: effectiveCaptions.length > 0,
-              captionsEnabled,
-              showDock,
-              chapters: chaptersData,
-              currentChapter: currentChapter != null ? currentChapter : void 0,
-              onTogglePlay: togglePlay,
-              onSkip: skip,
-              onSeek: seek,
-              onVolumeChange: changeVolume,
-              onToggleMute: toggleMute,
-              onToggleFullscreen: toggleFullscreen,
-              onTogglePip: togglePictureInPicture,
-              onRestart: restart,
-              onToggleChapters: toggleChapters,
-              onToggleCaptions: toggleCaptions,
-              onOpenSettings: () => settingsMenuDispatch(settingsMenuActions.toggle()),
-              onToggleDock: toggleDock,
-              onChapterClick: (index) => navigateToChapter(index)
-            }
-          ),
-          /* @__PURE__ */ jsx31(ErrorBoundary, { componentName: "SettingsMenu", minimal: true, children: /* @__PURE__ */ jsx31(React34.Suspense, { fallback: null, children: /* @__PURE__ */ jsx31(
-            SettingsMenu3,
-            {
-              show: showSettingsMenu,
-              showControls,
-              isFullscreen,
-              menuLevel: settingsMenuLevel,
-              captions: effectiveCaptions,
-              captionsEnabled,
-              selectedLanguage,
-              playbackRate,
-              qualityLevels,
-              currentQualityLevel,
-              brandColor,
-              onNavigateToSubmenu: navigateToSettingsSubmenu,
-              onNavigateBack: navigateBackInSettings,
-              onClose: resetSettingsMenu,
-              onCaptionSelect: handleCaptionSelect,
-              onPlaybackRateChange: changePlaybackRate,
-              onQualitySelect: handleQualitySelect
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx31(ErrorBoundary, { componentName: "DockPanel", minimal: true, children: /* @__PURE__ */ jsx31(React34.Suspense, { fallback: null, children: /* @__PURE__ */ jsx31(
-            DockPanel3,
-            {
-              show: showDock,
-              showControls,
-              containerWidth: containerDimensions.width,
-              activeTab: activeDockTab,
-              onTabChange: handleDockTabChange,
-              chapters: chaptersData,
-              currentChapter,
-              onChapterSelect: seek,
-              transcriptData,
-              currentTime,
-              onTranscriptSelect: seekToTranscriptPosition,
-              captions: effectiveCaptions,
-              selectedLanguage,
-              onLanguageChange: handleDockLanguageChange,
-              brandColor,
-              dockRef,
-              onClose: toggleDock,
-              playlist: effectivePlaylist,
-              currentVideoId: currentPlaylistItem == null ? void 0 : currentPlaylistItem.id,
-              onPlaylistSelect: handlePlaylistSelect,
-              isShuffleEnabled,
-              onToggleShuffle: toggleShuffle,
-              shuffleQueue: isShuffleEnabled ? getQueueOrder() : void 0,
-              playedIndices: isShuffleEnabled ? getPlayedIndices() : void 0,
-              nowPlayingTitle: videoTitle || "Video Playground",
-              onTabInteract: handleDockTabChange
-            }
-          ) }) })
-        ]
-      }
-    ) }),
-    showTranscript && transcriptData.length > 0 && /* @__PURE__ */ jsx31(
-      VideoTranscript2,
-      {
-        transcriptData,
-        currentTime,
-        onSeek: seekToTranscriptPosition
-      }
-    )
-  ] });
+                  style: {
+                    objectFit,
+                    filter: mobileOptimization.isMobile ? `brightness(${brightnessLevel})` : void 0
+                  },
+                  playsInline: true,
+                  "webkit-playsinline": "true",
+                  crossOrigin: "anonymous",
+                  autoPlay: autoplay,
+                  muted: autoplay ? true : muted,
+                  preload: autoplay ? "auto" : batteryOptimization.lowPowerMode ? "none" : connectionOptimization.saveData ? "metadata" : "auto",
+                  onPlay: videoEventHandlers.onPlay,
+                  onPause: videoEventHandlers.onPause,
+                  onEnded: videoEventHandlers.onEnded,
+                  onTimeUpdate: videoEventHandlers.onTimeUpdate,
+                  onVolumeChange: videoEventHandlers.onVolumeChange,
+                  onRateChange: videoEventHandlers.onRateChange,
+                  onLoadStart: videoEventHandlers.onLoadStart,
+                  onLoadedMetadata: videoEventHandlers.onLoadedMetadata,
+                  onCanPlay: videoEventHandlers.onCanPlay,
+                  onWaiting: videoEventHandlers.onWaiting,
+                  onError: videoEventHandlers.onError,
+                  onSeeking: videoEventHandlers.onSeeking,
+                  onSeeked: videoEventHandlers.onSeeked
+                }
+              ),
+              /* @__PURE__ */ jsx31(AnimatePresence, { children: /* @__PURE__ */ jsx31(
+                PosterOverlay,
+                {
+                  isVisible: !!poster && showPoster,
+                  posterUrl: poster,
+                  onPlay: togglePlay,
+                  onPosterLoad: () => {
+                    debugLog("\u2705 Poster loaded successfully");
+                    contentDispatch(contentActions.setLoaded(true));
+                  },
+                  onPosterError: () => {
+                    console.error("\u274C Failed to load poster image:", poster);
+                    contentDispatch(contentActions.error());
+                  },
+                  brandColor
+                }
+              ) }),
+              /* @__PURE__ */ jsx31(AnimatePresence, { children: /* @__PURE__ */ jsx31(
+                LoadingSpinner,
+                {
+                  isVisible: isBuffering,
+                  brandColor,
+                  size: "md"
+                }
+              ) }),
+              /* @__PURE__ */ jsx31(
+                PasswordDialog,
+                {
+                  isOpen: showPasswordDialog,
+                  password: passwordInput,
+                  onPasswordChange: (value) => authDispatch(authActions.setPasswordInput(value)),
+                  onSubmit: handlePasswordSubmit,
+                  onCancel: handlePasswordCancel,
+                  isLoading: isAuthenticating,
+                  error: passwordError,
+                  brandColor
+                }
+              ),
+              /* @__PURE__ */ jsx31(AnimatePresence, { children: /* @__PURE__ */ jsx31(
+                ErrorDisplay,
+                {
+                  isVisible: hasError,
+                  error,
+                  onRetry: retry,
+                  brandColor
+                }
+              ) }),
+              /* @__PURE__ */ jsx31(React34.Suspense, { fallback: null, children: /* @__PURE__ */ jsx31(
+                VideoOverlays2,
+                {
+                  showSkipIndicator,
+                  isPictureInPicture,
+                  isSeeking,
+                  seekingTime,
+                  duration,
+                  isPlaying,
+                  isBuffering,
+                  hasError,
+                  showSeekbarTutorial,
+                  showPoster,
+                  showControls,
+                  currentUrl,
+                  videoTitle: (currentPlaylistItem == null ? void 0 : currentPlaylistItem.title) || videoTitle,
+                  playbackRate,
+                  showGestureIndicator,
+                  gestureType,
+                  volume,
+                  brightnessLevel,
+                  watermark: effectiveWatermark,
+                  brandColor,
+                  onTogglePlay: togglePlay
+                }
+              ) }),
+              /* @__PURE__ */ jsx31(ErrorBoundary, { componentName: "CaptionOverlay", minimal: true, children: /* @__PURE__ */ jsx31(
+                CaptionOverlay,
+                {
+                  captionsEnabled,
+                  currentCaption,
+                  containerWidth: containerDimensions.width,
+                  showControls
+                }
+              ) }),
+              showUpNext && hasNextTrack && /* @__PURE__ */ jsx31(
+                UpNextOverlay,
+                {
+                  nextVideoTitle: (() => {
+                    var _a;
+                    const idx = peekNextIndex();
+                    return idx !== null ? ((_a = effectivePlaylist.items[idx]) == null ? void 0 : _a.title) || "Next Video" : "Next Video";
+                  })(),
+                  countdownSeconds: upNextCountdown,
+                  isPaused: !isPlaying,
+                  brandColor,
+                  onPlayNext: () => {
+                    setShowUpNext(false);
+                    handleNextTrack();
+                  },
+                  onCancel: () => {
+                    setUpNextCancelled(true);
+                    setShowUpNext(false);
+                    toast2({
+                      title: "Auto-play cancelled",
+                      description: "Video will stop at the end.",
+                      duration: 2e3
+                    });
+                  }
+                }
+              ),
+              !showSeekbarTutorial && /* @__PURE__ */ jsx31(
+                ControlBar,
+                {
+                  isPlaying,
+                  currentTime,
+                  duration,
+                  buffered,
+                  isBuffering,
+                  playbackRate,
+                  volume,
+                  isMuted,
+                  isFullscreen,
+                  isPictureInPicture,
+                  pipSupported,
+                  pipButtonDisabled: pipButtonState.disabled,
+                  pipButtonReason: pipButtonState.reason,
+                  showControls,
+                  containerWidth: containerDimensions.width,
+                  brandColor,
+                  showChaptersButton: chaptersData.length > 0,
+                  showCaptionsButton: effectiveCaptions.length > 0,
+                  showSettingsButton: true,
+                  showPipButton: containerDimensions.width >= 640,
+                  showDockButton: chaptersData.length > 0 || transcriptData.length > 0,
+                  showPlaylistButton: effectivePlaylist.items.length > 0,
+                  onTogglePlaylist: handleTogglePlaylist,
+                  onNextTrack: handleNextTrack,
+                  onPrevTrack: handlePrevTrack,
+                  hasNextTrack,
+                  hasPrevTrack,
+                  isPlaylistMode,
+                  hasChapters: chaptersData.length > 0,
+                  hasCaptions: effectiveCaptions.length > 0,
+                  captionsEnabled,
+                  showDock,
+                  chapters: chaptersData,
+                  currentChapter: currentChapter != null ? currentChapter : void 0,
+                  onTogglePlay: togglePlay,
+                  onSkip: skip,
+                  onSeek: seek,
+                  onVolumeChange: changeVolume,
+                  onToggleMute: toggleMute,
+                  onToggleFullscreen: toggleFullscreen,
+                  onTogglePip: togglePictureInPicture,
+                  onRestart: restart,
+                  onToggleChapters: toggleChapters,
+                  onToggleCaptions: toggleCaptions,
+                  onOpenSettings: () => settingsMenuDispatch(settingsMenuActions.toggle()),
+                  onToggleDock: toggleDock,
+                  onChapterClick: (index) => navigateToChapter(index)
+                }
+              ),
+              /* @__PURE__ */ jsx31(ErrorBoundary, { componentName: "SettingsMenu", minimal: true, children: /* @__PURE__ */ jsx31(React34.Suspense, { fallback: null, children: /* @__PURE__ */ jsx31(
+                SettingsMenu3,
+                {
+                  show: showSettingsMenu,
+                  showControls,
+                  isFullscreen,
+                  menuLevel: settingsMenuLevel,
+                  captions: effectiveCaptions,
+                  captionsEnabled,
+                  selectedLanguage,
+                  playbackRate,
+                  qualityLevels,
+                  currentQualityLevel,
+                  brandColor,
+                  onNavigateToSubmenu: navigateToSettingsSubmenu,
+                  onNavigateBack: navigateBackInSettings,
+                  onClose: resetSettingsMenu,
+                  onCaptionSelect: handleCaptionSelect,
+                  onPlaybackRateChange: changePlaybackRate,
+                  onQualitySelect: handleQualitySelect
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx31(ErrorBoundary, { componentName: "DockPanel", minimal: true, children: /* @__PURE__ */ jsx31(React34.Suspense, { fallback: null, children: /* @__PURE__ */ jsx31(
+                DockPanel3,
+                {
+                  show: showDock,
+                  showControls,
+                  containerWidth: containerDimensions.width,
+                  activeTab: activeDockTab,
+                  onTabChange: handleDockTabChange,
+                  chapters: chaptersData,
+                  currentChapter,
+                  onChapterSelect: seek,
+                  transcriptData,
+                  currentTime,
+                  onTranscriptSelect: seekToTranscriptPosition,
+                  captions: effectiveCaptions,
+                  selectedLanguage,
+                  onLanguageChange: handleDockLanguageChange,
+                  brandColor,
+                  dockRef,
+                  onClose: toggleDock,
+                  playlist: effectivePlaylist,
+                  currentVideoId: currentPlaylistItem == null ? void 0 : currentPlaylistItem.id,
+                  onPlaylistSelect: handlePlaylistSelect,
+                  isShuffleEnabled,
+                  onToggleShuffle: toggleShuffle,
+                  shuffleQueue: isShuffleEnabled ? getQueueOrder() : void 0,
+                  playedIndices: isShuffleEnabled ? getPlayedIndices() : void 0,
+                  nowPlayingTitle: videoTitle || "Video Playground",
+                  onTabInteract: handleDockTabChange
+                }
+              ) }) })
+            ]
+          }
+        ) }),
+        showTranscript && transcriptData.length > 0 && /* @__PURE__ */ jsx31(
+          VideoTranscript2,
+          {
+            transcriptData,
+            currentTime,
+            onSeek: seekToTranscriptPosition
+          }
+        )
+      ]
+    }
+  );
 }
 SimpleVideoPlayer.displayName = "SimpleVideoPlayer";
 function SimpleVideoPlayerWithContext(props) {