Дополнение: Добавлены компоненты макета Phonk и TikTok с медиафайлами

- Введены новые компоненты PhonkLayout и TikTokLayoutManager для улучшенной обработки медиафайлов.

- Добавлены несколько синих изображений (blue1.png до blue95.png) и изображений Caveira (caveira1.png до caveira10.png) для визуальных ресурсов.

- Реализованы аудиофайлы для TikTok с треками с 1 по 8.
- Создан скрипт PowerShell для переименования файлов, начинающихся с "file_", в соответствии с синей системой именования.

- Обновлен компонент BigTextBlockForAudio для приема строкового содержимого или MediaDto.

- Улучшена конфигурация маршрутизации для включения новых компонентов для интеграции с OBS.

- Добавлены шаблоны и версии оповещений для аудио оповещений TikTok.

Author: RXDCODX

src/components/OBS_Components/PhonkLayout/PhonkLayoutManager.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useReducer, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import { TelegramusHubSignalRContext } from "@/shared/api";
+import Announce from "@/shared/Utils/Announce/Announce";
+
+import PhonkShitAlerts from "./PhonkShitAlerts";
+
+type Action =
+  | { type: "ENQUEUE"; payload: string }
+  | { type: "DEQUEUE" }
+  | { type: "START_PLAY" }
+  | { type: "STOP_PLAY" };
+
+interface State {
+  queue: string[];
+  playing: boolean;
+  current: string | null;
+}
+
+const initialState: State = {
+  queue: [],
+  playing: false,
+  current: null,
+};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "ENQUEUE": {
+      return { ...state, queue: [...state.queue, action.payload] };
+    }
+    case "DEQUEUE": {
+      const [, ...rest] = state.queue;
+      return {
+        ...state,
+        queue: rest,
+        current: rest.length > 0 ? rest[0] : null,
+        playing: rest.length > 0 ? true : false,
+      };
+    }
+    case "START_PLAY": {
+      if (state.playing) return state;
+      const next = state.current ?? state.queue[0] ?? null;
+      return {
+        ...state,
+        playing: !!next,
+        current: next,
+      };
+    }
+    case "STOP_PLAY": {
+      return { ...state, playing: false, current: null };
+    }
+    default:
+      return state;
+  }
+}
+
+export default function PhonkLayoutManager() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [isAnnounced, setIsAnnounced] = useState(false);
+
+  TelegramusHubSignalRContext.useSignalREffect(
+    "TiktokEdit",
+    () => {
+      dispatch({
+        type: "ENQUEUE",
+        payload: uuidv4(),
+      });
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!state.playing && state.queue.length > 0) {
+      dispatch({ type: "START_PLAY" });
+    }
+  }, [state.queue, state.playing]);
+
+  return (
+    <>
+      {!isAnnounced && (
+        <Announce
+          title="TikTok Edit"
+          callback={() => setIsAnnounced(true)}
+          key={1}
+        />
+      )}
+      <div style={{ width: "100%", height: "100%" }}>
+        {state.playing && state.current && (
+          <PhonkShitAlerts
+            key={state.current}
+            callback={() => dispatch({ type: "DEQUEUE" })}
+          />
+        )}
+      </div>
+    </>
+  );
+}

src/components/OBS_Components/PhonkLayout/PhonkShitAlerts.module.scss

@@ -0,0 +1,34 @@
+.container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  // background-color: #000000;
+}
+
+.sideBar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: max(0px, calc((100vw - (100vh * 9 / 16)) / 2));
+  background: #000;
+  z-index: 9999;
+}
+
+.leftBar {
+  left: 0;
+}
+
+.rightBar {
+  right: 0;
+}
+
+.image {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 22%;
+  max-width: 200px;
+  max-height: 200px;
+  object-fit: contain;
+  z-index: 10000;
+}

src/components/OBS_Components/PhonkLayout/PhonkShitAlerts.tsx

@@ -0,0 +1,48 @@
+import { useRef, useState } from "react";
+
+import { useInjectStyles } from "@/shared/hooks";
+
+import { getRandomAudio, getRandomImage } from "./mediaAssets";
+import styles from "./PhonkShitAlerts.module.scss";
+
+export default function PhonkShitAlerts({
+  callback,
+}: {
+  callback: () => void;
+}) {
+  const [imageSrc] = useState<string>(getRandomImage());
+  const [audioSrc] = useState<string>(getRandomAudio());
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useInjectStyles(`
+    body {
+      background-color: #00000052 !important;
+    }
+    
+    `);
+
+  return (
+    <div className={styles.container}>
+      {/* Left black bar */}
+      <div className={`${styles.sideBar} ${styles.leftBar}`} />
+
+      {/* Right black bar */}
+      <div className={`${styles.sideBar} ${styles.rightBar}`} />
+
+      {/* Невидимый audio элемент в дереве для управления через реф */}
+      <audio
+        ref={audioRef}
+        autoPlay
+        onPlay={event => {
+          event.currentTarget.volume = 0.22;
+        }}
+        onEnded={callback}
+        style={{ display: "none" }}
+        src={audioSrc}
+      />
+
+      {/* Random image positioned 22% from bottom, centered horizontally */}
+      {imageSrc && <img src={imageSrc} alt="" className={styles.image} />}
+    </div>
+  );
+}