Problem:
When resizeMode is set to "cover", the component initializes _isFullscreen to true, which triggers the onEnterFullscreen callback on mount, even if the video is not actually in fullscreen mode. This causes unintended side effects, especially when onEnterFullscreen contains functional logic.
I believe this is the culprit:
const [_isFullscreen, setIsFullscreen] = useState<boolean>(
isFullscreen || resizeMode === 'cover' || false,
);
If resizeMode === 'cover', _isFullscreen is set to true, leading to this useEffect:
// VideoPlayer.tsx (AnimatedVideoPlayer)
useEffect(() => {
if (toggleResizeModeOnFullscreen) {
setResizeMode(_isFullscreen ? ResizeMode.COVER : ResizeMode.CONTAIN);
}
if (mounted.current) {
if (_isFullscreen) {
typeof events.onEnterFullscreen === 'function' &&
events.onEnterFullscreen();
} else {
typeof events.onExitFullscreen === 'function' &&
events.onExitFullscreen();
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [_isFullscreen, toggleResizeModeOnFullscreen]);Since onEnterFullscreen is triggered by _isFullscreen, any logic in onEnterFullscreen is executed even though fullscreen wasn't explicitly intended.
Example:
<VideoPlayer
resizeMode="cover"
isFullscreen={false} // Doesn't prevent the side effect
onEnterFullscreen={() => {
// This logic runs unintentionally on mount
}}
/>Expected Behavior
onEnterFullscreen should only trigger when fullscreen is explicitly activated by the user or another deliberate action, not just by setting resizeMode to "cover".
Suggested Fix
Revisit how _isFullscreen is initialized or decouple resizeMode="cover" from automatic fullscreen activation. An interim solution is to ensure that resizeMode doesn't implicitly trigger fullscreen logic.
Problem:
When resizeMode is set to "cover", the component initializes
_isFullscreento true, which triggers theonEnterFullscreencallback on mount, even if the video is not actually in fullscreen mode. This causes unintended side effects, especially when onEnterFullscreen contains functional logic.I believe this is the culprit:
If resizeMode === 'cover', _isFullscreen is set to true, leading to this useEffect:
Since
onEnterFullscreenis triggered by_isFullscreen, any logic inonEnterFullscreenis executed even though fullscreen wasn't explicitly intended.Example:
Expected Behavior
onEnterFullscreen should only trigger when fullscreen is explicitly activated by the user or another deliberate action, not just by setting resizeMode to "cover".
Suggested Fix
Revisit how
_isFullscreenis initialized or decoupleresizeMode="cover"from automatic fullscreen activation. An interim solution is to ensure that resizeMode doesn't implicitly trigger fullscreen logic.