ui update: test version

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

@@ -0,0 +1,48 @@
+import "./PlayerStyles.css";
+import React, { useEffect } from "react";
+import { useHistory, useParams } from "react-router-dom";
+
+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";
+
+type link = {
+  id: string;
+};
+
+export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
+  const { id } = useParams<link>();
+  const dispatch = useAppDispatch();
+  const { cleanErrors } = sessionSlice.actions;
+  const history = useHistory();
+
+  useEffect(() => {
+    dispatch(connectSession(id)).then((res: any) => {
+      if (res.error) {
+        alert(res.payload);
+      }
+    });
+    return () => {
+      dispatch(cleanErrors());
+    };
+  }, []);
+
+  const { url } = useAppSelector((state) => state.sessionReducer);
+
+  return (
+    <>
+      <iframe
+        id="player"
+        onFocus={() => console.log('focus')}
+        onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
+        src={url}
+        className={"player playerOn"}
+        security={""}
+        allowFullScreen={true}
+      ></iframe>
+      <Sidebar closeStream={closeStream}></Sidebar>
+    </>
+  );
+};