Fix iPad landscape

This commit is contained in:
Rafael 2022-04-06 18:01:26 -03:00 committed by Thomas Zarebczan
parent de93a97af0
commit b0f091a589
2 changed files with 32 additions and 7 deletions

View file

@ -17,7 +17,7 @@ import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
import Draggable from 'react-draggable';
import { onFullscreenChange } from 'util/full-screen';
import { generateListSearchUrlParams, formatLbryChannelName } from 'util/url';
import { useIsMobile, useIsMobileLandscape } from 'effects/use-screensize';
import { useIsMobile, useIsMobileLandscape, useIsLandscapeScreen } from 'effects/use-screensize';
import debounce from 'util/debounce';
import { useHistory } from 'react-router';
import { isURIEqual } from 'util/lbryURI';
@ -111,6 +111,7 @@ export default function FileRenderFloating(props: Props) {
} = props;
const isMobile = useIsMobile();
const isTabletLandscape = useIsLandscapeScreen() && !isMobile;
const isLandscapeRotated = useIsMobileLandscape();
const initialMobileState = React.useRef(isMobile);
@ -389,12 +390,13 @@ export default function FileRenderFloating(props: Props) {
<PlayerGlobalStyles
videoAspectRatio={videoAspectRatio}
videoTheaterMode={videoTheaterMode}
appDrawerOpen={appDrawerOpen && !isLandscapeRotated}
appDrawerOpen={appDrawerOpen && !isLandscapeRotated && !isTabletLandscape}
initialPlayerHeight={initialPlayerHeight}
isFloating={isFloating}
fileViewerRect={fileViewerRect}
mainFilePlaying={mainFilePlaying}
isLandscapeRotated={isLandscapeRotated}
isTabletLandscape={isTabletLandscape}
/>
) : null}
@ -453,6 +455,7 @@ type GlobalStylesProps = {
fileViewerRect: any,
mainFilePlaying: boolean,
isLandscapeRotated: boolean,
isTabletLandscape: boolean,
};
const PlayerGlobalStyles = (props: GlobalStylesProps) => {
@ -465,6 +468,7 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
fileViewerRect,
mainFilePlaying,
isLandscapeRotated,
isTabletLandscape,
} = props;
const isMobile = useIsMobile();
@ -485,7 +489,7 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
// Handles video shrink + center on mobile view
// direct DOM manipulation due to performance for every scroll
React.useEffect(() => {
if (!isMobilePlayer || !mainFilePlaying || appDrawerOpen || isLandscapeRotated) return;
if (!isMobilePlayer || !mainFilePlaying || appDrawerOpen || isLandscapeRotated || isTabletLandscape) return;
const viewer = document.querySelector(`.${CONTENT_VIEWER_CLASS}`);
if (viewer) viewer.style.height = `${heightForViewer}px`;
@ -539,6 +543,7 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
maxLandscapeHeight,
initialPlayerHeight,
isLandscapeRotated,
isTabletLandscape,
]);
React.useEffect(() => {
@ -557,6 +562,15 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
}
}, [amountNeededToCenter, appDrawerOpen, isFloating, isMobile, isMobilePlayer, videoGreaterThanLandscape]);
React.useEffect(() => {
if (isTabletLandscape) {
const videoNode = document.querySelector('.vjs-tech');
if (videoNode) videoNode.removeAttribute('style');
const touchOverlay = document.querySelector('.vjs-touch-overlay');
if (touchOverlay) touchOverlay.removeAttribute('style');
}
}, [isTabletLandscape]);
// -- render styles --
// declaring some style objects as variables makes it easier for repeated cases
@ -582,7 +596,13 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
video: maxHeight,
},
'.content__wrapper': transparentBackground,
'.video-js': transparentBackground,
'.video-js': {
...transparentBackground,
'.vjs-touch-overlay': {
maxHeight: isTabletLandscape ? 'var(--desktop-portrait-player-max-height) !important' : undefined,
},
},
'.vjs-fullscreen': {
video: {

View file

@ -53,17 +53,22 @@ export function useIsMobile() {
}
export function useIsMobileLandscape() {
const isWindowClient = typeof window === 'object';
const isMobile = useIsMobile();
const isLandscapeScreen = useIsLandscapeScreen();
return isMobile && isLandscapeScreen;
}
export function useIsLandscapeScreen() {
const isWindowClient = typeof window === 'object';
const windowAngle = getWindowAngle();
const isLandscape = isMobile && isWindowLandscapeForAngle(windowAngle);
const isLandscape = isWindowLandscapeForAngle(windowAngle);
const [landscape, setLandscape] = React.useState<boolean>(isLandscape);
React.useEffect(() => {
function handleResize() {
const currAngle = getWindowAngle();
const isCurrLandscape = isMobile && isWindowLandscapeForAngle(currAngle);
const isCurrLandscape = isWindowLandscapeForAngle(currAngle);
if (landscape !== isCurrLandscape) {
setLandscape(isCurrLandscape);
}