@geekapps/silo-elements-nextjs 0.2.42 → 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);
@@ -1224,7 +1245,6 @@ function Video({
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [playerHeight, setPlayerHeight] = useState(0);
   const [playerWidth, setPlayerWidth] = useState(0);
-  const [error, setError] = useState(null);
   const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
   const progressPercent = duration ? currentTime / duration * 100 : 0;
   const bufferedPercent = duration ? bufferedTime / duration * 100 : 0;
@@ -1285,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;
@@ -1495,7 +1515,6 @@ function Video({
       return;
     }
     destroyMediaEngines();
-    setError(null);
     setIsLoading(true);
     setCurrentTime(0);
     setBufferedTime(0);
@@ -1540,13 +1559,13 @@ function Video({
             setIsLoading(false);
           });
           dash.on(dashjs.MediaPlayer.events.ERROR, () => {
-            setError("N\xE3o foi poss\xEDvel reproduzir o stream MPEG-DASH.");
+            console.error("[Silo] MPEG-DASH playback failed");
             setIsLoading(false);
           });
           dash.initialize(video, activeSource.src, false);
         } catch {
           if (!cancelled) {
-            setError("N\xE3o foi poss\xEDvel carregar o player MPEG-DASH.");
+            console.error("[Silo] MPEG-DASH player load failed");
             setIsLoading(false);
           }
         }
@@ -1612,7 +1631,7 @@ function Video({
                 hls.recoverMediaError();
                 return;
               }
-              setError("N\xE3o foi poss\xEDvel reproduzir o stream HLS.");
+              console.error("[Silo] HLS playback failed");
               setIsLoading(false);
             });
             return;
@@ -1623,11 +1642,11 @@ function Video({
             setIsLoading(false);
             return;
           }
-          setError("Este navegador n\xE3o suporta HLS.");
+          console.error("[Silo] HLS not supported in this browser");
           setIsLoading(false);
         } catch {
           if (!cancelled) {
-            setError("N\xE3o foi poss\xEDvel carregar o player HLS.");
+            console.error("[Silo] HLS player load failed");
             setIsLoading(false);
           }
         }
@@ -1649,9 +1668,18 @@ function Video({
   const togglePlay = useCallback(async () => {
     const video = videoRef.current;
     if (!video) return;
+    const wasPaused = video.paused;
     try {
-      const wasPaused = video.paused;
       if (wasPaused) {
+        if (video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
+          await new Promise((resolve) => {
+            const onReady = () => {
+              video.removeEventListener("canplay", onReady);
+              resolve();
+            };
+            video.addEventListener("canplay", onReady);
+          });
+        }
         await video.play();
       } else {
         video.pause();
@@ -1664,7 +1692,6 @@ function Video({
         600
       );
     } catch {
-      setError("O navegador bloqueou a reprodu\xE7\xE3o autom\xE1tica.");
     }
   }, []);
   const seekRelative = useCallback((seconds) => {
@@ -1718,7 +1745,7 @@ function Video({
       }
       throw new Error("Fullscreen unavailable");
     } catch {
-      setError("N\xE3o foi poss\xEDvel alterar o modo fullscreen.");
+      console.error("[Silo] Fullscreen toggle failed");
     }
   }, []);
   const changeAudio = useCallback((trackId) => {
@@ -1905,7 +1932,7 @@ function Video({
                 preload: "metadata",
                 crossOrigin: "anonymous",
                 children: [
-                  parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                  captions.map((subtitle) => /* @__PURE__ */ jsx(
                     "track",
                     {
                       kind: "subtitles",
@@ -1953,7 +1980,6 @@ 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 }),
             /* @__PURE__ */ jsxs(
               "div",
               {
@@ -2013,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
                                     }
@@ -2174,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",
                                     {
@@ -2574,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(
@@ -2711,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 ?? "";
@@ -2720,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;
@@ -3298,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