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

share popup added to controlbar

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-11-19 16:34:48 +02:00
parent 36ed693e50
commit 4ab18b738a
2 changed files with 54 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,8 @@ class ControlBar extends Component {
this.state = {
time: -1,
volume: -1,
volumeSliderOpen: false
volumePopupOpen: false,
sharePopupOpen: false
};
}
@ -25,7 +26,8 @@ class ControlBar extends Component {
nextProps.volume !== this.props.volume ||
nextState.time !== this.state.time ||
nextState.volume !== this.state.volume ||
nextState.volumeSliderOpen !== this.state.volumeSliderOpen;
nextState.volumePopupOpen !== this.state.volumePopupOpen ||
nextState.sharePopupOpen !== this.state.sharePopupOpen;
}
componentWillUnmount() {
@ -77,12 +79,20 @@ class ControlBar extends Component {
this.props.paused ? this.props.play() : this.props.pause();
}
onVloumeSliderOpen = () => {
this.setState({ volumeSliderOpen: true });
onVolumePopupOpen = () => {
this.setState({ volumePopupOpen: true });
}
onVolumeSliderClose = () => {
this.setState({ volumeSliderOpen: false });
onVolumePopupClose = () => {
this.setState({ volumePopupOpen: false });
}
onSharePopupOpen = () => {
this.setState({ sharePopupOpen: true });
}
onSharePopupClose = () => {
this.setState({ sharePopupOpen: false });
}
formatTime = (time) => {
@ -119,10 +129,7 @@ class ControlBar extends Component {
return (
<div className={styles['button']} onClick={this.onPlayPauseButtonClicked}>
<Icon
className={styles['icon']}
icon={this.props.paused ? 'ic_play' : 'ic_pause'}
/>
<Icon className={styles['icon']} icon={this.props.paused ? 'ic_play' : 'ic_pause'} />
</div>
);
}
@ -154,17 +161,14 @@ class ControlBar extends Component {
'ic_volume3';
return (
<Popup onOpen={this.onVloumeSliderOpen} onClose={this.onVolumeSliderClose}>
<Popup onOpen={this.onVolumePopupOpen} onClose={this.onVolumePopupClose}>
<Popup.Label>
<div className={classnames(styles['button'], { [styles['active']]: this.state.volumeSliderOpen })}>
<Icon
className={styles['icon']}
icon={volumeIcon}
/>
<div className={classnames(styles['button'], { [styles['active']]: this.state.volumePopupOpen })}>
<Icon className={styles['icon']} icon={volumeIcon} />
</div>
</Popup.Label>
<Popup.Menu>
<div className={styles['volume-slider-container']}>
<div className={classnames(styles['popup-container'], styles['volume-popup-container'])}>
<Slider
containerClassName={styles['volume-slider']}
thumbClassName={styles['volume-thumb']}
@ -182,6 +186,21 @@ class ControlBar extends Component {
);
}
renderShareButton() {
return (
<Popup onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
<Popup.Label>
<div className={classnames(styles['button'], { [styles['active']]: this.state.sharePopupOpen })}>
<Icon className={styles['icon']} icon={'ic_share'} />
</div>
</Popup.Label>
<Popup.Menu>
<div className={classnames(styles['popup-container'], styles['share-popup-container'])} />
</Popup.Menu>
</Popup>
);
}
render() {
return (
<div className={classnames(styles['control-bar-container'], this.props.className)}>
@ -192,6 +211,7 @@ class ControlBar extends Component {
{this.renderTimeLabel()}
<div className={styles['spacing']} />
{this.renderVolumeButton()}
{this.renderShareButton()}
</div>
</div>
);

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

@ -37,20 +37,28 @@
}
}
.volume-slider-container {
padding: ceil((@buttons-bar-height * 0.4)) 0;
width: @buttons-bar-height;
.popup-container {
border-width: 1px 1px 0px 1px;
.volume-slider {
width: floor((@buttons-bar-height * 0.4));
height: floor((@buttons-bar-height * 3));
&.volume-popup-container {
padding: ceil((@buttons-bar-height * 0.4)) 0;
width: @buttons-bar-height;
.volume-thumb {
.volume-slider {
width: floor((@buttons-bar-height * 0.4));
height: floor((@buttons-bar-height * 0.4));
height: floor((@buttons-bar-height * 3));
.volume-thumb {
width: floor((@buttons-bar-height * 0.4));
height: floor((@buttons-bar-height * 0.4));
}
}
}
&.share-popup-container {
width: 300px;
height: 180px;
}
}
.control-bar-container {
@ -116,7 +124,7 @@
}
}
.volume-slider-container {
.popup-container {
display: flex;
justify-content: center;
align-items: center;