Add AFK Screen feature and update dependencies

- Removed react-player dependency and added youtube-player for video playback.
- Introduced AFK Screen in Navbar and updated related routes and pages.
- Enhanced DocsPage and WelcomePage to include AFK Screen details.
- Updated TypeScript definitions for youtube-player.
- Adjusted package.json and yarn.lock to reflect new dependencies.

Author: RXDCODX

.yarn/install-state.gz

@@ -57,7 +57,6 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.62.0",
     "react-is": "^19.1.0",
-    "react-player": "^2.16.0",
     "react-roulette-pro": "^3.2.2",
     "react-router-dom": "^7.0.1",
     "react-shaders": "^0.0.4",
@@ -72,6 +71,7 @@
     "swagger-typescript-api": "^13.0.23",
     "uuid": "^11.0.3",
     "vite-plugin-mkcert": "^1.17.6",
+    "youtube-player": "^5.6.0",
     "zod": "^4.0.15",
     "zustand": "^5.0.7"
   },
@@ -94,6 +94,7 @@
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
     "@types/react-is": "^19",
+    "@types/youtube-player": "^5.5.11",
     "@typescript-eslint/eslint-plugin": "^8.24.0",
     "@typescript-eslint/parser": "^8.24.0",
     "@vitejs/plugin-react": "^4.3.4",

package.json

@@ -67,6 +67,7 @@ const Navbar: React.FC<NavbarProps> = ({ activeTab, onTabChange }) => {
         { label: "Fumo Friday", path: "/fumofriday" },
         { label: "Random Mem", path: "/randommem" },
         { label: "Экранные частицы", path: "/confetti" },
+        { label: "AFK Screen", path: "/afkscreen" },
       ],
     },
     {

src/Site/ControlRoom_Components/Navbar/Navbar.tsx

@@ -70,6 +70,18 @@ const DocsPage: React.FC = () => {
         "Триггеры событий",
       ],
     },
+    {
+      name: "AFK Screen",
+      path: "/afkscreen",
+      description:
+        "Автоматическое воспроизведение случайных видео из YouTube плейлиста",
+      features: [
+        "Автоматическое переключение видео",
+        "Случайный выбор из плейлиста",
+        "Интеграция с YouTube",
+        "Элементы управления воспроизведением",
+      ],
+    },
   ];
 
   const renderGettingStarted = () => (

src/Site/Pages/DocsPage/DocsPage.tsx

@@ -68,6 +68,11 @@ const WelcomePage: React.FC = () => {
       path: "/confetti",
       description: "Экранные эффекты",
     },
+    {
+      name: "AFK Screen",
+      path: "/afkscreen",
+      description: "Автоматическое воспроизведение видео из плейлиста",
+    },
   ];
 
   return (

src/Site/Pages/WelcomePage/WelcomePage.tsx

@@ -49,6 +49,7 @@ const Header: React.FC = () => {
         { label: "Fumo Friday", path: "/fumofriday" },
         { label: "Random Mem", path: "/randommem" },
         { label: "Экранные частицы", path: "/confetti" },
+        { label: "AFK Screen", path: "/afkscreen" },
       ],
     },
     {

src/Site/Site_Components/Layout/Header/Header.tsx

@@ -0,0 +1,26 @@
+.afk-screen {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background: #000;
+  overflow: hidden;
+}
+
+.afk-screen-container {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background: #000;
+  overflow: hidden;
+}
+
+.youtube-player {
+  width: 100%;
+  height: 100%;
+  
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}

src/components/OBS_Components/AFKScreen/AFKScreen.scss

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import AFKScreen from "./AFKScreen";
+
+const meta: Meta<typeof AFKScreen> = {
+  title: "OBS Components/AFKScreen",
+  component: AFKScreen,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Компонент AFK экрана с использованием YouTube IFrame API. " +
+          "Автоматически воспроизводит YouTube видео из плейлиста, " +
+          "включает автозапуск, зацикливание и управление звуком. " +
+          "Использует официальную библиотеку youtube-player для надежной работы.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    videoId: {
+      control: "text",
+      description: "ID YouTube видео",
+      defaultValue: "6oMsWcCDGnw",
+    },
+    playlistId: {
+      control: "text",
+      description: "ID YouTube плейлиста",
+      defaultValue: "PLB6r_8YDnipME_VANRWiiBgI9-rabmmL1",
+    },
+    autoplay: {
+      control: "boolean",
+      description: "Автоматический запуск воспроизведения",
+      defaultValue: true,
+    },
+    controls: {
+      control: "boolean",
+      description: "Показ элементов управления",
+      defaultValue: true,
+    },
+    loop: {
+      control: "boolean",
+      description: "Зацикливание видео",
+      defaultValue: true,
+    },
+    muted: {
+      control: "boolean",
+      description: "Запуск без звука",
+      defaultValue: true,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Основной вид компонента с автоматическим воспроизведением YouTube видео. " +
+          "Плеер автоматически запускается, зацикливается и воспроизводит видео из плейлиста. " +
+          "Включает обработку событий готовности, изменения состояния и ошибок.",
+      },
+    },
+  },
+};
+
+export const CustomVideo: Story = {
+  args: {
+    videoId: "dQw4w9WgXcQ",
+    playlistId: "PLB6r_8YDnipME_VANRWiiBgI9-rabmmL1",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Компонент с кастомным видео и плейлистом. " +
+          "Демонстрирует использование пропсов для настройки воспроизведения.",
+      },
+    },
+  },
+};
+
+export const NoControls: Story = {
+  args: {
+    controls: false,
+    muted: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Компонент без элементов управления и со звуком. " +
+          "Подходит для фонового воспроизведения в OBS.",
+      },
+    },
+  },
+};
+
+export const Fullscreen: Story = {
+  args: {},
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Компонент в полноэкранном режиме для OBS. " +
+          "Плеер занимает весь экран и автоматически адаптируется под размер контейнера.",
+      },
+    },
+  },
+};