@geekapps/silo-elements-nextjs 0.2.61 → 0.2.63

package/dist/VideoPlayer.js

@@ -107,13 +107,6 @@ function Video({
       cancelled = true;
     };
   }, [parsed.chaptersSrc, parsed.chaptersData]);
-  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;
@@ -150,9 +143,10 @@ function Video({
   const [activeCue, setActiveCue] = useState(null);
   const [storyboardSheetSize, setStoryboardSheetSize] = useState(null);
   const storyboardSheetUrlRef = useRef("");
-  const [storyboardCues, setStoryboardCues] = useState(
-    []
-  );
+  const [storyboardCues, setStoryboardCues] = useState([]);
+  const storyboardCacheRef = useRef(/* @__PURE__ */ new Map());
+  const [activeStoryboardRes, setActiveStoryboardRes] = useState(null);
+  const preloadedSpritesRef = useRef(/* @__PURE__ */ new Set());
   const [ratingCounts, setRatingCounts] = useState(
     () => ({ LOVE: parsed.rating?.counts?.LOVE ?? 0, LIKE: parsed.rating?.counts?.LIKE ?? 0, DISLIKE: parsed.rating?.counts?.DISLIKE ?? 0 })
   );
@@ -195,6 +189,24 @@ function Video({
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [playerHeight, setPlayerHeight] = useState(0);
   const [playerWidth, setPlayerWidth] = useState(0);
+  useEffect(() => {
+    const urls = parsed.thumbnailUrls;
+    if (!urls || Object.keys(urls).length === 0) {
+      setPoster(parsed.thumbnailSrc ?? void 0);
+      return;
+    }
+    const sorted = Object.entries(urls).map(([label, url]) => ({ px: parseInt(label.replace("w", ""), 10) || 0, url })).filter((e) => e.px > 0).sort((a, b) => a.px - b.px);
+    if (sorted.length === 0) {
+      setPoster(parsed.thumbnailSrc ?? void 0);
+      return;
+    }
+    const dpr = typeof window !== "undefined" ? window.devicePixelRatio ?? 1 : 1;
+    const conn = typeof navigator !== "undefined" ? navigator.connection : null;
+    const connFactor = conn?.effectiveType === "4g" ? 1 : conn?.effectiveType === "3g" ? 0.5 : 0.25;
+    const targetPx = (playerWidth || 640) * dpr * (conn ? connFactor : 1);
+    const best = sorted.find((e) => e.px >= targetPx) ?? sorted[sorted.length - 1];
+    setPoster(best.url);
+  }, [parsed.thumbnailUrls, parsed.thumbnailSrc, playerWidth]);
   const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
   const progressPercent = duration ? currentTime / duration * 100 : 0;
   const bufferedPercent = duration ? bufferedTime / duration * 100 : 0;
@@ -443,40 +455,71 @@ function Video({
     async function loadStoryboard() {
       if (!parsed.storyboard) {
         setStoryboardCues([]);
+        setActiveStoryboardRes(null);
         return;
       }
       if (parsed.storyboard.frames.length > 0) {
         setStoryboardCues(parsed.storyboard.frames);
         return;
       }
+      const resolutions = parsed.storyboard.resolutions;
+      if (resolutions && Object.keys(resolutions).length > 0) {
+        storyboardCacheRef.current.clear();
+        preloadedSpritesRef.current.clear();
+        const RES_ORDER = ["180p", "240p", "360p", "480p", "default"];
+        const keys = Object.keys(resolutions).sort((a, b) => {
+          const ai = RES_ORDER.indexOf(a);
+          const bi = RES_ORDER.indexOf(b);
+          return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
+        });
+        const loadRes = async (key) => {
+          if (cancelled) return;
+          const res = resolutions[key];
+          if (!res) return;
+          let cues = [];
+          if (res.vttText) {
+            cues = parseStoryboardVtt(res.vttText, res.spriteUrl);
+          } else {
+            cues = [{ start: 0, end: Number.MAX_SAFE_INTEGER, image: res.spriteUrl, w: res.tileW, h: res.tileH }];
+          }
+          storyboardCacheRef.current.set(key, cues);
+          if (!preloadedSpritesRef.current.has(res.spriteUrl)) {
+            preloadedSpritesRef.current.add(res.spriteUrl);
+            const img = new window.Image();
+            img.src = res.spriteUrl;
+          }
+          return cues;
+        };
+        const firstKey = keys[0];
+        const firstCues = await loadRes(firstKey);
+        if (!cancelled && firstCues) {
+          setStoryboardCues(firstCues);
+          setActiveStoryboardRes(firstKey);
+        }
+        for (const key of keys.slice(1)) {
+          await loadRes(key);
+        }
+        return;
+      }
       if (!parsed.storyboard.src) {
         setStoryboardCues([]);
         return;
       }
       try {
         const response = await fetch(parsed.storyboard.src);
-        if (!response.ok) {
-          throw new Error("Storyboard not found");
-        }
+        if (!response.ok) throw new Error("Storyboard not found");
         const text = await response.text();
-        const cues = parseStoryboardVtt(
-          text,
-          new URL(parsed.storyboard.src, window.location.href).href
-        );
-        if (!cancelled) {
-          setStoryboardCues(cues);
-        }
+        const cues = parseStoryboardVtt(text, new URL(parsed.storyboard.src, window.location.href).href);
+        if (!cancelled) setStoryboardCues(cues);
       } catch {
         if (!cancelled && parsed.storyboard.fallbackImage) {
-          setStoryboardCues([
-            {
-              start: 0,
-              end: Number.MAX_SAFE_INTEGER,
-              image: parsed.storyboard.fallbackImage,
-              w: parsed.storyboard.width ?? 160,
-              h: parsed.storyboard.height ?? 90
-            }
-          ]);
+          setStoryboardCues([{
+            start: 0,
+            end: Number.MAX_SAFE_INTEGER,
+            image: parsed.storyboard.fallbackImage,
+            w: parsed.storyboard.width ?? 160,
+            h: parsed.storyboard.height ?? 90
+          }]);
         }
       }
     }
@@ -787,6 +830,63 @@ function Video({
     },
     [duration]
   );
+  const upgradeStoryboardResolution = useCallback((hoverTime) => {
+    const resolutions = parsed.storyboard?.resolutions;
+    if (!resolutions || storyboardCacheRef.current.size === 0) return;
+    const RES_ORDER = ["480p", "360p", "240p", "180p", "default"];
+    const conn = typeof navigator !== "undefined" ? navigator.connection : null;
+    const maxRes = conn?.effectiveType === "2g" ? "180p" : conn?.effectiveType === "3g" ? "240p" : "480p";
+    const maxIdx = RES_ORDER.indexOf(maxRes);
+    for (let i = 0; i <= maxIdx; i++) {
+      const key = RES_ORDER[i];
+      if (storyboardCacheRef.current.has(key)) {
+        if (activeStoryboardRes !== key) {
+          setStoryboardCues(storyboardCacheRef.current.get(key));
+          setActiveStoryboardRes(key);
+          const spriteUrl = resolutions[key]?.spriteUrl;
+          if (spriteUrl && !preloadedSpritesRef.current.has(spriteUrl)) {
+            preloadedSpritesRef.current.add(spriteUrl);
+            const img = new window.Image();
+            img.src = spriteUrl;
+          }
+        }
+        break;
+      }
+    }
+    const bestKey = [...storyboardCacheRef.current.keys()].sort((a, b) => {
+      const order = ["480p", "360p", "240p", "180p", "default"];
+      return order.indexOf(a) - order.indexOf(b);
+    })[0];
+    if (bestKey) {
+      const cues = storyboardCacheRef.current.get(bestKey) ?? [];
+      const nearIdx = cues.findIndex((c) => c.start > hoverTime);
+      const window2 = cues.slice(Math.max(0, nearIdx - 2), nearIdx + 3);
+      for (const c of window2) {
+        if (!preloadedSpritesRef.current.has(c.image)) {
+          preloadedSpritesRef.current.add(c.image);
+          const img = new window.Image();
+          img.src = c.image;
+        }
+      }
+    }
+  }, [parsed.storyboard?.resolutions, activeStoryboardRes]);
+  useEffect(() => {
+    const resolutions = parsed.storyboard?.resolutions;
+    if (!resolutions || storyboardCacheRef.current.size === 0 || !duration) return;
+    const RES_ORDER = ["180p", "240p", "360p", "480p", "default"];
+    const lowestKey = RES_ORDER.find((k) => storyboardCacheRef.current.has(k));
+    if (!lowestKey) return;
+    const cues = storyboardCacheRef.current.get(lowestKey) ?? [];
+    const playheadIdx = cues.findIndex((c) => c.start > currentTime);
+    const nearby = cues.slice(Math.max(0, playheadIdx - 2), playheadIdx + 6);
+    for (const c of nearby) {
+      if (!preloadedSpritesRef.current.has(c.image)) {
+        preloadedSpritesRef.current.add(c.image);
+        const img = new window.Image();
+        img.src = c.image;
+      }
+    }
+  }, [Math.floor(currentTime / 10), parsed.storyboard?.resolutions, duration]);
   const updatePreview = useCallback(
     (clientX) => {
       const progress = progressRef.current;
@@ -797,6 +897,7 @@ function Video({
       const rect = progress.getBoundingClientRect();
       const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
       const time = x / rect.width * duration;
+      upgradeStoryboardResolution(time);
       const cue = findStoryboardCue(storyboardCues, time);
       if (!cue) {
         setPreview(null);
@@ -808,7 +909,7 @@ function Video({
         left: Math.max(80, Math.min(x, rect.width - 80))
       });
     },
-    [duration, storyboardCues]
+    [duration, storyboardCues, upgradeStoryboardResolution]
   );
   const handleProgressPointerMove = useCallback(
     (event) => {
@@ -822,8 +923,19 @@ function Video({
   }, []);
   const handleProgressPointerLeave = useCallback(() => {
     setIsHoveringProgress(false);
-    if (!isDragging) setPreview(null);
-  }, [isDragging]);
+    if (!isDragging) {
+      setPreview(null);
+      const resolutions = parsed.storyboard?.resolutions;
+      if (resolutions && storyboardCacheRef.current.size > 0) {
+        const RES_ORDER = ["180p", "240p", "360p", "480p", "default"];
+        const lowestKey = RES_ORDER.find((k) => storyboardCacheRef.current.has(k));
+        if (lowestKey && activeStoryboardRes !== lowestKey) {
+          setStoryboardCues(storyboardCacheRef.current.get(lowestKey));
+          setActiveStoryboardRes(lowestKey);
+        }
+      }
+    }
+  }, [isDragging, parsed.storyboard?.resolutions, activeStoryboardRes]);
   const handleProgressPointerDown = useCallback(
     (event) => {
       const progress = progressRef.current;
@@ -1972,7 +2084,8 @@ function parseVideoChildren(children) {
     }
     if (child.type === VideoThumbnail || name === "SiloVideoThumbnail") {
       const element = child;
-      parsed.thumbnailSrc = element.props.src;
+      if (element.props.urls) parsed.thumbnailUrls = element.props.urls;
+      if (element.props.src) parsed.thumbnailSrc = element.props.src;
     }
     if (child.type === AgeRating || name === "SiloAgeRating") {
       const element = child;
@@ -1995,15 +2108,10 @@ function parseVideoChildren(children) {
       });
       parsed.storyboard = {
         ...element.props.src !== void 0 && { src: element.props.src },
-        ...element.props.fallbackImage !== void 0 && {
-          fallbackImage: element.props.fallbackImage
-        },
-        ...element.props.width !== void 0 && {
-          width: element.props.width
-        },
-        ...element.props.height !== void 0 && {
-          height: element.props.height
-        },
+        ...element.props.fallbackImage !== void 0 && { fallbackImage: element.props.fallbackImage },
+        ...element.props.width !== void 0 && { width: element.props.width },
+        ...element.props.height !== void 0 && { height: element.props.height },
+        ...element.props.resolutions !== void 0 && { resolutions: element.props.resolutions },
         frames
       };
     }