Обновление: улучшены анимации и стили в компонентах, добавлен новый компонент MarqueeTrackTitle для прокрутки названий треков

Author: RXDCODX

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

@@ -260,120 +260,103 @@
 }
 
 .result-stage {
-  width: min(70vw, 1020px);
-  max-width: 100%;
-  display: grid;
-  grid-template-columns: minmax(220px, 300px) 1fr;
-  gap: 32px;
-  padding: 38px 44px;
-  border-radius: 32px;
-  border: none;
-  background: linear-gradient(140deg,
-      rgba(var(--bs-secondary-rgb), 0.24) 0%,
-      rgba(18, 22, 40, 0.85) 45%,
-      rgba(8, 10, 18, 0.95) 100%);
-  box-shadow:
-    0 20px 50px rgba(8, 10, 18, 0.7),
-    inset 0 0 42px rgba(255, 255, 255, 0.06);
-  color: var(--site-text-light);
-}
-
-.result-visual {
+  width: min(56vw, 720px);
+  max-width: 90vw;
+  min-height: 360px;
+  position: relative;
+  overflow: hidden;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 6px;
-  border-radius: 26px;
+  gap: 10px;
+  padding: 28px 32px;
+  border-radius: 28px;
   border: none;
-  background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.35) 0%, rgba(0, 0, 0, 0.8) 100%);
+  background: linear-gradient(140deg,
+      rgba(var(--bs-secondary-rgb), 0.22) 0%,
+      rgba(18, 22, 40, 0.68) 45%,
+      rgba(8, 10, 18, 0.82) 100%);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   box-shadow:
-    0 0 32px rgba(var(--bs-primary-rgb), 0.55),
-    inset 0 0 20px rgba(0, 0, 0, 0.65);
-}
-
-.result-cover {
-  width: 100%;
-  border-radius: 20px;
-  object-fit: cover;
-  aspect-ratio: 1;
-  box-shadow: var(--site-shadow-medium);
-}
-
-.result-cover-placeholder {
-  width: 100%;
-  aspect-ratio: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 20px;
-  border: 2px dashed var(--site-border-secondary);
-  background: rgba(var(--bs-primary-rgb), 0.15);
-  color: rgba(255, 255, 255, 0.75);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+    0 18px 45px rgba(8, 10, 18, 0.7),
+    inset 0 0 36px rgba(255, 255, 255, 0.05);
+  text-align: center;
+  color: var(--site-text-light);
 }
 
-.result-cover-placeholder-text {
-  font-size: 1.6rem;
+.result-stage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg,
+      rgba(0, 0, 0, 0.28) 0%,
+      rgba(0, 0, 0, 0.48) 55%,
+      rgba(0, 0, 0, 0.62) 100%);
+  z-index: 0;
 }
 
 .result-content {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  align-items: center;
+  gap: 10px;
+  max-width: 520px;
   color: var(--site-text-light);
+  text-align: center;
 }
 
 .result-heading {
-  font-size: clamp(2.4rem, 4.5vw, 3rem);
+  font-size: clamp(1.8rem, 3.2vw, 2.2rem);
   font-weight: 700;
   letter-spacing: 0.04em;
-  color: #fff;
+  text-wrap: balance;
 }
 
 .result-user {
-  font-size: clamp(2.6rem, 5vw, 3.5rem);
+  font-size: clamp(2rem, 4vw, 2.6rem);
   font-weight: 800;
-}
-
-.result-user-login {
-  font-size: 1.6rem;
-  font-weight: 600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.7);
+  text-wrap: balance;
 }
 
 .result-track-info {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 6px;
-  margin-top: 12px;
+  margin-top: 6px;
 }
 
 .result-track-title {
-  font-size: clamp(2.2rem, 4vw, 3rem);
+  font-size: clamp(1.6rem, 3vw, 2.2rem);
   font-weight: 700;
-  color: #fff;
+  width: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .result-track-meta {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.75);
+  color: #fff;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
 .result-message {
-  margin-top: 14px;
-  font-size: 1.4rem;
+  margin-top: 6px;
+  font-size: 1.2rem;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.82);
-  max-width: 520px;
-  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.65);
+  max-width: 460px;
+  line-height: 1.4;
+  text-wrap: balance;
 }
+
 .custom-prize {
   position: relative;
   display: flex;

src/components/OBS_Components/MikuMonday/MikuMonday.tsx

@@ -164,7 +164,7 @@ function MikuMondayContent() {
   if (!currentAlert || stage === "waiting") {
     return (
       <div className={styles.layout}>
-        <WaitingStage />
+        <WaitingStage onComplete={() => {}} />
       </div>
     );
   }

src/components/OBS_Components/MikuMonday/components/CustomRoulette/CustomRoulette.tsx

@@ -38,7 +38,8 @@ export default function CustomRoulette({
       spinningTime,
     });
 
-    setIsSpinning(true);
+    // Запускаем флаг анимации асинхронно, чтобы избежать каскадных рендеров
+    const frameId = requestAnimationFrame(() => setIsSpinning(true));
 
     // Создаем зацикленный массив призов (повторяем 5 раз для плавной прокрутки)
     const containerWidth = containerRef.current?.offsetWidth || 1000;
@@ -67,8 +68,10 @@ export default function CustomRoulette({
       centerOffset,
     });
 
-    // Запускаем анимацию
-    setTranslateX(endPosition);
+    // Запускаем анимацию асинхронно, чтобы избежать синхронного setState в эффекте
+    const translateFrameId = requestAnimationFrame(() => {
+      setTranslateX(endPosition);
+    });
 
     // Уведомляем о завершении
     const timer = setTimeout(() => {
@@ -80,8 +83,20 @@ export default function CustomRoulette({
       onComplete?.();
     }, spinningTime * 1000);
 
-    return () => clearTimeout(timer);
-  }, [start, prizes, prizeIndex, isReversed, spinningTime, onComplete]);
+    return () => {
+      cancelAnimationFrame(frameId);
+      cancelAnimationFrame(translateFrameId);
+      clearTimeout(timer);
+    };
+  }, [
+    start,
+    prizes,
+    prizeIndex,
+    isReversed,
+    spinningTime,
+    onComplete,
+    isSpinning,
+  ]);
 
   // Создаем повторяющийся массив призов
   const repeatedPrizes = Array(5).fill(prizes).flat();

src/components/OBS_Components/MikuMonday/components/MarqueeTrackTitle.tsx

@@ -0,0 +1,55 @@
+import { motion } from "framer-motion";
+import { useRef, useState } from "react";
+
+interface MarqueeTrackTitleProps {
+  text: string;
+  className: string;
+}
+
+const GAP_SIZE = 56; // пиксели для промежутка
+const ANIMATION_DURATION = 12; // секунды на полный цикл
+
+export default function MarqueeTrackTitle({
+  text,
+  className,
+}: MarqueeTrackTitleProps) {
+  const [key, setKey] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleAnimationComplete = () => {
+    setKey(prev => prev + 1);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        overflow: "hidden",
+        width: "100%",
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <motion.div
+        key={key}
+        initial={{ x: 0 }}
+        animate={{ x: "calc(-100% - 56px)" }}
+        transition={{
+          duration: ANIMATION_DURATION,
+          ease: "linear",
+        }}
+        onAnimationComplete={handleAnimationComplete}
+        style={{
+          display: "flex",
+          whiteSpace: "nowrap",
+          gap: `${GAP_SIZE}px`,
+          willChange: "transform",
+        }}
+      >
+        <span style={{ color: "white", flexShrink: 0 }}>{text}</span>
+      </motion.div>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import type { TwitchUser } from "@/shared/api";
 import animate from "@/shared/styles/animate.module.scss";
@@ -14,17 +14,26 @@ interface IntroStageProps {
 }
 
 const DEFAULT_INTRO_DURATION = 3200;
+const FADE_OUT_DURATION = 600;
 
 export default function IntroStage({
   twitchUser,
   fallbackAvatar,
   durationMs = DEFAULT_INTRO_DURATION,
   onComplete,
 }: IntroStageProps) {
+  const [isFadingOut, setIsFadingOut] = useState(false);
+
   useEffect(() => {
-    const timerId = window.setTimeout(onComplete, durationMs);
+    const fadeOutTimerId = window.setTimeout(() => {
+      setIsFadingOut(true);
+    }, durationMs - FADE_OUT_DURATION);
+
+    const completeTimerId = window.setTimeout(onComplete, durationMs);
+
     return () => {
-      window.clearTimeout(timerId);
+      window.clearTimeout(fadeOutTimerId);
+      window.clearTimeout(completeTimerId);
     };
   }, [durationMs, onComplete]);
 
@@ -42,7 +51,9 @@ export default function IntroStage({
 
   return (
     <article
-      className={`${styles["intro-stage"]} ${animate.animated} ${animate.fadeIn}`}
+      className={`${styles["intro-stage"]} ${animate.animated} ${
+        isFadingOut ? animate.fadeOut : animate.fadeIn
+      }`}
     >
       <div className={styles["intro-text-block"]}>
         <span