// @flow import type { Node } from 'react'; import React, { Fragment } from 'react'; import classnames from 'classnames'; import SideNavigation from 'component/sideNavigation'; import Header from 'component/header'; import Footer from 'web/component/footer'; /* @if TARGET='app' */ import StatusBar from 'component/common/status-bar'; /* @endif */ import usePersistedState from 'effects/use-persisted-state'; import { useHistory } from 'react-router'; import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize'; import { parseURI } from 'lbry-redux'; export const MAIN_CLASS = 'main'; type Props = { children: Node | Array, className: ?string, autoUpdateDownloaded: boolean, isUpgradeAvailable: boolean, authPage: boolean, filePage: boolean, homePage: boolean, noHeader: boolean, noFooter: boolean, noSideNavigation: boolean, fullWidthPage: 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 }, }; function Page(props: Props) { const { children, className, filePage = false, authPage = false, fullWidthPage = false, noHeader = false, noFooter = false, noSideNavigation = false, backout, } = props; const { location: { pathname }, } = useHistory(); const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', true); const isMediumScreen = useIsMediumScreen(); const isMobile = useIsMobile(); let isOnFilePage = false; try { const url = pathname.slice(1).replace(/:/g, '#'); const { isChannel } = parseURI(url); if (!isChannel) { isOnFilePage = true; } } catch (e) {} const isAbsoluteSideNavHidden = (isOnFilePage || isMobile) && !sidebarOpen; React.useEffect(() => { if (isOnFilePage || isMediumScreen) { setSidebarOpen(false); } }, [isOnFilePage, isMediumScreen]); return ( {!noHeader && (
)}
{!authPage && !noSideNavigation && ( )}
{children}
{/* @if TARGET='app' */} {/* @endif */}
{/* @if TARGET='web' */} {!noFooter &&