@geekapps/silo-elements-nextjs 0.2.48 → 0.2.50

package/dist/VideoPlayer.d.ts

@@ -9,7 +9,13 @@ type SourceProps = {
     default?: boolean;
 };
 type CaptionsProps = {
-    src: string;
+    src?: string;
+    data?: Array<{
+        src: string;
+        srclang: string;
+        label: string;
+        default?: boolean;
+    }>;
 };
 type ThumbnailProps = {
     src: string;

package/dist/VideoPlayer.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import gsap from 'gsap';
 import { Pause, Play, VolumeX, Volume2, Captions as Captions$1, Settings, Minimize, Maximize } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -42,29 +42,39 @@ function Video({
   const parsed = useMemo(() => parseVideoChildren(children), [children]);
   const [captions, setCaptions] = useState([]);
   const [poster, setPoster] = useState(void 0);
+  const captionsSourceRef = useRef("");
   useEffect(() => {
-    if (!parsed.captionsSrc) {
-      setCaptions([]);
-      return;
-    }
-    let cancelled = false;
-    fetch(parsed.captionsSrc, { cache: "no-store" }).then((r) => r.json()).then((data) => {
-      if (!cancelled && Array.isArray(data)) {
-        const resolved = data.map((c, i) => ({ ...c, default: i === 0 }));
-        setCaptions(resolved);
+    const sourceKey = parsed.captionsSrc ?? parsed.captionsData?.[0]?.srclang ?? "";
+    function applyResolved(data) {
+      const resolved = data.map((c, i) => ({ ...c, default: c.default ?? i === 0 }));
+      setCaptions(resolved);
+      if (captionsSourceRef.current !== sourceKey) {
+        captionsSourceRef.current = sourceKey;
         const defaultTrack = resolved.find((c) => c.default);
         if (defaultTrack) {
           setSubtitleMode(defaultTrack.srclang);
           setSubtitleStyle((st) => ({ ...st, track: defaultTrack.srclang }));
         }
       }
+    }
+    if (parsed.captionsData) {
+      applyResolved(parsed.captionsData);
+      return;
+    }
+    if (!parsed.captionsSrc) {
+      setCaptions([]);
+      return;
+    }
+    let cancelled = false;
+    fetch(parsed.captionsSrc, { cache: "no-store" }).then((r) => r.json()).then((data) => {
+      if (!cancelled && Array.isArray(data)) applyResolved(data);
     }).catch(() => {
       if (!cancelled) setCaptions([]);
     });
     return () => {
       cancelled = true;
     };
-  }, [parsed.captionsSrc]);
+  }, [parsed.captionsSrc, parsed.captionsData]);
   useEffect(() => {
     if (!parsed.thumbnailSrc) {
       setPoster(void 0);
@@ -1630,7 +1640,11 @@ function parseVideoChildren(children) {
     }
     if (child.type === Captions || name === "SiloCaptions") {
       const element = child;
-      parsed.captionsSrc = element.props.src;
+      if (element.props.data) {
+        parsed.captionsData = element.props.data;
+      } else if (element.props.src) {
+        parsed.captionsSrc = element.props.src;
+      }
     }
     if (child.type === VideoThumbnail || name === "SiloVideoThumbnail") {
       const element = child;