optimaize focus on player

src/components/playerComponent/playerComponent.tsx

@@ -34,6 +34,7 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
     <>
       <iframe
         id='player'
+        onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
         title="stream"
         src={url}
         className={"player playerOn"}

src/components/ui/FullscreenButton/FullscreenButton.tsx

@@ -6,7 +6,6 @@ import fullscreenOff from "../../../images/icons/fullscreenOff.svg";
 
 
 export const FullscreenButton = ({ }) => {
-  const player = document.getElementById('player') // set focus to element after fullscreen state changed, otherwise keyboard doesn't work in iframe
   const [active, setActive] = useState(Boolean(document.fullscreenElement));
   const [button, setButton] = useState({
     icon: fullscreen,
@@ -27,9 +26,6 @@ export const FullscreenButton = ({ }) => {
   }
 
   useEffect(() => {
-    if (player) {
-      player.focus()
-    }
     setButton({
       icon: active ? fullscreen : fullscreenOff,
       inactive: "fullscreen-control-btn",
@@ -39,21 +35,17 @@ export const FullscreenButton = ({ }) => {
 
   }, [active])
 
+
+
   useEffect(() => {
     function onFullscreenChange() {
       setActive(Boolean(document.fullscreenElement));
-
-
     }
-
     document.addEventListener('fullscreenchange', onFullscreenChange);
-
     return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
   }, []);
 
 
-
-
   return (
     <div className="toolbar-button-area">
       <Button button={button} active={active} onClick={handleClick}></Button>