ai-design-system 0.1.105 → 0.1.107

package/components/composites/ScenePlayer/ScenePlayer.tsx

@@ -94,6 +94,27 @@ 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 isTransitioningRef = React.useRef<boolean>(false);
+
     const [isPlayingState, setIsPlayingState] = React.useState<boolean>(isPlayingProp ?? true);
     const isPlaying = isPlayingProp !== undefined ? isPlayingProp : isPlayingState;
 
@@ -111,10 +132,82 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
     }, [setIsPlaying]);
 
     const [isMuted, setIsMuted] = React.useState<boolean>(initialMuted);
-    const videoRef = React.useRef<HTMLVideoElement | null>(null);
+
+    const toggleMute = React.useCallback(() => {
+      setIsMuted((prev) => {
+        const next = !prev;
+        if (videoRef0.current) videoRef0.current.muted = next;
+        if (videoRef1.current) videoRef1.current.muted = next;
+        return next;
+      });
+    }, []);
 
     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);
+        isTransitioningRef.current = false;
+
+        if (scenes.length <= 1) {
+          setSlot0Index(clampedIdx);
+          const v0 = videoRef0.current;
+          if (v0) {
+            v0.currentTime = 0;
+            v0.muted = isMuted;
+            if (isPlaying) {
+              v0.play().catch((err) => {
+                if (err?.name === "NotAllowedError") {
+                  v0.muted = true;
+                  v0.play().catch(() => {});
+                }
+              });
+            }
+          }
+          return;
+        }
+
+        const nextActiveSlot: 0 | 1 = activeSlot === 0 ? 1 : 0;
+        const nextVideo = nextActiveSlot === 0 ? videoRef0.current : videoRef1.current;
+        const currentVideo = activeSlot === 0 ? videoRef0.current : videoRef1.current;
+        const sceneAfterTarget = (clampedIdx + 1) % scenes.length;
+
+        // 1. Immediately start next video synchronously (0ms transition gap)
+        if (nextVideo) {
+          nextVideo.currentTime = 0;
+          nextVideo.muted = isMuted;
+          if (isPlaying) {
+            nextVideo.play().catch((err) => {
+              if (err?.name === "NotAllowedError") {
+                nextVideo.muted = true;
+                nextVideo.play().catch(() => {});
+              }
+            });
+          }
+        }
+
+        // 2. Pause previous video
+        if (currentVideo) {
+          currentVideo.pause();
+        }
+
+        // 3. Swap slots and prepare idle slot to preload upcoming scene
+        if (nextActiveSlot === 0) {
+          setSlot0Index(clampedIdx);
+          setSlot1Index(sceneAfterTarget);
+        } else {
+          setSlot1Index(clampedIdx);
+          setSlot0Index(sceneAfterTarget);
+        }
+
+        setActiveSlot(nextActiveSlot);
+      },
+      [scenes, activeSlot, isPlaying, isMuted, onSceneChange]
+    );
+
     const handlePromptSubmit = React.useCallback(
       (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => {
         if (onSubmit) {
@@ -130,30 +223,34 @@ 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]);
+      if (!scenes.length || !isPlaying || isTransitioningRef.current) return;
+      isTransitioningRef.current = true;
+      handleNext();
+    }, [scenes.length, isPlaying, handleNext]);
+
+    const handleTimeUpdate = React.useCallback(
+      (e: React.SyntheticEvent<HTMLVideoElement>) => {
+        const video = e.currentTarget;
+        if (!scenes.length || !isPlaying || isTransitioningRef.current) return;
+        // Trigger next scene 60ms before end so decoder starts seamlessly with zero gap
+        if (video.duration > 0.1 && video.currentTime >= video.duration - 0.06) {
+          isTransitioningRef.current = true;
+          handleNext();
+        }
+      },
+      [scenes.length, isPlaying, handleNext]
+    );
 
     const handleDownload = React.useCallback(async () => {
       if (onDownload) {
@@ -187,28 +284,84 @@ 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();
+      }
+
+      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;
-              setIsMuted(true);
-              video.play().catch(() => {});
+          playPromise.catch((err) => {
+            if (err?.name === "NotAllowedError") {
+              activeVideo.muted = true;
+              activeVideo.play().catch(() => {});
             }
           });
         }
       } else {
-        video.pause();
+        activeVideo.pause();
       }
-    }, [activeScene?.scene_clip_url, isMuted, isPlaying]);
+    }, [activeSlot, isPlaying, isMuted]);
+
+    // Ensure idle video element actively loads and buffers upcoming scene
+    React.useEffect(() => {
+      if (scenes.length <= 1) return;
+      const idleVideo = activeSlot === 0 ? videoRef1.current : videoRef0.current;
+      const idleIndex = activeSlot === 0 ? slot1Index : slot0Index;
+      const idleUrl = scenes[idleIndex]?.scene_clip_url;
+
+      if (idleVideo && idleUrl) {
+        if (idleVideo.src !== idleUrl) {
+          idleVideo.src = idleUrl;
+        }
+        idleVideo.preload = "auto";
+        idleVideo.load();
+      }
+    }, [activeSlot, slot0Index, slot1Index, scenes]);
+
+    // Prefetch upcoming clips into browser HTTP cache
+    React.useEffect(() => {
+      if (!scenes || scenes.length <= 2) return;
+      const toPrefetch = [
+        (currentSceneIndex + 2) % scenes.length,
+        (currentSceneIndex + 3) % scenes.length,
+      ];
+
+      toPrefetch.forEach((idx) => {
+        const url = scenes[idx]?.scene_clip_url;
+        if (url) {
+          const link = document.createElement("link");
+          link.rel = "prefetch";
+          link.href = url;
+          document.head.appendChild(link);
+          setTimeout(() => {
+            if (link.parentNode) link.parentNode.removeChild(link);
+          }, 15000);
+        }
+      });
+    }, [currentSceneIndex, scenes]);
+
+    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(() => {
@@ -237,7 +390,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
           handleBack?.();
         } else if (e.key === "m" || e.key === "M") {
           e.preventDefault();
-          setIsMuted((prev) => !prev);
+          toggleMute();
         }
       };
 
@@ -345,7 +498,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
               size="icon"
               data-testid="btn-toggle-mute"
               aria-label={isMuted ? "Unmute audio" : "Mute audio"}
-              onClick={() => setIsMuted((prev) => !prev)}
+              onClick={toggleMute}
               className="h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer"
             >
               <Icon name={isMuted ? "volume-x" : "volume-2"} className="w-4 h-4" />
@@ -367,20 +520,42 @@ 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"
+            onEnded={activeSlot === 0 ? handleSceneEnded : undefined}
+            onTimeUpdate={activeSlot === 0 ? handleTimeUpdate : undefined}
+            data-testid="scene-video-0"
+            className={cn(
+              "w-full h-full object-contain bg-black absolute inset-0 transition-opacity duration-75",
+              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={isMuted}
+              onEnded={activeSlot === 1 ? handleSceneEnded : undefined}
+              onTimeUpdate={activeSlot === 1 ? handleTimeUpdate : undefined}
+              data-testid="scene-video-1"
+              className={cn(
+                "w-full h-full object-contain bg-black absolute inset-0 transition-opacity duration-75",
+                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,23 @@ 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 isTransitioningRef = React3__namespace.useRef(false);
     const [isPlayingState, setIsPlayingState] = React3__namespace.useState(isPlayingProp != null ? isPlayingProp : true);
     const isPlaying = isPlayingProp !== void 0 ? isPlayingProp : isPlayingState;
     const setIsPlaying = React3__namespace.useCallback(
@@ -14714,8 +14731,71 @@ var ScenePlayer = React3__namespace.forwardRef(
       setIsPlaying((prev) => !prev);
     }, [setIsPlaying]);
     const [isMuted, setIsMuted] = React3__namespace.useState(initialMuted);
-    const videoRef = React3__namespace.useRef(null);
+    const toggleMute = React3__namespace.useCallback(() => {
+      setIsMuted((prev) => {
+        const next = !prev;
+        if (videoRef0.current) videoRef0.current.muted = next;
+        if (videoRef1.current) videoRef1.current.muted = next;
+        return next;
+      });
+    }, []);
     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);
+        isTransitioningRef.current = false;
+        if (scenes.length <= 1) {
+          setSlot0Index(clampedIdx);
+          const v0 = videoRef0.current;
+          if (v0) {
+            v0.currentTime = 0;
+            v0.muted = isMuted;
+            if (isPlaying) {
+              v0.play().catch((err) => {
+                if ((err == null ? void 0 : err.name) === "NotAllowedError") {
+                  v0.muted = true;
+                  v0.play().catch(() => {
+                  });
+                }
+              });
+            }
+          }
+          return;
+        }
+        const nextActiveSlot = activeSlot === 0 ? 1 : 0;
+        const nextVideo = nextActiveSlot === 0 ? videoRef0.current : videoRef1.current;
+        const currentVideo = activeSlot === 0 ? videoRef0.current : videoRef1.current;
+        const sceneAfterTarget = (clampedIdx + 1) % scenes.length;
+        if (nextVideo) {
+          nextVideo.currentTime = 0;
+          nextVideo.muted = isMuted;
+          if (isPlaying) {
+            nextVideo.play().catch((err) => {
+              if ((err == null ? void 0 : err.name) === "NotAllowedError") {
+                nextVideo.muted = true;
+                nextVideo.play().catch(() => {
+                });
+              }
+            });
+          }
+        }
+        if (currentVideo) {
+          currentVideo.pause();
+        }
+        if (nextActiveSlot === 0) {
+          setSlot0Index(clampedIdx);
+          setSlot1Index(sceneAfterTarget);
+        } else {
+          setSlot1Index(clampedIdx);
+          setSlot0Index(sceneAfterTarget);
+        }
+        setActiveSlot(nextActiveSlot);
+      },
+      [scenes, activeSlot, isPlaying, isMuted, onSceneChange]
+    );
     const handlePromptSubmit = React3__namespace.useCallback(
       (message, event) => {
         if (onSubmit) {
@@ -14730,30 +14810,32 @@ 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]);
+      if (!scenes.length || !isPlaying || isTransitioningRef.current) return;
+      isTransitioningRef.current = true;
+      handleNext();
+    }, [scenes.length, isPlaying, handleNext]);
+    const handleTimeUpdate = React3__namespace.useCallback(
+      (e) => {
+        const video = e.currentTarget;
+        if (!scenes.length || !isPlaying || isTransitioningRef.current) return;
+        if (video.duration > 0.1 && video.currentTime >= video.duration - 0.06) {
+          isTransitioningRef.current = true;
+          handleNext();
+        }
+      },
+      [scenes.length, isPlaying, handleNext]
+    );
     const handleDownload = React3__namespace.useCallback(async () => {
-      var _a3, _b2;
+      var _a3, _b3;
       if (onDownload) {
         onDownload();
         return;
@@ -14775,7 +14857,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 +14866,74 @@ 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();
+      }
+      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;
-              setIsMuted(true);
-              video.play().catch(() => {
+          playPromise.catch((err) => {
+            if ((err == null ? void 0 : err.name) === "NotAllowedError") {
+              activeVideo.muted = true;
+              activeVideo.play().catch(() => {
               });
             }
           });
         }
       } else {
-        video.pause();
+        activeVideo.pause();
+      }
+    }, [activeSlot, isPlaying, isMuted]);
+    React3__namespace.useEffect(() => {
+      var _a3;
+      if (scenes.length <= 1) return;
+      const idleVideo = activeSlot === 0 ? videoRef1.current : videoRef0.current;
+      const idleIndex = activeSlot === 0 ? slot1Index : slot0Index;
+      const idleUrl = (_a3 = scenes[idleIndex]) == null ? void 0 : _a3.scene_clip_url;
+      if (idleVideo && idleUrl) {
+        if (idleVideo.src !== idleUrl) {
+          idleVideo.src = idleUrl;
+        }
+        idleVideo.preload = "auto";
+        idleVideo.load();
+      }
+    }, [activeSlot, slot0Index, slot1Index, scenes]);
+    React3__namespace.useEffect(() => {
+      if (!scenes || scenes.length <= 2) return;
+      const toPrefetch = [
+        (currentSceneIndex + 2) % scenes.length,
+        (currentSceneIndex + 3) % scenes.length
+      ];
+      toPrefetch.forEach((idx) => {
+        var _a3;
+        const url = (_a3 = scenes[idx]) == null ? void 0 : _a3.scene_clip_url;
+        if (url) {
+          const link = document.createElement("link");
+          link.rel = "prefetch";
+          link.href = url;
+          document.head.appendChild(link);
+          setTimeout(() => {
+            if (link.parentNode) link.parentNode.removeChild(link);
+          }, 15e3);
+        }
+      });
+    }, [currentSceneIndex, scenes]);
+    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);
       }
-    }, [activeScene == null ? void 0 : activeScene.scene_clip_url, isMuted, isPlaying]);
+    }, [scenes, currentSceneIndex]);
     React3__namespace.useEffect(() => {
       const handleKeyDown = (e) => {
         const target = e.target;
@@ -14823,7 +14954,7 @@ var ScenePlayer = React3__namespace.forwardRef(
           handleBack == null ? void 0 : handleBack();
         } else if (e.key === "m" || e.key === "M") {
           e.preventDefault();
-          setIsMuted((prev) => !prev);
+          toggleMute();
         }
       };
       window.addEventListener("keydown", handleKeyDown);
@@ -14928,7 +15059,7 @@ var ScenePlayer = React3__namespace.forwardRef(
                   size: "icon",
                   "data-testid": "btn-toggle-mute",
                   "aria-label": isMuted ? "Unmute audio" : "Mute audio",
-                  onClick: () => setIsMuted((prev) => !prev),
+                  onClick: toggleMute,
                   className: "h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer",
                   children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: isMuted ? "volume-x" : "volume-2", className: "w-4 h-4" })
                 }
@@ -14951,18 +15082,38 @@ 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
+                onEnded: activeSlot === 0 ? handleSceneEnded : void 0,
+                onTimeUpdate: activeSlot === 0 ? handleTimeUpdate : void 0,
+                "data-testid": "scene-video-0",
+                className: cn(
+                  "w-full h-full object-contain bg-black absolute inset-0 transition-opacity duration-75",
+                  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: isMuted,
+                onEnded: activeSlot === 1 ? handleSceneEnded : void 0,
+                onTimeUpdate: activeSlot === 1 ? handleTimeUpdate : void 0,
+                "data-testid": "scene-video-1",
+                className: cn(
+                  "w-full h-full object-contain bg-black absolute inset-0 transition-opacity duration-75",
+                  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,
                 {