From a0291e3a645d0f17c97cf0a0f4f951d7816d8b3d Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Wed, 15 Feb 2023 15:58:12 +0500
Subject: [PATCH] optimaize focus on player

---
 src/components/playerComponent/playerComponent.tsx   |  1 +
 .../ui/FullscreenButton/FullscreenButton.tsx         | 12 ++----------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/playerComponent/playerComponent.tsx b/src/components/playerComponent/playerComponent.tsx
index 15574e6..e8a7674 100644
--- a/src/components/playerComponent/playerComponent.tsx
+++ b/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"}
diff --git a/src/components/ui/FullscreenButton/FullscreenButton.tsx b/src/components/ui/FullscreenButton/FullscreenButton.tsx
index 2d16e33..6423ebd 100644
--- a/src/components/ui/FullscreenButton/FullscreenButton.tsx
+++ b/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>