diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index dc319c2a9..68a410f58 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/ui/component/fileRenderFloating/view.jsx @@ -470,8 +470,12 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => { const widthForViewer = heightForViewer / videoAspectRatio; const maxLandscapeHeight = getMaxLandscapeHeight(isMobile ? undefined : widthForViewer); const heightResult = appDrawerOpen ? `${maxLandscapeHeight}px` : `${heightForViewer}px`; + const amountNeededToCenter = getAmountNeededToCenterVideo(heightForViewer, maxLandscapeHeight); + // forceDefaults = no styles should be applied to any of these conditions + // !mainFilePlaying = embeds on markdown (comments or posts) const forceDefaults = !mainFilePlaying || videoTheaterMode || isFloating || isMobile; + const videoGreaterThanLandscape = heightForViewer > maxLandscapeHeight; // Handles video shrink + center on mobile view @@ -525,6 +529,22 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => { }; }, [appDrawerOpen, heightForViewer, isMobilePlayer, mainFilePlaying, maxLandscapeHeight, initialPlayerHeight]); + React.useEffect(() => { + if (appDrawerOpen && videoGreaterThanLandscape && isMobilePlayer) { + const videoNode = document.querySelector('.vjs-tech'); + if (videoNode) videoNode.style.top = `${amountNeededToCenter}px`; + } + + if (isMobile && isFloating) { + const viewer = document.querySelector(`.${CONTENT_VIEWER_CLASS}`); + if (viewer) viewer.removeAttribute('style'); + const touchOverlay = document.querySelector('.vjs-touch-overlay'); + if (touchOverlay) touchOverlay.removeAttribute('style'); + const videoNode = document.querySelector('.vjs-tech'); + if (videoNode) videoNode.removeAttribute('style'); + } + }, [amountNeededToCenter, appDrawerOpen, isFloating, isMobile, isMobilePlayer, videoGreaterThanLandscape]); + // -- render styles -- // declaring some style objects as variables makes it easier for repeated cases