cd2998d695
- Corrected flow definitions. - Properly differentiate between "not yet fetched" and "no membership" as "undefined" and "<empty string>", respectively. There are GUI elements that need to know the unfetched case.
84 lines
3.4 KiB
JavaScript
84 lines
3.4 KiB
JavaScript
// @flow
|
|
import 'scss/component/_header.scss';
|
|
|
|
import { ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS } from 'config';
|
|
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
|
|
import * as ICONS from 'constants/icons';
|
|
import * as PAGES from 'constants/pages';
|
|
import HeaderMenuLink from 'component/common/header-menu-link';
|
|
import Icon from 'component/common/icon';
|
|
import NotificationHeaderButton from 'component/headerNotificationButton';
|
|
import React from 'react';
|
|
import Tooltip from 'component/common/tooltip';
|
|
|
|
type HeaderMenuButtonProps = {
|
|
activeChannelStakedLevel: number,
|
|
authenticated: boolean,
|
|
automaticDarkModeEnabled: boolean,
|
|
currentTheme: string,
|
|
user: ?User,
|
|
handleThemeToggle: (boolean, string) => void,
|
|
doOpenModal: (string, {}) => void,
|
|
odyseeMembership: ?string,
|
|
};
|
|
|
|
export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
|
|
const { authenticated, automaticDarkModeEnabled, currentTheme, user, handleThemeToggle, odyseeMembership } = props;
|
|
|
|
const isOnMembershipPage = window.location.pathname === `/$/${PAGES.ODYSEE_MEMBERSHIP}`;
|
|
|
|
const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);
|
|
const livestreamEnabled = Boolean(ENABLE_NO_SOURCE_CLAIMS && user && !user.odysee_live_disabled);
|
|
|
|
const uploadProps = { requiresAuth: !authenticated };
|
|
|
|
return (
|
|
<div className="header__buttons">
|
|
<Menu>
|
|
<Tooltip title={__('Publish a file, or create a channel')}>
|
|
<MenuButton className="header__navigationItem--icon">
|
|
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
|
|
</MenuButton>
|
|
</Tooltip>
|
|
|
|
<MenuList className="menu__list--header">
|
|
<HeaderMenuLink {...uploadProps} page={PAGES.UPLOAD} icon={ICONS.PUBLISH} name={__('Upload')} />
|
|
<HeaderMenuLink {...uploadProps} page={PAGES.CHANNEL_NEW} icon={ICONS.CHANNEL} name={__('New Channel')} />
|
|
<HeaderMenuLink
|
|
{...uploadProps}
|
|
page={PAGES.YOUTUBE_SYNC}
|
|
icon={ICONS.YOUTUBE}
|
|
name={__('Sync YouTube Channel')}
|
|
/>
|
|
{livestreamEnabled && (
|
|
<HeaderMenuLink {...uploadProps} page={PAGES.LIVESTREAM} icon={ICONS.VIDEO} name={__('Go Live')} />
|
|
)}
|
|
</MenuList>
|
|
</Menu>
|
|
|
|
{notificationsEnabled && <NotificationHeaderButton />}
|
|
|
|
<Menu>
|
|
<Tooltip title={__('Settings')}>
|
|
<MenuButton className="header__navigationItem--icon">
|
|
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
|
|
</MenuButton>
|
|
</Tooltip>
|
|
|
|
<MenuList className="menu__list--header">
|
|
<HeaderMenuLink page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
|
|
{/* don't show upgrade button if on membership page or already have a membership */}
|
|
{!isOnMembershipPage && !odyseeMembership && (
|
|
<HeaderMenuLink page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
|
|
)}
|
|
<HeaderMenuLink page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
|
|
|
|
<MenuItem className="menu__link" onSelect={() => handleThemeToggle(automaticDarkModeEnabled, currentTheme)}>
|
|
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
|
|
{currentTheme === 'light' ? __('Dark') : __('Light')}
|
|
</MenuItem>
|
|
</MenuList>
|
|
</Menu>
|
|
</div>
|
|
);
|
|
}
|