Mobile file page, comments and player improvements for rotated landscape view

undo plugin changes
This commit is contained in:
Rafael 2022-04-06 09:01:29 -03:00 committed by Thomas Zarebczan
parent 35c933e7e4
commit 800e735115
7 changed files with 78 additions and 17 deletions

View file

@ -85,3 +85,20 @@ export function getPossiblePlayerHeight(height: number, isMobile: boolean) {
return forceMinHeight;
}
export function getWindowAngle(cb?: () => void) {
// iOS
if (typeof window.orientation === 'number') {
return window.orientation;
}
// Android
if (screen && screen.orientation && screen.orientation.angle) {
return window.orientation;
}
if (cb) cb();
return 0;
}
export function isWindowLandscapeForAngle(angle: number) {
return angle === 90 || angle === 270 || angle === -90;
}

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 } from 'effects/use-screensize';
import { useIsMobile, useIsMobileLandscape } 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 isLandscapeRotated = useIsMobileLandscape();
const initialMobileState = React.useRef(isMobile);
const initialPlayerHeight = React.useRef();
@ -368,7 +369,7 @@ export default function FileRenderFloating(props: Props) {
'content__viewer--secondary': isComment,
'content__viewer--theater-mode': videoTheaterMode && mainFilePlaying && !isCurrentClaimLive && !isMobile,
'content__viewer--disable-click': wasDragging,
'content__viewer--mobile': isMobile && !playingUriSource,
'content__viewer--mobile': isMobile && !isLandscapeRotated && !playingUriSource,
})}
style={
!isFloating && fileViewerRect
@ -388,11 +389,12 @@ export default function FileRenderFloating(props: Props) {
<PlayerGlobalStyles
videoAspectRatio={videoAspectRatio}
videoTheaterMode={videoTheaterMode}
appDrawerOpen={appDrawerOpen}
appDrawerOpen={appDrawerOpen && !isLandscapeRotated}
initialPlayerHeight={initialPlayerHeight}
isFloating={isFloating}
fileViewerRect={fileViewerRect}
mainFilePlaying={mainFilePlaying}
isLandscapeRotated={isLandscapeRotated}
/>
) : null}
@ -450,6 +452,7 @@ type GlobalStylesProps = {
isFloating: boolean,
fileViewerRect: any,
mainFilePlaying: boolean,
isLandscapeRotated: boolean,
};
const PlayerGlobalStyles = (props: GlobalStylesProps) => {
@ -461,6 +464,7 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
isFloating,
fileViewerRect,
mainFilePlaying,
isLandscapeRotated,
} = props;
const isMobile = useIsMobile();
@ -481,7 +485,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) return;
if (!isMobilePlayer || !mainFilePlaying || appDrawerOpen || isLandscapeRotated) return;
const viewer = document.querySelector(`.${CONTENT_VIEWER_CLASS}`);
if (viewer) viewer.style.height = `${heightForViewer}px`;
@ -527,7 +531,15 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
window.removeEventListener('scroll', handleScroll);
};
}, [appDrawerOpen, heightForViewer, isMobilePlayer, mainFilePlaying, maxLandscapeHeight, initialPlayerHeight]);
}, [
appDrawerOpen,
heightForViewer,
isMobilePlayer,
mainFilePlaying,
maxLandscapeHeight,
initialPlayerHeight,
isLandscapeRotated,
]);
React.useEffect(() => {
if (appDrawerOpen && videoGreaterThanLandscape && isMobilePlayer) {
@ -594,7 +606,10 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
},
[`.${CONTENT_VIEWER_CLASS}`]: {
height: !forceDefaults && (!isMobile || isMobilePlayer) ? `${heightResult} !important` : undefined,
height:
(!forceDefaults || isLandscapeRotated) && (!isMobile || isMobilePlayer)
? `${heightResult} !important`
: undefined,
...maxHeight,
},
}}

View file

@ -2,7 +2,7 @@
import 'scss/component/_swipeable-drawer.scss';
import { lazyImport } from 'util/lazyImport';
import { useIsMobile } from 'effects/use-screensize';
import { useIsMobile, useIsMobileLandscape } from 'effects/use-screensize';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import FileTitleSection from 'component/fileTitleSection';
import LivestreamLink from 'component/livestreamLink';
@ -53,6 +53,7 @@ export default function LivestreamLayout(props: Props) {
} = props;
const isMobile = useIsMobile();
const isLandscapeRotated = useIsMobileLandscape();
const [superchatsHidden, setSuperchatsHidden] = React.useState(false);
const [chatViewMode, setChatViewMode] = React.useState(VIEW_MODES.CHAT);
@ -100,7 +101,7 @@ export default function LivestreamLayout(props: Props) {
/>
)}
{isMobile && !hideComments && (
{isMobile && !isLandscapeRotated && !hideComments && (
<React.Suspense fallback={null}>
<SwipeableDrawer
title={

View file

@ -3,7 +3,7 @@ import { lazyImport } from 'util/lazyImport';
import { MAIN_CLASS } from 'constants/classnames';
import { parseURI } from 'util/lbryURI';
import { useHistory } from 'react-router';
import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
import { useIsMobile, useIsMediumScreen, useIsMobileLandscape } from 'effects/use-screensize';
import classnames from 'classnames';
import Header from 'component/header';
import React from 'react';
@ -65,6 +65,7 @@ function Page(props: Props) {
const isMediumScreen = useIsMediumScreen();
const isMobile = useIsMobile();
const isLandscapeRotated = useIsMobileLandscape();
const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', false);
const url = pathname.slice(1).replace(/:/g, '#');
@ -143,7 +144,7 @@ function Page(props: Props) {
>
{children}
{!isMobile && (!livestream || !chatDisabled) && rightSide}
{(!isMobile || isLandscapeRotated) && (!livestream || !chatDisabled) && rightSide}
</main>
{!noFooter && (

View file

@ -61,7 +61,7 @@ const onPlayerReady = (player, options) => {
!player.el_.ownerDocument.querySelector('.bc-iframe')
) {
player.tech_.el_.setAttribute('playsinline', 'playsinline');
player.tech_.supportsFullScreen = function() {
player.tech_.supportsFullScreen = function () {
return false;
};
}
@ -115,7 +115,7 @@ const onPlayerReady = (player, options) => {
screen.orientation.onchange = rotationHandler;
}
player.on('ended', _ => {
player.on('ended', (_) => {
if (locked === true) {
screen.orientation.unlock();
locked = false;
@ -150,7 +150,7 @@ const onPlayerReady = (player, options) => {
* Whether to disable when the video ends (e.g., if there is an endscreen)
* Never shows if the endscreen plugin is present
*/
const mobileUi = function(options) {
const mobileUi = function (options) {
// if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
if (videojs.browser.IS_ANDROID) {
this.ready(() => {

View file

@ -1,6 +1,7 @@
// @flow
// Widths are taken from "ui/scss/init/vars.scss"
import React, { useRef } from 'react';
import { getWindowAngle, isWindowLandscapeForAngle } from 'component/fileRenderFloating/helper-functions';
const DEFAULT_SCREEN_SIZE = 1080;
export function useWindowSize() {
@ -51,6 +52,33 @@ export function useIsMobile() {
return useHasWindowWidthChangedEnough((windowSize) => windowSize < 901);
}
export function useIsMobileLandscape() {
const isWindowClient = typeof window === 'object';
const isMobile = useIsMobile();
const windowAngle = getWindowAngle();
const isLandscape = isMobile && isWindowLandscapeForAngle(windowAngle);
const [landscape, setLandscape] = React.useState<boolean>(isLandscape);
React.useEffect(() => {
function handleResize() {
const currAngle = getWindowAngle();
const isCurrLandscape = isMobile && isWindowLandscapeForAngle(currAngle);
if (landscape !== isCurrLandscape) {
setLandscape(isCurrLandscape);
}
}
if (isWindowClient) {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}
}, [isWindowClient, landscape]);
return landscape;
}
export function useIsMediumScreen() {
return useHasWindowWidthChangedEnough((windowSize) => windowSize < 1151);
}

View file

@ -16,7 +16,7 @@ import Button from 'component/button';
import Empty from 'component/common/empty';
import SwipeableDrawer from 'component/swipeableDrawer';
import DrawerExpandButton from 'component/swipeableDrawerExpand';
import { useIsMobile } from 'effects/use-screensize';
import { useIsMobile, useIsMobileLandscape } from 'effects/use-screensize';
const CommentsList = lazyImport(() => import('component/commentsList' /* webpackChunkName: "comments" */));
const PostViewer = lazyImport(() => import('component/postViewer' /* webpackChunkName: "postViewer" */));
@ -81,8 +81,7 @@ export default function FilePage(props: Props) {
} = props;
const isMobile = useIsMobile();
// Auto-open the drawer on Mobile view if there is a linked comment
const isLandscapeRotated = useIsMobileLandscape();
const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
const commentSettingDisabled = channelSettings && !channelSettings.comments_enabled;
@ -239,7 +238,7 @@ export default function FilePage(props: Props) {
<Empty {...emptyMsgProps} text={__('The creator of this content has disabled comments.')} />
) : commentSettingDisabled ? (
<Empty {...emptyMsgProps} text={__('This channel has disabled comments on their page.')} />
) : isMobile ? (
) : isMobile && !isLandscapeRotated ? (
<>
<SwipeableDrawer title={commentsListTitle}>
<CommentsList {...commentsListProps} />