added webRtcPlayer

src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx

@@ -2,13 +2,14 @@ import "./PlayerStyles.css";
 import React, { useEffect, useState, useRef } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import useWindowDimensions from "hooks/useWindowDimensions";
-
+import { load } from "utils/app";
 import useMobile from "hooks/useMobile";
 import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
 
 import { connectSession } from "store/reducers/ActionCreator";
 import { useAppDispatch, useAppSelector } from "hooks/redux";
 import { sessionSlice } from "store/reducers/sessionSlice";
+import { Player } from "../Player/Player";
 
 type link = {
   id: string;
@@ -31,6 +32,7 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
 
   useEffect(() => {
     dispatch(connectSession(id)).then((res: any) => {
+      load()
       if (res.error) {
         alert(res.payload);
       }
@@ -68,17 +70,12 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
           <h2>Переверните устройство</h2>
         </div>
       )}
-      <iframe
-        ref={frameRef}
-        onLoad={(e: any) => e.target.focus()}
-        id="player"
-        onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
-        src={url}
-        className={"player playerOn"}
-        security={""}
-        allowFullScreen={true}
-      ></iframe>
-
+      <div id="playerUI" className="noselect">
+        <div id="player"></div>
+        <div id="overlay">
+        </div>
+      </div>
+      <Player></Player>
       <Sidebar
         heightDevice={height}
         isMobile={isMobile}