@geekapps/silo-elements-nextjs 0.2.54 → 0.2.55

package/dist/VideoPlayer.d.ts

@@ -36,6 +36,14 @@ type StoryboardProps = {
     height?: number;
     children?: ReactNode;
 };
+type ChaptersProps = {
+    src?: string;
+    data?: Array<{
+        startTime: number;
+        title: string;
+        endTime?: number;
+    }>;
+};
 type VideoProps = {
     title?: string;
     description?: string;
@@ -55,6 +63,10 @@ declare function Captions(_props: CaptionsProps): null;
 declare namespace Captions {
     var displayName: string;
 }
+declare function Chapters(_props: ChaptersProps): null;
+declare namespace Chapters {
+    var displayName: string;
+}
 declare function VideoThumbnail(_props: ThumbnailProps): null;
 declare namespace VideoThumbnail {
     var displayName: string;
@@ -70,4 +82,4 @@ declare namespace StoryboardFrame {
 declare function Video({ title, description, children, className, autoHideControls, defaultVolume, maxHeight, fixedHeight, }: VideoProps): react__default.JSX.Element;
 declare const VideoPlayer: typeof Video;
 
-export { Captions, type CaptionsProps, Source, type SourceProps, Storyboard, StoryboardFrame, type StoryboardFrameProps, type StoryboardProps, type ThumbnailProps, Video, VideoPlayer, type VideoSourceType, VideoThumbnail };
+export { Captions, type CaptionsProps, Chapters, type ChaptersProps, Source, type SourceProps, Storyboard, StoryboardFrame, type StoryboardFrameProps, type StoryboardProps, type ThumbnailProps, Video, VideoPlayer, type VideoSourceType, VideoThumbnail };

package/dist/VideoPlayer.js

@@ -17,6 +17,10 @@ function Captions(_props) {
   return null;
 }
 Captions.displayName = "SiloCaptions";
+function Chapters(_props) {
+  return null;
+}
+Chapters.displayName = "SiloChapters";
 function VideoThumbnail(_props) {
   return null;
 }
@@ -41,6 +45,7 @@ function Video({
 }) {
   const parsed = useMemo(() => parseVideoChildren(children), [children]);
   const [captions, setCaptions] = useState([]);
+  const [chapters, setChapters] = useState([]);
   const [poster, setPoster] = useState(void 0);
   const captionsSourceRef = useRef("");
   useEffect(() => {
@@ -75,6 +80,25 @@ function Video({
       cancelled = true;
     };
   }, [parsed.captionsSrc, parsed.captionsData]);
+  useEffect(() => {
+    if (parsed.chaptersData) {
+      setChapters(parsed.chaptersData);
+      return;
+    }
+    if (!parsed.chaptersSrc) {
+      setChapters([]);
+      return;
+    }
+    let cancelled = false;
+    fetch(parsed.chaptersSrc, { cache: "no-store" }).then((r) => r.json()).then((data) => {
+      if (!cancelled && Array.isArray(data)) setChapters(data);
+    }).catch(() => {
+      if (!cancelled) setChapters([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [parsed.chaptersSrc, parsed.chaptersData]);
   useEffect(() => {
     if (!parsed.thumbnailSrc) {
       setPoster(void 0);
@@ -1481,6 +1505,14 @@ function Video({
                                   }
                                 }
                               ),
+                              chapters.length > 0 && duration > 0 && chapters.map((ch, i) => /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: "pointer-events-none absolute top-1/2 -translate-y-1/2 w-0.5 rounded-full bg-white/50",
+                                  style: { left: `${ch.startTime / duration * 100}%`, height: isDragging ? "7px" : isHoveringProgress ? "5px" : "3px", transition: "height 0.15s ease" }
+                                },
+                                i
+                              )),
                               preview && (() => {
                                 const frameW = preview.cue.w ?? 160;
                                 const frameH = preview.cue.h ?? 90;
@@ -1573,7 +1605,12 @@ function Video({
                               formatTime(currentTime),
                               /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "/" }),
                               /* @__PURE__ */ jsx("span", { className: "text-white/45", children: formatTime(duration) })
-                            ] })
+                            ] }),
+                            (() => {
+                              if (chapters.length === 0) return null;
+                              const ch = [...chapters].reverse().find((c) => currentTime >= c.startTime);
+                              return ch ? /* @__PURE__ */ jsx("span", { className: "hidden max-w-40 truncate text-[11px] text-white/50 @sm:block", children: ch.title }) : null;
+                            })()
                           ] }),
                           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 @sm:gap-1", children: [
                             /* @__PURE__ */ jsx(
@@ -1789,6 +1826,14 @@ function parseVideoChildren(children) {
         parsed.captionsSrc = element.props.src;
       }
     }
+    if (child.type === Chapters || name === "SiloChapters") {
+      const element = child;
+      if (element.props.data) {
+        parsed.chaptersData = element.props.data;
+      } else if (element.props.src) {
+        parsed.chaptersSrc = element.props.src;
+      }
+    }
     if (child.type === VideoThumbnail || name === "SiloVideoThumbnail") {
       const element = child;
       parsed.thumbnailSrc = element.props.src;
@@ -1897,6 +1942,6 @@ function formatTime(seconds) {
   return `${minutes}:${String(secs).padStart(2, "0")}`;
 }
 
-export { Captions, Source, Storyboard, StoryboardFrame, Video, VideoPlayer, VideoThumbnail };
+export { Captions, Chapters, Source, Storyboard, StoryboardFrame, Video, VideoPlayer, VideoThumbnail };
 //# sourceMappingURL=VideoPlayer.js.map
 //# sourceMappingURL=VideoPlayer.js.map