The problem is that if I click to play a video, and write something in a neighboring component, and accidentally press the F key on the keyboard, then the video, which is in another component, goes into full screen mode. How can I fix this problem?
// ...
<ReactPlayer
{...attrs}
ref={playerRef}
className={styles.video}
playing={playerState.playing}
volume={playerState.volume}
onEnded={handleOnEnded}
onProgress={handlePlayerProgress}
config={getVideoConfig(autoPlay)}
/>
// ...
export const getVideoConfig = (autoPlay?: boolean): Config => {
return {
file: {
attributes: {
controls: false,
autoPlay,
controlsList: "nofullscreen",
},
},
};
};
i try to set controls={false}, vimeoConfig={{ iframeParams: { fullscreen: 0 } }} and something like this that I found on the Internet, but it doesn’t help. I still enter text and when I click on f, the video in the adjacent component goes into full screen mode, but I don’t need this. I want to go to full screen mode only when clicking a button
<ButtonWithTooltip
className={styles.fullScreenBtn}
Svg={
screenfull.isFullscreen
? videoControlItems.FullScreenButtonIcon
: videoControlItems.DefaultedScreenButtonIcon
}
title={
screenfull.isFullscreen
? videoControlItems.FullScreenButtonTitle
: videoControlItems.DefaultedScreenButtonTitle
}
onClick={handleFullScreen}
/>