upd

src/components/PixelStreamingWrapper.tsx

@@ -1,8 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable no-empty */
-// Copyright Epic Games, Inc. All Rights Reserved.
-
 import { useEffect, useRef, useState } from "react";
 import {
   Config,
@@ -10,6 +7,7 @@ import {
   PixelStreaming,
   LatencyTestResults,
 } from "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3";
+import { Trans } from "react-i18next";
 
 export interface PixelStreamingWrapperProps {
   initialSettings?: Partial<AllSettings>;
@@ -24,13 +22,13 @@ export const PixelStreamingWrapper = ({
   const videoParent = useRef<HTMLDivElement>(null);
 
   // Pixel streaming library instance is stored into this state variable after initialization:
-  const [pixelStreaming, setPixelStreaming] = useState<PixelStreaming>();
+  const [_pixelStreaming, setPixelStreaming] = useState<PixelStreaming>();
 
   // A boolean state variable that determines if the Click to play overlay is shown:
-  const [clickToPlayVisible, setClickToPlayVisible] = useState(false);
+  const [_clickToPlayVisible, setClickToPlayVisible] = useState(false);
 
-  const [latencyTestResult, setLatencyTestResult] =
-    useState<LatencyTestResults>();
+  const [, setLatencyTestResult] = useState<LatencyTestResults>();
+  const [isVideoInitialized, setIsVideoInitialized] = useState(false);
 
   // Run on component mount:
   useEffect(() => {
@@ -41,6 +39,9 @@ export const PixelStreamingWrapper = ({
         videoElementParent: videoParent.current,
       });
 
+      document.getElementById("hiddenInput")?.remove();
+      document.getElementById("editTextButton")?.remove();
+
       // register a playStreamRejected handler to show Click to play overlay if needed:
       streaming.addEventListener("playStreamRejected", () => {
         setClickToPlayVisible(true);
@@ -48,6 +49,7 @@ export const PixelStreamingWrapper = ({
 
       streaming.addEventListener("videoInitialized", () => {
         onVideoInitialized && onVideoInitialized();
+        setIsVideoInitialized(true);
       });
 
       streaming.addEventListener("latencyTestResult", (e) => {
@@ -55,9 +57,9 @@ export const PixelStreamingWrapper = ({
         // console.log("Data", e.data.latencyTimings);
       });
 
-      setInterval(() => {
-        streaming.requestLatencyTest();
-      }, 500);
+      // setInterval(() => {
+      //   streaming.requestLatencyTest();
+      // }, 500);
 
       // Save the library instance into component state so that it can be accessed later:
       setPixelStreaming(streaming);
@@ -66,7 +68,9 @@ export const PixelStreamingWrapper = ({
       return () => {
         try {
           streaming.disconnect();
-        } catch {}
+        } catch {
+          //
+        }
       };
     }
   }, []);
@@ -80,13 +84,28 @@ export const PixelStreamingWrapper = ({
       }}
     >
       <div
+        ref={videoParent}
         style={{
           width: "100%",
           height: "100%",
         }}
-        ref={videoParent}
       />
-      {clickToPlayVisible && (
+      {!isVideoInitialized && (
+        <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
+          <p className="flex items-center gap-4">
+            <span>
+              <img
+                src="/icons/Loader.png"
+                alt=""
+                className="animate-spin w-6 h-6"
+              />
+            </span>
+            <Trans i18nKey="streamBuffering">Буферизация потока</Trans>
+          </p>
+        </div>
+      )}
+
+      {/* {clickToPlayVisible && (
         <div
           style={{
             position: "absolute",
@@ -105,29 +124,13 @@ export const PixelStreamingWrapper = ({
             setClickToPlayVisible(false);
           }}
         >
-          <div>Click to play</div>
+          <div className="bg-gradient rounded px-4 py-2 opacity-95 hover:opacity-100 transition-opacity">
+            <p>
+              <Trans i18nKey="clickToContinue">Нажмите, чтобы продолжить</Trans>
+            </p>
+          </div>
         </div>
-      )}
-
-      <div className="absolute bottom-0 left-0 p-4 text-white text-xs bg-black">
-        {latencyTestResult &&
-          Object.entries(latencyTestResult).map(([key, value], i) => {
-            if (
-              [
-                "EncodeMs",
-                "CaptureToSendMs",
-                "latencyExcludingDecode",
-                "networkLatency",
-                "testStartTimeMs",
-              ].includes(key)
-            )
-              return (
-                <div key={i}>
-                  {key}: {value}
-                </div>
-              );
-          })}
-      </div>
+      )} */}
     </div>
   );
 };