diff --git a/package-lock.json b/package-lock.json index 32d0b96..dde0cf3 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 1311001..8a12bed 100644 --- a/package.json +++ b/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", diff --git a/src/components/playerComponent/playerComponent.tsx b/src/components/playerComponent/playerComponent.tsx index 34eeaff..15574e6 100644 --- a/src/components/playerComponent/playerComponent.tsx +++ b/src/components/playerComponent/playerComponent.tsx @@ -33,9 +33,9 @@ export const PlayerComponent: React.FC = ({ closeStream }) => { return ( <> diff --git a/src/components/ui/FullscreenButton/FullscreenButton.tsx b/src/components/ui/FullscreenButton/FullscreenButton.tsx index 4ac6c34..2d16e33 100644 --- a/src/components/ui/FullscreenButton/FullscreenButton.tsx +++ b/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",