@geekapps/silo-elements-nextjs 0.1.17 → 0.1.19

package/dist/index.js

@@ -1269,6 +1269,7 @@ function Video({
   const [currentTime, setCurrentTime] = useState(0);
   const [bufferedTime, setBufferedTime] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [hasPlayed, setHasPlayed] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [controlsVisible, setControlsVisible] = useState(true);
   const [volume, setVolume] = useState(defaultVolume);
@@ -1353,6 +1354,7 @@ function Video({
     };
     const onPlay = () => {
       setIsPlaying(true);
+      setHasPlayed(true);
       showControlsTemporarily();
     };
     const onPause = () => {
@@ -1391,16 +1393,22 @@ function Video({
   }, [volume, isMuted]);
   useEffect(() => {
     applySubtitleMode(subtitleMode);
+    if (subtitleMode === "off") setActiveCue(null);
   }, [subtitleMode, applySubtitleMode]);
+  const subtitleModeRef = useRef(subtitleMode);
+  useEffect(() => {
+    subtitleModeRef.current = subtitleMode;
+  }, [subtitleMode]);
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     const onCueChange = () => {
-      if (subtitleMode === "off") {
+      const mode = subtitleModeRef.current;
+      if (mode === "off") {
         setActiveCue(null);
         return;
       }
-      const track = Array.from(video.textTracks).find((t) => t.language === subtitleMode);
+      const track = Array.from(video.textTracks).find((t) => t.language === mode);
       if (!track || !track.activeCues || track.activeCues.length === 0) {
         setActiveCue(null);
         return;
@@ -1408,10 +1416,19 @@ function Video({
       const cue = track.activeCues[0];
       setActiveCue(cue.text.replace(/<[^>]*>/g, ""));
     };
-    const tracks = Array.from(video.textTracks);
-    tracks.forEach((t) => t.addEventListener("cuechange", onCueChange));
-    return () => tracks.forEach((t) => t.removeEventListener("cuechange", onCueChange));
-  }, [subtitleMode]);
+    const bindTracks = () => {
+      Array.from(video.textTracks).forEach((t) => {
+        t.removeEventListener("cuechange", onCueChange);
+        t.addEventListener("cuechange", onCueChange);
+      });
+    };
+    bindTracks();
+    video.textTracks.addEventListener("addtrack", bindTracks);
+    return () => {
+      video.textTracks.removeEventListener("addtrack", bindTracks);
+      Array.from(video.textTracks).forEach((t) => t.removeEventListener("cuechange", onCueChange));
+    };
+  }, []);
   useEffect(() => {
     const onFullscreenChange = () => {
       setIsFullscreen(Boolean(document.fullscreenElement));
@@ -1819,7 +1836,7 @@ function Video({
                 ))
               }
             ),
-            poster && !isPlaying && /* @__PURE__ */ jsx(
+            poster && !hasPlayed && /* @__PURE__ */ jsx(
               "img",
               {
                 src: poster,
@@ -1836,31 +1853,19 @@ function Video({
             ),
             isLoading && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20 grid place-items-center bg-black/10", children: /* @__PURE__ */ jsx("div", { className: "size-9 animate-spin rounded-full border-2 border-white/25 border-t-white" }) }),
             error && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-8 top-1/2 z-40 -translate-y-1/2 rounded-2xl border border-white/10 bg-black/75 p-5 text-center text-sm text-white shadow-2xl backdrop-blur-xl", children: error }),
-            activeCue && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: `pointer-events-none absolute inset-x-0 z-25 flex justify-center transition-all duration-200 ${controlsVisible ? "bottom-24 @sm:bottom-28 @lg:bottom-32" : "bottom-6"}`,
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "mx-4 max-w-3xl rounded-lg bg-black/70 px-4 py-2 text-center text-base font-medium leading-snug text-white backdrop-blur-sm @sm:text-lg @lg:text-xl",
-                    style: { textShadow: "0 1px 4px rgba(0,0,0,0.8)" },
-                    children: activeCue
-                  }
-                )
-              }
-            ),
             /* @__PURE__ */ jsxs(
               "div",
               {
                 ref: chromeRef,
                 onClick: togglePlay,
-                className: `absolute inset-0 z-30 flex flex-col justify-between bg-linear-to-b from-black/55 via-black/10 to-black/75 transition-opacity duration-200 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
+                className: `absolute inset-0 z-30 flex flex-col justify-between transition-opacity duration-200 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
                 children: [
-                  /* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "flex items-start justify-between gap-4 px-4 pt-4 text-white @sm:px-7 @sm:pt-7 @lg:px-9 @lg:pt-8", children: [
+                  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black/70 to-transparent" }),
+                  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
+                  /* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "relative z-10 flex items-start justify-between gap-4 px-4 pt-4 text-white @sm:px-7 @sm:pt-7 @lg:px-9 @lg:pt-8", children: [
                     /* @__PURE__ */ jsxs("div", { children: [
-                      title && /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold tracking-wide md:text-xl", children: title }),
-                      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium text-white/85", children: description })
+                      title && /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl", style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" }, children: title }),
+                      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
                     ] }),
                     parsed.sources.length > 1 && /* @__PURE__ */ jsx(
                       "select",
@@ -1873,7 +1878,15 @@ function Video({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "px-3 pb-3 text-white @sm:px-5 @sm:pb-5 @lg:px-9 @lg:pb-8", children: [
+                  activeCue && /* @__PURE__ */ jsx("div", { className: "pointer-events-none relative z-10 flex justify-center px-4 pb-3 @sm:pb-4", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "max-w-3xl rounded-lg bg-black/70 px-4 py-2 text-center text-sm font-medium leading-snug text-white backdrop-blur-sm @sm:text-base @lg:text-lg",
+                      style: { textShadow: "0 1px 4px rgba(0,0,0,0.8)" },
+                      children: activeCue
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-3 pb-3 text-white @sm:px-5 @sm:pb-5 @lg:px-9 @lg:pb-8", children: [
                     /* @__PURE__ */ jsxs(
                       "div",
                       {