diff --git a/src/components/PixelStreamingWrapper2.tsx b/src/components/PixelStreamingWrapper2.tsx index dbfb590..481b9da 100644 --- a/src/components/PixelStreamingWrapper2.tsx +++ b/src/components/PixelStreamingWrapper2.tsx @@ -10,10 +10,12 @@ import { export interface PixelStreamingWrapperProps { initialSettings?: Partial; + onVideoInitialized: () => void; } export const PixelStreamingWrapper2 = ({ initialSettings, + onVideoInitialized, }: PixelStreamingWrapperProps) => { // A reference to parent div element that the Pixel Streaming library attaches into: const videoParent = useRef(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); diff --git a/src/components/modals/stream/LoadingModal.tsx b/src/components/modals/stream/LoadingModal.tsx new file mode 100644 index 0000000..d93d533 --- /dev/null +++ b/src/components/modals/stream/LoadingModal.tsx @@ -0,0 +1,27 @@ +import { Trans } from "react-i18next"; + +function LoadingModal() { + return ( +
+
+
+

+ Пожалуйста, подождите +

+
+
+ +

+ Подключение +

+
+
+
+ ); +} + +export default LoadingModal; diff --git a/src/pages/StreamPage3.tsx b/src/pages/StreamPage3.tsx index 660dfad..4108c51 100644 --- a/src/pages/StreamPage3.tsx +++ b/src/pages/StreamPage3.tsx @@ -33,6 +33,7 @@ import { useFullscreen } from "ahooks"; import InviteModal from "../components/modals/stream/InviteModal"; import Tooltip from "../components/Tooltip"; import { toast, ToastContainer } from "react-toastify"; +import LoadingModal from "../components/modals/stream/LoadingModal"; // import MoreIcon from "../components/icons/MoreIcon"; @@ -69,6 +70,8 @@ function StreamPage3() { const [, setEndAt] = useState(); const fullscreenRef = useRef(null); const [isFullscreen, { toggleFullscreen }] = useFullscreen(fullscreenRef); + const [isVideoInitialized, setIsVideoInitialized] = useState(false); + const [step, setStep] = useState(1); async function startCall(remotePeerId: string) { if (!peerInstance) return; @@ -120,7 +123,17 @@ function StreamPage3() { } function initPeer() { - const peer = new Peer(); + const peer = new Peer({ + config: { + iceServers: [ + { + urls: "turn:194.26.138.94:3478", // Replace with your TURN server URL + username: "username1", // Replace with your TURN username + credential: "password1", // Replace with your TURN credential + }, + ], + }, + }); peer.on("open", (id) => { setPeerId(id); @@ -232,6 +245,11 @@ function StreamPage3() { }, 500); } + function handleSetName() { + setStep(2); + getUserMedia(); + } + async function getWSUrl() { const activeSession = await getActiveSession(); @@ -244,7 +262,7 @@ function StreamPage3() { setWSUrl( `wss://${activeSession.location}.sess.stream.graff.tech/${activeSession.name}/${activeSession.cirrusPort}/` ); - setModal(); + setModal(); checkSessionStatus(); } @@ -293,6 +311,16 @@ function StreamPage3() { initPeer(); }, [permission]); + useEffect(() => { + if (step !== 2) return; + + if (!isVideoInitialized) { + setModal(); + } else { + setModal(null); + } + }, [step, isVideoInitialized]); + useEffect(() => { if (!peerId) return; @@ -466,6 +494,7 @@ function StreamPage3() { HoveringMouse: true, WaitForStreamer: true, }} + onVideoInitialized={() => setIsVideoInitialized(true)} /> )}