@geekapps/silo-elements-nextjs 0.2.43 → 0.2.44

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 { Source, SourceProps, Sources, SourcesProps, Storyboard, StoryboardFrame, StoryboardFrameProps, StoryboardProps, Subtitle, SubtitleProps, Subtitles, SubtitlesProps, Video, VideoPlayer, VideoSourceType } from './VideoPlayer.js';
+export { Captions, CaptionsProps, 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

@@ -3,7 +3,7 @@ import { useMultipartUpload, useBatchUpload, useSignedUrl, useFileStatus } from
 export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import gsap from 'gsap';
-import { Pause, Play, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
+import { Pause, Play, VolumeX, Volume2, Captions as Captions$1, Settings, Minimize, Maximize } from 'lucide-react';
 
 // src/ImageUploader.tsx
 
@@ -1136,22 +1136,18 @@ var AUTO_QUALITY = {
   type: "auto"
 };
 var PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
-function Sources(_props) {
-  return null;
-}
-Sources.displayName = "SiloSources";
 function Source(_props) {
   return null;
 }
 Source.displayName = "SiloSource";
-function Subtitles(_props) {
+function Captions(_props) {
   return null;
 }
-Subtitles.displayName = "SiloSubtitles";
-function Subtitle(_props) {
+Captions.displayName = "SiloCaptions";
+function VideoThumbnail(_props) {
   return null;
 }
-Subtitle.displayName = "SiloSubtitle";
+VideoThumbnail.displayName = "SiloVideoThumbnail";
 function Storyboard(_props) {
   return null;
 }
@@ -1163,7 +1159,6 @@ StoryboardFrame.displayName = "SiloStoryboardFrame";
 function Video({
   title,
   description,
-  poster,
   children,
   className,
   autoHideControls = true,
@@ -1172,14 +1167,40 @@ function Video({
   fixedHeight
 }) {
   const parsed = useMemo(() => parseVideoChildren(children), [children]);
+  const [captions, setCaptions] = useState([]);
+  const [poster, setPoster] = useState(void 0);
+  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)) {
+        setCaptions(data.map((c, i) => ({ ...c, default: i === 0 })));
+      }
+    }).catch(() => {
+      if (!cancelled) setCaptions([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [parsed.captionsSrc]);
+  useEffect(() => {
+    if (!parsed.thumbnailSrc) {
+      setPoster(void 0);
+      return;
+    }
+    setPoster(parsed.thumbnailSrc);
+  }, [parsed.thumbnailSrc]);
   const initialSourceIndex = useMemo(() => {
     const index = parsed.sources.findIndex((source) => source.default);
     return index >= 0 ? index : 0;
   }, [parsed.sources]);
   const initialSubtitleMode = useMemo(() => {
-    const track = parsed.subtitles.find((subtitle) => subtitle.default);
+    const track = captions.find((c) => c.default);
     return track?.srclang ?? "off";
-  }, [parsed.subtitles]);
+  }, [captions]);
   const containerRef = useRef(null);
   const chromeRef = useRef(null);
   const playerRef = useRef(null);
@@ -1284,10 +1305,10 @@ function Video({
     }
   }, [sourceIndex, parsed.sources.length, initialSourceIndex]);
   useEffect(() => {
-    if (subtitleMode !== "off" && !parsed.subtitles.some((subtitle) => subtitle.srclang === subtitleMode)) {
+    if (subtitleMode !== "off" && !captions.some((subtitle) => subtitle.srclang === subtitleMode)) {
       setSubtitleMode(initialSubtitleMode);
     }
-  }, [subtitleMode, parsed.subtitles, initialSubtitleMode]);
+  }, [subtitleMode, captions, initialSubtitleMode]);
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -1911,7 +1932,7 @@ function Video({
                 preload: "metadata",
                 crossOrigin: "anonymous",
                 children: [
-                  parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                  captions.map((subtitle) => /* @__PURE__ */ jsx(
                     "track",
                     {
                       kind: "subtitles",
@@ -2018,11 +2039,11 @@ function Video({
                                     label: "Qualidade",
                                     value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto"
                                   },
-                                  ...parsed.subtitles.length > 0 ? [
+                                  ...captions.length > 0 ? [
                                     {
                                       id: "subtitles",
                                       label: "Legendas",
-                                      value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find(
+                                      value: subtitleStyle.track === "off" ? "Desligado" : captions.find(
                                         (s) => s.srclang === subtitleStyle.track
                                       )?.label ?? subtitleStyle.track
                                     }
@@ -2179,7 +2200,7 @@ function Video({
                                   ),
                                   /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [
                                     { srclang: "off", label: "Desligado" },
-                                    ...parsed.subtitles
+                                    ...captions
                                   ].map((s) => /* @__PURE__ */ jsxs(
                                     "button",
                                     {
@@ -2579,16 +2600,16 @@ function Video({
                               ) })
                             ] }),
                             /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-white/20 @md:mx-1" }),
-                            parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
+                            captions.length > 0 && /* @__PURE__ */ jsx(
                               "button",
                               {
                                 type: "button",
                                 onClick: () => setSubtitleMode(
-                                  (m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"
+                                  (m) => m === "off" ? captions[0]?.srclang ?? "off" : "off"
                                 ),
                                 className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
                                 "aria-label": "Captions",
-                                children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
+                                children: /* @__PURE__ */ jsx(Captions$1, { className: "size-4 @sm:size-5" })
                               }
                             ),
                             /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
@@ -2716,8 +2737,7 @@ function Video({
 var VideoPlayer = Video;
 function parseVideoChildren(children) {
   const parsed = {
-    sources: [],
-    subtitles: []
+    sources: []
   };
   function dn(child) {
     return child.type?.displayName ?? child.type?.name ?? "";
@@ -2725,25 +2745,17 @@ function parseVideoChildren(children) {
   React.Children.forEach(children, (child) => {
     if (!React.isValidElement(child)) return;
     const name = dn(child);
-    if (child.type === Sources || name === "SiloSources") {
+    if (child.type === Source || name === "SiloSource") {
       const element = child;
-      React.Children.forEach(element.props.children, (sourceChild) => {
-        if (!React.isValidElement(sourceChild)) return;
-        const sn = dn(sourceChild);
-        if (sourceChild.type !== Source && sn !== "SiloSource") return;
-        const sourceElement = sourceChild;
-        parsed.sources.push(sourceElement.props);
-      });
+      parsed.sources.push(element.props);
     }
-    if (child.type === Subtitles || name === "SiloSubtitles") {
+    if (child.type === Captions || name === "SiloCaptions") {
       const element = child;
-      React.Children.forEach(element.props.children, (subtitleChild) => {
-        if (!React.isValidElement(subtitleChild)) return;
-        const sn = dn(subtitleChild);
-        if (subtitleChild.type !== Subtitle && sn !== "SiloSubtitle") return;
-        const subtitleElement = subtitleChild;
-        parsed.subtitles.push(subtitleElement.props);
-      });
+      parsed.captionsSrc = element.props.src;
+    }
+    if (child.type === VideoThumbnail || name === "SiloVideoThumbnail") {
+      const element = child;
+      parsed.thumbnailSrc = element.props.src;
     }
     if (child.type === Storyboard || name === "SiloStoryboard") {
       const element = child;
@@ -3303,6 +3315,6 @@ function Badge({ children, muted }) {
   );
 }
 
-export { Avatar, Background, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageOptions, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoOptions, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
+export { Avatar, Background, Captions, 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