@geekapps/silo-elements-nextjs 0.2.54 → 0.2.56

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { ImageUploader } from './ImageUploader.js';
 export { VideoUploader } from './VideoUploader.js';
 export { FileUploader } from './FileUploader.js';
 export { MediaUploader } from './MediaUploader.js';
-export { Captions, CaptionsProps, Source, SourceProps, Storyboard, StoryboardFrame, StoryboardFrameProps, StoryboardProps, Video, VideoPlayer, VideoSourceType, VideoThumbnail, ThumbnailProps as VideoThumbnailProps } from './VideoPlayer.js';
+export { Captions, CaptionsProps, Chapters, ChaptersProps, Source, SourceProps, Storyboard, StoryboardFrame, StoryboardFrameProps, StoryboardProps, Video, VideoPlayer, VideoSourceType, VideoThumbnail, ThumbnailProps as VideoThumbnailProps } from './VideoPlayer.js';
 export { DropZone } from './components/DropZone.js';
 export { ProgressBar } from './components/ProgressBar.js';
 import * as react from 'react';

package/dist/index.js

@@ -1144,6 +1144,10 @@ function Captions(_props) {
   return null;
 }
 Captions.displayName = "SiloCaptions";
+function Chapters(_props) {
+  return null;
+}
+Chapters.displayName = "SiloChapters";
 function VideoThumbnail(_props) {
   return null;
 }
@@ -1168,6 +1172,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(() => {
@@ -1202,6 +1207,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);
@@ -2608,6 +2632,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;
@@ -2700,7 +2732,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(
@@ -2916,6 +2953,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;
@@ -3480,6 +3525,6 @@ function Badge({ children, muted }) {
   );
 }
 
-export { Avatar, Background, Captions, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageOptions, ImageUploader, MediaUploader, ProgressBar, Source, Storyboard, StoryboardFrame, Thumbnail, Video, VideoOptions, VideoPlayer, VideoThumbnail, VideoUploader, defaultTheme, resolveTheme };
+export { Avatar, Background, Captions, Chapters, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageOptions, ImageUploader, MediaUploader, ProgressBar, Source, Storyboard, StoryboardFrame, Thumbnail, Video, VideoOptions, VideoPlayer, VideoThumbnail, VideoUploader, defaultTheme, resolveTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map