lbry-desktop/ui/component/page/view.jsx
jm-morani 28e168d5e5
Minor layout fixes depending on window shape ()
Disable theatre mode styles for medium screen (or lower)
Fix the width of the cover in theater mode
Fix conflicting styles when width is 1150px
Remove duplicate from CHANGELOG

Co-authored-by: Jean-Michel Morani <probono+lbry@morani.org>
2022-10-25 10:03:20 -04:00

141 lines
4.2 KiB
JavaScript

// @flow
import { MAIN_CLASS } from 'constants/classnames';
import { parseURI } from 'util/lbryURI';
import { useHistory } from 'react-router';
import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
import classnames from 'classnames';
import Header from 'component/header';
import React from 'react';
import Wallpaper from 'component/wallpaper';
import SettingsSideNavigation from 'component/settingsSideNavigation';
import SideNavigation from 'component/sideNavigation';
import StatusBar from 'component/common/status-bar';
import usePersistedState from 'effects/use-persisted-state';
import type { Element, Node } from 'react';
type Props = {
className: ?string,
autoUpdateDownloaded: boolean,
isUpgradeAvailable: boolean,
authPage: boolean,
backout: {
backLabel?: string,
backNavDefault?: string,
title: string,
simpleTitle: string, // Just use the same value as `title` if `title` is already short (~< 10 chars), unless you have a better idea for title overlfow on mobile
},
children: Node | Array<Node>,
className: ?string,
filePage: boolean,
fullWidthPage: boolean,
isMarkdown?: boolean,
noHeader: boolean,
noSideNavigation: boolean,
rightSide?: Element<any>,
settingsPage?: boolean,
videoTheaterMode: boolean,
};
function Page(props: Props) {
const {
authPage = false,
backout,
children,
className,
filePage = false,
fullWidthPage = false,
isMarkdown = false,
noHeader = false,
noSideNavigation = false,
rightSide,
settingsPage,
videoTheaterMode,
} = props;
const {
location: { pathname },
} = useHistory();
const isMediumScreen = useIsMediumScreen();
const isMobile = useIsMobile();
const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', false);
const url = pathname.slice(1).replace(/:/g, '#');
let isOnFilePage = false;
try {
const { isChannel } = parseURI(url);
if (!isChannel) isOnFilePage = true;
} catch (e) {}
const isAbsoluteSideNavHidden = (isOnFilePage || isMobile) && !sidebarOpen;
React.useEffect(() => {
if (isOnFilePage || isMediumScreen) setSidebarOpen(false);
// TODO: make sure setState callback for usePersistedState uses useCallback to it doesn't cause effect to re-run
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOnFilePage, isMediumScreen]);
return (
<>
<Wallpaper uri={url} />
{!noHeader && (
<Header
authHeader={authPage}
backout={backout}
sidebarOpen={sidebarOpen}
isAbsoluteSideNavHidden={isAbsoluteSideNavHidden}
setSidebarOpen={setSidebarOpen}
/>
)}
<div
className={classnames('main-wrapper__inner', {
'main-wrapper__inner--filepage': isOnFilePage,
'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode && !isMediumScreen,
})}
>
{!authPage &&
(settingsPage ? (
<SettingsSideNavigation />
) : (
!noSideNavigation && (
<SideNavigation
sidebarOpen={sidebarOpen}
setSidebarOpen={setSidebarOpen}
isMediumScreen={isMediumScreen}
isOnFilePage={isOnFilePage}
/>
)
))}
<div
className={classnames({
'sidebar--pusher': fullWidthPage,
'sidebar--pusher--open': sidebarOpen && fullWidthPage,
'sidebar--pusher--filepage': !fullWidthPage,
})}
>
<main
id={'main-content'}
className={classnames(MAIN_CLASS, className, {
'main--full-width': fullWidthPage,
'main--auth-page': authPage,
'main--file-page': filePage,
'main--settings-page': settingsPage,
'main--markdown': isMarkdown,
'main--theater-mode': isOnFilePage && videoTheaterMode && !isMediumScreen && !isMarkdown,
})}
>
{children}
{!isMobile && rightSide && <div className="main__right-side">{rightSide}</div>}
</main>
<StatusBar />
</div>
</div>
</>
);
}
export default Page;