From 9f04370516b982fcc6130e7bee86c3dcb3404076 Mon Sep 17 00:00:00 2001 From: Rafael Date: Tue, 5 Apr 2022 09:59:06 -0300 Subject: [PATCH] Improve resizing screen until it switches to/from Mobile --- ui/component/fileRenderFloating/view.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index ffc162ad0..dc319c2a9 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/ui/component/fileRenderFloating/view.jsx @@ -112,6 +112,7 @@ export default function FileRenderFloating(props: Props) { const isMobile = useIsMobile(); + const initialMobileState = React.useRef(isMobile); const initialPlayerHeight = React.useRef(); const resizedBetweenFloating = React.useRef(); @@ -170,7 +171,11 @@ export default function FileRenderFloating(props: Props) { x: rect.x, }; - if (videoAspectRatio && !initialPlayerHeight.current) { + // replace the initial value every time the window is resized if isMobile is true, + // since it could be a portrait -> landscape rotation switch, or if it was a mobile - desktop + // switch, so use the ref to compare the initial state + const resizedEnoughForMobileSwitch = isMobile !== initialMobileState.current; + if (videoAspectRatio && (!initialPlayerHeight.current || isMobile || resizedEnoughForMobileSwitch)) { const heightForRect = getPossiblePlayerHeight(videoAspectRatio * rect.width, isMobile); initialPlayerHeight.current = heightForRect; } @@ -526,7 +531,9 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => { const transparentBackground = { background: videoGreaterThanLandscape && mainFilePlaying && !forceDefaults ? 'transparent !important' : undefined, }; - const maxHeight = { maxHeight: !videoTheaterMode ? 'var(--desktop-portrait-player-max-height)' : undefined }; + const maxHeight = { + maxHeight: !videoTheaterMode && !isMobile ? 'var(--desktop-portrait-player-max-height)' : undefined, + }; return (