disable focus on button, enable focus to iframe

whe fullscreen state changes
fix fullscreen

package-lock.json

@@ -28,7 +28,6 @@
         "peer": "^0.6.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-full-screen": "^1.1.1",
         "react-i18next": "^12.1.1",
         "react-redux": "^8.0.5",
         "react-router-dom": "^5.2.0",
@@ -8323,11 +8322,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "node_modules/fscreen": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
-      "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg=="
-    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -14464,20 +14458,6 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
-    "node_modules/react-full-screen": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz",
-      "integrity": "sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==",
-      "dependencies": {
-        "fscreen": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
     "node_modules/react-i18next": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.1.tgz",
@@ -23452,11 +23432,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "fscreen": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
-      "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg=="
-    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -27724,14 +27699,6 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
-    "react-full-screen": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz",
-      "integrity": "sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==",
-      "requires": {
-        "fscreen": "^1.0.2"
-      }
-    },
     "react-i18next": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.1.1.tgz",

package.json

@@ -23,7 +23,6 @@
     "peer": "^0.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-full-screen": "^1.1.1",
     "react-i18next": "^12.1.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^5.2.0",

src/components/playerComponent/playerComponent.tsx

@@ -33,9 +33,9 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
   return (
     <>
       <iframe
+        id='player'
         title="stream"
         src={url}
-        allowFullScreen
         className={"player playerOn"}
         security={""}
       ></iframe>

src/components/ui/FullscreenButton/FullscreenButton.tsx

@@ -4,12 +4,9 @@ import { Button } from "../button/button";
 import fullscreen from "../../../images/icons/fullscreen.svg";
 import fullscreenOff from "../../../images/icons/fullscreenOff.svg";
 
-import { FullScreen, useFullScreenHandle } from "react-full-screen";
-
 
 export const FullscreenButton = ({ }) => {
-  const handle = useFullScreenHandle();
+  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,
@@ -30,6 +27,9 @@ export const FullscreenButton = ({ }) => {
   }
 
   useEffect(() => {
+    if (player) {
+      player.focus()
+    }
     setButton({
       icon: active ? fullscreen : fullscreenOff,
       inactive: "fullscreen-control-btn",