sa2kit 1.4.2 → 1.5.1

package/dist/mmd/index.mjs

@@ -2,7 +2,7 @@ import '../chunk-BJTO5JO5.mjs';
 import React6, { forwardRef, useRef, useImperativeHandle, useEffect, useState, useCallback } from 'react';
 import * as THREE from 'three';
 import { OrbitControls, MMDLoader, MMDAnimationHelper } from 'three-stdlib';
-import { SkipBack, Pause, Play, SkipForward, Repeat, Repeat1, Grid3x3, Settings, Minimize, Maximize, X, Video, Check, User, Image, Music } from 'lucide-react';
+import { SkipBack, Pause, Play, SkipForward, 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
@@ -47,6 +47,9 @@ var loadAmmo = (path = "/libs/ammo.wasm.js") => {
 };
 
 // src/mmd/components/MMDPlayerBase.tsx
+if (typeof window !== "undefined") {
+  THREE.Cache.enabled = true;
+}
 async function waitForMaterialsReady(object, renderer, scene, camera) {
   const textures = [];
   let meshCount = 0;
@@ -2572,6 +2575,61 @@ var LoadingOverlay = ({
   ));
 };
 LoadingOverlay.displayName = "LoadingOverlay";
+var SkipConfirmDialog = ({
+  onConfirm,
+  onCancel
+}) => {
+  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 items-center justify-center bg-black/40 backdrop-blur-sm pointer-events-auto",
+      style: { zIndex: 999999 }
+    },
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "p-8 rounded-3xl border border-white/30 shadow-2xl max-w-sm w-full mx-4 overflow-hidden relative",
+        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("h3", { className: "text-xl font-bold text-white mb-4 drop-shadow-md" }, "\u52A8\u753B\u5C1A\u672A\u64AD\u653E\u5B8C\u6210"),
+      /* @__PURE__ */ React6.createElement("p", { className: "text-white/90 mb-8 leading-relaxed drop-shadow-sm" }, "\u5F53\u524D\u573A\u666F\u7684\u52A8\u753B\u8FD8\u6CA1\u6709\u5B8C\u6574\u64AD\u653E\u4E00\u904D\uFF0C\u662F\u5426\u76F4\u63A5\u8DF3\u8F6C\u5230\u4E0B\u4E00\u4E2A\u573A\u666F\uFF1F"),
+      /* @__PURE__ */ React6.createElement("div", { className: "flex justify-end gap-4" }, /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: onCancel,
+          className: "px-6 py-2.5 rounded-2xl text-white/80 font-medium hover:text-white hover:bg-white/10 transition-all border border-white/10 hover:border-white/30"
+        },
+        "\u53D6\u6D88"
+      ), /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: onConfirm,
+          className: "px-6 py-2.5 rounded-2xl bg-white/20 hover:bg-white/30 text-white font-bold transition-all border border-white/40 shadow-lg hover:scale-105 active:scale-95"
+        },
+        "\u76F4\u63A5\u8DF3\u8F6C"
+      ))
+    )
+  );
+  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(
@@ -2605,11 +2663,14 @@ var MMDVisualNovel = forwardRef(
     const [showHistory, setShowHistory] = useState(false);
     const [history, setHistory] = useState([]);
     const [isStarted, setIsStarted] = useState(autoStart);
+    const [isVmdFinished, setIsVmdFinished] = useState(false);
+    const [pendingNodeIndex, setPendingNodeIndex] = useState(null);
     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 currentNode = nodes[currentNodeIndex];
     const currentDialogue = currentNode?.dialogues[currentDialogueIndex] || null;
     const addToHistory = useCallback((dialogue, nodeIndex, dialogueIndex) => {
@@ -2649,15 +2710,24 @@ var MMDVisualNovel = forwardRef(
       }
     }, [currentNode, currentDialogueIndex, currentNodeIndex, nodes.length, loop, addToHistory, onDialogueChange, onScriptComplete]);
     const goToNode = useCallback(
-      (nodeIndex) => {
+      (nodeIndex, force = false) => {
         if (nodeIndex < 0 || nodeIndex >= nodes.length) return;
         if (isTransitioning) return;
         const node = nodes[nodeIndex];
         if (!node) return;
+        const currentResources = nodes[currentNodeIndex]?.resources;
+        if (!force && currentResources?.motionPath && !isVmdFinished) {
+          console.log("[MMDVisualNovel] VMD not finished, showing confirmation");
+          setPendingNodeIndex(nodeIndex);
+          return;
+        }
         console.log(`[MMDVisualNovel] Transitioning to node ${nodeIndex}`);
         setIsTransitioning(true);
         setIsLoading(true);
         setIsAnimationPlaying(false);
+        setIsVmdFinished(false);
+        setPendingNodeIndex(null);
+        lastAnimationTimeRef.current = 0;
         setTimeout(() => {
           setCurrentNodeIndex(nodeIndex);
           setCurrentDialogueIndex(0);
@@ -2675,7 +2745,7 @@ var MMDVisualNovel = forwardRef(
           }, 100);
         }, 300);
       },
-      [nodes, isTransitioning, addToHistory, onNodeChange, onDialogueChange]
+      [nodes, isTransitioning, addToHistory, onNodeChange, onDialogueChange, currentNodeIndex, isVmdFinished]
     );
     const goToDialogue = useCallback(
       (dialogueIndex) => {
@@ -2815,6 +2885,19 @@ var MMDVisualNovel = forwardRef(
               console.log("[MMDVisualNovel] MMDPlayerBase onPlay called");
               setIsAnimationPlaying(true);
             },
+            onTimeUpdate: (time) => {
+              if (time < lastAnimationTimeRef.current && lastAnimationTimeRef.current > 0) {
+                if (!isVmdFinished) {
+                  console.log("[MMDVisualNovel] VMD loop detected, marking as finished");
+                  setIsVmdFinished(true);
+                }
+              }
+              lastAnimationTimeRef.current = time;
+            },
+            onEnded: () => {
+              console.log("[MMDVisualNovel] VMD ended, marking as finished");
+              setIsVmdFinished(true);
+            },
             onError
           }
         )
@@ -2871,6 +2954,19 @@ var MMDVisualNovel = forwardRef(
           }
         ) : null;
       })(),
+      pendingNodeIndex !== null && /* @__PURE__ */ React6.createElement(
+        SkipConfirmDialog,
+        {
+          onConfirm: () => {
+            if (pendingNodeIndex !== null) {
+              goToNode(pendingNodeIndex, true);
+            }
+          },
+          onCancel: () => {
+            setPendingNodeIndex(null);
+          }
+        }
+      ),
       showHistory && /* @__PURE__ */ React6.createElement(
         HistoryPanel,
         {
@@ -2883,7 +2979,389 @@ var MMDVisualNovel = forwardRef(
   }
 );
 MMDVisualNovel.displayName = "MMDVisualNovel";
+var MusicControls = ({
+  isPlaying,
+  currentTime,
+  duration,
+  loopMode,
+  onPlayPause,
+  onNext,
+  onPrevious,
+  onSeek,
+  onToggleLoop,
+  onTogglePlaylist,
+  className = ""
+}) => {
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  return /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `w-full max-w-4xl mx-auto px-6 py-4 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl pointer-events-auto transition-all group ${className}`
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "relative w-full h-1.5 bg-white/20 rounded-full mb-4 cursor-pointer group/progress overflow-hidden" }, /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "absolute h-full bg-blue-500 rounded-full transition-all duration-300",
+        style: { width: `${progress}%` }
+      }
+    ), /* @__PURE__ */ React6.createElement(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: duration || 100,
+        value: currentTime,
+        onChange: (e) => onSeek(Number(e.target.value)),
+        className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+      }
+    )),
+    /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-2 text-xs font-mono text-white/60 w-32" }, /* @__PURE__ */ React6.createElement("span", null, formatTime(currentTime)), /* @__PURE__ */ React6.createElement("span", null, "/"), /* @__PURE__ */ React6.createElement("span", null, formatTime(duration))), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-6" }, /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onPrevious,
+        className: "text-white/80 hover:text-white transition-colors"
+      },
+      /* @__PURE__ */ React6.createElement(SkipBack, { className: "w-6 h-6 fill-current" })
+    ), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onPlayPause,
+        className: "w-12 h-12 flex items-center justify-center bg-blue-500 hover:bg-blue-400 text-white rounded-full shadow-lg shadow-blue-500/20 transition-all hover:scale-105 active:scale-95"
+      },
+      isPlaying ? /* @__PURE__ */ React6.createElement(Pause, { className: "w-6 h-6 fill-current" }) : /* @__PURE__ */ React6.createElement(Play, { className: "w-6 h-6 fill-current ml-1" })
+    ), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onNext,
+        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(
+      "button",
+      {
+        onClick: onToggleLoop,
+        className: "text-white/60 hover:text-white transition-colors",
+        title: loopMode
+      },
+      loopMode === "list" && /* @__PURE__ */ React6.createElement(Repeat, { className: "w-5 h-5" }),
+      loopMode === "single" && /* @__PURE__ */ React6.createElement(Repeat1, { className: "w-5 h-5 text-blue-400" }),
+      loopMode === "shuffle" && /* @__PURE__ */ React6.createElement(Shuffle, { className: "w-5 h-5 text-orange-400" })
+    ), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onTogglePlaylist,
+        className: "text-white/60 hover:text-white transition-colors"
+      },
+      /* @__PURE__ */ React6.createElement(ListMusic, { className: "w-5 h-5" })
+    )))
+  );
+};
+var PlaylistPanel = ({
+  tracks,
+  currentIndex,
+  isOpen,
+  onClose,
+  onSelectTrack,
+  className = ""
+}) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `fixed inset-y-0 right-0 w-80 bg-gray-900/90 backdrop-blur-2xl border-l border-white/10 shadow-2xl z-50 flex flex-col pointer-events-auto transform transition-transform duration-500 ease-out ${isOpen ? "translate-x-0" : "translate-x-full"} ${className}`
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between p-6 border-b border-white/10" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React6.createElement(Music, { className: "w-5 h-5 text-blue-400" }), /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-bold text-white" }, "\u64AD\u653E\u5217\u8868")), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onClose,
+        className: "p-2 text-white/60 hover:text-white transition-colors"
+      },
+      /* @__PURE__ */ React6.createElement(X, { className: "w-5 h-5" })
+    )),
+    /* @__PURE__ */ React6.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-2 custom-scrollbar" }, tracks.map((track, index) => {
+      const isActive = index === currentIndex;
+      return /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          key: track.id,
+          onClick: () => onSelectTrack(index),
+          className: `w-full flex items-center gap-4 p-3 rounded-xl transition-all group ${isActive ? "bg-blue-500/20 border border-blue-500/30" : "hover:bg-white/5 border border-transparent"}`
+        },
+        /* @__PURE__ */ React6.createElement("div", { className: "relative w-12 h-12 flex-shrink-0 rounded-lg overflow-hidden bg-gray-800" }, track.coverUrl ? /* @__PURE__ */ React6.createElement("img", { src: track.coverUrl, alt: track.title, className: "w-full h-full object-cover" }) : /* @__PURE__ */ React6.createElement("div", { className: "w-full h-full flex items-center justify-center text-white/20" }, /* @__PURE__ */ React6.createElement(Music, { className: "w-6 h-6" })), isActive && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-blue-500/40 flex items-center justify-center" }, /* @__PURE__ */ React6.createElement("div", { className: "flex gap-1 items-end h-4" }, /* @__PURE__ */ React6.createElement("div", { className: "w-1 bg-white animate-music-bar-1" }), /* @__PURE__ */ React6.createElement("div", { className: "w-1 bg-white animate-music-bar-2" }), /* @__PURE__ */ React6.createElement("div", { className: "w-1 bg-white animate-music-bar-3" })))),
+        /* @__PURE__ */ React6.createElement("div", { className: "flex-1 text-left min-w-0" }, /* @__PURE__ */ React6.createElement("h4", { className: `text-sm font-bold truncate ${isActive ? "text-blue-400" : "text-white/90"}` }, track.title), /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-white/40 truncate mt-0.5" }, track.artist || "\u672A\u77E5\u827A\u672F\u5BB6")),
+        !isActive && /* @__PURE__ */ React6.createElement("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity" }, /* @__PURE__ */ React6.createElement(Play, { className: "w-4 h-4 text-white/40 fill-current" }))
+      );
+    })),
+    /* @__PURE__ */ React6.createElement("div", { className: "p-6 border-t border-white/10" }, /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-gray-500 text-center" }, "\u5171 ", tracks.length, " \u9996\u66F2\u76EE")),
+    /* @__PURE__ */ React6.createElement("style", { dangerouslySetInnerHTML: { __html: `
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+        @keyframes music-bar-1 {
+          0%, 100% { height: 4px; }
+          50% { height: 12px; }
+        }
+        @keyframes music-bar-2 {
+          0%, 100% { height: 8px; }
+          50% { height: 16px; }
+        }
+        @keyframes music-bar-3 {
+          0%, 100% { height: 6px; }
+          50% { height: 14px; }
+        }
+        .animate-music-bar-1 { animation: music-bar-1 0.6s infinite; }
+        .animate-music-bar-2 { animation: music-bar-2 0.8s infinite; }
+        .animate-music-bar-3 { animation: music-bar-3 0.7s infinite; }
+      ` } })
+  );
+};
+var TrackInfo = ({ track, className = "" }) => {
+  return /* @__PURE__ */ React6.createElement("div", { className: `flex flex-col items-center text-center gap-2 ${className}` }, /* @__PURE__ */ React6.createElement("div", { className: "px-4 py-1.5 bg-black/40 backdrop-blur-md rounded-full border border-white/10 shadow-lg" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-lg font-bold text-white tracking-wider truncate max-w-md" }, track.title)), /* @__PURE__ */ React6.createElement("p", { className: "text-sm font-medium text-white/60 drop-shadow-md" }, track.artist || "\u672A\u77E5\u827A\u672F\u5BB6"));
+};
+
+// src/mmd/music-player/MMDMusicPlayer.tsx
+var MMDMusicPlayer = forwardRef(
+  ({
+    config,
+    stage,
+    mobileOptimization,
+    initialTrackIndex = 0,
+    onTrackChange,
+    onPlayPause,
+    onProgress,
+    onError,
+    className,
+    style
+  }, ref) => {
+    const { tracks, autoPlay = false, defaultLoopMode = "list" } = config;
+    const [currentIndex, setCurrentIndex] = useState(initialTrackIndex);
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [loopMode, setLoopMode] = useState(defaultLoopMode);
+    const [showPlaylist, setShowPlaylist] = useState(false);
+    const [isUIVisible, setIsUIVisible] = useState(true);
+    const playerRef = useRef(null);
+    const containerRef = useRef(null);
+    const isStartedRef = useRef(autoPlay);
+    const uiTimeoutRef = useRef(null);
+    const currentTrack = tracks[currentIndex];
+    const goToTrack = useCallback(
+      (index) => {
+        if (index < 0 || index >= tracks.length) return;
+        if (isTransitioning) return;
+        const track = tracks[index];
+        if (!track) return;
+        console.log(`[MMDMusicPlayer] Transitioning to track ${index}: ${track.title}`);
+        setIsTransitioning(true);
+        setIsLoading(true);
+        const wasPlaying = isPlaying;
+        setIsPlaying(false);
+        setTimeout(() => {
+          setCurrentIndex(index);
+          setCurrentTime(0);
+          setDuration(0);
+          onTrackChange?.(track, index);
+          setTimeout(() => {
+            setIsTransitioning(false);
+            if (wasPlaying) {
+              isStartedRef.current = true;
+            }
+          }, 100);
+        }, 300);
+      },
+      [tracks, isTransitioning, isPlaying, onTrackChange]
+    );
+    const next = useCallback(() => {
+      let nextIndex = currentIndex + 1;
+      if (loopMode === "shuffle") {
+        nextIndex = Math.floor(Math.random() * tracks.length);
+      } else if (nextIndex >= tracks.length) {
+        nextIndex = 0;
+      }
+      goToTrack(nextIndex);
+    }, [currentIndex, tracks.length, loopMode, goToTrack]);
+    const previous = useCallback(() => {
+      let prevIndex = currentIndex - 1;
+      if (prevIndex < 0) {
+        prevIndex = tracks.length - 1;
+      }
+      goToTrack(prevIndex);
+    }, [currentIndex, tracks.length, goToTrack]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => {
+          setIsPlaying(true);
+          isStartedRef.current = true;
+          playerRef.current?.play();
+        },
+        pause: () => {
+          setIsPlaying(false);
+          isStartedRef.current = false;
+          playerRef.current?.pause();
+        },
+        next,
+        previous,
+        goToTrack,
+        setLoopMode,
+        getState: () => ({
+          currentIndex,
+          isPlaying,
+          currentTime,
+          duration,
+          loopMode
+        })
+      }),
+      [next, previous, goToTrack, currentIndex, isPlaying, currentTime, duration, loopMode]
+    );
+    const handleEnded = useCallback(() => {
+      if (loopMode === "single") {
+        playerRef.current?.seek(0);
+        playerRef.current?.play();
+      } else {
+        next();
+      }
+    }, [loopMode, next]);
+    const handleTimeUpdate = useCallback((time) => {
+      setCurrentTime(time);
+      if (playerRef.current) {
+        const total = playerRef.current.getDuration();
+        setDuration(total);
+        onProgress?.(time, total);
+      }
+    }, [onProgress]);
+    const resetUITimeout = useCallback(() => {
+      setIsUIVisible(true);
+      if (uiTimeoutRef.current) clearTimeout(uiTimeoutRef.current);
+      if (isPlaying) {
+        uiTimeoutRef.current = setTimeout(() => {
+          if (!showPlaylist) setIsUIVisible(false);
+        }, 5e3);
+      }
+    }, [isPlaying, showPlaylist]);
+    useEffect(() => {
+      resetUITimeout();
+      return () => {
+        if (uiTimeoutRef.current) clearTimeout(uiTimeoutRef.current);
+      };
+    }, [resetUITimeout]);
+    if (!currentTrack) {
+      return /* @__PURE__ */ React6.createElement("div", { className: "flex h-full w-full items-center justify-center bg-black text-white" }, "\u64AD\u653E\u5217\u8868\u4E3A\u7A7A");
+    }
+    return /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: `relative bg-black group ${className}`,
+        style: { width: "100%", height: "100%", overflow: "hidden", ...style },
+        onMouseMove: resetUITimeout,
+        onClick: resetUITimeout
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "absolute inset-0 w-full h-full",
+          style: {
+            zIndex: 0,
+            opacity: isLoading || isTransitioning ? 0 : 1,
+            transition: "opacity 0.5s ease-in-out"
+          }
+        },
+        !isTransitioning && /* @__PURE__ */ React6.createElement(
+          MMDPlayerBase,
+          {
+            key: currentTrack.id,
+            ref: playerRef,
+            resources: currentTrack.resources,
+            stage,
+            autoPlay: isStartedRef.current,
+            loop: loopMode === "single",
+            mobileOptimization,
+            onLoad: () => {
+              console.log("[MMDMusicPlayer] Track loaded");
+              setIsLoading(false);
+              if (isStartedRef.current) {
+                playerRef.current?.play();
+                setIsPlaying(true);
+              }
+            },
+            onPlay: () => {
+              setIsPlaying(true);
+              onPlayPause?.(true);
+            },
+            onPause: () => {
+              setIsPlaying(false);
+              onPlayPause?.(false);
+            },
+            onTimeUpdate: handleTimeUpdate,
+            onEnded: handleEnded,
+            onError
+          }
+        )
+      ),
+      (isLoading || isTransitioning) && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" }, /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ React6.createElement("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-white/20 border-t-blue-500" }), /* @__PURE__ */ React6.createElement("div", { className: "text-white font-medium" }, isTransitioning ? "\u51C6\u5907\u4E0B\u4E00\u9996..." : "\u6B63\u5728\u52A0\u8F7D\u821E\u53F0..."))),
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: `absolute inset-0 z-10 flex flex-col justify-between transition-opacity duration-700 pointer-events-none ${isUIVisible ? "opacity-100" : "opacity-0"}`
+        },
+        /* @__PURE__ */ React6.createElement("div", { className: "pt-12 px-8 flex justify-center" }, /* @__PURE__ */ React6.createElement(TrackInfo, { track: currentTrack })),
+        /* @__PURE__ */ React6.createElement("div", { className: "pb-12 px-8" }, /* @__PURE__ */ React6.createElement(
+          MusicControls,
+          {
+            isPlaying,
+            currentTime,
+            duration,
+            loopMode,
+            onPlayPause: () => isPlaying ? playerRef.current?.pause() : playerRef.current?.play(),
+            onNext: next,
+            onPrevious: previous,
+            onSeek: (time) => playerRef.current?.seek(time),
+            onToggleLoop: () => {
+              const modes = ["list", "single", "shuffle"];
+              const nextMode = modes[(modes.indexOf(loopMode) + 1) % modes.length];
+              setLoopMode(nextMode);
+            },
+            onTogglePlaylist: () => setShowPlaylist(!showPlaylist)
+          }
+        ))
+      ),
+      /* @__PURE__ */ React6.createElement(
+        PlaylistPanel,
+        {
+          tracks,
+          currentIndex,
+          isOpen: showPlaylist,
+          onClose: () => setShowPlaylist(false),
+          onSelectTrack: (index) => {
+            goToTrack(index);
+            setShowPlaylist(false);
+          }
+        }
+      )
+    );
+  }
+);
+MMDMusicPlayer.displayName = "MMDMusicPlayer";
 
-export { DialogueBox, HistoryPanel, LoadingOverlay, LoadingScreen, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDVisualNovel, StartScreen, loadAmmo };
+export { DialogueBox, HistoryPanel, LoadingOverlay, LoadingScreen, MMDMusicPlayer, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDVisualNovel, MusicControls, PlaylistPanel, StartScreen, TrackInfo, loadAmmo };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map