LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix miniplayer size issues

Browse source 
Add another comment
This commit is contained in:
Rafael 2022-04-05 10:09:21 -03:00 committed by Thomas Zarebczan
parent 9f04370516
commit 35c933e7e4
1 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ui/component/fileRenderFloating/view.jsx
View file

@ -470,8 +470,12 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
const widthForViewer = heightForViewer / videoAspectRatio; const widthForViewer = heightForViewer / videoAspectRatio;
const maxLandscapeHeight = getMaxLandscapeHeight(isMobile ? undefined : widthForViewer); const maxLandscapeHeight = getMaxLandscapeHeight(isMobile ? undefined : widthForViewer);
const heightResult = appDrawerOpen ? `${maxLandscapeHeight}px` : `${heightForViewer}px`; 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 forceDefaults = !mainFilePlaying || videoTheaterMode || isFloating || isMobile;
const videoGreaterThanLandscape = heightForViewer > maxLandscapeHeight; const videoGreaterThanLandscape = heightForViewer > maxLandscapeHeight;
// Handles video shrink + center on mobile view // Handles video shrink + center on mobile view
@ -525,6 +529,22 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
}; };
}, [appDrawerOpen, heightForViewer, isMobilePlayer, mainFilePlaying, maxLandscapeHeight, initialPlayerHeight]); }, [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 -- // -- render styles --
// declaring some style objects as variables makes it easier for repeated cases // declaring some style objects as variables makes it easier for repeated cases