DmitriyB/pixelstreamingv2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

disable focus on button, enable focus to iframe

Browse Source 
whe fullscreen state changes
fix fullscreen
This commit is contained in:
DmitriyB
2023-02-15 15:45:55 +05:00
parent 40c9cf2fe1
commit e603b5bbb1
4 changed files with 5 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
-33
View File
@@ -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
-1
View File
@@ -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
+1 -1
View File
@@ -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 -4
View File
@@ -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",