mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 06:32:11 +00:00
NavMenu wrapped with model suspender
This commit is contained in:
nklhrstv
parent
38210ef52b
commit
951a8c0fff
2 changed files with 99 additions and 76 deletions
|
|
@ -3,22 +3,14 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('@stremio/stremio-icons/dom');
|
||||
const { useRouteFocused } = require('stremio-router');
|
||||
const { useServices } = require('stremio/services');
|
||||
const Button = require('stremio/common/Button');
|
||||
const Popup = require('stremio/common/Popup');
|
||||
const useBinaryState = require('stremio/common/useBinaryState');
|
||||
const useFullscreen = require('stremio/common/useFullscreen');
|
||||
const useProfile = require('stremio/common/useProfile');
|
||||
const styles = require('./styles');
|
||||
const NavMenuContent = require('./NavMenuContent');
|
||||
|
||||
const NavMenu = (props) => {
|
||||
const { core } = useServices();
|
||||
const routeFocused = useRouteFocused();
|
||||
const profile = useProfile();
|
||||
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
|
||||
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
|
||||
const popupLabelOnClick = React.useCallback((event) => {
|
||||
if (!event.nativeEvent.togglePopupPrevented) {
|
||||
toggleMenu();
|
||||
|
|
@ -27,14 +19,6 @@ const NavMenu = (props) => {
|
|||
const popupMenuOnClick = React.useCallback((event) => {
|
||||
event.nativeEvent.togglePopupPrevented = true;
|
||||
}, []);
|
||||
const logoutButtonOnClick = React.useCallback(() => {
|
||||
core.transport.dispatch({
|
||||
action: 'Ctx',
|
||||
args: {
|
||||
action: 'Logout'
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
const renderLabel = React.useMemo(() => ({ ref, className, children }) => (
|
||||
props.renderLabel({
|
||||
ref,
|
||||
|
|
@ -44,65 +28,8 @@ const NavMenu = (props) => {
|
|||
})
|
||||
), [menuOpen, popupLabelOnClick, props.renderLabel]);
|
||||
const renderMenu = React.useCallback(() => (
|
||||
<div className={styles['nav-menu-container']} onClick={popupMenuOnClick}>
|
||||
<div className={styles['user-info-container']}>
|
||||
<div
|
||||
className={styles['avatar-container']}
|
||||
style={{
|
||||
backgroundImage: profile.auth === null ?
|
||||
`url('${require('/images/anonymous.png')}')`
|
||||
:
|
||||
`url('${profile.auth.user.avatar}'), url('${require('/images/default_avatar.png')}')`
|
||||
}}
|
||||
/>
|
||||
<div className={styles['email-container']}>
|
||||
<div className={styles['email-label']}>{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}</div>
|
||||
</div>
|
||||
<Button className={styles['logout-button-container']} title={profile.auth === null ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
|
||||
<div className={styles['logout-label']}>{profile.auth === null ? 'Log in / Sign up' : 'Log out'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
|
||||
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
|
||||
<div className={styles['nav-menu-option-label']}>{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Settings'} href={'#/settings'}>
|
||||
<Icon className={styles['icon']} icon={'ic_settings'} />
|
||||
<div className={styles['nav-menu-option-label']}>Settings</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Addons'} href={'#/addons'}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
<div className={styles['nav-menu-option-label']}>Addons</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Remote Control'} disabled={true}>
|
||||
<Icon className={styles['icon']} icon={'ic_remote'} />
|
||||
<div className={styles['nav-menu-option-label']}>Remote Control</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} disabled={true}>
|
||||
<Icon className={styles['icon']} icon={'ic_magnet'} />
|
||||
<div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Help & Feedback'} href={'https://stremio.zendesk.com/'} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={'ic_help'} />
|
||||
<div className={styles['nav-menu-option-label']}>Help & Feedback</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Terms of Service'} href={'https://www.stremio.com/tos'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>Terms of Service</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Privacy Policy'} href={'https://www.stremio.com/privacy'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>Privacy Policy</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'About Stremio'} href={'https://www.stremio.com/'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>About Stremio</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
), [profile, fullscreen]);
|
||||
<NavMenuContent onClick={popupMenuOnClick} />
|
||||
), []);
|
||||
React.useEffect(() => {
|
||||
if (!routeFocused) {
|
||||
closeMenu();
|
||||
|
|
|
|||
96
src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
Normal file
96
src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
// Copyright (C) 2017-2022 Smart code 203358507
|
||||
|
||||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('@stremio/stremio-icons/dom');
|
||||
const { useServices } = require('stremio/services');
|
||||
const Button = require('stremio/common/Button');
|
||||
const useFullscreen = require('stremio/common/useFullscreen');
|
||||
const useProfile = require('stremio/common/useProfile');
|
||||
const { withModelSuspender } = require('stremio/common/useModelState');
|
||||
const styles = require('./styles');
|
||||
|
||||
const NavMenuContent = ({ onClick }) => {
|
||||
const { core } = useServices();
|
||||
const profile = useProfile();
|
||||
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
|
||||
const logoutButtonOnClick = React.useCallback(() => {
|
||||
core.transport.dispatch({
|
||||
action: 'Ctx',
|
||||
args: {
|
||||
action: 'Logout'
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div className={classnames(styles['nav-menu-container'], 'animation-fade-in')} onClick={onClick}>
|
||||
<div className={styles['user-info-container']}>
|
||||
<div
|
||||
className={styles['avatar-container']}
|
||||
style={{
|
||||
backgroundImage: profile.auth === null ?
|
||||
`url('${require('/images/anonymous.png')}')`
|
||||
:
|
||||
`url('${profile.auth.user.avatar}'), url('${require('/images/default_avatar.png')}')`
|
||||
}}
|
||||
/>
|
||||
<div className={styles['email-container']}>
|
||||
<div className={styles['email-label']}>{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}</div>
|
||||
</div>
|
||||
<Button className={styles['logout-button-container']} title={profile.auth === null ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
|
||||
<div className={styles['logout-label']}>{profile.auth === null ? 'Log in / Sign up' : 'Log out'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
|
||||
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
|
||||
<div className={styles['nav-menu-option-label']}>{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Settings'} href={'#/settings'}>
|
||||
<Icon className={styles['icon']} icon={'ic_settings'} />
|
||||
<div className={styles['nav-menu-option-label']}>Settings</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Addons'} href={'#/addons'}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
<div className={styles['nav-menu-option-label']}>Addons</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Remote Control'} disabled={true}>
|
||||
<Icon className={styles['icon']} icon={'ic_remote'} />
|
||||
<div className={styles['nav-menu-option-label']}>Remote Control</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} disabled={true}>
|
||||
<Icon className={styles['icon']} icon={'ic_magnet'} />
|
||||
<div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Help & Feedback'} href={'https://stremio.zendesk.com/'} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={'ic_help'} />
|
||||
<div className={styles['nav-menu-option-label']}>Help & Feedback</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Terms of Service'} href={'https://www.stremio.com/tos'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>Terms of Service</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Privacy Policy'} href={'https://www.stremio.com/privacy'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>Privacy Policy</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'About Stremio'} href={'https://www.stremio.com/'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>About Stremio</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
NavMenuContent.propTypes = {
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
const NavMenuContentFallback = () => (
|
||||
<div className={styles['nav-menu-container']} />
|
||||
);
|
||||
|
||||
module.exports = withModelSuspender(NavMenuContent, NavMenuContentFallback);
|
||||
Loading…
Reference in a new issue