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

sample InfoMenu component added

Browse source
This commit is contained in:
nklhrstv 2020-03-31 12:13:58 +03:00
parent 11ebfae747
commit 5c89856765
8 changed files with 66 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const MetaPreviewButton = require('./MetaPreviewButton');
const InfoMenuButton = require('./InfoMenuButton');
const MuteButton = require('./MuteButton');
const PlayPauseButton = require('./PlayPauseButton');
const SeekBar = require('./SeekBar');
@ -27,7 +27,7 @@ const ControlBar = ({
onVolumeChangeRequested,
onSeekRequested,
onToggleSubtitlesPicker,
onToggleMetaPreview,
onToggleInfoMenu,
...props
}) => {
return (
@ -61,10 +61,10 @@ const ControlBar = ({
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={'icon'} icon={'ic_network'} />
</Button>
<MetaPreviewButton
<InfoMenuButton
className={styles['control-bar-button']}
metaResource={metaResource}
onToggleMetaPreview={onToggleMetaPreview}
onToggleInfoMenu={onToggleInfoMenu}
/>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={'icon'} icon={'ic_cast'} />
@ -98,7 +98,7 @@ ControlBar.propTypes = {
onVolumeChangeRequested: PropTypes.any,
onSeekRequested: PropTypes.any,
onToggleSubtitlesPicker: PropTypes.any,
onToggleMetaPreview: PropTypes.any
onToggleInfoMenu: PropTypes.any
};
module.exports = ControlBar;

16
src/routes/Player/ControlBar/MetaPreviewButton/MetaPreviewButton.js → src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
View file

@ -4,15 +4,15 @@ const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const MetaPreviewButton = ({ className, metaResource, onToggleMetaPreview }) => {
const InfoMenuButton = ({ className, metaResource, onToggleInfoMenu }) => {
const onMouseDown = React.useCallback((event) => {
event.nativeEvent.metaPreviewClosePrevented = true;
event.nativeEvent.infoMenuClosePrevented = true;
}, []);
const onClick = React.useCallback(() => {
if (typeof onToggleMetaPreview === 'function') {
onToggleMetaPreview();
if (typeof onToggleInfoMenu === 'function') {
onToggleInfoMenu();
}
}, [onToggleMetaPreview]);
}, [onToggleInfoMenu]);
return (
<Button className={classnames(className, { 'disabled': metaResource === null || metaResource.content.type !== 'Ready' })} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
<Icon className={'icon'} icon={'ic_info'} />
@ -20,10 +20,10 @@ const MetaPreviewButton = ({ className, metaResource, onToggleMetaPreview }) =>
);
};
MetaPreviewButton.propTypes = {
InfoMenuButton.propTypes = {
className: PropTypes.string,
metaResource: PropTypes.object,
onToggleMetaPreview: PropTypes.func
onToggleInfoMenu: PropTypes.func
};
module.exports = MetaPreviewButton;
module.exports = InfoMenuButton;

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

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

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

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

22
src/routes/Player/InfoMenu/InfoMenu.js Normal file
View file

@ -0,0 +1,22 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const MetaPreview = require('stremio/common/MetaPreview');
const styles = require('./styles');
const InfoMenu = ({ className }) => {
const onMouseDown = React.useCallback((event) => {
event.nativeEvent.infoMenuClosePrevented = true;
}, []);
return (
<div className={classnames(className, styles['info-menu-container'])} onMouseDown={onMouseDown}>
<MetaPreview name={'Info menu name'} />
</div>
);
};
InfoMenu.propTypes = {
className: PropTypes.string,
};
module.exports = InfoMenu;

3
src/routes/Player/InfoMenu/index.js Normal file
View file

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

3
src/routes/Player/InfoMenu/styles.less Normal file
View file

@ -0,0 +1,3 @@
.info-menu-container {
}

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

@ -7,6 +7,7 @@ const { useServices } = require('stremio/services');
const { HorizontalNavBar, useDeepEqualEffect, useDeepEqualMemo, useFullscreen, useBinaryState, useToast } = require('stremio/common');
const BufferingLoader = require('./BufferingLoader');
const ControlBar = require('./ControlBar');
const InfoMenu = require('./InfoMenu');
const SubtitlesPicker = require('./SubtitlesPicker');
const Video = require('./Video');
const usePlayer = require('./usePlayer');
@ -23,7 +24,7 @@ const Player = ({ urlParams }) => {
const [immersed, setImmersed] = React.useState(true);
const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
const [subtitlesPickerOpen, , closeSubtitlesPicker, toggleSubtitlesPicker] = useBinaryState(false);
const [metaPreviewOpen, , closeMetaPreview, toggleMetaPreview] = useBinaryState(false);
const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
const [error, setError] = React.useState(null);
const [videoState, setVideoState] = React.useReducer(
(videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
@ -142,8 +143,8 @@ const Player = ({ urlParams }) => {
if (!event.nativeEvent.subtitlesPickerClosePrevented) {
closeSubtitlesPicker();
}
if (!event.nativeEvent.metaPreviewClosePrevented) {
closeMetaPreview();
if (!event.nativeEvent.infoMenuClosePrevented) {
closeInfoMenu();
}
}, []);
const onContainerMouseMove = React.useCallback((event) => {
@ -244,7 +245,7 @@ const Player = ({ urlParams }) => {
const onKeyDown = (event) => {
switch (event.code) {
case 'Space': {
if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.paused !== null) {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.paused !== null) {
if (videoState.paused) {
onPlayRequested();
} else {
@ -255,46 +256,46 @@ const Player = ({ urlParams }) => {
break;
}
case 'ArrowRight': {
if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.time !== null) {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.time !== null) {
onSeekRequested(videoState.time + 15000);
}
break;
}
case 'ArrowLeft': {
if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.time !== null) {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.time !== null) {
onSeekRequested(videoState.time - 15000);
}
break;
}
case 'ArrowUp': {
if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.volume !== null) {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume + 5);
}
break;
}
case 'ArrowDown': {
if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.volume !== null) {
if (!subtitlesPickerOpen && !infoMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume - 5);
}
break;
}
case 'KeyS': {
closeMetaPreview();
closeInfoMenu();
toggleSubtitlesPicker();
break;
}
case 'KeyM': {
closeSubtitlesPicker();
toggleMetaPreview();
toggleInfoMenu();
break;
}
case 'Escape': {
closeSubtitlesPicker();
closeMetaPreview();
closeInfoMenu();
break;
}
}
@ -305,14 +306,14 @@ const Player = ({ urlParams }) => {
return () => {
window.removeEventListener('keydown', onKeyDown);
};
}, [routeFocused, subtitlesPickerOpen, metaPreviewOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleMetaPreview]);
}, [routeFocused, subtitlesPickerOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleInfoMenu]);
React.useLayoutEffect(() => {
return () => {
setImmersedDebounced.cancel();
};
}, []);
return (
<div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && videoState.paused !== null && !videoState.paused && !subtitlesPickerOpen && !metaPreviewOpen })}
<div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && videoState.paused !== null && !videoState.paused && !subtitlesPickerOpen && !infoMenuOpen })}
onMouseDown={onContainerMouseDown}
onMouseMove={onContainerMouseMove}
onMouseOver={onContainerMouseMove}
@ -365,7 +366,7 @@ const Player = ({ urlParams }) => {
volume={videoState.volume}
muted={videoState.muted}
subtitlesTracks={videoState.subtitlesTracks}
metaResource={null}
metaResource={player.meta_resource}
onPlayRequested={onPlayRequested}
onPauseRequested={onPauseRequested}
onMuteRequested={onMuteRequested}
@ -373,7 +374,7 @@ const Player = ({ urlParams }) => {
onVolumeChangeRequested={onVolumeChangeRequested}
onSeekRequested={onSeekRequested}
onToggleSubtitlesPicker={toggleSubtitlesPicker}
onToggleMetaPreview={toggleMetaPreview}
onToggleInfoMenu={toggleInfoMenu}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
/>
@ -397,14 +398,14 @@ const Player = ({ urlParams }) => {
:
null
}
{/* {
metaPreviewOpen ?
<div className={classnames(styles['layer'], styles['menu-layer'])} onMouseDown={(event) => event.nativeEvent.metaPreviewClosePrevented = true}>
<div style={{ width: 300, height: 800, background: 'red' }} />
</div>
{
infoMenuOpen ?
<InfoMenu
className={classnames(styles['layer'], styles['menu-layer'])}
/>
:
null
} */}
}
</div>
);
};