upd

src/components/PixelStreamingWrapper2.tsx

@@ -10,10 +10,12 @@ import {
 
 export interface PixelStreamingWrapperProps {
   initialSettings?: Partial<AllSettings>;
+  onVideoInitialized: () => void;
 }
 
 export const PixelStreamingWrapper2 = ({
   initialSettings,
+  onVideoInitialized,
 }: PixelStreamingWrapperProps) => {
   // A reference to parent div element that the Pixel Streaming library attaches into:
   const videoParent = useRef<HTMLDivElement>(null);
@@ -38,6 +40,10 @@ export const PixelStreamingWrapper2 = ({
         setClickToPlayVisible(true);
       });
 
+      streaming.addEventListener("videoInitialized", () => {
+        onVideoInitialized();
+      });
+
       // Save the library instance into component state so that it can be accessed later:
       setPixelStreaming(streaming);
 

src/components/modals/stream/LoadingModal.tsx

@@ -0,0 +1,27 @@
+import { Trans } from "react-i18next";
+
+function LoadingModal() {
+  return (
+    <div className="flex items-center justify-center w-full h-full bg-opacity-50 backdrop-blur-2xl">
+      <div className={`bg-white rounded-lg p-12 w-[396px]`}>
+        <div className="mb-6">
+          <p className="text-2xl font-semibold">
+            <Trans i18nKey={"pleaseWait"}>Пожалуйста, подождите</Trans>
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <img
+            src="/icons/LoaderPrimary.png"
+            alt=""
+            className="w-8 h-8 animate-spin"
+          />
+          <p className="font-semibold text-[#49A1F5]">
+            <Trans i18nKey={"connection"}>Подключение</Trans>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoadingModal;