Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor player menus

Browse source
This commit is contained in:
nklhrstv 2020-03-31 18:19:39 +03:00
parent 1ccca352d6
commit 89be4e8d16
12 changed files with 120 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,33 +3,68 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const InfoMenuButton = require('./InfoMenuButton');
const MuteButton = require('./MuteButton');
const PlayPauseButton = require('./PlayPauseButton');
const SeekBar = require('./SeekBar');
const SubtitlesButton = require('./SubtitlesButton');
const VolumeSlider = require('./VolumeSlider');
const styles = require('./styles');
const ControlBar = ({
className,
infoAvailable,
paused,
time,
duration,
volume,
muted,
subtitlesTracks,
metaItem,
stream,
onPlayRequested,
onPauseRequested,
onMuteRequested,
onUnmuteRequested,
onVolumeChangeRequested,
onSeekRequested,
onToggleSubtitlesPicker,
onToggleSubtitlesMenu,
onToggleInfoMenu,
...props
}) => {
const onSubtitlesButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.subtitlesMenuClosePrevented = true;
}, []);
const onInfoButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.infoMenuClosePrevented = true;
}, []);
const onPlayPauseButtonClick = React.useCallback(() => {
if (paused) {
if (typeof onPlayRequested === 'function') {
onPlayRequested();
}
} else {
if (typeof onPauseRequested === 'function') {
onPauseRequested();
}
}
}, [paused, onPlayRequested, onPauseRequested]);
const onMuteButtonClick = React.useCallback(() => {
if (muted) {
if (typeof onUnmuteRequested === 'function') {
onUnmuteRequested();
}
} else {
if (typeof onMuteRequested === 'function') {
onMuteRequested();
}
}
}, [muted, onMuteRequested, onUnmuteRequested]);
const onSubtitlesButtonClick = React.useCallback(() => {
if (typeof onToggleSubtitlesMenu === 'function') {
onToggleSubtitlesMenu();
}
}, [onToggleSubtitlesMenu]);
const onInfoButtonClick = React.useCallback(() => {
if (typeof onToggleInfoMenu === 'function') {
onToggleInfoMenu();
}
}, [onToggleInfoMenu]);
return (
<div {...props} className={classnames(className, styles['control-bar-container'])}>
<SeekBar
@ -39,19 +74,21 @@ const ControlBar = ({
onSeekRequested={onSeekRequested}
/>
<div className={styles['control-bar-buttons-container']}>
<PlayPauseButton
className={styles['control-bar-button']}
paused={paused}
onPlayRequested={onPlayRequested}
onPauseRequested={onPauseRequested}
/>
<MuteButton
className={styles['control-bar-button']}
volume={volume}
muted={muted}
onMuteRequested={onMuteRequested}
onUnmuteRequested={onUnmuteRequested}
/>
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof paused !== 'boolean' })} title={paused ? 'Play' : 'Pause'} tabIndex={-1} onClick={onPlayPauseButtonClick}>
<Icon className={styles['icon']} icon={typeof paused !== 'boolean' || paused ? 'ic_play' : 'ic_pause'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof muted !== 'boolean' })} title={muted ? 'Unmute' : 'Mute'} tabIndex={-1} onClick={onMuteButtonClick}>
<Icon
className={styles['icon']}
icon={
(typeof muted === 'boolean' && muted) ? 'ic_volume0' :
(volume === null || isNaN(volume)) ? 'ic_volume3' :
volume < 30 ? 'ic_volume1' :
volume < 70 ? 'ic_volume2' :
'ic_volume3'
}
/>
</Button>
<VolumeSlider
className={styles['volume-slider']}
volume={volume}
@ -59,22 +96,19 @@ const ControlBar = ({
/>
<div className={styles['spacing']} />
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={'icon'} icon={'ic_network'} />
<Icon className={styles['icon']} icon={'ic_network'} />
</Button>
<InfoMenuButton
className={classnames(styles['control-bar-button'], { 'disabled': !infoAvailable })}
onToggleInfoMenu={onToggleInfoMenu}
/>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={'icon'} icon={'ic_cast'} />
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof metaItem !== 'object' || metaItem === null || typeof stream !== 'object' || stream === null })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
<Icon className={styles['icon']} icon={'ic_info'} />
</Button>
<SubtitlesButton
className={styles['control-bar-button']}
subtitlesTracks={subtitlesTracks}
onToggleSubtitlesPicker={onToggleSubtitlesPicker}
/>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={'icon'} icon={'ic_videos'} />
<Icon className={styles['icon']} icon={'ic_cast'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': !Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0 })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
<Icon className={styles['icon']} icon={'ic_sub'} />
</Button>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_videos'} />
</Button>
</div>
</div>
@ -83,21 +117,22 @@ const ControlBar = ({
ControlBar.propTypes = {
className: PropTypes.string,
infoAvailable: PropTypes.bool,
paused: PropTypes.any,
time: PropTypes.any,
duration: PropTypes.any,
volume: PropTypes.any,
muted: PropTypes.any,
subtitlesTracks: PropTypes.any,
onPlayRequested: PropTypes.any,
onPauseRequested: PropTypes.any,
onMuteRequested: PropTypes.any,
onUnmuteRequested: PropTypes.any,
onVolumeChangeRequested: PropTypes.any,
onSeekRequested: PropTypes.any,
onToggleSubtitlesPicker: PropTypes.any,
onToggleInfoMenu: PropTypes.any
paused: PropTypes.bool,
time: PropTypes.number,
duration: PropTypes.number,
volume: PropTypes.number,
muted: PropTypes.bool,
subtitlesTracks: PropTypes.array,
metaItem: PropTypes.object,
stream: PropTypes.object,
onPlayRequested: PropTypes.func,
onPauseRequested: PropTypes.func,
onMuteRequested: PropTypes.func,
onUnmuteRequested: PropTypes.func,
onVolumeChangeRequested: PropTypes.func,
onSeekRequested: PropTypes.func,
onToggleSubtitlesMenu: PropTypes.func,
onToggleInfoMenu: PropTypes.func
};
module.exports = ControlBar;

27
src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
View file

@ -1,27 +0,0 @@
const React = require('react');
const PropTypes = require('prop-types');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const InfoMenuButton = ({ className, onToggleInfoMenu }) => {
const onMouseDown = React.useCallback((event) => {
event.nativeEvent.infoMenuClosePrevented = true;
}, []);
const onClick = React.useCallback(() => {
if (typeof onToggleInfoMenu === 'function') {
onToggleInfoMenu();
}
}, [onToggleInfoMenu]);
return (
<Button className={className} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
<Icon className={'icon'} icon={'ic_info'} />
</Button>
);
};
InfoMenuButton.propTypes = {
className: PropTypes.string,
onToggleInfoMenu: PropTypes.func
};
module.exports = InfoMenuButton;

3
src/routes/Player/ControlBar/InfoMenuButton/index.js
View file

@ -1,3 +0,0 @@
const InfoMenuButton = require('./InfoMenuButton');
module.exports = InfoMenuButton;

39
src/routes/Player/ControlBar/MuteButton/MuteButton.js
View file

@ -1,39 +0,0 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const MuteButton = ({ className, muted, volume, onMuteRequested, onUnmuteRequested }) => {
const toggleMuted = React.useCallback(() => {
if (muted) {
if (typeof onUnmuteRequested === 'function') {
onUnmuteRequested();
}
} else {
if (typeof onMuteRequested === 'function') {
onMuteRequested();
}
}
}, [muted, onMuteRequested, onUnmuteRequested]);
const icon = (typeof muted === 'boolean' && muted) ? 'ic_volume0' :
(volume === null || isNaN(volume)) ? 'ic_volume3' :
volume < 30 ? 'ic_volume1' :
volume < 70 ? 'ic_volume2' :
'ic_volume3';
return (
<Button className={classnames(className, { 'disabled': typeof muted !== 'boolean' })} title={muted ? 'Unmute' : 'Mute'} tabIndex={-1} onClick={toggleMuted}>
<Icon className={'icon'} icon={icon} />
</Button>
);
};
MuteButton.propTypes = {
className: PropTypes.string,
muted: PropTypes.bool,
volume: PropTypes.number,
onMuteRequested: PropTypes.func,
onUnmuteRequested: PropTypes.func
};
module.exports = MuteButton;

3
src/routes/Player/ControlBar/MuteButton/index.js
View file

@ -1,3 +0,0 @@
const MuteButton = require('./MuteButton');
module.exports = MuteButton;

36
src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js
View file

@ -1,36 +0,0 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const PlayPauseButton = ({ className, paused, onPlayRequested, onPauseRequested }) => {
const togglePaused = React.useCallback(() => {
if (paused) {
if (typeof onPlayRequested === 'function') {
onPlayRequested();
}
} else {
if (typeof onPauseRequested === 'function') {
onPauseRequested();
}
}
}, [paused, onPlayRequested, onPauseRequested]);
return (
<Button className={classnames(className, { 'disabled': typeof paused !== 'boolean' })} title={paused ? 'Play' : 'Pause'} tabIndex={-1} onClick={togglePaused}>
<Icon
className={'icon'}
icon={typeof paused !== 'boolean' || paused ? 'ic_play' : 'ic_pause'}
/>
</Button>
);
};
PlayPauseButton.propTypes = {
className: PropTypes.string,
paused: PropTypes.bool,
onPlayRequested: PropTypes.func,
onPauseRequested: PropTypes.func
};
module.exports = PlayPauseButton;

3
src/routes/Player/ControlBar/PlayPauseButton/index.js
View file

@ -1,3 +0,0 @@
const PlayPauseButton = require('./PlayPauseButton');
module.exports = PlayPauseButton;

29
src/routes/Player/ControlBar/SubtitlesButton/SubtitlesButton.js
View file

@ -1,29 +0,0 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const SubtitlesButton = ({ className, subtitlesTracks, onToggleSubtitlesPicker }) => {
const onMouseDown = React.useCallback((event) => {
event.nativeEvent.subtitlesPickerClosePrevented = true;
}, []);
const onClick = React.useCallback(() => {
if (typeof onToggleSubtitlesPicker === 'function') {
onToggleSubtitlesPicker();
}
}, [onToggleSubtitlesPicker]);
return (
<Button className={classnames(className, { 'disabled': !Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0 })} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
<Icon className={'icon'} icon={'ic_sub'} />
</Button>
);
};
SubtitlesButton.propTypes = {
className: PropTypes.string,
subtitlesTracks: PropTypes.array,
onToggleSubtitlesPicker: PropTypes.func
};
module.exports = SubtitlesButton;

3
src/routes/Player/ControlBar/SubtitlesButton/index.js
View file

@ -1,3 +0,0 @@
const SubtitlesButton = require('./SubtitlesButton');
module.exports = SubtitlesButton;

4
src/routes/Player/ControlBar/styles.less
View file

@ -21,12 +21,12 @@
align-items: center;
&:global(.disabled) {
:global(.icon) {
.icon {
fill: @color-surface;
}
}
:global(.icon) {
.icon {
flex: none;
width: 3rem;
height: 2rem;

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

@ -18,17 +18,26 @@ const Player = ({ urlParams }) => {
const { core } = useServices();
const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams);
const [settings, updateSettings] = useSettings();
const stream = React.useMemo(() => {
return player.selected !== null ?
player.selected.stream
:
null;
}, [player]);
const metaItem = React.useMemo(() => {
return player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ?
player.meta_resource.content.content
:
null;
}, [player]);
const routeFocused = useRouteFocused();
const toast = useToast();
const [, , , toggleFullscreen] = useFullscreen();
const [immersed, setImmersed] = React.useState(true);
const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
const [subtitlesPickerOpen, , closeSubtitlesPicker, toggleSubtitlesPicker] = useBinaryState(false);
const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
const [error, setError] = React.useState(null);
const infoAvailable = React.useMemo(() => {
return player.meta_resource !== null && player.meta_resource.content.type === 'Ready';
}, [player]);
const [videoState, setVideoState] = React.useReducer(
(videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
{
@ -150,8 +159,8 @@ const Player = ({ urlParams }) => {
toggleFullscreen();
}, [toggleFullscreen]);
const onContainerMouseDown = React.useCallback((event) => {
if (!event.nativeEvent.subtitlesPickerClosePrevented) {
closeSubtitlesPicker();
if (!event.nativeEvent.subtitlesMenuClosePrevented) {
closeSubtitlesMenu();
}
if (!event.nativeEvent.infoMenuClosePrevented) {
closeInfoMenu();
@ -239,7 +248,7 @@ const Player = ({ urlParams }) => {
const onKeyDown = (event) => {
switch (event.code) {
case 'Space': {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.paused !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.paused !== null) {
if (videoState.paused) {
onPlayRequested();
} else {
@ -250,28 +259,28 @@ const Player = ({ urlParams }) => {
break;
}
case 'ArrowRight': {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.time !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
onSeekRequested(videoState.time + 15000);
}
break;
}
case 'ArrowLeft': {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.time !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
onSeekRequested(videoState.time - 15000);
}
break;
}
case 'ArrowUp': {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.volume !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume + 5);
}
break;
}
case 'ArrowDown': {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.volume !== null) {
if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume - 5);
}
@ -279,18 +288,22 @@ const Player = ({ urlParams }) => {
}
case 'KeyS': {
closeInfoMenu();
toggleSubtitlesPicker();
if (Array.isArray(videoState.subtitlesTracks) && videoState.subtitlesTracks.length > 0) {
toggleSubtitlesMenu();
}
break;
}
case 'KeyM': {
closeSubtitlesPicker();
if (infoAvailable) {
closeSubtitlesMenu();
if (typeof metaItem === 'object' && metaItem !== null && typeof stream === 'object' && stream !== null) {
toggleInfoMenu();
}
break;
}
case 'Escape': {
closeSubtitlesPicker();
closeSubtitlesMenu();
closeInfoMenu();
break;
}
@ -302,7 +315,7 @@ const Player = ({ urlParams }) => {
return () => {
window.removeEventListener('keydown', onKeyDown);
};
}, [routeFocused, subtitlesPickerOpen, infoAvailable, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleInfoMenu]);
}, [routeFocused, subtitlesMenuOpen, infoMenuOpen, stream, metaItem, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
React.useLayoutEffect(() => {
return () => {
setImmersedDebounced.cancel();
@ -311,7 +324,7 @@ const Player = ({ urlParams }) => {
};
}, []);
return (
<div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && videoState.paused !== null && !videoState.paused && !subtitlesPickerOpen && !infoMenuOpen })}
<div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && videoState.paused !== null && !videoState.paused && !subtitlesMenuOpen && !infoMenuOpen })}
onMouseDown={onContainerMouseDown}
onMouseMove={onContainerMouseMove}
onMouseOver={onContainerMouseMove}
@ -343,7 +356,7 @@ const Player = ({ urlParams }) => {
onDoubleClick={onVideoDoubleClick}
/>
{
subtitlesPickerOpen || infoMenuOpen ?
subtitlesMenuOpen || infoMenuOpen ?
<div className={styles['layer']} />
:
null
@ -370,20 +383,21 @@ const Player = ({ urlParams }) => {
volume={videoState.volume}
muted={videoState.muted}
subtitlesTracks={videoState.subtitlesTracks}
infoAvailable={infoAvailable}
stream={stream}
metaItem={metaItem}
onPlayRequested={onPlayRequested}
onPauseRequested={onPauseRequested}
onMuteRequested={onMuteRequested}
onUnmuteRequested={onUnmuteRequested}
onVolumeChangeRequested={onVolumeChangeRequested}
onSeekRequested={onSeekRequested}
onToggleSubtitlesPicker={toggleSubtitlesPicker}
onToggleSubtitlesMenu={toggleSubtitlesMenu}
onToggleInfoMenu={toggleInfoMenu}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
/>
{
subtitlesPickerOpen ?
subtitlesMenuOpen ?
<SubtitlesPicker
className={classnames(styles['layer'], styles['menu-layer'])}
tracks={videoState.subtitlesTracks}

2
src/routes/Player/SubtitlesPicker/SubtitlesPicker.js
View file

@ -51,7 +51,7 @@ const SubtitlesPicker = (props) => {
[];
}, [props.tracks, selectedLanguage]);
const onMouseDown = React.useCallback((event) => {
event.nativeEvent.subtitlesPickerClosePrevented = true;
event.nativeEvent.subtitlesMenuClosePrevented = true;
}, []);
const languageOnClick = React.useCallback((event) => {
const trackId = Array.isArray(props.tracks) ?