analytica-frontend-lib 1.1.9 → 1.1.11

package/dist/index.js

@@ -6832,6 +6832,85 @@ var formatTime = (seconds) => {
   const secs = Math.floor(seconds % 60);
   return `${mins}:${secs.toString().padStart(2, "0")}`;
 };
+var ProgressBar2 = ({
+  currentTime,
+  duration,
+  progressPercentage,
+  onSeek
+}) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  "input",
+  {
+    type: "range",
+    min: 0,
+    max: duration || 100,
+    value: currentTime,
+    onChange: (e) => onSeek(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: {
+      background: `linear-gradient(to right, var(--color-primary-700) ${progressPercentage}%, var(--color-secondary-300) ${progressPercentage}%)`
+    }
+  }
+) });
+var VolumeControls = ({
+  volume,
+  isMuted,
+  onVolumeChange,
+  onToggleMute
+}) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    IconButton_default,
+    {
+      icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_phosphor_react18.SpeakerSlash, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_phosphor_react18.SpeakerHigh, { size: 24 }),
+      onClick: onToggleMute,
+      "aria-label": isMuted ? "Unmute" : "Mute",
+      className: "!bg-transparent !text-white hover:!bg-white/20"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "input",
+    {
+      type: "range",
+      min: 0,
+      max: 100,
+      value: Math.round(volume * 100),
+      onChange: (e) => onVolumeChange(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: {
+        background: `linear-gradient(to right, var(--color-primary-700) ${volume * 100}%, var(--color-secondary-300) ${volume * 100}%)`
+      }
+    }
+  )
+] });
+var SpeedMenu = ({
+  showSpeedMenu,
+  playbackRate,
+  onToggleMenu,
+  onSpeedChange
+}) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    IconButton_default,
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_phosphor_react18.DotsThreeVertical, { size: 24 }),
+      onClick: onToggleMenu,
+      "aria-label": "Playback speed",
+      className: "!bg-transparent !text-white hover:!bg-white/20"
+    }
+  ),
+  showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20", children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    "button",
+    {
+      onClick: () => onSpeedChange(speed),
+      className: `block w-full text-left px-3 py-1 text-sm rounded hover:bg-white/20 transition-colors ${playbackRate === speed ? "text-primary-400" : "text-white"}`,
+      children: [
+        speed,
+        "x"
+      ]
+    },
+    speed
+  )) })
+] });
 var VideoPlayer = ({
   src,
   poster,
@@ -6856,10 +6935,51 @@ var VideoPlayer = ({
   const [showControls, setShowControls] = (0, import_react22.useState)(true);
   const [hasCompleted, setHasCompleted] = (0, import_react22.useState)(false);
   const [showCaptions, setShowCaptions] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
+    setHasCompleted(false);
+  }, [src]);
   const [playbackRate, setPlaybackRate] = (0, import_react22.useState)(1);
   const [showSpeedMenu, setShowSpeedMenu] = (0, import_react22.useState)(false);
   const lastSaveTimeRef = (0, import_react22.useRef)(0);
   const trackRef = (0, import_react22.useRef)(null);
+  const controlsTimeoutRef = (0, import_react22.useRef)(null);
+  const lastMousePositionRef = (0, import_react22.useRef)({ x: 0, y: 0 });
+  const mouseMoveTimeoutRef = (0, import_react22.useRef)(null);
+  const clearControlsTimeout = (0, import_react22.useCallback)(() => {
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+      controlsTimeoutRef.current = null;
+    }
+  }, []);
+  const clearMouseMoveTimeout = (0, import_react22.useCallback)(() => {
+    if (mouseMoveTimeoutRef.current) {
+      clearTimeout(mouseMoveTimeoutRef.current);
+      mouseMoveTimeoutRef.current = null;
+    }
+  }, []);
+  const showControlsWithTimer = (0, import_react22.useCallback)(() => {
+    setShowControls(true);
+    clearControlsTimeout();
+    if (isPlaying) {
+      const timeout = isFullscreen ? 2e3 : 3e3;
+      controlsTimeoutRef.current = window.setTimeout(() => {
+        setShowControls(false);
+      }, timeout);
+    }
+  }, [isPlaying, isFullscreen, clearControlsTimeout]);
+  const handleMouseMove = (0, import_react22.useCallback)(
+    (event) => {
+      const currentX = event.clientX;
+      const currentY = event.clientY;
+      const lastPos = lastMousePositionRef.current;
+      const hasMoved = Math.abs(currentX - lastPos.x) > 5 || Math.abs(currentY - lastPos.y) > 5;
+      if (hasMoved) {
+        lastMousePositionRef.current = { x: currentX, y: currentY };
+        showControlsWithTimer();
+      }
+    },
+    [showControlsWithTimer]
+  );
   (0, import_react22.useEffect)(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
@@ -6867,84 +6987,129 @@ var VideoPlayer = ({
     }
   }, [volume, isMuted]);
   (0, import_react22.useEffect)(() => {
-    if (!autoSave || !storageKey) return;
-    const raw = localStorage.getItem(`${storageKey}-${src}`);
-    const saved = raw !== null ? Number(raw) : NaN;
-    const hasValidSaved = Number.isFinite(saved) && saved >= 0;
-    const hasValidInitial = Number.isFinite(initialTime) && initialTime >= 0;
-    let start;
-    if (hasValidInitial) {
-      start = initialTime;
-    } else if (hasValidSaved) {
-      start = saved;
+    const video = videoRef.current;
+    if (!video) return;
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => setIsPlaying(false);
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    video.addEventListener("ended", onEnded);
+    return () => {
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+      video.removeEventListener("ended", onEnded);
+    };
+  }, []);
+  (0, import_react22.useEffect)(() => {
+    if (isPlaying) {
+      showControlsWithTimer();
     } else {
-      start = void 0;
+      clearControlsTimeout();
+      setShowControls(true);
     }
+  }, [isPlaying, showControlsWithTimer, clearControlsTimeout]);
+  (0, import_react22.useEffect)(() => {
+    const handleFullscreenChange = () => {
+      const isCurrentlyFullscreen = !!document.fullscreenElement;
+      setIsFullscreen(isCurrentlyFullscreen);
+      if (isCurrentlyFullscreen) {
+        showControlsWithTimer();
+      }
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, [showControlsWithTimer]);
+  const getInitialTime = (0, import_react22.useCallback)(() => {
+    if (!autoSave || !storageKey) {
+      return Number.isFinite(initialTime) && initialTime >= 0 ? initialTime : void 0;
+    }
+    const saved = Number(localStorage.getItem(`${storageKey}-${src}`) || 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_react22.useEffect)(() => {
+    const start = getInitialTime();
     if (start !== void 0 && videoRef.current) {
       videoRef.current.currentTime = start;
       setCurrentTime(start);
     }
-  }, [src, storageKey, autoSave, initialTime]);
-  const saveProgress = (0, import_react22.useCallback)(() => {
-    if (!autoSave || !storageKey) return;
-    const now = Date.now();
-    if (now - lastSaveTimeRef.current > 5e3) {
-      localStorage.setItem(`${storageKey}-${src}`, currentTime.toString());
-      lastSaveTimeRef.current = now;
-    }
-  }, [autoSave, storageKey, src, currentTime]);
-  const togglePlayPause = (0, import_react22.useCallback)(() => {
-    if (videoRef.current) {
-      if (isPlaying) {
-        videoRef.current.pause();
-      } else {
-        videoRef.current.play();
+  }, [getInitialTime]);
+  const saveProgress = (0, import_react22.useCallback)(
+    (time) => {
+      if (!autoSave || !storageKey) return;
+      const now = Date.now();
+      if (now - lastSaveTimeRef.current > 5e3) {
+        localStorage.setItem(`${storageKey}-${src}`, time.toString());
+        lastSaveTimeRef.current = now;
       }
-      setIsPlaying(!isPlaying);
+    },
+    [autoSave, storageKey, src]
+  );
+  const togglePlayPause = (0, import_react22.useCallback)(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (!video.paused) {
+      video.pause();
+      return;
     }
-  }, [isPlaying]);
+    try {
+      await video.play();
+    } catch {
+    }
+  }, []);
   const handleVolumeChange = (0, import_react22.useCallback)(
     (newVolume) => {
-      if (videoRef.current) {
-        const volumeValue = newVolume / 100;
-        videoRef.current.volume = volumeValue;
-        setVolume(volumeValue);
-        if (volumeValue === 0) {
-          videoRef.current.muted = true;
-          setIsMuted(true);
-        } else if (isMuted) {
-          videoRef.current.muted = false;
-          setIsMuted(false);
-        }
+      const video = videoRef.current;
+      if (!video) return;
+      const volumeValue = newVolume / 100;
+      video.volume = volumeValue;
+      setVolume(volumeValue);
+      const shouldMute = volumeValue === 0;
+      const shouldUnmute = volumeValue > 0 && isMuted;
+      if (shouldMute) {
+        video.muted = true;
+        setIsMuted(true);
+      } else if (shouldUnmute) {
+        video.muted = false;
+        setIsMuted(false);
       }
     },
     [isMuted]
   );
   const toggleMute = (0, import_react22.useCallback)(() => {
-    if (videoRef.current) {
-      if (isMuted) {
-        const restoreVolume = volume > 0 ? volume : 0.5;
-        videoRef.current.volume = restoreVolume;
-        videoRef.current.muted = false;
-        setVolume(restoreVolume);
-        setIsMuted(false);
-      } else {
-        videoRef.current.muted = true;
-        setIsMuted(true);
-      }
+    const video = videoRef.current;
+    if (!video) return;
+    if (isMuted) {
+      const restoreVolume = volume > 0 ? volume : 0.5;
+      video.volume = restoreVolume;
+      video.muted = false;
+      setVolume(restoreVolume);
+      setIsMuted(false);
+    } else {
+      video.muted = true;
+      setIsMuted(true);
     }
   }, [isMuted, volume]);
+  const handleSeek = (0, import_react22.useCallback)((newTime) => {
+    const video = videoRef.current;
+    if (video) {
+      video.currentTime = newTime;
+    }
+  }, []);
   const toggleFullscreen = (0, import_react22.useCallback)(() => {
     const container = videoRef.current?.parentElement;
     if (!container) return;
-    if (!isFullscreen) {
-      if (container.requestFullscreen) {
-        container.requestFullscreen();
-      }
-    } else if (document.exitFullscreen) {
+    if (!isFullscreen && container.requestFullscreen) {
+      container.requestFullscreen();
+    } else if (isFullscreen && document.exitFullscreen) {
       document.exitFullscreen();
     }
-    setIsFullscreen(!isFullscreen);
   }, [isFullscreen]);
   const handleSpeedChange = (0, import_react22.useCallback)((speed) => {
     if (videoRef.current) {
@@ -6957,39 +7122,43 @@ var VideoPlayer = ({
     setShowSpeedMenu(!showSpeedMenu);
   }, [showSpeedMenu]);
   const toggleCaptions = (0, import_react22.useCallback)(() => {
-    if (!trackRef.current?.track) return;
+    if (!trackRef.current?.track || !subtitles) return;
     const newShowCaptions = !showCaptions;
     setShowCaptions(newShowCaptions);
-    trackRef.current.track.mode = newShowCaptions ? "showing" : "hidden";
-  }, [showCaptions]);
-  const handleTimeUpdate = (0, import_react22.useCallback)(() => {
-    if (videoRef.current) {
-      const current = videoRef.current.currentTime;
-      setCurrentTime(current);
-      saveProgress();
-      onTimeUpdate?.(current);
-      if (duration > 0) {
-        const progressPercent = current / duration * 100;
-        onProgress?.(progressPercent);
-        if (progressPercent >= 95 && !hasCompleted) {
-          setHasCompleted(true);
-          onVideoComplete?.();
-        }
+    trackRef.current.track.mode = newShowCaptions && subtitles ? "showing" : "hidden";
+  }, [showCaptions, subtitles]);
+  const checkVideoCompletion = (0, import_react22.useCallback)(
+    (progressPercent) => {
+      if (progressPercent >= 95 && !hasCompleted) {
+        setHasCompleted(true);
+        onVideoComplete?.();
       }
+    },
+    [hasCompleted, onVideoComplete]
+  );
+  const handleTimeUpdate = (0, import_react22.useCallback)(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const current = video.currentTime;
+    setCurrentTime(current);
+    saveProgress(current);
+    onTimeUpdate?.(current);
+    if (duration > 0) {
+      const progressPercent = current / duration * 100;
+      onProgress?.(progressPercent);
+      checkVideoCompletion(progressPercent);
     }
-  }, [
-    duration,
-    saveProgress,
-    onTimeUpdate,
-    onProgress,
-    onVideoComplete,
-    hasCompleted
-  ]);
+  }, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);
   const handleLoadedMetadata = (0, import_react22.useCallback)(() => {
     if (videoRef.current) {
       setDuration(videoRef.current.duration);
     }
   }, []);
+  (0, import_react22.useEffect)(() => {
+    if (trackRef.current?.track) {
+      trackRef.current.track.mode = showCaptions && subtitles ? "showing" : "hidden";
+    }
+  }, [subtitles, showCaptions]);
   (0, import_react22.useEffect)(() => {
     const handleVisibilityChange = () => {
       if (document.hidden && isPlaying && videoRef.current) {
@@ -7008,9 +7177,78 @@ var VideoPlayer = ({
     return () => {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
       window.removeEventListener("blur", handleBlur);
+      clearControlsTimeout();
+      clearMouseMoveTimeout();
     };
-  }, [isPlaying]);
+  }, [isPlaying, clearControlsTimeout, clearMouseMoveTimeout]);
   const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
+  const getTopControlsOpacity = (0, import_react22.useCallback)(() => {
+    if (isFullscreen) {
+      return showControls ? "opacity-100" : "opacity-0";
+    }
+    return !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100";
+  }, [isFullscreen, showControls, isPlaying]);
+  const getBottomControlsOpacity = (0, import_react22.useCallback)(() => {
+    if (isFullscreen) {
+      return showControls ? "opacity-100" : "opacity-0";
+    }
+    return !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100";
+  }, [isFullscreen, showControls, isPlaying]);
+  const handleVideoKeyDown = (0, import_react22.useCallback)(
+    (e) => {
+      if (e.key) {
+        e.stopPropagation();
+        showControlsWithTimer();
+      }
+      switch (e.key) {
+        case " ":
+        case "Enter":
+          e.preventDefault();
+          togglePlayPause();
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (videoRef.current) {
+            videoRef.current.currentTime -= 10;
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (videoRef.current) {
+            videoRef.current.currentTime += 10;
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          handleVolumeChange(Math.min(100, volume * 100 + 10));
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          handleVolumeChange(Math.max(0, volume * 100 - 10));
+          break;
+        case "m":
+        case "M":
+          e.preventDefault();
+          toggleMute();
+          break;
+        case "f":
+        case "F":
+          e.preventDefault();
+          toggleFullscreen();
+          break;
+        default:
+          break;
+      }
+    },
+    [
+      showControlsWithTimer,
+      togglePlayPause,
+      handleVolumeChange,
+      volume,
+      toggleMute,
+      toggleFullscreen
+    ]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("flex flex-col", className), children: [
     (title || subtitleText) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-subject-1 rounded-t-xl px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-1", children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -7037,12 +7275,17 @@ var VideoPlayer = ({
       )
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-      "div",
+      "section",
       {
         className: cn(
           "relative w-full bg-background overflow-hidden group",
-          title || subtitleText ? "rounded-b-xl" : "rounded-xl"
+          title || subtitleText ? "rounded-b-xl" : "rounded-xl",
+          // Hide cursor when controls are hidden and video is playing in fullscreen
+          isFullscreen && isPlaying && !showControls ? "cursor-none" : "cursor-default"
         ),
+        "aria-label": title ? `Video player: ${title}` : "Video player",
+        onMouseMove: isFullscreen ? handleMouseMove : showControlsWithTimer,
+        onMouseEnter: showControlsWithTimer,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "video",
@@ -7055,39 +7298,7 @@ var VideoPlayer = ({
               onTimeUpdate: handleTimeUpdate,
               onLoadedMetadata: handleLoadedMetadata,
               onClick: togglePlayPause,
-              onKeyDown: (e) => {
-                if (e.key) {
-                  setShowControls(true);
-                }
-                if (e.key === " " || e.key === "Enter") {
-                  e.preventDefault();
-                  togglePlayPause();
-                }
-                if (e.key === "ArrowLeft" && videoRef.current) {
-                  e.preventDefault();
-                  videoRef.current.currentTime -= 10;
-                }
-                if (e.key === "ArrowRight" && videoRef.current) {
-                  e.preventDefault();
-                  videoRef.current.currentTime += 10;
-                }
-                if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  handleVolumeChange(Math.min(100, volume * 100 + 10));
-                }
-                if (e.key === "ArrowDown") {
-                  e.preventDefault();
-                  handleVolumeChange(Math.max(0, volume * 100 - 10));
-                }
-                if (e.key === "m" || e.key === "M") {
-                  e.preventDefault();
-                  toggleMute();
-                }
-                if (e.key === "f" || e.key === "F") {
-                  e.preventDefault();
-                  toggleFullscreen();
-                }
-              },
+              onKeyDown: handleVideoKeyDown,
               tabIndex: 0,
               "aria-label": title ? `Video: ${title}` : "Video player",
               children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -7095,9 +7306,9 @@ var VideoPlayer = ({
                 {
                   ref: trackRef,
                   kind: "captions",
-                  src: subtitles || "data:text/vtt;charset=utf-8,WEBVTT%0A%0ANOTE%20No%20captions%20available",
-                  srcLang: "en",
-                  label: subtitles ? "Subtitles" : "No captions available",
+                  src: subtitles || "data:text/vtt;charset=utf-8,WEBVTT",
+                  srcLang: "pt-br",
+                  label: subtitles ? "Legendas em Portugu\xEAs" : "Sem legendas dispon\xEDveis",
                   default: false
                 }
               )
@@ -7117,9 +7328,9 @@ var VideoPlayer = ({
             {
               className: cn(
                 "absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent transition-opacity",
-                !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                getTopControlsOpacity()
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ml-auto block", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 IconButton_default,
                 {
                   icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_phosphor_react18.ArrowsInSimple, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_phosphor_react18.ArrowsOutSimple, { size: 24 }),
@@ -7135,29 +7346,18 @@ var VideoPlayer = ({
             {
               className: cn(
                 "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent transition-opacity",
-                !isPlaying || showControls ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                getBottomControlsOpacity()
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                  "input",
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  ProgressBar2,
                   {
-                    type: "range",
-                    min: 0,
-                    max: duration || 100,
-                    value: currentTime,
-                    onChange: (e) => {
-                      const newTime = parseFloat(e.target.value);
-                      if (videoRef.current) {
-                        videoRef.current.currentTime = newTime;
-                      }
-                    },
-                    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: {
-                      background: `linear-gradient(to right, #2271C4 ${progressPercentage}%, #D5D4D4 ${progressPercentage}%)`
-                    }
+                    currentTime,
+                    duration,
+                    progressPercentage,
+                    onSeek: handleSeek
                   }
-                ) }),
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between px-4 pb-4", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-4", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -7169,32 +7369,15 @@ var VideoPlayer = ({
                         className: "!bg-transparent !text-white hover:!bg-white/20"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                        IconButton_default,
-                        {
-                          icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_phosphor_react18.SpeakerSlash, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_phosphor_react18.SpeakerHigh, { size: 24 }),
-                          onClick: toggleMute,
-                          "aria-label": isMuted ? "Unmute" : "Mute",
-                          className: "!bg-transparent !text-white hover:!bg-white/20"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                        "input",
-                        {
-                          type: "range",
-                          min: 0,
-                          max: 100,
-                          value: Math.round(volume * 100),
-                          onChange: (e) => handleVolumeChange(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: {
-                            background: `linear-gradient(to right, #2271C4 ${volume * 100}%, #D5D4D4 ${volume * 100}%)`
-                          }
-                        }
-                      )
-                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      VolumeControls,
+                      {
+                        volume,
+                        isMuted,
+                        onVolumeChange: handleVolumeChange,
+                        onToggleMute: toggleMute
+                      }
+                    ),
                     subtitles && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                       IconButton_default,
                       {
@@ -7213,29 +7396,15 @@ var VideoPlayer = ({
                       formatTime(duration)
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                      IconButton_default,
-                      {
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_phosphor_react18.DotsThreeVertical, { size: 24 }),
-                        onClick: toggleSpeedMenu,
-                        "aria-label": "Playback speed",
-                        className: "!bg-transparent !text-white hover:!bg-white/20"
-                      }
-                    ),
-                    showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20", children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-                      "button",
-                      {
-                        onClick: () => handleSpeedChange(speed),
-                        className: `block w-full text-left px-3 py-1 text-sm rounded hover:bg-white/20 transition-colors ${playbackRate === speed ? "text-primary-400" : "text-white"}`,
-                        children: [
-                          speed,
-                          "x"
-                        ]
-                      },
-                      speed
-                    )) })
-                  ] }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    SpeedMenu,
+                    {
+                      showSpeedMenu,
+                      playbackRate,
+                      onToggleMenu: toggleSpeedMenu,
+                      onSpeedChange: handleSpeedChange
+                    }
+                  ) })
                 ] })
               ]
             }
@@ -7717,6 +7886,8 @@ var useQuizStore = (0, import_zustand7.create)()(
         isFinished: false,
         userId: "",
         variant: "default",
+        questionsResult: null,
+        currentQuestionResult: null,
         // Setters
         setBySimulated: (simulado) => set({ bySimulated: simulado }),
         setByActivity: (atividade) => set({ byActivity: atividade }),
@@ -7725,6 +7896,7 @@ var useQuizStore = (0, import_zustand7.create)()(
         setUserAnswers: (userAnswers) => set({ userAnswers }),
         getUserId: () => get().userId,
         setVariant: (variant) => set({ variant }),
+        setQuestionResult: (questionsResult) => set({ questionsResult }),
         // Navigation
         goToNextQuestion: () => {
           const { currentQuestionIndex, getTotalQuestions } = get();
@@ -7777,9 +7949,9 @@ var useQuizStore = (0, import_zustand7.create)()(
             questionId,
             activityId,
             userId,
-            answer: question.type === "DISSERTATIVA" /* DISSERTATIVA */ ? answerId : null,
-            optionId: question.type === "DISSERTATIVA" /* DISSERTATIVA */ ? null : answerId,
-            questionType: question.type,
+            answer: question.questionType === "DISSERTATIVA" /* DISSERTATIVA */ ? answerId : null,
+            optionId: question.questionType === "DISSERTATIVA" /* DISSERTATIVA */ ? null : answerId,
+            questionType: question.questionType,
             answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
           };
           let updatedUserAnswers;
@@ -7819,7 +7991,7 @@ var useQuizStore = (0, import_zustand7.create)()(
               // selectMultipleAnswer is for non-dissertative questions
               optionId: answerId,
               // selectMultipleAnswer should only set optionId
-              questionType: question.type,
+              questionType: question.questionType,
               answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
             })
           );
@@ -7846,7 +8018,7 @@ var useQuizStore = (0, import_zustand7.create)()(
           const question = activeQuiz.quiz.questions.find(
             (q) => q.id === questionId
           );
-          if (!question || question.type !== "DISSERTATIVA" /* DISSERTATIVA */) {
+          if (!question || question.questionType !== "DISSERTATIVA" /* DISSERTATIVA */) {
             console.warn(
               "selectDissertativeAnswer called for non-dissertative question"
             );
@@ -7896,7 +8068,7 @@ var useQuizStore = (0, import_zustand7.create)()(
               userId,
               answer: null,
               optionId: null,
-              questionType: currentQuestion.type,
+              questionType: currentQuestion.questionType,
               answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
             };
             let updatedUserAnswers;
@@ -7932,9 +8104,9 @@ var useQuizStore = (0, import_zustand7.create)()(
             questionId,
             activityId,
             userId,
-            answer: question.type === "DISSERTATIVA" /* DISSERTATIVA */ ? answerId || null : null,
-            optionId: question.type !== "DISSERTATIVA" /* DISSERTATIVA */ ? answerId || null : null,
-            questionType: question.type,
+            answer: question.questionType === "DISSERTATIVA" /* DISSERTATIVA */ ? answerId || null : null,
+            optionId: question.questionType !== "DISSERTATIVA" /* DISSERTATIVA */ ? answerId || null : null,
+            questionType: question.questionType,
             answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
           };
           if (existingAnswerIndex !== -1) {
@@ -7962,7 +8134,10 @@ var useQuizStore = (0, import_zustand7.create)()(
             timeElapsed: 0,
             isStarted: false,
             isFinished: false,
-            userId: ""
+            userId: "",
+            variant: "default",
+            questionsResult: null,
+            currentQuestionResult: null
           });
         },
         // Timer
@@ -8164,6 +8339,31 @@ var useQuizStore = (0, import_zustand7.create)()(
             (q) => q.id === questionId
           );
           return questionIndex + 1;
+        },
+        // Question Result
+        getQuestionResultByQuestionId: (questionId) => {
+          const { questionsResult } = get();
+          return questionsResult?.answers.find(
+            (answer) => answer.questionId === questionId
+          ) || null;
+        },
+        getQuestionResultStatistics: () => {
+          const { questionsResult } = get();
+          return questionsResult?.statistics || null;
+        },
+        getQuestionResult: () => {
+          const { questionsResult } = get();
+          return questionsResult;
+        },
+        setQuestionsResult: (questionsResult) => {
+          set({ questionsResult });
+        },
+        setCurrentQuestionResult: (currentQuestionResult) => {
+          set({ currentQuestionResult });
+        },
+        getCurrentQuestionResult: () => {
+          const { currentQuestionResult } = get();
+          return currentQuestionResult;
         }
       };
     },
@@ -8219,18 +8419,21 @@ var Quiz = (0, import_react27.forwardRef)(({ children, className, variant = "def
 });
 var QuizHeaderResult = (0, import_react27.forwardRef)(
   ({ className, ...props }, ref) => {
-    const { getAllCurrentAnswer } = useQuizStore();
-    const usersAnswer = getAllCurrentAnswer();
+    const { getQuestionResultByQuestionId, getCurrentQuestion } = useQuizStore();
     const [isCorrect, setIsCorrect] = (0, import_react27.useState)(false);
     (0, import_react27.useEffect)(() => {
-      if (usersAnswer) {
-        setIsCorrect(
-          usersAnswer.length > 0 ? usersAnswer.map(
-            (answer) => answer.answerStatus === "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */
-          ).every(Boolean) : false
-        );
+      const cq = getCurrentQuestion();
+      if (!cq) {
+        setIsCorrect(false);
+        return;
       }
-    }, [usersAnswer]);
+      const qr = getQuestionResultByQuestionId(cq.id);
+      setIsCorrect(qr?.answerStatus === "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */);
+    }, [
+      getCurrentQuestion,
+      getQuestionResultByQuestionId,
+      getCurrentQuestion()?.id
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       {
@@ -8313,7 +8516,7 @@ var QuizContainer = (0, import_react27.forwardRef)(({ children, className, ...pr
   );
 });
 var QuizContent = (0, import_react27.forwardRef)(({ paddingBottom }) => {
-  const { getCurrentQuestion, variant } = useQuizStore();
+  const { getCurrentQuestion } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
   const questionComponents = {
     ["ALTERNATIVA" /* ALTERNATIVA */]: QuizAlternative,
@@ -8324,26 +8527,35 @@ var QuizContent = (0, import_react27.forwardRef)(({ paddingBottom }) => {
     ["PREENCHER" /* PREENCHER */]: QuizFill,
     ["IMAGEM" /* IMAGEM */]: QuizImageQuestion
   };
-  const QuestionComponent = currentQuestion ? questionComponents[currentQuestion.type] : null;
-  return QuestionComponent ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(QuestionComponent, { variant, paddingBottom }) : null;
+  const QuestionComponent = currentQuestion ? questionComponents[currentQuestion.questionType] : null;
+  return QuestionComponent ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(QuestionComponent, { paddingBottom }) : null;
 });
-var QuizAlternative = ({
-  variant = "default",
-  paddingBottom
-}) => {
-  const { getCurrentQuestion, selectAnswer, getCurrentAnswer } = useQuizStore();
+var QuizAlternative = ({ paddingBottom }) => {
+  const {
+    getCurrentQuestion,
+    selectAnswer,
+    getQuestionResultByQuestionId,
+    getCurrentAnswer,
+    variant
+  } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
+  const currentQuestionResult = getQuestionResultByQuestionId(
+    currentQuestion?.id || ""
+  );
   const currentAnswer = getCurrentAnswer();
   const alternatives = currentQuestion?.options?.map((option) => {
     let status = "neutral" /* NEUTRAL */;
     if (variant === "result") {
-      const isCorrectOption = currentQuestion.options.find(
-        (op) => op.isCorrect
+      const isCorrectOption = currentQuestion.correctOptionIds?.includes(
+        option.id
       );
-      if (isCorrectOption?.id === option.id) {
+      const isSelected = currentQuestionResult?.optionId === option.id;
+      if (isCorrectOption) {
         status = "correct" /* CORRECT */;
-      } else if (currentAnswer?.optionId === option.id && option.id !== isCorrectOption?.id) {
+      } else if (isSelected && !isCorrectOption) {
         status = "incorrect" /* INCORRECT */;
+      } else {
+        status = "neutral" /* NEUTRAL */;
       }
     }
     return {
@@ -8363,8 +8575,8 @@ var QuizAlternative = ({
         name: `question-${currentQuestion?.id || "1"}`,
         layout: "compact",
         alternatives,
-        value: currentAnswer?.optionId || "",
-        selectedValue: currentAnswer?.optionId || "",
+        value: variant === "result" ? currentQuestionResult?.optionId || "" : currentAnswer?.optionId || "",
+        selectedValue: variant === "result" ? currentQuestionResult?.optionId || "" : currentAnswer?.optionId || "",
         onValueChange: (value) => {
           if (currentQuestion) {
             selectAnswer(currentQuestion.id, value);
@@ -8375,13 +8587,19 @@ var QuizAlternative = ({
     ) }) })
   ] });
 };
-var QuizMultipleChoice = ({
-  variant = "default",
-  paddingBottom
-}) => {
-  const { getCurrentQuestion, selectMultipleAnswer, getAllCurrentAnswer } = useQuizStore();
+var QuizMultipleChoice = ({ paddingBottom }) => {
+  const {
+    getCurrentQuestion,
+    selectMultipleAnswer,
+    getAllCurrentAnswer,
+    getQuestionResultByQuestionId,
+    variant
+  } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
   const allCurrentAnswers = getAllCurrentAnswer();
+  const currentQuestionResult = getQuestionResultByQuestionId(
+    currentQuestion?.id || ""
+  );
   const prevSelectedValuesRef = (0, import_react27.useRef)([]);
   const prevQuestionIdRef = (0, import_react27.useRef)("");
   const allCurrentAnswerIds = (0, import_react27.useMemo)(() => {
@@ -8403,8 +8621,16 @@ var QuizMultipleChoice = ({
       prevSelectedValuesRef.current = selectedValues;
       return selectedValues;
     }
+    if (variant == "result" && currentQuestionResult?.options.length && currentQuestionResult?.options.length > 0) {
+      return currentQuestionResult?.options.map((op) => op.id) || [];
+    }
     return prevSelectedValuesRef.current;
-  }, [selectedValues, currentQuestion?.id]);
+  }, [
+    selectedValues,
+    currentQuestion?.id,
+    variant,
+    currentQuestionResult?.optionId
+  ]);
   const handleSelectedValues = (0, import_react27.useCallback)(
     (values) => {
       if (currentQuestion) {
@@ -8420,11 +8646,18 @@ var QuizMultipleChoice = ({
   const choices = currentQuestion?.options?.map((option) => {
     let status = "neutral" /* NEUTRAL */;
     if (variant === "result") {
-      const isAllCorrectOptionId = currentQuestion.options.filter((op) => op.isCorrect).map((op) => op.id);
-      if (isAllCorrectOptionId.includes(option.id)) {
+      const isCorrectOption = currentQuestion.correctOptionIds?.includes(
+        option.id
+      );
+      const isSelected = currentQuestionResult?.options.find(
+        (op) => op.id === option.id
+      );
+      if (isCorrectOption) {
         status = "correct" /* CORRECT */;
-      } else if (allCurrentAnswerIds?.includes(option.id) && !isAllCorrectOptionId.includes(option.id)) {
+      } else if (isSelected && !isCorrectOption) {
         status = "incorrect" /* INCORRECT */;
+      } else {
+        status = "neutral" /* NEUTRAL */;
       }
     }
     return {
@@ -8450,12 +8683,18 @@ var QuizMultipleChoice = ({
     ) }) })
   ] });
 };
-var QuizDissertative = ({
-  variant = "default",
-  paddingBottom
-}) => {
-  const { getCurrentQuestion, getCurrentAnswer, selectDissertativeAnswer } = useQuizStore();
+var QuizDissertative = ({ paddingBottom }) => {
+  const {
+    getCurrentQuestion,
+    getCurrentAnswer,
+    selectDissertativeAnswer,
+    getQuestionResultByQuestionId,
+    variant
+  } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
+  const currentQuestionResult = getQuestionResultByQuestionId(
+    currentQuestion?.id || ""
+  );
   const currentAnswer = getCurrentAnswer();
   const textareaRef = (0, import_react27.useRef)(null);
   const handleAnswerChange = (value) => {
@@ -8479,6 +8718,7 @@ var QuizDissertative = ({
   if (!currentQuestion) {
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-text-600 text-md", children: "Nenhuma quest\xE3o dispon\xEDvel" }) });
   }
+  const localAnswer = (variant == "result" ? currentQuestionResult?.answer : currentAnswer?.answer) || "";
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(QuizSubTitle, { subTitle: "Resposta" }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(QuizContainer, { className: cn(variant != "result" && paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "space-y-4 max-h-[600px] overflow-y-auto", children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -8486,22 +8726,20 @@ var QuizDissertative = ({
       {
         ref: textareaRef,
         placeholder: "Escreva sua resposta",
-        value: currentAnswer?.answer || "",
+        value: localAnswer,
         onChange: (e) => handleAnswerChange(e.target.value),
         rows: 4,
         className: "min-h-[120px] max-h-[400px] resize-none overflow-y-auto"
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: currentAnswer?.answer || "Nenhuma resposta fornecida" }) }) }) }),
-    variant === "result" && currentAnswer?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: localAnswer || "Nenhuma resposta fornecida" }) }) }) }),
+    variant === "result" && currentQuestionResult?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(QuizSubTitle, { subTitle: "Observa\xE7\xE3o do professor" }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Mauris euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim." }) })
     ] })
   ] });
 };
-var QuizTrueOrFalse = ({
-  variant = "default",
-  paddingBottom
-}) => {
+var QuizTrueOrFalse = ({ paddingBottom }) => {
+  const { variant } = useQuizStore();
   const options = [
     {
       label: "25 metros",
@@ -8561,10 +8799,8 @@ var QuizTrueOrFalse = ({
     }) }) })
   ] });
 };
-var QuizConnectDots = ({
-  variant = "default",
-  paddingBottom
-}) => {
+var QuizConnectDots = ({ paddingBottom }) => {
+  const { variant } = useQuizStore();
   const dotsOptions = [
     { label: "Ra\xE7\xE3o" },
     { label: "Rato" },
@@ -8690,10 +8926,8 @@ var QuizConnectDots = ({
     }) }) })
   ] });
 };
-var QuizFill = ({
-  variant = "default",
-  paddingBottom = "pb-[80px]"
-}) => {
+var QuizFill = ({ paddingBottom = "pb-[80px]" }) => {
+  const { variant } = useQuizStore();
   const options = [
     "ci\xEAncia",
     "disciplina",
@@ -8862,10 +9096,8 @@ var QuizFill = ({
     ] })
   ] });
 };
-var QuizImageQuestion = ({
-  variant = "default",
-  paddingBottom
-}) => {
+var QuizImageQuestion = ({ paddingBottom }) => {
+  const { variant } = useQuizStore();
   const correctPositionRelative = { x: 0.48, y: 0.45 };
   const calculateCorrectRadiusRelative = () => {
     const circleWidthRelative = 0.15;
@@ -9083,7 +9315,6 @@ var QuizFooter = (0, import_react27.forwardRef)(
   }, ref) => {
     const {
       currentQuestionIndex,
-      getUserAnswers,
       getTotalQuestions,
       goToNextQuestion,
       goToPreviousQuestion,
@@ -9093,7 +9324,7 @@ var QuizFooter = (0, import_react27.forwardRef)(
       getCurrentQuestion,
       getQuestionStatusFromUserAnswers,
       variant,
-      getActiveQuiz
+      getQuestionResultStatistics
     } = useQuizStore();
     const totalQuestions = getTotalQuestions();
     const isFirstQuestion = currentQuestionIndex === 0;
@@ -9107,7 +9338,6 @@ var QuizFooter = (0, import_react27.forwardRef)(
     const [modalResolutionOpen, setModalResolutionOpen] = (0, import_react27.useState)(false);
     const [filterType, setFilterType] = (0, import_react27.useState)("all");
     const unansweredQuestions = getUnansweredQuestionsFromUserAnswers();
-    const userAnswers = getUserAnswers();
     const allQuestions = getTotalQuestions();
     const handleFinishQuiz = async () => {
       if (unansweredQuestions.length > 0) {
@@ -9267,21 +9497,9 @@ var QuizFooter = (0, import_react27.forwardRef)(
               /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-text-500 font-sm", children: [
                 "Voc\xEA acertou",
                 " ",
-                (() => {
-                  const activeQuiz = getActiveQuiz();
-                  if (!activeQuiz) return 0;
-                  return userAnswers.filter((answer) => {
-                    const question = activeQuiz.quiz.questions.find(
-                      (q) => q.id === answer.questionId
-                    );
-                    const isCorrectOption = question?.options.find(
-                      (op) => op.isCorrect
-                    );
-                    return question && answer.optionId === isCorrectOption?.id;
-                  }).length;
-                })(),
+                getQuestionResultStatistics()?.correctAnswers ?? "--",
+                " de",
                 " ",
-                "de ",
                 allQuestions,
                 " quest\xF5es."
               ] })
@@ -9338,7 +9556,7 @@ var QuizFooter = (0, import_react27.forwardRef)(
           onClose: () => setModalResolutionOpen(false),
           title: "Resolu\xE7\xE3o",
           size: "lg",
-          children: currentQuestion?.answerKey
+          children: currentQuestion?.solutionExplanation
         }
       )
     ] });
@@ -9354,7 +9572,7 @@ var QuizResultHeaderTitle = (0, import_react27.forwardRef)(({ className, ...prop
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: "Resultado" }),
-        bySimulated && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Badge_default, { variant: "solid", action: "info", children: bySimulated.category })
+        bySimulated && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Badge_default, { variant: "solid", action: "info", children: bySimulated.type })
       ]
     }
   );
@@ -9378,13 +9596,11 @@ var QuizResultPerformance = (0, import_react27.forwardRef)(
       getTotalQuestions,
       timeElapsed,
       formatTime: formatTime2,
-      bySimulated,
-      byActivity,
-      byQuestionary,
-      getUserAnswerByQuestionId
+      getQuestionResultStatistics,
+      getQuestionResult
     } = useQuizStore();
     const totalQuestions = getTotalQuestions();
-    const quiz = bySimulated || byActivity || byQuestionary;
+    const questionResult = getQuestionResult();
     let correctAnswers = 0;
     let correctEasyAnswers = 0;
     let correctMediumAnswers = 0;
@@ -9392,24 +9608,23 @@ var QuizResultPerformance = (0, import_react27.forwardRef)(
     let totalEasyQuestions = 0;
     let totalMediumQuestions = 0;
     let totalDifficultQuestions = 0;
-    if (quiz) {
-      quiz.questions.forEach((question) => {
-        const userAnswerItem = getUserAnswerByQuestionId(question.id);
-        const isCorrect = userAnswerItem?.answerStatus == "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */;
+    if (questionResult) {
+      questionResult.answers.forEach((answer) => {
+        const isCorrect = answer.answerStatus == "RESPOSTA_CORRETA" /* RESPOSTA_CORRETA */;
         if (isCorrect) {
           correctAnswers++;
         }
-        if (question.difficulty === "FACIL" /* FACIL */) {
+        if (answer.difficultyLevel === "FACIL" /* FACIL */) {
           totalEasyQuestions++;
           if (isCorrect) {
             correctEasyAnswers++;
           }
-        } else if (question.difficulty === "MEDIO" /* MEDIO */) {
+        } else if (answer.difficultyLevel === "MEDIO" /* MEDIO */) {
           totalMediumQuestions++;
           if (isCorrect) {
             correctMediumAnswers++;
           }
-        } else if (question.difficulty === "DIFICIL" /* DIFICIL */) {
+        } else if (answer.difficultyLevel === "DIFICIL" /* DIFICIL */) {
           totalDifficultQuestions++;
           if (isCorrect) {
             correctDifficultAnswers++;
@@ -9442,8 +9657,9 @@ var QuizResultPerformance = (0, import_react27.forwardRef)(
                 /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-2xs font-medium text-text-800", children: formatTime2(timeElapsed) })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "text-2xl font-medium text-text-800 leading-7", children: [
-                correctAnswers,
-                " de ",
+                getQuestionResultStatistics()?.correctAnswers ?? "--",
+                " de",
+                " ",
                 totalQuestions
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-2xs font-medium text-text-600 mt-1", children: "Corretas" })