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

refactor popups in player's control bar to not use global classes

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-18 12:37:50 +02:00
parent ecb38d61c3
commit abb0aae464
4 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,6 +27,7 @@ class ControlBar extends Component {
shouldComponentUpdate(nextProps, nextState) {
return nextProps.className !== this.props.className ||
nextProps.popupClassName !== this.props.popupClassName ||
nextProps.paused !== this.props.paused ||
nextProps.time !== this.props.time ||
nextProps.duration !== this.props.duration ||
@ -94,7 +95,7 @@ class ControlBar extends Component {
renderShareButton() {
return (
<Popup className={'player-popup-container'} border={true} onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
<Popup className={classnames(styles['popup-container'], this.props.popupClassName)} border={true} onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
<Popup.Label>
<ControlBarButton
icon={'ic_share'}
@ -110,7 +111,7 @@ class ControlBar extends Component {
renderSubtitlesButton() {
return (
<Popup className={'player-popup-container'} border={true} onOpen={this.onSubtitlesPopupOpen} onClose={this.onSubtitlesPopupClose}>
<Popup className={classnames(styles['popup-container'], this.props.popupClassName)} border={true} onOpen={this.onSubtitlesPopupOpen} onClose={this.onSubtitlesPopupClose}>
<Popup.Label>
<ControlBarButton
icon={'ic_sub'}
@ -151,6 +152,7 @@ class ControlBar extends Component {
ControlBar.propTypes = {
className: PropTypes.string,
popupClassName: PropTypes.string,
paused: PropTypes.bool,
time: PropTypes.number,
duration: PropTypes.number,

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

@ -87,7 +87,7 @@
}
}
:global(.player-popup-container) {
.popup-container {
--border-color: var(--color-surfacelighter);
.popup-content {

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

@ -98,6 +98,7 @@ class Player extends Component {
return (
<ControlBar
className={classnames(styles['layer'], styles['control-bar-layer'])}
popupClassName={styles['control-bar-popup-container']}
paused={this.state.paused}
time={this.state.time}
duration={this.state.duration}

2
src/routes/Player/styles.less
View file

@ -1,4 +1,4 @@
.player-container, :global(.player-popup-container) {
.player-container, .control-bar-popup-container {
--control-bar-button-size: 60px;
}