Mobile file page, comments and player improvements for rotated landscape view
undo plugin changes
This commit is contained in:
parent
35c933e7e4
commit
800e735115
7 changed files with 78 additions and 17 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
}}
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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} />
|
||||
|
|
Loading…
Reference in a new issue