analytica-frontend-lib 1.1.80 → 1.1.82

package/dist/VideoPlayer/index.js

@@ -23,9 +23,9 @@ __export(VideoPlayer_exports, {
   default: () => VideoPlayer_default
 });
 module.exports = __toCommonJS(VideoPlayer_exports);
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_dom = require("react-dom");
-var import_phosphor_react = require("phosphor-react");
+var import_phosphor_react2 = require("phosphor-react");
 
 // src/utils/utils.ts
 var import_clsx = require("clsx");
@@ -218,13 +218,197 @@ var useMobile = () => {
   };
 };
 
-// src/components/VideoPlayer/VideoPlayer.tsx
+// src/components/DownloadButton/DownloadButton.tsx
+var import_react3 = require("react");
+var import_phosphor_react = require("phosphor-react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var getMimeType = (url) => {
+  const extension = getFileExtension(url);
+  const mimeTypes = {
+    pdf: "application/pdf",
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    mp3: "audio/mpeg",
+    mp4: "video/mp4",
+    vtt: "text/vtt"
+  };
+  return mimeTypes[extension] || "application/octet-stream";
+};
+var triggerDownload = async (url, filename) => {
+  try {
+    const response = await fetch(url, {
+      mode: "cors",
+      credentials: "same-origin"
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch file: ${response.status} ${response.statusText}`
+      );
+    }
+    const blob = await response.blob();
+    const mimeType = getMimeType(url);
+    const typedBlob = new Blob([blob], { type: mimeType });
+    const blobUrl = URL.createObjectURL(typedBlob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = filename;
+    link.rel = "noopener noreferrer";
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => {
+      URL.revokeObjectURL(blobUrl);
+    }, 1e3);
+  } catch (error) {
+    console.warn("Fetch download failed, falling back to direct link:", error);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.rel = "noopener noreferrer";
+    link.target = "_blank";
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+};
+var getFileExtension = (url) => {
+  try {
+    const u = new URL(url, globalThis.location?.origin || "http://localhost");
+    url = u.pathname;
+  } catch {
+  }
+  const path = url.split(/[?#]/)[0];
+  const dot = path.lastIndexOf(".");
+  return dot > -1 ? path.slice(dot + 1).toLowerCase() : "file";
+};
+var generateFilename = (contentType, url, lessonTitle = "aula") => {
+  const sanitizedTitle = lessonTitle.toLowerCase().replaceAll(/[^a-z0-9\s]/g, "").replaceAll(/\s+/g, "-").substring(0, 50);
+  const extension = getFileExtension(url);
+  return `${sanitizedTitle}-${contentType}.${extension}`;
+};
+var DownloadButton = ({
+  content,
+  className,
+  onDownloadStart,
+  onDownloadComplete,
+  onDownloadError,
+  lessonTitle = "aula",
+  disabled = false
+}) => {
+  const [isDownloading, setIsDownloading] = (0, import_react3.useState)(false);
+  const isValidUrl = (0, import_react3.useCallback)((url) => {
+    return Boolean(
+      url && url.trim() !== "" && url !== "undefined" && url !== "null"
+    );
+  }, []);
+  const getAvailableContent = (0, import_react3.useCallback)(() => {
+    const downloads = [];
+    if (isValidUrl(content.urlDoc)) {
+      downloads.push({
+        type: "documento",
+        url: content.urlDoc,
+        label: "Documento"
+      });
+    }
+    if (isValidUrl(content.urlInitialFrame)) {
+      downloads.push({
+        type: "quadro-inicial",
+        url: content.urlInitialFrame,
+        label: "Quadro Inicial"
+      });
+    }
+    if (isValidUrl(content.urlFinalFrame)) {
+      downloads.push({
+        type: "quadro-final",
+        url: content.urlFinalFrame,
+        label: "Quadro Final"
+      });
+    }
+    if (isValidUrl(content.urlPodcast)) {
+      downloads.push({
+        type: "podcast",
+        url: content.urlPodcast,
+        label: "Podcast"
+      });
+    }
+    if (isValidUrl(content.urlVideo)) {
+      downloads.push({ type: "video", url: content.urlVideo, label: "V\xEDdeo" });
+    }
+    return downloads;
+  }, [content, isValidUrl]);
+  const handleDownload = (0, import_react3.useCallback)(async () => {
+    if (disabled || isDownloading) return;
+    const availableContent = getAvailableContent();
+    if (availableContent.length === 0) {
+      return;
+    }
+    setIsDownloading(true);
+    try {
+      for (let i = 0; i < availableContent.length; i++) {
+        const item = availableContent[i];
+        try {
+          onDownloadStart?.(item.type);
+          const filename = generateFilename(item.type, item.url, lessonTitle);
+          await triggerDownload(item.url, filename);
+          onDownloadComplete?.(item.type);
+          if (i < availableContent.length - 1) {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+          }
+        } catch (error) {
+          console.error(`Erro ao baixar ${item.label}:`, error);
+          onDownloadError?.(
+            item.type,
+            error instanceof Error ? error : new Error(`Falha ao baixar ${item.label}`)
+          );
+        }
+      }
+    } finally {
+      setIsDownloading(false);
+    }
+  }, [
+    disabled,
+    isDownloading,
+    getAvailableContent,
+    lessonTitle,
+    onDownloadStart,
+    onDownloadComplete,
+    onDownloadError
+  ]);
+  const hasContent = getAvailableContent().length > 0;
+  if (!hasContent) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    IconButton_default,
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.DownloadSimple, { size: 24 }),
+      onClick: handleDownload,
+      disabled: disabled || isDownloading,
+      "aria-label": (() => {
+        if (isDownloading) {
+          return "Baixando conte\xFAdo...";
+        }
+        const contentCount = getAvailableContent().length;
+        const suffix = contentCount > 1 ? "s" : "";
+        return `Baixar conte\xFAdo da aula (${contentCount} arquivo${suffix})`;
+      })(),
+      className: cn(
+        "!bg-transparent hover:!bg-black/10 transition-colors",
+        isDownloading && "opacity-60 cursor-not-allowed"
+      )
+    }
+  ) });
+};
+var DownloadButton_default = DownloadButton;
+
+// src/components/VideoPlayer/VideoPlayer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var CONTROLS_HIDE_TIMEOUT = 3e3;
 var LEAVE_HIDE_TIMEOUT = 1e3;
 var INIT_DELAY = 100;
 var formatTime = (seconds) => {
-  if (!seconds || isNaN(seconds)) return "0:00";
+  if (!seconds || Number.isNaN(seconds)) return "0:00";
   const mins = Math.floor(seconds / 60);
   const secs = Math.floor(seconds % 60);
   return `${mins}:${secs.toString().padStart(2, "0")}`;
@@ -235,14 +419,14 @@ var ProgressBar = ({
   progressPercentage,
   onSeek,
   className = "px-4 pb-2"
-}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "input",
   {
     type: "range",
     min: 0,
     max: duration || 100,
     value: currentTime,
-    onChange: (e) => onSeek(parseFloat(e.target.value)),
+    onChange: (e) => onSeek(Number.parseFloat(e.target.value)),
     className: "w-full h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer slider:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500",
     "aria-label": "Video progress",
     style: {
@@ -257,24 +441,24 @@ var VolumeControls = ({
   onToggleMute,
   iconSize = 24,
   showSlider = true
-}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     IconButton_default,
     {
-      icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.SpeakerSlash, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.SpeakerHigh, { size: iconSize }),
+      icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.SpeakerSlash, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.SpeakerHigh, { size: iconSize }),
       onClick: onToggleMute,
       "aria-label": isMuted ? "Unmute" : "Mute",
       className: "!bg-transparent !text-white hover:!bg-white/20"
     }
   ),
-  showSlider && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  showSlider && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "input",
     {
       type: "range",
       min: 0,
       max: 100,
       value: Math.round(volume * 100),
-      onChange: (e) => onVolumeChange(parseInt(e.target.value)),
+      onChange: (e) => onVolumeChange(Number.parseInt(e.target.value)),
       className: "w-20 h-1 bg-neutral-600 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500",
       "aria-label": "Volume control",
       style: {
@@ -292,9 +476,9 @@ var SpeedMenu = ({
   iconSize = 24,
   isTinyMobile = false
 }) => {
-  const buttonRef = (0, import_react3.useRef)(null);
-  const speedMenuContainerRef = (0, import_react3.useRef)(null);
-  const speedMenuRef = (0, import_react3.useRef)(null);
+  const buttonRef = (0, import_react4.useRef)(null);
+  const speedMenuContainerRef = (0, import_react4.useRef)(null);
+  const speedMenuRef = (0, import_react4.useRef)(null);
   const getMenuPosition = () => {
     if (!buttonRef.current) return { top: 0, left: 0 };
     const rect = buttonRef.current.getBoundingClientRect();
@@ -308,7 +492,7 @@ var SpeedMenu = ({
     };
   };
   const position = getMenuPosition();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       const isOutsideContainer = speedMenuContainerRef.current && !speedMenuContainerRef.current.contains(target);
@@ -324,18 +508,18 @@ var SpeedMenu = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showSpeedMenu, onToggleMenu]);
-  const menuContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const menuContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ref: speedMenuRef,
       role: "menu",
       "aria-label": "Playback speed",
       className: isFullscreen ? "absolute bottom-12 right-0 bg-background border border-border-100 rounded-lg shadow-lg p-2 min-w-24 z-[9999]" : "fixed bg-background border border-border-100 rounded-lg shadow-lg p-2 min-w-24 z-[9999]",
-      style: !isFullscreen ? {
+      style: isFullscreen ? void 0 : {
         top: `${position.top}px`,
         left: `${position.left}px`
-      } : void 0,
-      children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      },
+      children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           role: "menuitemradio",
@@ -351,13 +535,13 @@ var SpeedMenu = ({
       ))
     }
   );
-  const portalContent = typeof window !== "undefined" && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(menuContent, document.body) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", ref: speedMenuContainerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const portalContent = showSpeedMenu && globalThis.window !== void 0 && globalThis.document !== void 0 && !!globalThis.document?.body ? (0, import_react_dom.createPortal)(menuContent, globalThis.document.body) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", ref: speedMenuContainerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       IconButton_default,
       {
         ref: buttonRef,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.DotsThreeVertical, { size: iconSize }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.DotsThreeVertical, { size: iconSize }),
         onClick: onToggleMenu,
         "aria-label": "Playback speed",
         "aria-haspopup": "menu",
@@ -380,29 +564,34 @@ var VideoPlayer = ({
   onVideoComplete,
   className,
   autoSave = true,
-  storageKey = "video-progress"
+  storageKey = "video-progress",
+  downloadContent,
+  showDownloadButton = false,
+  onDownloadStart,
+  onDownloadComplete,
+  onDownloadError
 }) => {
-  const videoRef = (0, import_react3.useRef)(null);
+  const videoRef = (0, import_react4.useRef)(null);
   const { isUltraSmallMobile, isTinyMobile } = useMobile();
-  const [isPlaying, setIsPlaying] = (0, import_react3.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react3.useState)(0);
-  const [duration, setDuration] = (0, import_react3.useState)(0);
-  const [isMuted, setIsMuted] = (0, import_react3.useState)(false);
-  const [volume, setVolume] = (0, import_react3.useState)(1);
-  const [isFullscreen, setIsFullscreen] = (0, import_react3.useState)(false);
-  const [showControls, setShowControls] = (0, import_react3.useState)(true);
-  const [hasCompleted, setHasCompleted] = (0, import_react3.useState)(false);
-  const [showCaptions, setShowCaptions] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
+  const [isPlaying, setIsPlaying] = (0, import_react4.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react4.useState)(0);
+  const [duration, setDuration] = (0, import_react4.useState)(0);
+  const [isMuted, setIsMuted] = (0, import_react4.useState)(false);
+  const [volume, setVolume] = (0, import_react4.useState)(1);
+  const [isFullscreen, setIsFullscreen] = (0, import_react4.useState)(false);
+  const [showControls, setShowControls] = (0, import_react4.useState)(true);
+  const [hasCompleted, setHasCompleted] = (0, import_react4.useState)(false);
+  const [showCaptions, setShowCaptions] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
     setHasCompleted(false);
   }, [src]);
-  const [playbackRate, setPlaybackRate] = (0, import_react3.useState)(1);
-  const [showSpeedMenu, setShowSpeedMenu] = (0, import_react3.useState)(false);
-  const lastSaveTimeRef = (0, import_react3.useRef)(0);
-  const trackRef = (0, import_react3.useRef)(null);
-  const controlsTimeoutRef = (0, import_react3.useRef)(null);
-  const lastMousePositionRef = (0, import_react3.useRef)({ x: 0, y: 0 });
-  const isUserInteracting = (0, import_react3.useCallback)(() => {
+  const [playbackRate, setPlaybackRate] = (0, import_react4.useState)(1);
+  const [showSpeedMenu, setShowSpeedMenu] = (0, import_react4.useState)(false);
+  const lastSaveTimeRef = (0, import_react4.useRef)(0);
+  const trackRef = (0, import_react4.useRef)(null);
+  const controlsTimeoutRef = (0, import_react4.useRef)(null);
+  const lastMousePositionRef = (0, import_react4.useRef)({ x: 0, y: 0 });
+  const isUserInteracting = (0, import_react4.useCallback)(() => {
     if (showSpeedMenu) {
       return true;
     }
@@ -419,28 +608,28 @@ var VideoPlayer = ({
     }
     return false;
   }, [showSpeedMenu]);
-  const clearControlsTimeout = (0, import_react3.useCallback)(() => {
+  const clearControlsTimeout = (0, import_react4.useCallback)(() => {
     if (controlsTimeoutRef.current) {
       clearTimeout(controlsTimeoutRef.current);
       controlsTimeoutRef.current = null;
     }
   }, []);
-  const showControlsWithTimer = (0, import_react3.useCallback)(() => {
+  const showControlsWithTimer = (0, import_react4.useCallback)(() => {
     setShowControls(true);
     clearControlsTimeout();
     if (isFullscreen) {
       if (isPlaying) {
-        controlsTimeoutRef.current = window.setTimeout(() => {
+        controlsTimeoutRef.current = globalThis.setTimeout(() => {
           setShowControls(false);
         }, CONTROLS_HIDE_TIMEOUT);
       }
     } else {
-      controlsTimeoutRef.current = window.setTimeout(() => {
+      controlsTimeoutRef.current = globalThis.setTimeout(() => {
         setShowControls(false);
       }, CONTROLS_HIDE_TIMEOUT);
     }
   }, [isFullscreen, isPlaying, clearControlsTimeout]);
-  const handleMouseMove = (0, import_react3.useCallback)(
+  const handleMouseMove = (0, import_react4.useCallback)(
     (event) => {
       const currentX = event.clientX;
       const currentY = event.clientY;
@@ -453,25 +642,25 @@ var VideoPlayer = ({
     },
     [showControlsWithTimer]
   );
-  const handleMouseEnter = (0, import_react3.useCallback)(() => {
+  const handleMouseEnter = (0, import_react4.useCallback)(() => {
     showControlsWithTimer();
   }, [showControlsWithTimer]);
-  const handleMouseLeave = (0, import_react3.useCallback)(() => {
+  const handleMouseLeave = (0, import_react4.useCallback)(() => {
     const userInteracting = isUserInteracting();
     clearControlsTimeout();
     if (!isFullscreen && !userInteracting) {
-      controlsTimeoutRef.current = window.setTimeout(() => {
+      controlsTimeoutRef.current = globalThis.setTimeout(() => {
         setShowControls(false);
       }, LEAVE_HIDE_TIMEOUT);
     }
   }, [isFullscreen, clearControlsTimeout, isUserInteracting]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
       videoRef.current.muted = isMuted;
     }
   }, [volume, isMuted]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const video = videoRef.current;
     if (!video) return;
     const onPlay = () => setIsPlaying(true);
@@ -486,13 +675,13 @@ var VideoPlayer = ({
       video.removeEventListener("ended", onEnded);
     };
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const video = videoRef.current;
     if (!video) return;
     video.setAttribute("playsinline", "");
     video.setAttribute("webkit-playsinline", "");
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (isPlaying) {
       showControlsWithTimer();
     } else {
@@ -504,7 +693,7 @@ var VideoPlayer = ({
       }
     }
   }, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleFullscreenChange = () => {
       const isCurrentlyFullscreen = !!document.fullscreenElement;
       setIsFullscreen(isCurrentlyFullscreen);
@@ -517,14 +706,19 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [showControlsWithTimer]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const init = () => {
       if (!isFullscreen) {
         showControlsWithTimer();
       }
     };
     let raf1 = 0, raf2 = 0, tid;
-    if (typeof window.requestAnimationFrame === "function") {
+    if (globalThis.requestAnimationFrame === void 0) {
+      tid = globalThis.setTimeout(init, INIT_DELAY);
+      return () => {
+        if (tid) clearTimeout(tid);
+      };
+    } else {
       raf1 = requestAnimationFrame(() => {
         raf2 = requestAnimationFrame(init);
       });
@@ -532,32 +726,29 @@ var VideoPlayer = ({
         cancelAnimationFrame(raf1);
         cancelAnimationFrame(raf2);
       };
-    } else {
-      tid = window.setTimeout(init, INIT_DELAY);
-      return () => {
-        if (tid) clearTimeout(tid);
-      };
     }
   }, []);
-  const getInitialTime = (0, import_react3.useCallback)(() => {
+  const getInitialTime = (0, import_react4.useCallback)(() => {
     if (!autoSave || !storageKey) {
       return Number.isFinite(initialTime) && initialTime >= 0 ? initialTime : void 0;
     }
-    const saved = Number(localStorage.getItem(`${storageKey}-${src}`) || NaN);
+    const saved = Number(
+      localStorage.getItem(`${storageKey}-${src}`) || Number.NaN
+    );
     const hasValidInitial = Number.isFinite(initialTime) && initialTime >= 0;
     const hasValidSaved = Number.isFinite(saved) && saved >= 0;
     if (hasValidInitial) return initialTime;
     if (hasValidSaved) return saved;
     return void 0;
   }, [autoSave, storageKey, src, initialTime]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const start = getInitialTime();
     if (start !== void 0 && videoRef.current) {
       videoRef.current.currentTime = start;
       setCurrentTime(start);
     }
   }, [getInitialTime]);
-  const saveProgress = (0, import_react3.useCallback)(
+  const saveProgress = (0, import_react4.useCallback)(
     (time) => {
       if (!autoSave || !storageKey) return;
       const now = Date.now();
@@ -568,7 +759,7 @@ var VideoPlayer = ({
     },
     [autoSave, storageKey, src]
   );
-  const togglePlayPause = (0, import_react3.useCallback)(async () => {
+  const togglePlayPause = (0, import_react4.useCallback)(async () => {
     const video = videoRef.current;
     if (!video) return;
     if (!video.paused) {
@@ -580,7 +771,7 @@ var VideoPlayer = ({
     } catch {
     }
   }, []);
-  const handleVolumeChange = (0, import_react3.useCallback)(
+  const handleVolumeChange = (0, import_react4.useCallback)(
     (newVolume) => {
       const video = videoRef.current;
       if (!video) return;
@@ -599,7 +790,7 @@ var VideoPlayer = ({
     },
     [isMuted]
   );
-  const toggleMute = (0, import_react3.useCallback)(() => {
+  const toggleMute = (0, import_react4.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
     if (isMuted) {
@@ -613,13 +804,13 @@ var VideoPlayer = ({
       setIsMuted(true);
     }
   }, [isMuted, volume]);
-  const handleSeek = (0, import_react3.useCallback)((newTime) => {
+  const handleSeek = (0, import_react4.useCallback)((newTime) => {
     const video = videoRef.current;
     if (video) {
       video.currentTime = newTime;
     }
   }, []);
-  const toggleFullscreen = (0, import_react3.useCallback)(() => {
+  const toggleFullscreen = (0, import_react4.useCallback)(() => {
     const container = videoRef.current?.parentElement;
     if (!container) return;
     if (!isFullscreen && container.requestFullscreen) {
@@ -628,23 +819,23 @@ var VideoPlayer = ({
       document.exitFullscreen();
     }
   }, [isFullscreen]);
-  const handleSpeedChange = (0, import_react3.useCallback)((speed) => {
+  const handleSpeedChange = (0, import_react4.useCallback)((speed) => {
     if (videoRef.current) {
       videoRef.current.playbackRate = speed;
       setPlaybackRate(speed);
       setShowSpeedMenu(false);
     }
   }, []);
-  const toggleSpeedMenu = (0, import_react3.useCallback)(() => {
+  const toggleSpeedMenu = (0, import_react4.useCallback)(() => {
     setShowSpeedMenu(!showSpeedMenu);
   }, [showSpeedMenu]);
-  const toggleCaptions = (0, import_react3.useCallback)(() => {
+  const toggleCaptions = (0, import_react4.useCallback)(() => {
     if (!trackRef.current?.track || !subtitles) return;
     const newShowCaptions = !showCaptions;
     setShowCaptions(newShowCaptions);
     trackRef.current.track.mode = newShowCaptions && subtitles ? "showing" : "hidden";
   }, [showCaptions, subtitles]);
-  const checkVideoCompletion = (0, import_react3.useCallback)(
+  const checkVideoCompletion = (0, import_react4.useCallback)(
     (progressPercent) => {
       if (progressPercent >= 95 && !hasCompleted) {
         setHasCompleted(true);
@@ -653,7 +844,7 @@ var VideoPlayer = ({
     },
     [hasCompleted, onVideoComplete]
   );
-  const handleTimeUpdate = (0, import_react3.useCallback)(() => {
+  const handleTimeUpdate = (0, import_react4.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
     const current = video.currentTime;
@@ -666,17 +857,17 @@ var VideoPlayer = ({
       checkVideoCompletion(progressPercent);
     }
   }, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);
-  const handleLoadedMetadata = (0, import_react3.useCallback)(() => {
+  const handleLoadedMetadata = (0, import_react4.useCallback)(() => {
     if (videoRef.current) {
       setDuration(videoRef.current.duration);
     }
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (trackRef.current?.track) {
       trackRef.current.track.mode = showCaptions && subtitles ? "showing" : "hidden";
     }
   }, [subtitles, showCaptions]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleVisibilityChange = () => {
       if (document.hidden && isPlaying && videoRef.current) {
         videoRef.current.pause();
@@ -690,46 +881,46 @@ var VideoPlayer = ({
       }
     };
     document.addEventListener("visibilitychange", handleVisibilityChange);
-    window.addEventListener("blur", handleBlur);
+    globalThis.addEventListener("blur", handleBlur);
     return () => {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
-      window.removeEventListener("blur", handleBlur);
+      globalThis.removeEventListener("blur", handleBlur);
       clearControlsTimeout();
     };
   }, [isPlaying, clearControlsTimeout]);
   const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
-  const getIconSize = (0, import_react3.useCallback)(() => {
+  const getIconSize = (0, import_react4.useCallback)(() => {
     if (isTinyMobile) return 18;
     if (isUltraSmallMobile) return 20;
     return 24;
   }, [isTinyMobile, isUltraSmallMobile]);
-  const getControlsPadding = (0, import_react3.useCallback)(() => {
+  const getControlsPadding = (0, import_react4.useCallback)(() => {
     if (isTinyMobile) return "px-2 pb-2 pt-1";
     if (isUltraSmallMobile) return "px-3 pb-3 pt-1";
     return "px-4 pb-4";
   }, [isTinyMobile, isUltraSmallMobile]);
-  const getControlsGap = (0, import_react3.useCallback)(() => {
+  const getControlsGap = (0, import_react4.useCallback)(() => {
     if (isTinyMobile) return "gap-1";
     if (isUltraSmallMobile) return "gap-2";
     return "gap-4";
   }, [isTinyMobile, isUltraSmallMobile]);
-  const getProgressBarPadding = (0, import_react3.useCallback)(() => {
+  const getProgressBarPadding = (0, import_react4.useCallback)(() => {
     if (isTinyMobile) return "px-2 pb-1";
     if (isUltraSmallMobile) return "px-3 pb-1";
     return "px-4 pb-2";
   }, [isTinyMobile, isUltraSmallMobile]);
-  const getCenterPlayButtonPosition = (0, import_react3.useCallback)(() => {
+  const getCenterPlayButtonPosition = (0, import_react4.useCallback)(() => {
     if (isTinyMobile) return "items-center justify-center -translate-y-12";
     if (isUltraSmallMobile) return "items-center justify-center -translate-y-8";
     return "items-center justify-center";
   }, [isTinyMobile, isUltraSmallMobile]);
-  const getTopControlsOpacity = (0, import_react3.useCallback)(() => {
+  const getTopControlsOpacity = (0, import_react4.useCallback)(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
-  const getBottomControlsOpacity = (0, import_react3.useCallback)(() => {
+  const getBottomControlsOpacity = (0, import_react4.useCallback)(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
-  const handleVideoKeyDown = (0, import_react3.useCallback)(
+  const handleVideoKeyDown = (0, import_react4.useCallback)(
     (e) => {
       if (e.key) {
         e.stopPropagation();
@@ -784,32 +975,45 @@ var VideoPlayer = ({
       toggleFullscreen
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex flex-col", className), children: [
-    (title || subtitleText) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Text_default,
-        {
-          as: "h2",
-          size: "lg",
-          weight: "bold",
-          color: "text-text-900",
-          className: "leading-5 tracking-wide",
-          children: title
-        }
-      ),
-      subtitleText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Text_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex flex-col", className), children: [
+    (title || subtitleText) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Text_default,
+          {
+            as: "h2",
+            size: "lg",
+            weight: "bold",
+            color: "text-text-900",
+            className: "leading-5 tracking-wide",
+            children: title
+          }
+        ),
+        subtitleText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Text_default,
+          {
+            as: "p",
+            size: "sm",
+            weight: "normal",
+            color: "text-text-600",
+            className: "leading-5",
+            children: subtitleText
+          }
+        )
+      ] }),
+      showDownloadButton && downloadContent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        DownloadButton_default,
         {
-          as: "p",
-          size: "sm",
-          weight: "normal",
-          color: "text-text-600",
-          className: "leading-5",
-          children: subtitleText
+          content: downloadContent,
+          lessonTitle: title,
+          onDownloadStart,
+          onDownloadComplete,
+          onDownloadError,
+          className: "flex-shrink-0"
         }
       )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "section",
       {
         className: cn(
@@ -824,7 +1028,7 @@ var VideoPlayer = ({
         onTouchStart: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "video",
             {
               ref: videoRef,
@@ -839,7 +1043,7 @@ var VideoPlayer = ({
               onKeyDown: handleVideoKeyDown,
               tabIndex: 0,
               "aria-label": title ? `Video: ${title}` : "Video player",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "track",
                 {
                   ref: trackRef,
@@ -852,17 +1056,17 @@ var VideoPlayer = ({
               )
             }
           ),
-          !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
               className: cn(
                 "absolute inset-0 flex bg-black/30 transition-opacity",
                 getCenterPlayButtonPosition()
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 IconButton_default,
                 {
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Play, { size: 32, weight: "regular", className: "ml-1" }),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.Play, { size: 32, weight: "regular", className: "ml-1" }),
                   onClick: togglePlayPause,
                   "aria-label": "Play video",
                   className: "!bg-transparent !text-white !w-auto !h-auto hover:!bg-transparent hover:!text-gray-200"
@@ -870,17 +1074,17 @@ var VideoPlayer = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
               className: cn(
                 "absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent transition-opacity",
                 getTopControlsOpacity()
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 IconButton_default,
                 {
-                  icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.ArrowsInSimple, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.ArrowsOutSimple, { size: 24 }),
+                  icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.ArrowsInSimple, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.ArrowsOutSimple, { size: 24 }),
                   onClick: toggleFullscreen,
                   "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
                   className: "!bg-transparent !text-white hover:!bg-white/20"
@@ -888,7 +1092,7 @@ var VideoPlayer = ({
               ) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
               className: cn(
@@ -896,7 +1100,7 @@ var VideoPlayer = ({
                 getBottomControlsOpacity()
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   ProgressBar,
                   {
                     currentTime,
@@ -906,7 +1110,7 @@ var VideoPlayer = ({
                     className: getProgressBarPadding()
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   "div",
                   {
                     className: cn(
@@ -914,17 +1118,17 @@ var VideoPlayer = ({
                       getControlsPadding()
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex items-center", getControlsGap()), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex items-center", getControlsGap()), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           IconButton_default,
                           {
-                            icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Pause, { size: getIconSize() }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Play, { size: getIconSize() }),
+                            icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.Pause, { size: getIconSize() }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.Play, { size: getIconSize() }),
                             onClick: togglePlayPause,
                             "aria-label": isPlaying ? "Pause" : "Play",
                             className: "!bg-transparent !text-white hover:!bg-white/20"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           VolumeControls,
                           {
                             volume,
@@ -935,10 +1139,10 @@ var VideoPlayer = ({
                             showSlider: !isUltraSmallMobile
                           }
                         ),
-                        subtitles && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        subtitles && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           IconButton_default,
                           {
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.ClosedCaptioning, { size: getIconSize() }),
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.ClosedCaptioning, { size: getIconSize() }),
                             onClick: toggleCaptions,
                             "aria-label": showCaptions ? "Hide captions" : "Show captions",
                             className: cn(
@@ -947,13 +1151,13 @@ var VideoPlayer = ({
                             )
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
                           formatTime(currentTime),
                           " / ",
                           formatTime(duration)
                         ] })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         SpeedMenu,
                         {
                           showSpeedMenu,