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

InfoMenu availability handled

Browse source
This commit is contained in:
nklhrstv 2020-03-31 12:35:59 +03:00
parent ec2a27a72d
commit faf6f9914a
3 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,13 +13,13 @@ const styles = require('./styles');
const ControlBar = ({
className,
infoAvailable,
paused,
time,
duration,
volume,
muted,
subtitlesTracks,
metaResource,
onPlayRequested,
onPauseRequested,
onMuteRequested,
@ -62,8 +62,7 @@ const ControlBar = ({
<Icon className={'icon'} icon={'ic_network'} />
</Button>
<InfoMenuButton
className={styles['control-bar-button']}
metaResource={metaResource}
className={classnames(styles['control-bar-button'], { 'disabled': !infoAvailable })}
onToggleInfoMenu={onToggleInfoMenu}
/>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
@ -84,13 +83,13 @@ 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,
metaResource: PropTypes.any,
onPlayRequested: PropTypes.any,
onPauseRequested: PropTypes.any,
onMuteRequested: PropTypes.any,

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

@ -1,10 +1,9 @@
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 InfoMenuButton = ({ className, metaResource, onToggleInfoMenu }) => {
const InfoMenuButton = ({ className, onToggleInfoMenu }) => {
const onMouseDown = React.useCallback((event) => {
event.nativeEvent.infoMenuClosePrevented = true;
}, []);
@ -14,7 +13,7 @@ const InfoMenuButton = ({ className, metaResource, onToggleInfoMenu }) => {
}
}, [onToggleInfoMenu]);
return (
<Button className={classnames(className, { 'disabled': metaResource === null || metaResource.content.type !== 'Ready' })} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
<Button className={className} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
<Icon className={'icon'} icon={'ic_info'} />
</Button>
);
@ -22,7 +21,6 @@ const InfoMenuButton = ({ className, metaResource, onToggleInfoMenu }) => {
InfoMenuButton.propTypes = {
className: PropTypes.string,
metaResource: PropTypes.object,
onToggleInfoMenu: PropTypes.func
};

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

@ -26,6 +26,9 @@ const Player = ({ urlParams }) => {
const [subtitlesPickerOpen, , closeSubtitlesPicker, toggleSubtitlesPicker] = 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.meta_resource]);
const [videoState, setVideoState] = React.useReducer(
(videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
{
@ -290,7 +293,9 @@ const Player = ({ urlParams }) => {
}
case 'KeyM': {
closeSubtitlesPicker();
toggleInfoMenu();
if (infoAvailable) {
toggleInfoMenu();
}
break;
}
case 'Escape': {
@ -306,7 +311,7 @@ const Player = ({ urlParams }) => {
return () => {
window.removeEventListener('keydown', onKeyDown);
};
}, [routeFocused, subtitlesPickerOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleInfoMenu]);
}, [routeFocused, subtitlesPickerOpen, infoAvailable, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleInfoMenu]);
React.useLayoutEffect(() => {
return () => {
setImmersedDebounced.cancel();
@ -366,7 +371,7 @@ const Player = ({ urlParams }) => {
volume={videoState.volume}
muted={videoState.muted}
subtitlesTracks={videoState.subtitlesTracks}
metaResource={player.meta_resource}
infoAvailable={infoAvailable}
onPlayRequested={onPlayRequested}
onPauseRequested={onPauseRequested}
onMuteRequested={onMuteRequested}