@geekapps/silo-elements-nextjs 0.2.42 → 0.2.44

package/dist/VideoPlayer.d.ts

@@ -8,17 +8,11 @@ type SourceProps = {
     type?: VideoSourceType;
     default?: boolean;
 };
-type SourcesProps = {
-    children: ReactNode;
-};
-type SubtitleProps = {
+type CaptionsProps = {
     src: string;
-    srclang: string;
-    label: string;
-    default?: boolean;
 };
-type SubtitlesProps = {
-    children: ReactNode;
+type ThumbnailProps = {
+    src: string;
 };
 type StoryboardFrameProps = {
     start: number;
@@ -39,7 +33,6 @@ type StoryboardProps = {
 type VideoProps = {
     title?: string;
     description?: string;
-    poster?: string;
     children: ReactNode;
     className?: string;
     autoHideControls?: boolean;
@@ -48,20 +41,16 @@ type VideoProps = {
     /** Fixed height — disables aspect-ratio so the player stays at exactly this height regardless of video dimensions */
     fixedHeight?: string | number;
 };
-declare function Sources(_props: SourcesProps): null;
-declare namespace Sources {
-    var displayName: string;
-}
 declare function Source(_props: SourceProps): null;
 declare namespace Source {
     var displayName: string;
 }
-declare function Subtitles(_props: SubtitlesProps): null;
-declare namespace Subtitles {
+declare function Captions(_props: CaptionsProps): null;
+declare namespace Captions {
     var displayName: string;
 }
-declare function Subtitle(_props: SubtitleProps): null;
-declare namespace Subtitle {
+declare function VideoThumbnail(_props: ThumbnailProps): null;
+declare namespace VideoThumbnail {
     var displayName: string;
 }
 declare function Storyboard(_props: StoryboardProps): null;
@@ -72,7 +61,7 @@ declare function StoryboardFrame(_props: StoryboardFrameProps): null;
 declare namespace StoryboardFrame {
     var displayName: string;
 }
-declare function Video({ title, description, poster, children, className, autoHideControls, defaultVolume, maxHeight, fixedHeight, }: VideoProps): react__default.JSX.Element;
+declare function Video({ title, description, children, className, autoHideControls, defaultVolume, maxHeight, fixedHeight, }: VideoProps): react__default.JSX.Element;
 declare const VideoPlayer: typeof Video;
 
-export { Source, type SourceProps, Sources, type SourcesProps, Storyboard, StoryboardFrame, type StoryboardFrameProps, type StoryboardProps, Subtitle, type SubtitleProps, Subtitles, type SubtitlesProps, Video, VideoPlayer, type VideoSourceType };
+export { Captions, type CaptionsProps, Source, type SourceProps, Storyboard, StoryboardFrame, type StoryboardFrameProps, type StoryboardProps, type ThumbnailProps, Video, VideoPlayer, type VideoSourceType, VideoThumbnail };

package/dist/VideoPlayer.js

@@ -1,6 +1,6 @@
-import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 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';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var AUTO_QUALITY = {
@@ -9,22 +9,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;
 }
@@ -36,7 +32,6 @@ StoryboardFrame.displayName = "SiloStoryboardFrame";
 function Video({
   title,
   description,
-  poster,
   children,
   className,
   autoHideControls = true,
@@ -45,14 +40,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);
@@ -97,7 +118,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;
@@ -158,10 +178,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;
@@ -368,7 +388,6 @@ function Video({
       return;
     }
     destroyMediaEngines();
-    setError(null);
     setIsLoading(true);
     setCurrentTime(0);
     setBufferedTime(0);
@@ -413,13 +432,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);
           }
         }
@@ -485,7 +504,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;
@@ -496,11 +515,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);
           }
         }
@@ -522,9 +541,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();
@@ -537,7 +565,6 @@ function Video({
         600
       );
     } catch {
-      setError("O navegador bloqueou a reprodu\xE7\xE3o autom\xE1tica.");
     }
   }, []);
   const seekRelative = useCallback((seconds) => {
@@ -591,7 +618,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) => {
@@ -778,7 +805,7 @@ function Video({
                 preload: "metadata",
                 crossOrigin: "anonymous",
                 children: [
-                  parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                  captions.map((subtitle) => /* @__PURE__ */ jsx(
                     "track",
                     {
                       kind: "subtitles",
@@ -826,7 +853,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",
               {
@@ -886,11 +912,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
                                     }
@@ -1047,7 +1073,7 @@ function Video({
                                   ),
                                   /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [
                                     { srclang: "off", label: "Desligado" },
-                                    ...parsed.subtitles
+                                    ...captions
                                   ].map((s) => /* @__PURE__ */ jsxs(
                                     "button",
                                     {
@@ -1447,16 +1473,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(
@@ -1584,8 +1610,7 @@ function Video({
 var VideoPlayer = Video;
 function parseVideoChildren(children) {
   const parsed = {
-    sources: [],
-    subtitles: []
+    sources: []
   };
   function dn(child) {
     return child.type?.displayName ?? child.type?.name ?? "";
@@ -1593,25 +1618,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;
@@ -1711,6 +1728,6 @@ function formatTime(seconds) {
   return `${minutes}:${String(secs).padStart(2, "0")}`;
 }
 
-export { Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Video, VideoPlayer };
+export { Captions, Source, Storyboard, StoryboardFrame, Video, VideoPlayer, VideoThumbnail };
 //# sourceMappingURL=VideoPlayer.js.map
 //# sourceMappingURL=VideoPlayer.js.map