analytica-frontend-lib 1.1.90 → 1.1.91

package/dist/VideoPlayer/index.js

@@ -582,6 +582,7 @@ var VideoPlayer = ({
   const [showControls, setShowControls] = (0, import_react4.useState)(true);
   const [hasCompleted, setHasCompleted] = (0, import_react4.useState)(false);
   const [showCaptions, setShowCaptions] = (0, import_react4.useState)(false);
+  const [subtitlesValidation, setSubtitlesValidation] = (0, import_react4.useState)("idle");
   (0, import_react4.useEffect)(() => {
     setHasCompleted(false);
   }, [src]);
@@ -867,11 +868,12 @@ var VideoPlayer = ({
     setShowSpeedMenu(!showSpeedMenu);
   }, [showSpeedMenu]);
   const toggleCaptions = (0, import_react4.useCallback)(() => {
-    if (!trackRef.current?.track || !subtitles) return;
+    if (!trackRef.current?.track || !subtitles || subtitlesValidation !== "valid")
+      return;
     const newShowCaptions = !showCaptions;
     setShowCaptions(newShowCaptions);
-    trackRef.current.track.mode = newShowCaptions && subtitles ? "showing" : "hidden";
-  }, [showCaptions, subtitles]);
+    trackRef.current.track.mode = newShowCaptions ? "showing" : "hidden";
+  }, [showCaptions, subtitles, subtitlesValidation]);
   const checkVideoCompletion = (0, import_react4.useCallback)(
     (progressPercent) => {
       if (progressPercent >= 95 && !hasCompleted) {
@@ -899,11 +901,58 @@ var VideoPlayer = ({
       setDuration(videoRef.current.duration);
     }
   }, []);
+  (0, import_react4.useEffect)(() => {
+    const controller = new AbortController();
+    const validateSubtitles = async () => {
+      if (!subtitles) {
+        setSubtitlesValidation("idle");
+        return;
+      }
+      setSubtitlesValidation("validating");
+      try {
+        if (subtitles.startsWith("data:")) {
+          setSubtitlesValidation("valid");
+          return;
+        }
+        const response = await fetch(subtitles, {
+          method: "HEAD",
+          signal: controller.signal
+        });
+        if (response.ok) {
+          const contentType = response.headers.get("content-type");
+          const isValidType = !contentType || contentType.includes("text/vtt") || contentType.includes("text/plain") || contentType.includes("application/octet-stream");
+          if (isValidType) {
+            setSubtitlesValidation("valid");
+          } else {
+            setSubtitlesValidation("invalid");
+            console.warn(
+              `Subtitles URL has invalid content type: ${contentType}`
+            );
+          }
+        } else {
+          setSubtitlesValidation("invalid");
+          console.warn(
+            `Subtitles URL returned status: ${response.status} ${response.statusText}`
+          );
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          return;
+        }
+        console.warn("Subtitles URL validation failed:", error);
+        setSubtitlesValidation("invalid");
+      }
+    };
+    validateSubtitles();
+    return () => {
+      controller.abort();
+    };
+  }, [subtitles]);
   (0, import_react4.useEffect)(() => {
     if (trackRef.current?.track) {
-      trackRef.current.track.mode = showCaptions && subtitles ? "showing" : "hidden";
+      trackRef.current.track.mode = showCaptions && subtitles && subtitlesValidation === "valid" ? "showing" : "hidden";
     }
-  }, [subtitles, showCaptions]);
+  }, [subtitles, showCaptions, subtitlesValidation]);
   (0, import_react4.useEffect)(() => {
     const handleVisibilityChange = () => {
       if (document.hidden && isPlaying && videoRef.current) {
@@ -957,61 +1006,57 @@ var VideoPlayer = ({
   const getBottomControlsOpacity = (0, import_react4.useCallback)(() => {
     return showControls ? "opacity-100" : "opacity-0";
   }, [showControls]);
+  const seekBackward = (0, import_react4.useCallback)(() => {
+    if (videoRef.current) {
+      videoRef.current.currentTime -= 10;
+    }
+  }, []);
+  const seekForward = (0, import_react4.useCallback)(() => {
+    if (videoRef.current) {
+      videoRef.current.currentTime += 10;
+    }
+  }, []);
+  const increaseVolume = (0, import_react4.useCallback)(() => {
+    handleVolumeChange(Math.min(100, volume * 100 + 10));
+  }, [handleVolumeChange, volume]);
+  const decreaseVolume = (0, import_react4.useCallback)(() => {
+    handleVolumeChange(Math.max(0, volume * 100 - 10));
+  }, [handleVolumeChange, volume]);
   const handleVideoKeyDown = (0, import_react4.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;
+      if (!e.key) return;
+      e.stopPropagation();
+      showControlsWithTimer();
+      const keyHandlers = {
+        " ": togglePlayPause,
+        Enter: togglePlayPause,
+        ArrowLeft: seekBackward,
+        ArrowRight: seekForward,
+        ArrowUp: increaseVolume,
+        ArrowDown: decreaseVolume,
+        m: toggleMute,
+        M: toggleMute,
+        f: toggleFullscreen,
+        F: toggleFullscreen
+      };
+      const handler = keyHandlers[e.key];
+      if (handler) {
+        e.preventDefault();
+        handler();
       }
     },
     [
       showControlsWithTimer,
       togglePlayPause,
-      handleVolumeChange,
-      volume,
+      seekBackward,
+      seekForward,
+      increaseVolume,
+      decreaseVolume,
       toggleMute,
       toggleFullscreen
     ]
   );
+  const groupedSubTitleValid = subtitles && subtitlesValidation === "valid";
   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: [
@@ -1085,9 +1130,9 @@ var VideoPlayer = ({
                 {
                   ref: trackRef,
                   kind: "captions",
-                  src: subtitles || "data:text/vtt;charset=utf-8,WEBVTT",
+                  src: groupedSubTitleValid ? subtitles : "data:text/vtt;charset=utf-8,WEBVTT",
                   srcLang: "pt-br",
-                  label: subtitles ? "Legendas em Portugu\xEAs" : "Sem legendas dispon\xEDveis",
+                  label: groupedSubTitleValid ? "Legendas em Portugu\xEAs" : "Sem legendas dispon\xEDveis",
                   default: false
                 }
               )
@@ -1176,7 +1221,7 @@ var VideoPlayer = ({
                             showSlider: !isUltraSmallMobile
                           }
                         ),
-                        subtitles && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        groupedSubTitleValid && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           IconButton_default,
                           {
                             icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.ClosedCaptioning, { size: getIconSize() }),