Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 02:22:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(Context menu): Add context menu over nav, control bar and side drawer button

Browse source
This commit is contained in:
Botzy 2025-01-30 13:53:01 +02:00
parent e87048799f
commit 56d750c960
4 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
View file

@ -12,7 +12,7 @@ const NavMenu = require('./NavMenu');
const styles = require('./styles');
const { t } = require('i18next');
const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, onContextMenu, ...props }) => {
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
@ -25,7 +25,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
</Button>
), []);
return (
<nav {...props} className={classnames(className, styles['horizontal-nav-bar-container'])}>
<nav {...props} className={classnames(className, styles['horizontal-nav-bar-container'])} onContextMenu={onContextMenu}>
{
backButton ?
<Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
@ -82,7 +82,8 @@ HorizontalNavBar.propTypes = {
backButton: PropTypes.bool,
searchBar: PropTypes.bool,
fullscreenButton: PropTypes.bool,
navMenu: PropTypes.bool
navMenu: PropTypes.bool,
onContextMenu: PropTypes.func,
};
module.exports = HorizontalNavBar;

4
src/routes/Player/ControlBar/ControlBar.js
View file

@ -40,6 +40,7 @@ const ControlBar = ({
onToggleSideDrawer,
onToggleOptionsMenu,
onToggleStatisticsMenu,
onContextMenu,
...props
}) => {
const { chromecast } = useServices();
@ -103,7 +104,7 @@ const ControlBar = ({
};
}, []);
return (
<div {...props} className={classnames(className, styles['control-bar-container'])}>
<div {...props} className={classnames(className, styles['control-bar-container'])} onContextMenu={onContextMenu}>
<SeekBar
className={styles['seek-bar']}
time={time}
@ -205,6 +206,7 @@ ControlBar.propTypes = {
onToggleSideDrawer: PropTypes.func,
onToggleOptionsMenu: PropTypes.func,
onToggleStatisticsMenu: PropTypes.func,
onContextMenu: PropTypes.func,
};
module.exports = ControlBar;

4
src/routes/Player/Player.js
View file

@ -699,6 +699,7 @@ const Player = ({ urlParams, queryParams }) => {
menuRef={contextMenuRef}
style={
{
zIndex: 1,
top: `${contextCoords.y}px`,
left: `${contextCoords.x}px`,
right: 'auto',
@ -720,12 +721,14 @@ const Player = ({ urlParams, queryParams }) => {
fullscreenButton={true}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
onContextMenu={onContextMenu}
/>
{
player.metaItem?.type === 'Ready' ?
<SideDrawerButton
className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
onClick={toggleSideDrawer}
onContextMenu={onContextMenu}
/>
:
null
@ -760,6 +763,7 @@ const Player = ({ urlParams, queryParams }) => {
onToggleSideDrawer={toggleSideDrawer}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
onContextMenu={onContextMenu}
/>
{
nextVideoPopupOpen ?

5
src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
View file

@ -8,11 +8,12 @@ import styles from './SideDrawerButton.less';
type Props = {
className: string,
onClick: () => void,
onContextMenu: () => void,
};
const SideDrawerButton = ({ className, onClick }: Props) => {
const SideDrawerButton = ({ className, onClick, onContextMenu }: Props) => {
return (
<div className={classNames(className, styles['side-drawer-button'])} onClick={onClick}>
<div className={classNames(className, styles['side-drawer-button'])} onClick={onClick} onContextMenu={onContextMenu}>
<Icon name={'chevron-back'} className={styles['icon']} />
</div>
);