ControlBarButton component dropped

src/routes/Player/ControlBar/ControlBar.js

@@ -9,14 +9,6 @@ import VolumeBar from './VolumeBar';
 import SubtitlesPicker from './SubtitlesPicker';
 import styles from './styles';
 
-const ControlBarButton = React.forwardRef(({ icon, active, disabled, onClick }, ref) => (
-    <div ref={ref} className={classnames(styles['control-bar-button'], { 'active': active }, { 'disabled': disabled })} onClick={!disabled ? onClick : null}>
-        <Icon className={styles['icon']} icon={icon} />
-    </div>
-));
-
-ControlBarButton.displayName = 'ControlBarButton';
-
 class ControlBar extends Component {
     constructor(props) {
         super(props);
@@ -63,89 +55,56 @@ class ControlBar extends Component {
         this.setState({ subtitlesPopupOpen: false });
     }
 
-    renderSeekBar() {
-        return (
-            <SeekBar
-                className={styles['seek-bar']}
-                time={this.props.time}
-                duration={this.props.duration}
-                dispatch={this.dispatch}
-            />
-        );
-    }
-
-    renderPlayPauseButton() {
-        return (
-            <PlayPauseButton
-                toggleButtonComponent={ControlBarButton}
-                paused={this.props.paused}
-                dispatch={this.dispatch}
-            />
-        );
-    }
-
-    renderVolumeBar() {
-        return (
-            <VolumeBar
-                className={styles['volume-bar']}
-                toggleButtonComponent={ControlBarButton}
-                volume={this.props.volume}
-                dispatch={this.dispatch}
-            />
-        );
-    }
-
-    renderShareButton() {
-        return (
-            <Popup className={classnames(styles['popup-container'], this.props.popupClassName)} border={true} onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
-                <Popup.Label>
-                    <ControlBarButton
-                        icon={'ic_share'}
-                        active={this.state.sharePopupOpen}
-                    />
-                </Popup.Label>
-                <Popup.Menu>
-                    <div className={classnames(styles['popup-content'], styles['share-popup-content'])} />
-                </Popup.Menu>
-            </Popup>
-        );
-    }
-
-    renderSubtitlesButton() {
-        return (
-            <Popup className={classnames(styles['popup-container'], this.props.popupClassName)} border={true} onOpen={this.onSubtitlesPopupOpen} onClose={this.onSubtitlesPopupClose}>
-                <Popup.Label>
-                    <ControlBarButton
-                        icon={'ic_sub'}
-                        disabled={this.props.subtitleTracks.length === 0}
-                        active={this.state.subtitlesPopupOpen}
-                    />
-                </Popup.Label>
-                <Popup.Menu>
-                    <SubtitlesPicker
-                        className={classnames(styles['popup-content'], styles['subtitles-popup-content'])}
-                        subtitleTracks={this.props.subtitleTracks}
-                        selectedSubtitleTrackId={this.props.selectedSubtitleTrackId}
-                        subtitleSize={this.props.subtitleSize}
-                        subtitleDelay={this.props.subtitleDelay}
-                        subtitleDarkBackground={this.props.subtitleDarkBackground}
-                        dispatch={this.dispatch}
-                    />
-                </Popup.Menu>
-            </Popup >
-        );
-    }
-
     render() {
         return (
             <div className={classnames(styles['control-bar-container'], this.props.className)}>
-                {this.renderSeekBar()}
+                <SeekBar
+                    className={styles['seek-bar']}
+                    time={this.props.time}
+                    duration={this.props.duration}
+                    dispatch={this.dispatch}
+                />
                 <div className={styles['control-bar-buttons-container']}>
-                    {this.renderPlayPauseButton()}
-                    {this.renderVolumeBar()}
+                    <PlayPauseButton
+                        className={styles['control-bar-button']}
+                        paused={this.props.paused}
+                        dispatch={this.dispatch}
+                    />
+                    <VolumeBar
+                        className={styles['volume-bar']}
+                        buttonClassName={styles['control-bar-button']}
+                        volume={this.props.volume}
+                        dispatch={this.dispatch}
+                    />
                     <div className={styles['spacing']} />
-                    {this.renderSubtitlesButton()}
-                    {this.renderShareButton()}
+                    <Popup className={classnames(styles['popup-container'], this.props.popupClassName)} border={true} onOpen={this.onSubtitlesPopupOpen} onClose={this.onSubtitlesPopupClose}>
+                        <Popup.Label>
+                            <div className={classnames(styles['control-bar-button'], { 'active': this.state.subtitlesPopupOpen }, { 'disabled': this.props.subtitleTracks.length === 0 })}>
+                                <Icon className={'icon'} icon={'ic_sub'} />
+                            </div>
+                        </Popup.Label>
+                        <Popup.Menu>
+                            <SubtitlesPicker
+                                className={classnames(styles['popup-content'], styles['subtitles-popup-content'])}
+                                subtitleTracks={this.props.subtitleTracks}
+                                selectedSubtitleTrackId={this.props.selectedSubtitleTrackId}
+                                subtitleSize={this.props.subtitleSize}
+                                subtitleDelay={this.props.subtitleDelay}
+                                subtitleDarkBackground={this.props.subtitleDarkBackground}
+                                dispatch={this.dispatch}
+                            />
+                        </Popup.Menu>
+                    </Popup>
+                    <Popup className={classnames(styles['popup-container'], this.props.popupClassName)} border={true} onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
+                        <Popup.Label>
+                            <div className={classnames(styles['control-bar-button'], { 'active': this.state.sharePopupOpen })}>
+                                <Icon className={'icon'} icon={'ic_share'} />
+                            </div>
+                        </Popup.Label>
+                        <Popup.Menu>
+                            <div className={classnames(styles['popup-content'], styles['share-popup-content'])} />
+                        </Popup.Menu>
+                    </Popup>
                 </div>
             </div>
         );

src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js

@@ -1,10 +1,11 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+const React = require('react');
+const PropTypes = require('prop-types');
+const Icon = require('stremio-icons/dom');
 
-class PlayPauseButton extends Component {
+class PlayPauseButton extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
         return nextProps.paused !== this.props.paused ||
-            nextProps.toggleButtonComponent !== this.props.toggleButtonComponent;
+            nextProps.className !== this.props.className;
     }
 
     togglePaused = () => {
@@ -17,18 +18,18 @@ class PlayPauseButton extends Component {
         }
 
         const icon = this.props.paused ? 'ic_play' : 'ic_pause';
-        return React.createElement(this.props.toggleButtonComponent, { icon, onClick: this.togglePaused }, null);
+        return (
+            <div className={this.props.className} onClick={this.togglePaused}>
+                <Icon className={'icon'} icon={icon} />
+            </div>
+        );
     }
 }
 
 PlayPauseButton.propTypes = {
+    className: PropTypes.string,
     paused: PropTypes.bool,
-    dispatch: PropTypes.func.isRequired,
-    toggleButtonComponent: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.string,
-        PropTypes.shape({ render: PropTypes.func.isRequired }),
-    ]).isRequired
+    dispatch: PropTypes.func.isRequired
 };
 
-export default PlayPauseButton;
+module.exports = PlayPauseButton;

src/routes/Player/ControlBar/PlayPauseButton/index.js

@@ -1,3 +1,3 @@
-import PlayPauseButton from './PlayPauseButton';
+const PlayPauseButton = require('./PlayPauseButton');
 
-export default PlayPauseButton;
+module.exports = PlayPauseButton;

src/routes/Player/ControlBar/VolumeBar/VolumeBar.js

@@ -1,11 +1,12 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import debounce from 'lodash.debounce';
-import { Slider } from 'stremio-common';
-import styles from './styles';
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const debounce = require('lodash.debounce');
+const Icon = require('stremio-icons/dom');
+const { Slider } = require('stremio-common');
+const styles = require('./styles');
 
-class VolumeBar extends Component {
+class VolumeBar extends React.Component {
     constructor(props) {
         super(props);
 
@@ -17,8 +18,8 @@ class VolumeBar extends Component {
     shouldComponentUpdate(nextProps, nextState) {
         return nextState.volume !== this.state.volume ||
             nextProps.className !== this.props.className ||
-            nextProps.volume !== this.props.volume ||
-            nextProps.toggleButtonComponent !== this.props.toggleButtonComponent;
+            nextProps.buttonClassName !== this.props.buttonClassName ||
+            nextProps.volume !== this.props.volume;
     }
 
     componentWillUnmount() {
@@ -62,7 +63,9 @@ class VolumeBar extends Component {
                     'ic_volume3';
         return (
             <div className={classnames(styles['volume-bar-container'], { 'active': this.state.volume !== null }, this.props.className)}>
-                {React.createElement(this.props.toggleButtonComponent, { icon, onClick: this.toogleVolumeMute }, null)}
+                <div className={this.props.buttonClassName} onClick={this.toogleVolumeMute}>
+                    <Icon className={'icon'} icon={icon} />
+                </div>
                 <Slider
                     className={styles['slider']}
                     value={volume}
@@ -80,12 +83,8 @@ class VolumeBar extends Component {
 
 VolumeBar.propTypes = {
     className: PropTypes.string,
+    buttonClassName: PropTypes.string,
     volume: PropTypes.number,
-    toggleButtonComponent: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.string,
-        PropTypes.shape({ render: PropTypes.func.isRequired }),
-    ]).isRequired,
     dispatch: PropTypes.func.isRequired
 };
 

src/routes/Player/ControlBar/VolumeBar/index.js

@@ -1,3 +1,3 @@
-import VolumeBar from './VolumeBar';
+const VolumeBar = require('./VolumeBar');
 
-export default VolumeBar;
+module.exports = VolumeBar;

src/routes/Player/ControlBar/index.js

@@ -1,3 +1,3 @@
-import ControlBar from './ControlBar';
+const ControlBar = require('./ControlBar');
 
-export default ControlBar;
+module.exports = ControlBar;

src/routes/Player/ControlBar/styles.less

@@ -26,7 +26,7 @@
             align-items: center;
             cursor: pointer;
 
-            .icon {
+            :global(.icon) {
                 width: 60%;
                 height: 60%;
                 fill: var(--color-surfacelight);
@@ -36,7 +36,7 @@
             &:global(.active) {
                 background-color: var(--color-backgrounddarker);
 
-                .icon {
+                :global(.icon) {
                     fill: var(--color-surfacelighter);
                 }
             }
@@ -44,13 +44,13 @@
             &:global(.disabled) {
                 cursor: default;
 
-                .icon {
+                :global(.icon) {
                     fill: var(--color-surfacedark);
                 }
             }
 
             &:hover:not(:global(.disabled)) {
-                .icon {
+                :global(.icon) {
                     fill: var(--color-surfacelighter);
                 }
             }
@@ -64,7 +64,7 @@
 
             &:hover, &:global(.active) {
                 .control-bar-button {
-                    .icon {
+                    :global(.icon) {
                         fill: var(--color-surfacelighter);
                     }
                 }