ai-design-system 0.1.105 → 0.1.106

package/components/composites/ScenePlayer/ScenePlayer.tsx

@@ -94,6 +94,26 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
       return 0;
     });
 
+    // Dual-video buffer for gapless playback between scenes:
+    // One slot actively plays the current scene, while the other slot preloads the next scene in the background.
+    const [activeSlot, setActiveSlot] = React.useState<0 | 1>(0);
+    const [slot0Index, setSlot0Index] = React.useState<number>(() => {
+      if (initialSceneIndex >= 0 && initialSceneIndex < scenes.length) {
+        return initialSceneIndex;
+      }
+      return 0;
+    });
+    const [slot1Index, setSlot1Index] = React.useState<number>(() => {
+      if (scenes.length > 1) {
+        const init = initialSceneIndex >= 0 && initialSceneIndex < scenes.length ? initialSceneIndex : 0;
+        return (init + 1) % scenes.length;
+      }
+      return 0;
+    });
+
+    const videoRef0 = React.useRef<HTMLVideoElement | null>(null);
+    const videoRef1 = React.useRef<HTMLVideoElement | null>(null);
+
     const [isPlayingState, setIsPlayingState] = React.useState<boolean>(isPlayingProp ?? true);
     const isPlaying = isPlayingProp !== undefined ? isPlayingProp : isPlayingState;
 
@@ -111,10 +131,46 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
     }, [setIsPlaying]);
 
     const [isMuted, setIsMuted] = React.useState<boolean>(initialMuted);
-    const videoRef = React.useRef<HTMLVideoElement | null>(null);
 
     const activeScene = scenes[currentSceneIndex] || scenes[0];
 
+    const goToScene = React.useCallback(
+      (targetIdx: number) => {
+        if (!scenes.length) return;
+        const clampedIdx = (targetIdx + scenes.length) % scenes.length;
+        onSceneChange?.(clampedIdx, scenes[clampedIdx]);
+        setCurrentSceneIndex(clampedIdx);
+
+        if (scenes.length <= 1) {
+          setSlot0Index(clampedIdx);
+          const v0 = videoRef0.current;
+          if (v0) {
+            v0.currentTime = 0;
+            if (isPlaying) v0.play().catch(() => {});
+          }
+          return;
+        }
+
+        const nextActiveSlot: 0 | 1 = activeSlot === 0 ? 1 : 0;
+        const targetVideo = nextActiveSlot === 0 ? videoRef0.current : videoRef1.current;
+        if (targetVideo) {
+          targetVideo.currentTime = 0;
+        }
+        const sceneAfterTarget = (clampedIdx + 1) % scenes.length;
+
+        if (nextActiveSlot === 0) {
+          setSlot0Index(clampedIdx);
+          setSlot1Index(sceneAfterTarget);
+        } else {
+          setSlot1Index(clampedIdx);
+          setSlot0Index(sceneAfterTarget);
+        }
+
+        setActiveSlot(nextActiveSlot);
+      },
+      [scenes, activeSlot, isPlaying, onSceneChange]
+    );
+
     const handlePromptSubmit = React.useCallback(
       (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => {
         if (onSubmit) {
@@ -130,30 +186,20 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
 
     const handlePrev = React.useCallback(() => {
       if (!scenes.length) return;
-      setCurrentSceneIndex((prev) => {
-        const nextIdx = prev > 0 ? prev - 1 : scenes.length - 1;
-        onSceneChange?.(nextIdx, scenes[nextIdx]);
-        return nextIdx;
-      });
-    }, [scenes, onSceneChange]);
+      const prevIdx = currentSceneIndex > 0 ? currentSceneIndex - 1 : scenes.length - 1;
+      goToScene(prevIdx);
+    }, [scenes.length, currentSceneIndex, goToScene]);
 
     const handleNext = React.useCallback(() => {
       if (!scenes.length) return;
-      setCurrentSceneIndex((prev) => {
-        const nextIdx = prev < scenes.length - 1 ? prev + 1 : 0;
-        onSceneChange?.(nextIdx, scenes[nextIdx]);
-        return nextIdx;
-      });
-    }, [scenes, onSceneChange]);
+      const nextIdx = currentSceneIndex < scenes.length - 1 ? currentSceneIndex + 1 : 0;
+      goToScene(nextIdx);
+    }, [scenes.length, currentSceneIndex, goToScene]);
 
     const handleSceneEnded = React.useCallback(() => {
       if (!scenes.length || !isPlaying) return;
-      setCurrentSceneIndex((prev) => {
-        const nextIdx = prev < scenes.length - 1 ? prev + 1 : 0;
-        onSceneChange?.(nextIdx, scenes[nextIdx]);
-        return nextIdx;
-      });
-    }, [scenes, onSceneChange, isPlaying]);
+      handleNext();
+    }, [scenes.length, isPlaying, handleNext]);
 
     const handleDownload = React.useCallback(async () => {
       if (onDownload) {
@@ -187,28 +233,48 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
       }
     }, [onDownload, downloadUrl, videoUrl, activeScene?.scene_clip_url]);
 
-    // Playback & mute synchronization
+    // Playback & mute synchronization across dual slots
     React.useEffect(() => {
-      const video = videoRef.current;
-      if (!video) return;
+      const activeVideo = activeSlot === 0 ? videoRef0.current : videoRef1.current;
+      const idleVideo = activeSlot === 0 ? videoRef1.current : videoRef0.current;
 
-      video.muted = isMuted;
+      if (idleVideo) {
+        idleVideo.pause();
+        idleVideo.muted = true;
+      }
+
+      if (!activeVideo) return;
+
+      activeVideo.muted = isMuted;
 
       if (isPlaying) {
-        const playPromise = video.play();
+        if (activeVideo.ended) {
+          activeVideo.currentTime = 0;
+        }
+        const playPromise = activeVideo.play();
         if (playPromise !== undefined) {
           playPromise.catch(() => {
             if (!isMuted) {
-              video.muted = true;
+              activeVideo.muted = true;
               setIsMuted(true);
-              video.play().catch(() => {});
+              activeVideo.play().catch(() => {});
             }
           });
         }
       } else {
-        video.pause();
+        activeVideo.pause();
       }
-    }, [activeScene?.scene_clip_url, isMuted, isPlaying]);
+    }, [activeSlot, isPlaying, isMuted, slot0Index, slot1Index]);
+
+    React.useEffect(() => {
+      if (!scenes || scenes.length === 0) return;
+      if (currentSceneIndex >= scenes.length) {
+        setCurrentSceneIndex(0);
+        setSlot0Index(0);
+        setSlot1Index(scenes.length > 1 ? 1 : 0);
+        setActiveSlot(0);
+      }
+    }, [scenes, currentSceneIndex]);
 
     // Keyboard navigation & playback controls
     React.useEffect(() => {
@@ -367,20 +433,40 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
 
         {/* Main Scene Video Player Stage */}
         <div className="flex-1 relative flex items-center justify-center bg-black overflow-hidden min-h-0">
+          {/* Slot 0 Video */}
           <video
-            ref={videoRef}
-            key={activeScene?.scene_clip_url}
-            src={activeScene?.scene_clip_url}
-            autoPlay
+            ref={videoRef0}
+            src={scenes[slot0Index]?.scene_clip_url}
+            preload="auto"
             playsInline
-            loop={false}
-            muted={isMuted}
-            onEnded={handleSceneEnded}
-            className="w-full h-full object-contain bg-black"
+            muted={activeSlot === 0 ? isMuted : true}
+            onEnded={activeSlot === 0 ? handleSceneEnded : undefined}
+            data-testid="scene-video-0"
+            className={cn(
+              "w-full h-full object-contain bg-black absolute inset-0 transition-opacity duration-150",
+              activeSlot === 0 ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"
+            )}
           />
 
+          {/* Slot 1 Video (preloads next scene in background for gapless playback) */}
+          {scenes.length > 1 && (
+            <video
+              ref={videoRef1}
+              src={scenes[slot1Index]?.scene_clip_url}
+              preload="auto"
+              playsInline
+              muted={activeSlot === 1 ? isMuted : true}
+              onEnded={activeSlot === 1 ? handleSceneEnded : undefined}
+              data-testid="scene-video-1"
+              className={cn(
+                "w-full h-full object-contain bg-black absolute inset-0 transition-opacity duration-150",
+                activeSlot === 1 ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"
+              )}
+            />
+          )}
+
           {/* Invisible Interactive Tap Zones for Stepping Scenes */}
-          <div className="absolute inset-x-0 top-[60px] bottom-[70px] flex z-10">
+          <div className="absolute inset-x-0 top-[60px] bottom-[70px] flex z-20">
             <Button
               variant="ghost"
               data-testid="btn-prev-scene"

package/dist/index.cjs

@@ -14692,7 +14692,7 @@ var ScenePlayer = React3__namespace.forwardRef(
       "onSceneChange",
       "className"
     ]);
-    var _a2;
+    var _a2, _b2, _c;
     const handleBack = onBack || onClose;
     const [currentSceneIndex, setCurrentSceneIndex] = React3__namespace.useState(() => {
       if (initialSceneIndex >= 0 && initialSceneIndex < scenes.length) {
@@ -14700,6 +14700,22 @@ var ScenePlayer = React3__namespace.forwardRef(
       }
       return 0;
     });
+    const [activeSlot, setActiveSlot] = React3__namespace.useState(0);
+    const [slot0Index, setSlot0Index] = React3__namespace.useState(() => {
+      if (initialSceneIndex >= 0 && initialSceneIndex < scenes.length) {
+        return initialSceneIndex;
+      }
+      return 0;
+    });
+    const [slot1Index, setSlot1Index] = React3__namespace.useState(() => {
+      if (scenes.length > 1) {
+        const init = initialSceneIndex >= 0 && initialSceneIndex < scenes.length ? initialSceneIndex : 0;
+        return (init + 1) % scenes.length;
+      }
+      return 0;
+    });
+    const videoRef0 = React3__namespace.useRef(null);
+    const videoRef1 = React3__namespace.useRef(null);
     const [isPlayingState, setIsPlayingState] = React3__namespace.useState(isPlayingProp != null ? isPlayingProp : true);
     const isPlaying = isPlayingProp !== void 0 ? isPlayingProp : isPlayingState;
     const setIsPlaying = React3__namespace.useCallback(
@@ -14714,8 +14730,40 @@ var ScenePlayer = React3__namespace.forwardRef(
       setIsPlaying((prev) => !prev);
     }, [setIsPlaying]);
     const [isMuted, setIsMuted] = React3__namespace.useState(initialMuted);
-    const videoRef = React3__namespace.useRef(null);
     const activeScene = scenes[currentSceneIndex] || scenes[0];
+    const goToScene = React3__namespace.useCallback(
+      (targetIdx) => {
+        if (!scenes.length) return;
+        const clampedIdx = (targetIdx + scenes.length) % scenes.length;
+        onSceneChange == null ? void 0 : onSceneChange(clampedIdx, scenes[clampedIdx]);
+        setCurrentSceneIndex(clampedIdx);
+        if (scenes.length <= 1) {
+          setSlot0Index(clampedIdx);
+          const v0 = videoRef0.current;
+          if (v0) {
+            v0.currentTime = 0;
+            if (isPlaying) v0.play().catch(() => {
+            });
+          }
+          return;
+        }
+        const nextActiveSlot = activeSlot === 0 ? 1 : 0;
+        const targetVideo = nextActiveSlot === 0 ? videoRef0.current : videoRef1.current;
+        if (targetVideo) {
+          targetVideo.currentTime = 0;
+        }
+        const sceneAfterTarget = (clampedIdx + 1) % scenes.length;
+        if (nextActiveSlot === 0) {
+          setSlot0Index(clampedIdx);
+          setSlot1Index(sceneAfterTarget);
+        } else {
+          setSlot1Index(clampedIdx);
+          setSlot0Index(sceneAfterTarget);
+        }
+        setActiveSlot(nextActiveSlot);
+      },
+      [scenes, activeSlot, isPlaying, onSceneChange]
+    );
     const handlePromptSubmit = React3__namespace.useCallback(
       (message, event) => {
         if (onSubmit) {
@@ -14730,30 +14778,20 @@ var ScenePlayer = React3__namespace.forwardRef(
     );
     const handlePrev = React3__namespace.useCallback(() => {
       if (!scenes.length) return;
-      setCurrentSceneIndex((prev) => {
-        const nextIdx = prev > 0 ? prev - 1 : scenes.length - 1;
-        onSceneChange == null ? void 0 : onSceneChange(nextIdx, scenes[nextIdx]);
-        return nextIdx;
-      });
-    }, [scenes, onSceneChange]);
+      const prevIdx = currentSceneIndex > 0 ? currentSceneIndex - 1 : scenes.length - 1;
+      goToScene(prevIdx);
+    }, [scenes.length, currentSceneIndex, goToScene]);
     const handleNext = React3__namespace.useCallback(() => {
       if (!scenes.length) return;
-      setCurrentSceneIndex((prev) => {
-        const nextIdx = prev < scenes.length - 1 ? prev + 1 : 0;
-        onSceneChange == null ? void 0 : onSceneChange(nextIdx, scenes[nextIdx]);
-        return nextIdx;
-      });
-    }, [scenes, onSceneChange]);
+      const nextIdx = currentSceneIndex < scenes.length - 1 ? currentSceneIndex + 1 : 0;
+      goToScene(nextIdx);
+    }, [scenes.length, currentSceneIndex, goToScene]);
     const handleSceneEnded = React3__namespace.useCallback(() => {
       if (!scenes.length || !isPlaying) return;
-      setCurrentSceneIndex((prev) => {
-        const nextIdx = prev < scenes.length - 1 ? prev + 1 : 0;
-        onSceneChange == null ? void 0 : onSceneChange(nextIdx, scenes[nextIdx]);
-        return nextIdx;
-      });
-    }, [scenes, onSceneChange, isPlaying]);
+      handleNext();
+    }, [scenes.length, isPlaying, handleNext]);
     const handleDownload = React3__namespace.useCallback(async () => {
-      var _a3, _b2;
+      var _a3, _b3;
       if (onDownload) {
         onDownload();
         return;
@@ -14775,7 +14813,7 @@ var ScenePlayer = React3__namespace.forwardRef(
       } catch (e) {
         const link = document.createElement("a");
         link.href = targetUrl;
-        link.download = ((_b2 = targetUrl.split("/").pop()) == null ? void 0 : _b2.split("?")[0]) || "video.mp4";
+        link.download = ((_b3 = targetUrl.split("/").pop()) == null ? void 0 : _b3.split("?")[0]) || "video.mp4";
         link.target = "_blank";
         link.rel = "noopener noreferrer";
         document.body.appendChild(link);
@@ -14784,25 +14822,42 @@ var ScenePlayer = React3__namespace.forwardRef(
       }
     }, [onDownload, downloadUrl, videoUrl, activeScene == null ? void 0 : activeScene.scene_clip_url]);
     React3__namespace.useEffect(() => {
-      const video = videoRef.current;
-      if (!video) return;
-      video.muted = isMuted;
+      const activeVideo = activeSlot === 0 ? videoRef0.current : videoRef1.current;
+      const idleVideo = activeSlot === 0 ? videoRef1.current : videoRef0.current;
+      if (idleVideo) {
+        idleVideo.pause();
+        idleVideo.muted = true;
+      }
+      if (!activeVideo) return;
+      activeVideo.muted = isMuted;
       if (isPlaying) {
-        const playPromise = video.play();
+        if (activeVideo.ended) {
+          activeVideo.currentTime = 0;
+        }
+        const playPromise = activeVideo.play();
         if (playPromise !== void 0) {
           playPromise.catch(() => {
             if (!isMuted) {
-              video.muted = true;
+              activeVideo.muted = true;
               setIsMuted(true);
-              video.play().catch(() => {
+              activeVideo.play().catch(() => {
               });
             }
           });
         }
       } else {
-        video.pause();
+        activeVideo.pause();
       }
-    }, [activeScene == null ? void 0 : activeScene.scene_clip_url, isMuted, isPlaying]);
+    }, [activeSlot, isPlaying, isMuted, slot0Index, slot1Index]);
+    React3__namespace.useEffect(() => {
+      if (!scenes || scenes.length === 0) return;
+      if (currentSceneIndex >= scenes.length) {
+        setCurrentSceneIndex(0);
+        setSlot0Index(0);
+        setSlot1Index(scenes.length > 1 ? 1 : 0);
+        setActiveSlot(0);
+      }
+    }, [scenes, currentSceneIndex]);
     React3__namespace.useEffect(() => {
       const handleKeyDown = (e) => {
         const target = e.target;
@@ -14951,18 +15006,36 @@ var ScenePlayer = React3__namespace.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "video",
               {
-                ref: videoRef,
-                src: activeScene == null ? void 0 : activeScene.scene_clip_url,
-                autoPlay: true,
+                ref: videoRef0,
+                src: (_b2 = scenes[slot0Index]) == null ? void 0 : _b2.scene_clip_url,
+                preload: "auto",
                 playsInline: true,
-                loop: false,
-                muted: isMuted,
-                onEnded: handleSceneEnded,
-                className: "w-full h-full object-contain bg-black"
-              },
-              activeScene == null ? void 0 : activeScene.scene_clip_url
+                muted: activeSlot === 0 ? isMuted : true,
+                onEnded: activeSlot === 0 ? handleSceneEnded : void 0,
+                "data-testid": "scene-video-0",
+                className: cn(
+                  "w-full h-full object-contain bg-black absolute inset-0 transition-opacity duration-150",
+                  activeSlot === 0 ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"
+                )
+              }
+            ),
+            scenes.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              "video",
+              {
+                ref: videoRef1,
+                src: (_c = scenes[slot1Index]) == null ? void 0 : _c.scene_clip_url,
+                preload: "auto",
+                playsInline: true,
+                muted: activeSlot === 1 ? isMuted : true,
+                onEnded: activeSlot === 1 ? handleSceneEnded : void 0,
+                "data-testid": "scene-video-1",
+                className: cn(
+                  "w-full h-full object-contain bg-black absolute inset-0 transition-opacity duration-150",
+                  activeSlot === 1 ? "opacity-100 z-10" : "opacity-0 pointer-events-none z-0"
+                )
+              }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-[60px] bottom-[70px] flex z-10", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-[60px] bottom-[70px] flex z-20", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Button2,
                 {