sa2kit 1.5.1 → 1.6.0

package/dist/mmd/index.mjs

@@ -1,8 +1,8 @@
 import '../chunk-BJTO5JO5.mjs';
-import React6, { forwardRef, useRef, useImperativeHandle, useEffect, useState, useCallback } from 'react';
+import React6, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useCallback } from 'react';
 import * as THREE from 'three';
 import { OrbitControls, MMDLoader, MMDAnimationHelper } from 'three-stdlib';
-import { SkipBack, Pause, Play, SkipForward, Repeat, Repeat1, Shuffle, ListMusic, Music, X, Grid3x3, Settings, Minimize, Maximize, Video, Check, User, Image } from 'lucide-react';
+import { SkipBack, Pause, Play, SkipForward, Camera, Repeat, Repeat1, Shuffle, ListMusic, Music, X, Grid3x3, Settings, Minimize, Maximize, Video, Check, User, Image } from 'lucide-react';
 import { createPortal } from 'react-dom';
 
 // src/mmd/utils/ammo-loader.ts
@@ -163,6 +163,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
     onPause,
     onEnded,
     onTimeUpdate,
+    onCameraChange,
     className,
     style
   } = props;
@@ -183,6 +184,10 @@ var MMDPlayerBase = forwardRef((props, ref) => {
   const animationClipRef = useRef(null);
   const loopRef = useRef(loop);
   const audioRef = useRef(null);
+  const latestCallbacks = useRef({ onPlay, onPause, onEnded, onTimeUpdate });
+  useEffect(() => {
+    latestCallbacks.current = { onPlay, onPause, onEnded, onTimeUpdate };
+  }, [onPlay, onPause, onEnded, onTimeUpdate]);
   const physicsComponentsRef = useRef({
     configs: [],
     dispatchers: [],
@@ -197,18 +202,18 @@ var MMDPlayerBase = forwardRef((props, ref) => {
       if (!isReadyRef.current) return;
       isPlayingRef.current = true;
       if (!clockRef.current.running) clockRef.current.start();
-      onPlay?.();
+      latestCallbacks.current.onPlay?.();
     },
     pause: () => {
       if (!isPlayingRef.current) return;
       isPlayingRef.current = false;
       clockRef.current.stop();
-      onPause?.();
+      latestCallbacks.current.onPause?.();
     },
     stop: () => {
       isPlayingRef.current = false;
       clockRef.current.stop();
-      onPause?.();
+      latestCallbacks.current.onPause?.();
     },
     seek: (time) => {
       console.warn("Seek not fully implemented in MMDPlayerBase yet");
@@ -229,6 +234,24 @@ var MMDPlayerBase = forwardRef((props, ref) => {
         rendererRef.current.render(sceneRef.current, cameraRef.current);
       }
       return rendererRef.current.domElement.toDataURL("image/png");
+    },
+    resetCamera: () => {
+      if (!cameraRef.current || !controlsRef.current) return;
+      const { cameraPosition, cameraTarget } = stage;
+      if (cameraPosition) {
+        const pos = cameraPosition;
+        cameraRef.current.position.set(pos.x, pos.y, pos.z);
+      } else {
+        cameraRef.current.position.set(0, 20, 30);
+      }
+      if (cameraTarget) {
+        const target = cameraTarget;
+        controlsRef.current.target.set(target.x, target.y, target.z);
+      } else {
+        controlsRef.current.target.set(0, 10, 0);
+      }
+      controlsRef.current.update();
+      onCameraChange?.(false);
     }
   }));
   useEffect(() => {
@@ -315,6 +338,11 @@ var MMDPlayerBase = forwardRef((props, ref) => {
         const scene = new THREE.Scene();
         if (stage.backgroundColor) {
           scene.background = new THREE.Color(stage.backgroundColor);
+        } else if (stage.backgroundImage) {
+          const textureLoader = new THREE.TextureLoader();
+          textureLoader.load(stage.backgroundImage, (texture) => {
+            scene.background = texture;
+          });
         }
         sceneRef.current = scene;
         const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2e3);
@@ -371,6 +399,9 @@ var MMDPlayerBase = forwardRef((props, ref) => {
           controls.target.set(0, 10, 0);
         }
         controls.update();
+        controls.addEventListener("start", () => {
+          onCameraChange?.(true);
+        });
         controlsRef.current = controls;
         if (showAxes) {
           const axesHelper = new THREE.AxesHelper(20);
@@ -589,6 +620,25 @@ var MMDPlayerBase = forwardRef((props, ref) => {
             console.log("[MMDPlayerBase] \u2705 Stage materials and textures loaded");
             scene.add(stageMesh);
             console.log("[MMDPlayerBase] \u2705 Stage added to scene (fully loaded)");
+            if (resources.stageMotionPath && stageMesh) {
+              console.log("[MMDPlayerBase] Loading stage motion:", resources.stageMotionPath);
+              const anyLoader = loader;
+              const anyHelper = helper;
+              const anyStage = stageMesh;
+              anyLoader.loadAnimation(
+                resources.stageMotionPath,
+                anyStage,
+                (stageAnimation) => {
+                  if (checkCancelled()) return;
+                  anyHelper.add(anyStage, {
+                    animation: stageAnimation
+                  });
+                  console.log("[MMDPlayerBase] \u2705 Stage motion bound successfully");
+                },
+                void 0,
+                (err) => console.error("Failed to load stage motion:", err)
+              );
+            }
           } catch (err) {
             console.error("Failed to load stage:", err);
           }
@@ -1034,6 +1084,38 @@ ${errorMessage}
       audioRef.current.setLoop(loop);
     }
   }, [loop]);
+  useEffect(() => {
+    if (!isReadyRef.current) return;
+    if (sceneRef.current) {
+      if (stage.backgroundColor) {
+        sceneRef.current.background = new THREE.Color(stage.backgroundColor);
+      } else if (stage.backgroundImage) {
+        const textureLoader = new THREE.TextureLoader();
+        textureLoader.load(stage.backgroundImage, (texture) => {
+          if (sceneRef.current) sceneRef.current.background = texture;
+        });
+      }
+    }
+    if (sceneRef.current) {
+      sceneRef.current.traverse((obj) => {
+        if (obj instanceof THREE.AmbientLight && stage.ambientLightIntensity !== void 0) {
+          obj.intensity = stage.ambientLightIntensity;
+        }
+        if (obj instanceof THREE.DirectionalLight && stage.directionalLightIntensity !== void 0) {
+          obj.intensity = stage.directionalLightIntensity;
+        }
+      });
+    }
+    if (cameraRef.current && stage.cameraPosition) {
+      const pos = stage.cameraPosition;
+      cameraRef.current.position.set(pos.x, pos.y, pos.z);
+    }
+    if (controlsRef.current && stage.cameraTarget) {
+      const target = stage.cameraTarget;
+      controlsRef.current.target.set(target.x, target.y, target.z);
+      controlsRef.current.update();
+    }
+  }, [stage.backgroundColor, stage.backgroundImage, stage.ambientLightIntensity, stage.directionalLightIntensity, stage.cameraPosition, stage.cameraTarget]);
   const animate = () => {
     animationIdRef.current = requestAnimationFrame(animate);
     if (rendererRef.current && sceneRef.current && cameraRef.current) {
@@ -1043,11 +1125,11 @@ ${errorMessage}
         const elapsed = clockRef.current.elapsedTime;
         const duration = durationRef.current;
         const currentTime = duration > 0 && loopRef.current ? elapsed % duration : elapsed;
-        onTimeUpdate?.(currentTime);
+        latestCallbacks.current.onTimeUpdate?.(currentTime);
         if (!loopRef.current && duration > 0 && elapsed >= duration) {
           isPlayingRef.current = false;
           clockRef.current.stop();
-          onEnded?.();
+          latestCallbacks.current.onEnded?.();
         }
       }
       rendererRef.current.render(sceneRef.current, cameraRef.current);
@@ -1076,6 +1158,7 @@ var ControlPanel = ({
   isFullscreen,
   isLooping,
   isListLooping,
+  isCameraManual = false,
   showSettings,
   showAxes = false,
   showPrevNext = false,
@@ -1088,7 +1171,8 @@ var ControlPanel = ({
   onToggleAxes,
   onOpenSettings,
   onPrevious,
-  onNext
+  onNext,
+  onResetCamera
 }) => {
   return /* @__PURE__ */ React6.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity duration-300 hover:opacity-100" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-white" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-2" }, showPrevNext && onPrevious && /* @__PURE__ */ React6.createElement(
     "button",
@@ -1130,6 +1214,14 @@ var ControlPanel = ({
       title: isLooping ? "\u5355\u66F2\u5FAA\u73AF\uFF1A\u5F00\u542F" : "\u5355\u66F2\u5FAA\u73AF\uFF1A\u5173\u95ED"
     },
     /* @__PURE__ */ React6.createElement(Repeat1, { size: 20 })
+  ), isCameraManual && onResetCamera && /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      onClick: onResetCamera,
+      className: "rounded-full p-2 bg-blue-500/30 text-blue-400 hover:bg-blue-500/50 hover:text-blue-300 transition-all animate-in zoom-in duration-300",
+      title: "\u6062\u590D\u521D\u59CB\u89C6\u89D2"
+    },
+    /* @__PURE__ */ React6.createElement(Camera, { size: 20 })
   ), onToggleAxes && /* @__PURE__ */ React6.createElement(
     "button",
     {
@@ -1536,6 +1628,7 @@ var MMDPlaylist = ({
   const [isListLooping, setIsListLooping] = useState(loop);
   const [showPlaylist, setShowPlaylist] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
+  const [isCameraManual, setIsCameraManual] = useState(false);
   const playerRef = useRef(null);
   const containerRef = useRef(null);
   const preloadedRef = useRef(/* @__PURE__ */ new Set());
@@ -1687,7 +1780,7 @@ var MMDPlaylist = ({
         key: currentNode.id,
         ref: playerRef,
         resources: currentNode.resources,
-        stage,
+        stage: { ...stage, ...currentNode.stage },
         autoPlay: autoPlay && currentIndex === 0,
         loop: isLooping,
         showAxes,
@@ -1700,6 +1793,7 @@ var MMDPlaylist = ({
         },
         onPlay: () => setIsPlaying(true),
         onPause: () => setIsPlaying(false),
+        onCameraChange: (isManual) => setIsCameraManual(isManual),
         onEnded: handleEnded,
         onError
       }
@@ -1715,6 +1809,7 @@ var MMDPlaylist = ({
           isFullscreen,
           isLooping,
           isListLooping,
+          isCameraManual,
           showSettings: true,
           showAxes,
           showPrevNext,
@@ -1727,7 +1822,11 @@ var MMDPlaylist = ({
           onToggleLoop: () => setIsLooping(!isLooping),
           onToggleListLoop: () => setIsListLooping(!isListLooping),
           onToggleAxes: () => setShowAxes(!showAxes),
-          onOpenSettings: () => setShowPlaylist(!showPlaylist)
+          onOpenSettings: () => setShowPlaylist(!showPlaylist),
+          onResetCamera: () => {
+            playerRef.current?.resetCamera();
+            setIsCameraManual(false);
+          }
         }
       )
     ), showPlaylist && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-20 flex items-end bg-black/80 backdrop-blur-sm" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full max-h-[60vh] overflow-y-auto bg-gray-900/95 rounded-t-xl" }, /* @__PURE__ */ React6.createElement("div", { className: "sticky top-0 flex items-center justify-between bg-gray-800 px-4 py-3 border-b border-gray-700" }, /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("h3", { className: "text-white font-semibold" }, playlist.name), /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-gray-400 mt-0.5" }, "\u5171 ", nodes.length, " \u4E2A\u8282\u70B9")), /* @__PURE__ */ React6.createElement(
@@ -1829,6 +1928,8 @@ var DialogueBox = ({
   onToggleAuto,
   onOpenHistory,
   onSkip,
+  onResetCamera,
+  isCameraManual = false,
   showControls = true,
   showSkipButton = true,
   showAutoButton = true,
@@ -1992,6 +2093,21 @@ var DialogueBox = ({
           title: "\u5386\u53F2\u8BB0\u5F55"
         },
         "\u{1F4DC} \u5386\u53F2"
+      ), isCameraManual && /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onResetCamera?.();
+          },
+          className: "px-4 py-2 text-xs rounded-xl text-white font-medium hover:text-white transition-all backdrop-blur-lg border border-blue-400/50 hover:border-blue-400 hover:scale-105 active:scale-95 shadow-lg animate-in zoom-in duration-300",
+          style: {
+            background: "linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2))",
+            boxShadow: "0 4px 16px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2)"
+          },
+          title: "\u6062\u590D\u521D\u59CB\u89C6\u89D2"
+        },
+        "\u{1F3A5} \u6062\u590D\u89C6\u89D2"
       ), showAutoButton && /* @__PURE__ */ React6.createElement(
         "button",
         {
@@ -2630,6 +2746,50 @@ var SkipConfirmDialog = ({
   }
   return createPortal(content, portalContainer);
 };
+var ChoiceMenu = ({
+  choices,
+  onSelect,
+  theme
+}) => {
+  const [isMounted, setIsMounted] = React6.useState(false);
+  React6.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) return null;
+  const content = /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: "fixed inset-0 flex flex-col items-center justify-center bg-black/20 backdrop-blur-sm pointer-events-auto transition-all animate-in fade-in duration-500",
+      style: { zIndex: 1e6 }
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-4 w-full max-w-md px-6" }, choices.map((choice, index) => /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        key: index,
+        onClick: () => onSelect(choice),
+        className: "w-full py-4 px-8 rounded-2xl text-white font-bold text-lg transition-all border border-white/20 shadow-xl hover:scale-105 active:scale-95 group relative overflow-hidden",
+        style: {
+          background: `linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.2) 0%, 
+                rgba(255, 255, 255, 0.1) 100%)`,
+          backdropFilter: "blur(32px) saturate(200%)",
+          WebkitBackdropFilter: "blur(32px) saturate(200%)"
+        }
+      },
+      /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" }),
+      /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out" }),
+      /* @__PURE__ */ React6.createElement("span", { className: "relative z-10 drop-shadow-md" }, choice.text)
+    )))
+  );
+  let portalContainer = document.getElementById("dialogue-portal-root");
+  if (!portalContainer) {
+    portalContainer = document.createElement("div");
+    portalContainer.id = "dialogue-portal-root";
+    portalContainer.style.cssText = "position: fixed; inset: 0; pointer-events: none; z-index: 999999;";
+    document.body.appendChild(portalContainer);
+  }
+  return createPortal(content, portalContainer);
+};
 
 // src/mmd/visual-novel/MMDVisualNovel.tsx
 var MMDVisualNovel = forwardRef(
@@ -2665,12 +2825,15 @@ var MMDVisualNovel = forwardRef(
     const [isStarted, setIsStarted] = useState(autoStart);
     const [isVmdFinished, setIsVmdFinished] = useState(false);
     const [pendingNodeIndex, setPendingNodeIndex] = useState(null);
+    const [showChoices, setShowChoices] = useState(false);
+    const [isCameraManual, setIsCameraManual] = useState(false);
     const playerRef = useRef(null);
     const containerRef = useRef(null);
     const autoTimerRef = useRef(null);
     const typingCompleteRef = useRef(false);
     const isStartedRef = useRef(autoStart);
     const lastAnimationTimeRef = useRef(0);
+    const isVmdFinishedRef = useRef(false);
     const currentNode = nodes[currentNodeIndex];
     const currentDialogue = currentNode?.dialogues[currentDialogueIndex] || null;
     const addToHistory = useCallback((dialogue, nodeIndex, dialogueIndex) => {
@@ -2698,6 +2861,8 @@ var MMDVisualNovel = forwardRef(
         addToHistory(nextDialogue, currentNodeIndex, nextDialogueIndex);
         onDialogueChange?.(nextDialogue, nextDialogueIndex, currentNodeIndex);
         typingCompleteRef.current = false;
+      } else if (currentNode.choices && currentNode.choices.length > 0) {
+        setShowChoices(true);
       } else {
         const nextNodeIndex = currentNodeIndex + 1;
         if (nextNodeIndex < nodes.length) {
@@ -2716,7 +2881,7 @@ var MMDVisualNovel = forwardRef(
         const node = nodes[nodeIndex];
         if (!node) return;
         const currentResources = nodes[currentNodeIndex]?.resources;
-        if (!force && currentResources?.motionPath && !isVmdFinished) {
+        if (!force && currentResources?.motionPath && !isVmdFinishedRef.current) {
           console.log("[MMDVisualNovel] VMD not finished, showing confirmation");
           setPendingNodeIndex(nodeIndex);
           return;
@@ -2726,7 +2891,9 @@ var MMDVisualNovel = forwardRef(
         setIsLoading(true);
         setIsAnimationPlaying(false);
         setIsVmdFinished(false);
+        isVmdFinishedRef.current = false;
         setPendingNodeIndex(null);
+        setShowChoices(false);
         lastAnimationTimeRef.current = 0;
         setTimeout(() => {
           setCurrentNodeIndex(nodeIndex);
@@ -2794,6 +2961,10 @@ var MMDVisualNovel = forwardRef(
       setIsAutoMode((prev) => !prev);
     }, []);
     const handleSkip = useCallback(() => {
+      if (currentNode?.choices && currentNode.choices.length > 0) {
+        setShowChoices(true);
+        return;
+      }
       const nextNodeIndex = currentNodeIndex + 1;
       if (nextNodeIndex < nodes.length) {
         goToNode(nextNodeIndex);
@@ -2867,7 +3038,7 @@ var MMDVisualNovel = forwardRef(
             key: currentNode.id,
             ref: playerRef,
             resources: currentNode.resources,
-            stage,
+            stage: { ...stage, ...currentNode.stage },
             autoPlay: isStarted,
             loop: currentNode.loopAnimation === true,
             mobileOptimization,
@@ -2886,9 +3057,13 @@ var MMDVisualNovel = forwardRef(
               setIsAnimationPlaying(true);
             },
             onTimeUpdate: (time) => {
-              if (time < lastAnimationTimeRef.current && lastAnimationTimeRef.current > 0) {
-                if (!isVmdFinished) {
-                  console.log("[MMDVisualNovel] VMD loop detected, marking as finished");
+              const duration = playerRef.current?.getDuration() || 0;
+              const isNearEnd = duration > 0 && time > duration * 0.98;
+              const isLooped = time < lastAnimationTimeRef.current && lastAnimationTimeRef.current > 0;
+              if (isNearEnd || isLooped) {
+                if (!isVmdFinishedRef.current) {
+                  console.log("[MMDVisualNovel] VMD finished/looped, marking as finished");
+                  isVmdFinishedRef.current = true;
                   setIsVmdFinished(true);
                 }
               }
@@ -2896,8 +3071,12 @@ var MMDVisualNovel = forwardRef(
             },
             onEnded: () => {
               console.log("[MMDVisualNovel] VMD ended, marking as finished");
+              isVmdFinishedRef.current = true;
               setIsVmdFinished(true);
             },
+            onCameraChange: (isManual) => {
+              setIsCameraManual(isManual);
+            },
             onError
           }
         )
@@ -2924,12 +3103,13 @@ var MMDVisualNovel = forwardRef(
         }
       ),
       (() => {
-        const shouldShow = isStarted && isAnimationPlaying && currentDialogue && !showHistory;
+        const shouldShow = isStarted && isAnimationPlaying && currentDialogue && !showHistory && !showChoices;
         console.log("[MMDVisualNovel] DialogueBox render condition:", {
           isStarted,
           isAnimationPlaying,
           hasDialogue: !!currentDialogue,
           showHistory,
+          showChoices,
           shouldShow,
           dialogue: currentDialogue
         });
@@ -2947,6 +3127,11 @@ var MMDVisualNovel = forwardRef(
             onToggleAuto: toggleAutoMode,
             onOpenHistory: () => setShowHistory(true),
             onSkip: handleSkip,
+            onResetCamera: () => {
+              playerRef.current?.resetCamera();
+              setIsCameraManual(false);
+            },
+            isCameraManual,
             showControls: true,
             showSkipButton,
             showAutoButton,
@@ -2967,6 +3152,22 @@ var MMDVisualNovel = forwardRef(
           }
         }
       ),
+      showChoices && currentNode.choices && /* @__PURE__ */ React6.createElement(
+        ChoiceMenu,
+        {
+          choices: currentNode.choices,
+          theme: dialogueTheme,
+          onSelect: (choice) => {
+            choice.onSelect?.();
+            if (choice.nextNodeIndex === currentNodeIndex) {
+              goToDialogue(choice.nextDialogueIndex || 0);
+              setShowChoices(false);
+            } else {
+              goToNode(choice.nextNodeIndex, true);
+            }
+          }
+        }
+      ),
       showHistory && /* @__PURE__ */ React6.createElement(
         HistoryPanel,
         {
@@ -2984,12 +3185,14 @@ var MusicControls = ({
   currentTime,
   duration,
   loopMode,
+  isCameraManual = false,
   onPlayPause,
   onNext,
   onPrevious,
   onSeek,
   onToggleLoop,
   onTogglePlaylist,
+  onResetCamera,
   className = ""
 }) => {
   const formatTime = (seconds) => {
@@ -3041,7 +3244,15 @@ var MusicControls = ({
         className: "text-white/80 hover:text-white transition-colors"
       },
       /* @__PURE__ */ React6.createElement(SkipForward, { className: "w-6 h-6 fill-current" })
-    )), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-4 w-32 justify-end" }, /* @__PURE__ */ React6.createElement(
+    )), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-4 w-32 justify-end" }, isCameraManual && /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onResetCamera,
+        className: "text-blue-400 hover:text-blue-300 transition-colors animate-in zoom-in duration-300",
+        title: "\u6062\u590D\u521D\u59CB\u89C6\u89D2"
+      },
+      /* @__PURE__ */ React6.createElement(Camera, { className: "w-5 h-5" })
+    ), /* @__PURE__ */ React6.createElement(
       "button",
       {
         onClick: onToggleLoop,
@@ -3158,6 +3369,7 @@ var MMDMusicPlayer = forwardRef(
     const [loopMode, setLoopMode] = useState(defaultLoopMode);
     const [showPlaylist, setShowPlaylist] = useState(false);
     const [isUIVisible, setIsUIVisible] = useState(true);
+    const [isCameraManual, setIsCameraManual] = useState(false);
     const playerRef = useRef(null);
     const containerRef = useRef(null);
     const isStartedRef = useRef(autoPlay);
@@ -3291,7 +3503,7 @@ var MMDMusicPlayer = forwardRef(
             key: currentTrack.id,
             ref: playerRef,
             resources: currentTrack.resources,
-            stage,
+            stage: { ...stage, ...currentTrack.stage },
             autoPlay: isStartedRef.current,
             loop: loopMode === "single",
             mobileOptimization,
@@ -3311,6 +3523,9 @@ var MMDMusicPlayer = forwardRef(
               setIsPlaying(false);
               onPlayPause?.(false);
             },
+            onCameraChange: (isManual) => {
+              setIsCameraManual(isManual);
+            },
             onTimeUpdate: handleTimeUpdate,
             onEnded: handleEnded,
             onError
@@ -3331,10 +3546,15 @@ var MMDMusicPlayer = forwardRef(
             currentTime,
             duration,
             loopMode,
+            isCameraManual,
             onPlayPause: () => isPlaying ? playerRef.current?.pause() : playerRef.current?.play(),
             onNext: next,
             onPrevious: previous,
             onSeek: (time) => playerRef.current?.seek(time),
+            onResetCamera: () => {
+              playerRef.current?.resetCamera();
+              setIsCameraManual(false);
+            },
             onToggleLoop: () => {
               const modes = ["list", "single", "shuffle"];
               const nextMode = modes[(modes.indexOf(loopMode) + 1) % modes.length];