// @flow import * as ICONS from 'constants/icons'; import { SETTINGS } from 'lbry-redux'; import * as PAGES from 'constants/pages'; import React from 'react'; import { withRouter } from 'react-router'; import classnames from 'classnames'; import Button from 'component/button'; import WunderBar from 'component/wunderbar'; import Icon from 'component/common/icon'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import Tooltip from 'component/common/tooltip'; import NavigationButton from 'component/navigationButton'; import { LOGO_TITLE } from 'config'; import { useIsMobile } from 'effects/use-screensize'; import NotificationBubble from 'component/notificationBubble'; import NotificationHeaderButton from 'component/notificationHeaderButton'; import ChannelThumbnail from 'component/channelThumbnail'; // @if TARGET='app' import { remote } from 'electron'; import { IS_MAC } from 'component/app/view'; // @endif type Props = { user: ?User, balance: string, roundedBalance: number, history: { entities: {}[], goBack: () => void, goForward: () => void, index: number, length: number, location: { pathname: string }, push: string => void, replace: string => void, }, currentTheme: string, automaticDarkModeEnabled: boolean, setClientSetting: (string, boolean | string, ?boolean) => void, hideBalance: boolean, email: ?string, authenticated: boolean, authHeader: 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 }, syncError: ?string, emailToVerify?: string, signOut: () => void, openChannelCreate: () => void, openSignOutModal: () => void, clearEmailEntry: () => void, clearPasswordEntry: () => void, hasNavigated: boolean, sidebarOpen: boolean, setSidebarOpen: boolean => void, isAbsoluteSideNavHidden: boolean, hideCancel: boolean, myChannels: ?Array, commentChannel: string, }; const Header = (props: Props) => { const { roundedBalance, history, setClientSetting, currentTheme, automaticDarkModeEnabled, hideBalance, email, authenticated, authHeader, signOut, syncError, openSignOutModal, clearEmailEntry, clearPasswordEntry, emailToVerify, backout, sidebarOpen, setSidebarOpen, isAbsoluteSideNavHidden, user, hideCancel, myChannels, commentChannel, } = props; const isMobile = useIsMobile(); // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY); const isSignUpPage = history.location.pathname.includes(PAGES.AUTH); const isSignInPage = history.location.pathname.includes(PAGES.AUTH_SIGNIN); const isPwdResetPage = history.location.pathname.includes(PAGES.AUTH_PASSWORD_RESET); const hasBackout = Boolean(backout); const { backLabel, backNavDefault, title: backTitle, simpleTitle: simpleBackTitle } = backout || {}; const notificationsEnabled = (user && user.experimental_ui) || false; let channelUrl; let identityChannel; if (myChannels && myChannels.length >= 1) { if (myChannels.length === 1) { identityChannel = myChannels[0]; } else if (commentChannel) { identityChannel = myChannels.find(chan => chan.name === commentChannel); } else { identityChannel = myChannels[0]; } channelUrl = identityChannel && (identityChannel.permanent_url || identityChannel.canonical_url); } // Sign out if they click the "x" when they are on the password prompt const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' }; const homeButtonNavigationProps = isVerifyPage ? {} : authHeader ? authHeaderAction : { navigate: '/' }; const closeButtonNavigationProps = { onClick: () => { clearEmailEntry(); clearPasswordEntry(); if (syncError) { signOut(); } if (isSignInPage && !emailToVerify) { history.goBack(); } else if (isSignUpPage) { history.goBack(); } else if (isPwdResetPage) { history.goBack(); } else { history.push('/'); } }, }; function onBackout(e) { const { history, hasNavigated } = props; const { goBack, replace } = history; window.removeEventListener('popstate', onBackout); if (e.type !== 'popstate') { // if not initiated by pop (back button) if (hasNavigated && !backNavDefault) { goBack(); } else { replace(backNavDefault || `/`); } } } React.useEffect(() => { if (hasBackout) { window.addEventListener('popstate', onBackout); return () => window.removeEventListener('popstate', onBackout); } }, [hasBackout]); function handleThemeToggle() { if (automaticDarkModeEnabled) { setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false); } if (currentTheme === 'dark') { setClientSetting(SETTINGS.THEME, 'light', true); } else { setClientSetting(SETTINGS.THEME, 'dark', true); } } function getWalletTitle() { return hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance; } const loginButtons = (
); return (
{ remote.getCurrentWindow().maximize(); }} // @endif >
{!authHeader && backout ? (
) : ( <>
{!authHeader && ( )}
{!authHeader && !backout ? (
{(!IS_WEB || authenticated) && (
) : ( !isVerifyPage && !hideCancel && (
{/* Add an empty span here so we can use the same style as above */} {/* This pushes the close button to the right side */}
) )} )}
); }; type HeaderMenuButtonProps = { authenticated: boolean, notificationsEnabled: boolean, history: { push: string => void }, handleThemeToggle: string => void, currentTheme: string, channelUrl: ?string, openSignOutModal: () => void, email: ?string, signOut: () => void, }; function HeaderMenuButtons(props: HeaderMenuButtonProps) { const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme, channelUrl, openSignOutModal, email, signOut, } = props; return (
{(authenticated || !IS_WEB) && ( { e.stopPropagation(); }} // @endif > history.push(`/$/${PAGES.UPLOAD}`)}> {__('Upload')} history.push(`/$/${PAGES.CHANNEL_NEW}`)}> {__('New Channel')} )} {notificationsEnabled && } { e.stopPropagation(); }} // @endif > history.push(`/$/${PAGES.SETTINGS}`)}> {__('Settings')} history.push(`/$/${PAGES.HELP}`)}> {__('Help')} {currentTheme === 'light' ? __('Dark') : __('Light')} {(authenticated || !IS_WEB) && ( { e.stopPropagation(); }} // @endif > {channelUrl ? : } history.push(`/$/${PAGES.UPLOADS}`)}> {__('Uploads')} history.push(`/$/${PAGES.CHANNELS}`)}> {__('Channels')} history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}> {__('Creator Analytics')} history.push(`/$/${PAGES.REWARDS}`)}> {__('Rewards')} history.push(`/$/${PAGES.INVITE}`)}> {__('Invites')} {authenticated ? (
{__('Sign Out')}
{email}
) : !IS_WEB ? ( <> history.push(`/$/${PAGES.AUTH}`)}> {__('Sign Up')} history.push(`/$/${PAGES.AUTH_SIGNIN}`)}> {__('Sign In')} ) : null}
)}
); } export default withRouter(Header);