Обновление: добавлен видеофон в компонент MikuMonday с управлением видимостью, улучшен стиль и размеры элементов в IntroStage

Author: RXDCODX

src/components/OBS_Components/MikuMonday/MikuMonday.module.scss

@@ -11,6 +11,45 @@
   background: transparent;
   border: none;
   box-shadow: none;
+  position: relative;
+  overflow: hidden;
+}
+
+.videoBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+  overflow: hidden;
+  transition: opacity 600ms ease-in-out;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+  }
+
+  iframe {
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+  }
+}
+
+.videoVisible {
+  opacity: 1;
+}
+
+.videoHidden {
+  opacity: 0;
 }
 
 .stage {
@@ -25,8 +64,9 @@
   align-items: center;
   gap: 32px;
   padding: 36px 44px;
+    margin-bottom: 24px;
   border-radius: 32px;
-  border: none;
+  border: 2px solid rgba(255, 255, 255, 0.15);
   background: linear-gradient(135deg,
       rgba(var(--bs-primary-rgb), 0.35) 0%,
       rgba(var(--bs-secondary-rgb), 0.28) 45%,
@@ -260,19 +300,20 @@
 }
 
 .result-stage {
-  width: min(56vw, 720px);
+  width: min(68vw, 880px);
   max-width: 90vw;
-  min-height: 360px;
+  min-height: 420px;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  padding: 28px 32px;
+  gap: 12px;
+    margin-bottom: 24px;
+  padding: 36px 44px;
   border-radius: 28px;
-  border: none;
+  border: 2px solid rgba(255, 255, 255, 0.15);
   background: linear-gradient(140deg,
       rgba(var(--bs-secondary-rgb), 0.22) 0%,
       rgba(18, 22, 40, 0.68) 45%,

src/components/OBS_Components/MikuMonday/MikuMonday.tsx

@@ -66,8 +66,33 @@ function MikuMondayContent() {
   }, [currentAlert, rouletteGroups]);
 
   const [stage, setStage] = useState<StageKey>("waiting");
+  const [isVideoVisible, setIsVideoVisible] = useState(false);
   const waitingTimeoutRef = useRef<number | null>(null);
   const stageSyncTimeoutRef = useRef<number | null>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  // Предзагружаем видео при монтировании компонента
+  useEffect(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.load(); // Начинаем загрузку видео
+    }
+  }, []);
+
+  // Управление воспроизведением видео
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (isVideoVisible) {
+      video.currentTime = 0; // Сбрасываем на начало
+      video.play().catch(err => {
+        console.warn("[MikuMonday] Не удалось воспроизвести видео:", err);
+      });
+    } else {
+      video.pause();
+    }
+  }, [isVideoVisible]);
 
   useEffect(
     () => () => {
@@ -98,6 +123,7 @@ function MikuMondayContent() {
         setStage(previousStage =>
           previousStage === "waiting" ? "intro" : previousStage
         );
+        setIsVideoVisible(true);
         stageSyncTimeoutRef.current = null;
       }, 0);
       return;
@@ -140,6 +166,7 @@ function MikuMondayContent() {
       displayName: currentAlert?.twitchUser.displayName,
       trackNumber: currentAlert?.selectedTrack.number,
     });
+    setIsVideoVisible(false);
     setStage("waiting");
     if (waitingTimeoutRef.current !== null) {
       window.clearTimeout(waitingTimeoutRef.current);
@@ -161,16 +188,45 @@ function MikuMondayContent() {
     }, QUEUE_PAUSE_MS);
   }, [dequeueCurrent, currentAlert]);
 
+  // Видео-фон существует постоянно, чтобы не перемонтироваться между стейджами
+  const videoBackground = (
+    <div
+      className={`${styles.videoBackground} ${isVideoVisible ? styles.videoVisible : styles.videoHidden}`}
+    >
+      <video
+        ref={videoRef}
+        src="/static/miku.mp4"
+        preload="auto"
+        muted
+        playsInline
+        loop
+        style={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          minWidth: "100%",
+          minHeight: "100%",
+          width: "auto",
+          height: "auto",
+          transform: "translate(-50%, -50%)",
+          objectFit: "cover",
+          pointerEvents: "none",
+        }}
+      />
+    </div>
+  );
+
+  // Рендерим контент в зависимости от стейджа
+  let stageContent;
+
   if (!currentAlert || stage === "waiting") {
-    return (
+    stageContent = (
       <div className={styles.layout}>
         <WaitingStage onComplete={() => {}} />
       </div>
     );
-  }
-
-  if (stage === "intro") {
-    return (
+  } else if (stage === "intro") {
+    stageContent = (
       <div className={styles.layout}>
         <IntroStage
           twitchUser={currentAlert.twitchUser}
@@ -179,40 +235,41 @@ function MikuMondayContent() {
         />
       </div>
     );
-  }
-
-  if (stage === "roulette") {
-    return (
+  } else if (stage === "roulette") {
+    stageContent = (
       <RouletteStage
         rouletteGroups={rouletteGroups}
         shouldSkipAvailableTracksUpdate={shouldSkipAvailableTracksUpdate}
         decrementAvailableTrack={decrementAvailableTrack}
         onComplete={handleRouletteComplete}
       />
     );
+  } else {
+    const trackToDisplay = winnerTrack ?? currentAlert.selectedTrack;
+    console.log("[MikuMonday] 📺 Отправляем трек в ResultStage", {
+      trackId: trackToDisplay.id,
+      trackNumber: trackToDisplay.number,
+      trackTitle: trackToDisplay.title,
+      trackArtist: trackToDisplay.artist,
+      isWinnerTrack: winnerTrack !== undefined,
+      winnerGroupExists: rouletteGroups.some(g => g.hasWinner),
+    });
+    stageContent = (
+      <div className={styles.layout}>
+        <ResultStage
+          track={trackToDisplay}
+          twitchUser={currentAlert.twitchUser}
+          onComplete={handleResultComplete}
+        />
+      </div>
+    );
   }
 
   return (
-    <div className={styles.layout}>
-      {(() => {
-        const trackToDisplay = winnerTrack ?? currentAlert.selectedTrack;
-        console.log("[MikuMonday] 📺 Отправляем трек в ResultStage", {
-          trackId: trackToDisplay.id,
-          trackNumber: trackToDisplay.number,
-          trackTitle: trackToDisplay.title,
-          trackArtist: trackToDisplay.artist,
-          isWinnerTrack: winnerTrack !== undefined,
-          winnerGroupExists: rouletteGroups.some(g => g.hasWinner),
-        });
-        return (
-          <ResultStage
-            track={trackToDisplay}
-            twitchUser={currentAlert.twitchUser}
-            onComplete={handleResultComplete}
-          />
-        );
-      })()}
-    </div>
+    <>
+      {videoBackground}
+      {stageContent}
+    </>
   );
 }
 

src/components/OBS_Components/MikuMonday/components/stages/IntroStage.tsx

@@ -13,7 +13,7 @@ interface IntroStageProps {
   onComplete: () => void;
 }
 
-const DEFAULT_INTRO_DURATION = 3200;
+const DEFAULT_INTRO_DURATION = 7000;
 const FADE_OUT_DURATION = 600;
 
 export default function IntroStage({