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(OptionMenu): improve code structure

Browse source
This commit is contained in:
Tim 2023-01-12 21:37:30 +01:00
parent 2d3d55c0bb
commit d5dc5a9cfc
5 changed files with 89 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/routes/Player/OptionsMenu/Option/Option.js Normal file
View file

@ -0,0 +1,32 @@
// 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 { Button } = require('stremio/common');
const styles = require('./styles');
const Option = ({ icon, label, playerId, disabled, onClick }) => {
const onButtonClick = React.useCallback(() => {
if (typeof onClick === 'function') {
onClick(playerId);
}
}, [onClick, playerId]);
return (
<Button className={classnames(styles['option-container'], { 'disabled': disabled })} disabled={disabled} onClick={onButtonClick}>
<Icon className={styles['icon']} icon={icon} />
<div className={styles['label']}>{ label }</div>
</Button>
);
};
Option.propTypes = {
icon: PropTypes.string,
label: PropTypes.string,
playerId: PropTypes.string,
disabled: PropTypes.bool,
onClick: PropTypes.func,
};
module.exports = Option;

5
src/routes/Player/OptionsMenu/Option/index.js Normal file
View file

@ -0,0 +1,5 @@
// Copyright (C) 2017-2022 Smart code 203358507
const Option = require('./Option');
module.exports = Option;

33
src/routes/Player/OptionsMenu/Option/styles.less Normal file
View file

@ -0,0 +1,33 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.option-container {
display: flex;
flex-direction: row;
align-items: center;
height: 4rem;
.icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
margin: 1.3rem;
fill: @color-surface-light5-90;
}
.label {
flex: 1;
max-height: 2.4em;
font-weight: 400;
color: @color-surface-light5-90;
}
&:hover {
background-color: @color-background-light2;
}
&:global(.disabled) {
opacity: 0.5;
}
}

54
src/routes/Player/OptionsMenu/OptionsMenu.js
View file

@ -3,9 +3,9 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const { Button, useToast } = require('stremio/common');
const { useToast } = require('stremio/common');
const { useServices } = require('stremio/services');
const Option = require('./Option');
const styles = require('./styles');
const OptionsMenu = ({ className, stream, playbackDevices }) => {
@ -71,22 +71,27 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
}, []);
return (
<div className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
<Button className={classnames(styles['option-container'], { 'disabled': stream === null })} disabled={stream === null} onClick={onCopyStreamButtonClick}>
<Icon className={styles['icon']} icon={'ic_link'} />
<div className={styles['label']}>Copy Stream Link</div>
</Button>
<Button className={classnames(styles['option-container'], { 'disabled': stream === null })} disabled={stream === null}onClick={onDownloadVideoButtonClick}>
<Icon className={styles['icon']} icon={'ic_downloads'} />
<div className={styles['label']}>Download Video</div>
</Button>
<Option
icon={'ic_link'}
label={'Copy Stream Link'}
disabled={stream === null}
onClick={onCopyStreamButtonClick}
/>
<Option
icon={'ic_downloads'}
label={'Download Video'}
disabled={stream === null}
onClick={onDownloadVideoButtonClick}
/>
{
!stream.infoHash && externalPlayers.map(({ id, name }) => (
<ExternalPlayerButton
<Option
key={id}
id={id}
name={name}
icon={'ic_vlc'}
label={`Play in ${name}`}
playerId={id}
disabled={stream === null}
onExternalPlayRequested={onExternalPlayRequested}
onClick={onExternalPlayRequested}
/>
))
}
@ -100,25 +105,4 @@ OptionsMenu.propTypes = {
playbackDevices: PropTypes.array
};
const ExternalPlayerButton = ({ id, name, disabled, onExternalPlayRequested }) => {
const onClick = React.useCallback(() => {
if (typeof onExternalPlayRequested === 'function') {
onExternalPlayRequested(id);
}
}, [onExternalPlayRequested, id]);
return (
<Button className={classnames(styles['option-container'], { 'disabled': disabled })} disabled={disabled} onClick={onClick}>
<Icon className={styles['icon']} icon={'ic_vlc'} />
<div className={styles['label']}>Play in {name}</div>
</Button>
);
};
ExternalPlayerButton.propTypes = {
id: PropTypes.string,
name: PropTypes.string,
disabled: PropTypes.bool,
onExternalPlayRequested: PropTypes.func,
};
module.exports = OptionsMenu;

34
src/routes/Player/OptionsMenu/styles.less
View file

@ -1,37 +1,3 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.options-menu-container {
width: 15rem;
.option-container {
display: flex;
flex-direction: row;
align-items: center;
height: 4rem;
.icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
margin: 1.3rem;
fill: @color-surface-light5-90;
}
.label {
flex: 1;
max-height: 2.4em;
font-weight: 400;
color: @color-surface-light5-90;
}
&:hover {
background-color: @color-background-light2;
}
&:global(.disabled) {
opacity: 0.5;
}
}
}