analytica-frontend-lib 1.1.80 → 1.1.82

package/dist/VideoPlayer/index.mjs

@@ -1,9 +1,9 @@
 // src/components/VideoPlayer/VideoPlayer.tsx
 import {
   useRef,
-  useState as useState2,
+  useState as useState3,
   useEffect as useEffect2,
-  useCallback
+  useCallback as useCallback2
 } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -208,13 +208,197 @@ var useMobile = () => {
   };
 };
 
+// src/components/DownloadButton/DownloadButton.tsx
+import { useCallback, useState as useState2 } from "react";
+import { DownloadSimple } from "phosphor-react";
+import { jsx as jsx3 } from "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] = useState2(false);
+  const isValidUrl = useCallback((url) => {
+    return Boolean(
+      url && url.trim() !== "" && url !== "undefined" && url !== "null"
+    );
+  }, []);
+  const getAvailableContent = 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 = 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__ */ jsx3("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx3(
+    IconButton_default,
+    {
+      icon: /* @__PURE__ */ jsx3(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
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "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")}`;
@@ -225,14 +409,14 @@ var ProgressBar = ({
   progressPercentage,
   onSeek,
   className = "px-4 pb-2"
-}) => /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3(
+}) => /* @__PURE__ */ jsx4("div", { className, children: /* @__PURE__ */ jsx4(
   "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: {
@@ -248,23 +432,23 @@ var VolumeControls = ({
   iconSize = 24,
   showSlider = true
 }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ jsx3(
+  /* @__PURE__ */ jsx4(
     IconButton_default,
     {
-      icon: isMuted ? /* @__PURE__ */ jsx3(SpeakerSlash, { size: iconSize }) : /* @__PURE__ */ jsx3(SpeakerHigh, { size: iconSize }),
+      icon: isMuted ? /* @__PURE__ */ jsx4(SpeakerSlash, { size: iconSize }) : /* @__PURE__ */ jsx4(SpeakerHigh, { size: iconSize }),
       onClick: onToggleMute,
       "aria-label": isMuted ? "Unmute" : "Mute",
       className: "!bg-transparent !text-white hover:!bg-white/20"
     }
   ),
-  showSlider && /* @__PURE__ */ jsx3(
+  showSlider && /* @__PURE__ */ jsx4(
     "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: {
@@ -314,17 +498,17 @@ var SpeedMenu = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showSpeedMenu, onToggleMenu]);
-  const menuContent = /* @__PURE__ */ jsx3(
+  const menuContent = /* @__PURE__ */ jsx4(
     "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__ */ jsxs(
         "button",
         {
@@ -341,13 +525,13 @@ var SpeedMenu = ({
       ))
     }
   );
-  const portalContent = typeof window !== "undefined" && typeof document !== "undefined" ? createPortal(menuContent, document.body) : null;
+  const portalContent = showSpeedMenu && globalThis.window !== void 0 && globalThis.document !== void 0 && !!globalThis.document?.body ? createPortal(menuContent, globalThis.document.body) : null;
   return /* @__PURE__ */ jsxs("div", { className: "relative", ref: speedMenuContainerRef, children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       IconButton_default,
       {
         ref: buttonRef,
-        icon: /* @__PURE__ */ jsx3(DotsThreeVertical, { size: iconSize }),
+        icon: /* @__PURE__ */ jsx4(DotsThreeVertical, { size: iconSize }),
         onClick: onToggleMenu,
         "aria-label": "Playback speed",
         "aria-haspopup": "menu",
@@ -370,29 +554,34 @@ var VideoPlayer = ({
   onVideoComplete,
   className,
   autoSave = true,
-  storageKey = "video-progress"
+  storageKey = "video-progress",
+  downloadContent,
+  showDownloadButton = false,
+  onDownloadStart,
+  onDownloadComplete,
+  onDownloadError
 }) => {
   const videoRef = useRef(null);
   const { isUltraSmallMobile, isTinyMobile } = useMobile();
-  const [isPlaying, setIsPlaying] = useState2(false);
-  const [currentTime, setCurrentTime] = useState2(0);
-  const [duration, setDuration] = useState2(0);
-  const [isMuted, setIsMuted] = useState2(false);
-  const [volume, setVolume] = useState2(1);
-  const [isFullscreen, setIsFullscreen] = useState2(false);
-  const [showControls, setShowControls] = useState2(true);
-  const [hasCompleted, setHasCompleted] = useState2(false);
-  const [showCaptions, setShowCaptions] = useState2(false);
+  const [isPlaying, setIsPlaying] = useState3(false);
+  const [currentTime, setCurrentTime] = useState3(0);
+  const [duration, setDuration] = useState3(0);
+  const [isMuted, setIsMuted] = useState3(false);
+  const [volume, setVolume] = useState3(1);
+  const [isFullscreen, setIsFullscreen] = useState3(false);
+  const [showControls, setShowControls] = useState3(true);
+  const [hasCompleted, setHasCompleted] = useState3(false);
+  const [showCaptions, setShowCaptions] = useState3(false);
   useEffect2(() => {
     setHasCompleted(false);
   }, [src]);
-  const [playbackRate, setPlaybackRate] = useState2(1);
-  const [showSpeedMenu, setShowSpeedMenu] = useState2(false);
+  const [playbackRate, setPlaybackRate] = useState3(1);
+  const [showSpeedMenu, setShowSpeedMenu] = useState3(false);
   const lastSaveTimeRef = useRef(0);
   const trackRef = useRef(null);
   const controlsTimeoutRef = useRef(null);
   const lastMousePositionRef = useRef({ x: 0, y: 0 });
-  const isUserInteracting = useCallback(() => {
+  const isUserInteracting = useCallback2(() => {
     if (showSpeedMenu) {
       return true;
     }
@@ -409,28 +598,28 @@ var VideoPlayer = ({
     }
     return false;
   }, [showSpeedMenu]);
-  const clearControlsTimeout = useCallback(() => {
+  const clearControlsTimeout = useCallback2(() => {
     if (controlsTimeoutRef.current) {
       clearTimeout(controlsTimeoutRef.current);
       controlsTimeoutRef.current = null;
     }
   }, []);
-  const showControlsWithTimer = useCallback(() => {
+  const showControlsWithTimer = useCallback2(() => {
     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 = useCallback(
+  const handleMouseMove = useCallback2(
     (event) => {
       const currentX = event.clientX;
       const currentY = event.clientY;
@@ -443,14 +632,14 @@ var VideoPlayer = ({
     },
     [showControlsWithTimer]
   );
-  const handleMouseEnter = useCallback(() => {
+  const handleMouseEnter = useCallback2(() => {
     showControlsWithTimer();
   }, [showControlsWithTimer]);
-  const handleMouseLeave = useCallback(() => {
+  const handleMouseLeave = useCallback2(() => {
     const userInteracting = isUserInteracting();
     clearControlsTimeout();
     if (!isFullscreen && !userInteracting) {
-      controlsTimeoutRef.current = window.setTimeout(() => {
+      controlsTimeoutRef.current = globalThis.setTimeout(() => {
         setShowControls(false);
       }, LEAVE_HIDE_TIMEOUT);
     }
@@ -514,7 +703,12 @@ var VideoPlayer = ({
       }
     };
     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);
       });
@@ -522,18 +716,15 @@ var VideoPlayer = ({
         cancelAnimationFrame(raf1);
         cancelAnimationFrame(raf2);
       };
-    } else {
-      tid = window.setTimeout(init, INIT_DELAY);
-      return () => {
-        if (tid) clearTimeout(tid);
-      };
     }
   }, []);
-  const getInitialTime = useCallback(() => {
+  const getInitialTime = useCallback2(() => {
     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;
@@ -547,7 +738,7 @@ var VideoPlayer = ({
       setCurrentTime(start);
     }
   }, [getInitialTime]);
-  const saveProgress = useCallback(
+  const saveProgress = useCallback2(
     (time) => {
       if (!autoSave || !storageKey) return;
       const now = Date.now();
@@ -558,7 +749,7 @@ var VideoPlayer = ({
     },
     [autoSave, storageKey, src]
   );
-  const togglePlayPause = useCallback(async () => {
+  const togglePlayPause = useCallback2(async () => {
     const video = videoRef.current;
     if (!video) return;
     if (!video.paused) {
@@ -570,7 +761,7 @@ var VideoPlayer = ({
     } catch {
     }
   }, []);
-  const handleVolumeChange = useCallback(
+  const handleVolumeChange = useCallback2(
     (newVolume) => {
       const video = videoRef.current;
       if (!video) return;
@@ -589,7 +780,7 @@ var VideoPlayer = ({
     },
     [isMuted]
   );
-  const toggleMute = useCallback(() => {
+  const toggleMute = useCallback2(() => {
     const video = videoRef.current;
     if (!video) return;
     if (isMuted) {
@@ -603,13 +794,13 @@ var VideoPlayer = ({
       setIsMuted(true);
     }
   }, [isMuted, volume]);
-  const handleSeek = useCallback((newTime) => {
+  const handleSeek = useCallback2((newTime) => {
     const video = videoRef.current;
     if (video) {
       video.currentTime = newTime;
     }
   }, []);
-  const toggleFullscreen = useCallback(() => {
+  const toggleFullscreen = useCallback2(() => {
     const container = videoRef.current?.parentElement;
     if (!container) return;
     if (!isFullscreen && container.requestFullscreen) {
@@ -618,23 +809,23 @@ var VideoPlayer = ({
       document.exitFullscreen();
     }
   }, [isFullscreen]);
-  const handleSpeedChange = useCallback((speed) => {
+  const handleSpeedChange = useCallback2((speed) => {
     if (videoRef.current) {
       videoRef.current.playbackRate = speed;
       setPlaybackRate(speed);
       setShowSpeedMenu(false);
     }
   }, []);
-  const toggleSpeedMenu = useCallback(() => {
+  const toggleSpeedMenu = useCallback2(() => {
     setShowSpeedMenu(!showSpeedMenu);
   }, [showSpeedMenu]);
-  const toggleCaptions = useCallback(() => {
+  const toggleCaptions = useCallback2(() => {
     if (!trackRef.current?.track || !subtitles) return;
     const newShowCaptions = !showCaptions;
     setShowCaptions(newShowCaptions);
     trackRef.current.track.mode = newShowCaptions && subtitles ? "showing" : "hidden";
   }, [showCaptions, subtitles]);
-  const checkVideoCompletion = useCallback(
+  const checkVideoCompletion = useCallback2(
     (progressPercent) => {
       if (progressPercent >= 95 && !hasCompleted) {
         setHasCompleted(true);
@@ -643,7 +834,7 @@ var VideoPlayer = ({
     },
     [hasCompleted, onVideoComplete]
   );
-  const handleTimeUpdate = useCallback(() => {
+  const handleTimeUpdate = useCallback2(() => {
     const video = videoRef.current;
     if (!video) return;
     const current = video.currentTime;
@@ -656,7 +847,7 @@ var VideoPlayer = ({
       checkVideoCompletion(progressPercent);
     }
   }, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);
-  const handleLoadedMetadata = useCallback(() => {
+  const handleLoadedMetadata = useCallback2(() => {
     if (videoRef.current) {
       setDuration(videoRef.current.duration);
     }
@@ -680,46 +871,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 = useCallback(() => {
+  const getIconSize = useCallback2(() => {
     if (isTinyMobile) return 18;
     if (isUltraSmallMobile) return 20;
     return 24;
   }, [isTinyMobile, isUltraSmallMobile]);
-  const getControlsPadding = useCallback(() => {
+  const getControlsPadding = useCallback2(() => {
     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 = useCallback(() => {
+  const getControlsGap = useCallback2(() => {
     if (isTinyMobile) return "gap-1";
     if (isUltraSmallMobile) return "gap-2";
     return "gap-4";
   }, [isTinyMobile, isUltraSmallMobile]);
-  const getProgressBarPadding = useCallback(() => {
+  const getProgressBarPadding = useCallback2(() => {
     if (isTinyMobile) return "px-2 pb-1";
     if (isUltraSmallMobile) return "px-3 pb-1";
     return "px-4 pb-2";
   }, [isTinyMobile, isUltraSmallMobile]);
-  const getCenterPlayButtonPosition = useCallback(() => {
+  const getCenterPlayButtonPosition = useCallback2(() => {
     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 = useCallback(() => {
+  const getTopControlsOpacity = useCallback2(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
-  const getBottomControlsOpacity = useCallback(() => {
+  const getBottomControlsOpacity = useCallback2(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
-  const handleVideoKeyDown = useCallback(
+  const handleVideoKeyDown = useCallback2(
     (e) => {
       if (e.key) {
         e.stopPropagation();
@@ -775,30 +966,43 @@ var VideoPlayer = ({
     ]
   );
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    (title || subtitleText) && /* @__PURE__ */ jsx3("div", { className: "bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-      title && /* @__PURE__ */ jsx3(
-        Text_default,
-        {
-          as: "h2",
-          size: "lg",
-          weight: "bold",
-          color: "text-text-900",
-          className: "leading-5 tracking-wide",
-          children: title
-        }
-      ),
-      subtitleText && /* @__PURE__ */ jsx3(
-        Text_default,
+    (title || subtitleText) && /* @__PURE__ */ jsxs("div", { className: "bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        title && /* @__PURE__ */ jsx4(
+          Text_default,
+          {
+            as: "h2",
+            size: "lg",
+            weight: "bold",
+            color: "text-text-900",
+            className: "leading-5 tracking-wide",
+            children: title
+          }
+        ),
+        subtitleText && /* @__PURE__ */ jsx4(
+          Text_default,
+          {
+            as: "p",
+            size: "sm",
+            weight: "normal",
+            color: "text-text-600",
+            className: "leading-5",
+            children: subtitleText
+          }
+        )
+      ] }),
+      showDownloadButton && downloadContent && /* @__PURE__ */ jsx4(
+        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__ */ jsxs(
       "section",
       {
@@ -814,7 +1018,7 @@ var VideoPlayer = ({
         onTouchStart: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "video",
             {
               ref: videoRef,
@@ -829,7 +1033,7 @@ var VideoPlayer = ({
               onKeyDown: handleVideoKeyDown,
               tabIndex: 0,
               "aria-label": title ? `Video: ${title}` : "Video player",
-              children: /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx4(
                 "track",
                 {
                   ref: trackRef,
@@ -842,17 +1046,17 @@ var VideoPlayer = ({
               )
             }
           ),
-          !isPlaying && /* @__PURE__ */ jsx3(
+          !isPlaying && /* @__PURE__ */ jsx4(
             "div",
             {
               className: cn(
                 "absolute inset-0 flex bg-black/30 transition-opacity",
                 getCenterPlayButtonPosition()
               ),
-              children: /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx4(
                 IconButton_default,
                 {
-                  icon: /* @__PURE__ */ jsx3(Play, { size: 32, weight: "regular", className: "ml-1" }),
+                  icon: /* @__PURE__ */ jsx4(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"
@@ -860,17 +1064,17 @@ var VideoPlayer = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "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__ */ jsx3("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx4("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx4(
                 IconButton_default,
                 {
-                  icon: isFullscreen ? /* @__PURE__ */ jsx3(ArrowsInSimple, { size: 24 }) : /* @__PURE__ */ jsx3(ArrowsOutSimple, { size: 24 }),
+                  icon: isFullscreen ? /* @__PURE__ */ jsx4(ArrowsInSimple, { size: 24 }) : /* @__PURE__ */ jsx4(ArrowsOutSimple, { size: 24 }),
                   onClick: toggleFullscreen,
                   "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
                   className: "!bg-transparent !text-white hover:!bg-white/20"
@@ -886,7 +1090,7 @@ var VideoPlayer = ({
                 getBottomControlsOpacity()
               ),
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   ProgressBar,
                   {
                     currentTime,
@@ -905,16 +1109,16 @@ var VideoPlayer = ({
                     ),
                     children: [
                       /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", getControlsGap()), children: [
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx4(
                           IconButton_default,
                           {
-                            icon: isPlaying ? /* @__PURE__ */ jsx3(Pause, { size: getIconSize() }) : /* @__PURE__ */ jsx3(Play, { size: getIconSize() }),
+                            icon: isPlaying ? /* @__PURE__ */ jsx4(Pause, { size: getIconSize() }) : /* @__PURE__ */ jsx4(Play, { size: getIconSize() }),
                             onClick: togglePlayPause,
                             "aria-label": isPlaying ? "Pause" : "Play",
                             className: "!bg-transparent !text-white hover:!bg-white/20"
                           }
                         ),
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx4(
                           VolumeControls,
                           {
                             volume,
@@ -925,10 +1129,10 @@ var VideoPlayer = ({
                             showSlider: !isUltraSmallMobile
                           }
                         ),
-                        subtitles && /* @__PURE__ */ jsx3(
+                        subtitles && /* @__PURE__ */ jsx4(
                           IconButton_default,
                           {
-                            icon: /* @__PURE__ */ jsx3(ClosedCaptioning, { size: getIconSize() }),
+                            icon: /* @__PURE__ */ jsx4(ClosedCaptioning, { size: getIconSize() }),
                             onClick: toggleCaptions,
                             "aria-label": showCaptions ? "Hide captions" : "Show captions",
                             className: cn(
@@ -943,7 +1147,7 @@ var VideoPlayer = ({
                           formatTime(duration)
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx4(
                         SpeedMenu,
                         {
                           showSpeedMenu,