@geekapps/silo-elements-nextjs 0.2.68 → 0.2.70

package/dist/index.js

@@ -737,6 +737,7 @@ function FileUploader({
   video,
   isPrivate,
   captionLanguages,
+  chapterLanguages,
   theme,
   renderIcon,
   renderProgress,
@@ -780,12 +781,21 @@ function FileUploader({
     const resolvedVideo = overrideVideo ?? videoOpts;
     const effectiveImage = showImageOptions ? resolvedImage : image ?? resolvedImage;
     const effectiveVideo = showVideoOptions ? resolvedVideo : video ?? resolvedVideo;
+    const videoWithLangs = (base) => {
+      if (!captionLanguages?.length && !chapterLanguages?.length) return base;
+      return {
+        ...base ?? {},
+        ...captionLanguages?.length && { languages: captionLanguages },
+        ...chapterLanguages?.length && { chapterLanguages }
+      };
+    };
     if (multiple && files.length > 1) {
       try {
+        const batchVideo = videoWithLangs(effectiveVideo);
         const results = await batch.upload(files, {
           ...bucket !== void 0 && { bucket },
           image: effectiveImage,
-          video: effectiveVideo,
+          ...batchVideo !== void 0 && { video: batchVideo },
           ...isPrivate !== void 0 && { isPrivate },
           ...captionLanguages?.length && { captionLanguages }
         });
@@ -798,10 +808,11 @@ function FileUploader({
       const file = files[0];
       if (!file) return;
       try {
+        const singleVideo = videoWithLangs(effectiveVideo);
         const result = await single.upload(file, {
           ...bucket !== void 0 && { bucket },
           image: effectiveImage,
-          video: effectiveVideo ? { ...effectiveVideo, ...captionLanguages?.length && { languages: captionLanguages } } : captionLanguages?.length ? { languages: captionLanguages } : effectiveVideo,
+          ...singleVideo !== void 0 && { video: singleVideo },
           ...isPrivate !== void 0 && { isPrivate }
         });
         if (result) onUpload?.(result);
@@ -809,7 +820,7 @@ function FileUploader({
         onError?.(err instanceof Error ? err : new Error(String(err)));
       }
     }
-  }, [single, batch, multiple, bucket, image, video, isPrivate, captionLanguages, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
+  }, [single, batch, multiple, bucket, image, video, isPrivate, captionLanguages, chapterLanguages, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
   const handleFiles = useCallback(async (files) => {
     const needsStaging = allowRename || showImageOptions && files.some((f) => f.type.startsWith("image/")) || showVideoOptions && files.some((f) => f.type.startsWith("video/"));
     if (needsStaging) {
@@ -1296,6 +1307,7 @@ function Video({
   const [hasPlayed, setHasPlayed] = useState(false);
   const [ageRatingOverlay, setAgeRatingOverlay] = useState(false);
   const ageRatingTimerRef = useRef(null);
+  const ageRatingPauseTimerRef = useRef(null);
   const [clickIcon, setClickIcon] = useState(null);
   const clickIconTimerRef = useRef(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -1419,14 +1431,22 @@ function Video({
       setDuration(Number.isFinite(video.duration) ? video.duration : 0);
       applySubtitleMode(subtitleMode);
     };
+    const showAgeRating = () => {
+      if (!parsed.ageRating?.data) return;
+      if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
+      ageRatingTimerRef.current = window.setTimeout(() => {
+        setAgeRatingOverlay(true);
+        ageRatingTimerRef.current = window.setTimeout(() => setAgeRatingOverlay(false), 8e3);
+      }, 600);
+    };
     const onPlay = () => {
       setIsPlaying(true);
+      if (ageRatingPauseTimerRef.current) {
+        window.clearTimeout(ageRatingPauseTimerRef.current);
+        ageRatingPauseTimerRef.current = null;
+      }
       setHasPlayed((prev) => {
-        if (!prev && parsed.ageRating?.data) {
-          setAgeRatingOverlay(true);
-          if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
-          ageRatingTimerRef.current = window.setTimeout(() => setAgeRatingOverlay(false), 4e3);
-        }
+        if (!prev) showAgeRating();
         return true;
       });
       showControlsTemporarily();
@@ -1434,6 +1454,13 @@ function Video({
     const onPause = () => {
       setIsPlaying(false);
       setControlsVisible(true);
+      if (parsed.ageRating?.data) {
+        if (ageRatingPauseTimerRef.current) window.clearTimeout(ageRatingPauseTimerRef.current);
+        ageRatingPauseTimerRef.current = window.setTimeout(() => {
+          showAgeRating();
+          ageRatingPauseTimerRef.current = null;
+        }, 5 * 60 * 1e3);
+      }
     };
     const onWaiting = () => setIsLoading(true);
     const onCanPlay = () => setIsLoading(false);
@@ -1457,6 +1484,8 @@ function Video({
       video.removeEventListener("waiting", onWaiting);
       video.removeEventListener("canplay", onCanPlay);
       video.removeEventListener("ended", onEnded);
+      if (ageRatingTimerRef.current) window.clearTimeout(ageRatingTimerRef.current);
+      if (ageRatingPauseTimerRef.current) window.clearTimeout(ageRatingPauseTimerRef.current);
     };
   }, [applySubtitleMode, subtitleMode, showControlsTemporarily]);
   useEffect(() => {
@@ -2114,7 +2143,11 @@ function Video({
       ref: containerRef,
       className: `@container mx-auto w-full max-w-6xl${className ?? ""}`,
       children: [
-        /* @__PURE__ */ jsx("style", { children: `@keyframes silo-fade-out{0%{opacity:1}70%{opacity:1}100%{opacity:0}}` }),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes silo-ar-bg{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
+        @keyframes silo-ar-icon{0%,8%{opacity:0;transform:scale(0.82)}18%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
+        @keyframes silo-ar-text{0%,18%{opacity:0;transform:translateX(-6px)}30%{opacity:1;transform:translateX(0)}80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
+      ` }),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -2189,16 +2222,20 @@ function Video({
                 const code = ar.data[regionKey];
                 const lookupKey = `${regionKey}:${code}`;
                 const info = ar.lookup?.[lookupKey];
+                const dur = "8s";
                 return /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "pointer-events-none absolute inset-0 z-40 flex items-start justify-start p-4",
-                    style: { animation: "silo-fade-out 4s forwards" },
-                    children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-lg px-3 py-2", style: { background: "rgba(0,0,0,0.72)", backdropFilter: "blur(8px)" }, children: [
-                      info?.imageUrl ? /* @__PURE__ */ jsx("img", { src: info.imageUrl, alt: code, className: "h-10 w-auto object-contain" }) : /* @__PURE__ */ jsx("span", { className: "flex h-10 min-w-10 items-center justify-center rounded border border-white/30 px-1.5 text-sm font-bold text-white", children: code }),
-                      (info?.title || info?.description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                        info.title && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: info.title }),
-                        info.description && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/60 leading-tight max-w-48", children: info.description })
+                    className: "pointer-events-none absolute inset-0 z-40 flex items-end justify-start",
+                    style: {
+                      background: "linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 38%, transparent 62%)",
+                      animation: `silo-ar-bg ${dur} forwards`
+                    },
+                    children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5 px-6 py-6 @sm:px-8 @sm:py-8", children: [
+                      /* @__PURE__ */ jsx("div", { style: { animation: `silo-ar-icon ${dur} forwards` }, children: info?.imageUrl ? /* @__PURE__ */ jsx("img", { src: info.imageUrl, alt: code, className: "h-14 w-auto object-contain @sm:h-16 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]" }) : /* @__PURE__ */ jsx("span", { className: "flex h-14 min-w-14 items-center justify-center rounded-md border-2 border-white/40 px-2 text-lg font-bold text-white @sm:h-16 @sm:min-w-16 @sm:text-xl drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]", children: code }) }),
+                      (info?.title || info?.description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", style: { animation: `silo-ar-text ${dur} forwards` }, children: [
+                        info.title && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white @sm:text-base drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)]", children: info.title }),
+                        info.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-white/70 leading-snug max-w-56 @sm:text-sm @sm:max-w-72 drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)]", children: info.description })
                       ] })
                     ] })
                   }
@@ -2866,12 +2903,21 @@ function Video({
                                             )
                                           }
                                         ),
-                                        /* @__PURE__ */ jsx(
-                                          "span",
+                                        /* @__PURE__ */ jsxs(
+                                          "div",
                                           {
-                                            className: "rounded-md px-2 py-0.5 text-[11px] font-semibold tabular-nums text-white/90",
+                                            className: "flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11px] font-semibold text-white/90",
                                             style: { background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)" },
-                                            children: formatTime(preview.time)
+                                            children: [
+                                              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatTime(preview.time) }),
+                                              (() => {
+                                                const ch = [...chapters].reverse().find((c) => c.startTime <= preview.time);
+                                                return ch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                                  /* @__PURE__ */ jsx("span", { className: "text-white/40", children: "\xB7" }),
+                                                  /* @__PURE__ */ jsx("span", { className: "max-w-36 truncate", children: ch.title })
+                                                ] }) : null;
+                                              })()
+                                            ]
                                           }
                                         )
                                       ]