From 1bb91b3db838745abf4e4e636463c9b44445030e Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 19 Dec 2018 11:08:08 +0200
Subject: [PATCH] VolumeSlider combined with volume mute button in VolumeBar

---
 src/routes/Player/ControlBar/ControlBar.js    |  66 +++++------
 .../Player/ControlBar/VolumeBar/VolumeBar.js  | 109 ++++++++++++++++++
 .../Player/ControlBar/VolumeBar/index.js      |   3 +
 .../Player/ControlBar/VolumeBar/styles.less   |  15 +++
 .../ControlBar/VolumeSlider/VolumeSlider.js   |  74 ------------
 .../Player/ControlBar/VolumeSlider/index.js   |   3 -
 .../ControlBar/VolumeSlider/styles.less       |   8 --
 src/routes/Player/ControlBar/styles.less      |  10 +-
 8 files changed, 162 insertions(+), 126 deletions(-)
 create mode 100644 src/routes/Player/ControlBar/VolumeBar/VolumeBar.js
 create mode 100644 src/routes/Player/ControlBar/VolumeBar/index.js
 create mode 100644 src/routes/Player/ControlBar/VolumeBar/styles.less
 delete mode 100644 src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js
 delete mode 100644 src/routes/Player/ControlBar/VolumeSlider/index.js
 delete mode 100644 src/routes/Player/ControlBar/VolumeSlider/styles.less

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 8a5815f40..5691e2a39 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -1,13 +1,20 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Icon from 'stremio-icons/dom';
 import { Popup } from 'stremio-common';
 import SeekBar from './SeekBar';
-import VolumeSlider from './VolumeSlider';
+import VolumeBar from './VolumeBar';
 import SubtitlesPicker from './SubtitlesPicker';
 import styles from './styles';
 
+//TODO move this in separate file
+const ControlBarButton = React.forwardRef(({ active, icon, onClick }, ref) => (
+    <div ref={ref} className={classnames(styles['control-bar-button'], { [styles['active']]: active })} onClick={onClick}>
+        <Icon className={styles['icon']} icon={icon} />
+    </div>
+));
+
 class ControlBar extends Component {
     constructor(props) {
         super(props);
@@ -42,11 +49,15 @@ class ControlBar extends Component {
         this.props.setSelectedSubtitleTrackId(selectedSubtitleTrackId);
     }
 
-    toogleVolumeMute = () => {
-        this.props.volume === 0 ? this.props.unmute() : this.props.mute();
+    mute = () => {
+        this.props.mute();
     }
 
-    onPlayPauseButtonClick = () => {
+    unmute = () => {
+        this.props.unmute();
+    }
+
+    togglePaused = () => {
         this.props.paused ? this.props.play() : this.props.pause();
     }
 
@@ -84,32 +95,23 @@ class ControlBar extends Component {
 
         const icon = this.props.paused ? 'ic_play' : 'ic_pause';
         return (
-            <div className={styles['control-bar-button']} onClick={this.onPlayPauseButtonClick}>
-                <Icon className={styles['icon']} icon={icon} />
-            </div>
+            <ControlBarButton
+                icon={icon}
+                onClick={this.togglePaused}
+            />
         );
     }
 
     renderVolumeBar() {
-        if (this.props.volume === null) {
-            return null;
-        }
-
-        const icon = this.props.volume === 0 ? 'ic_volume0' :
-            this.props.volume < 50 ? 'ic_volume1' :
-                this.props.volume < 100 ? 'ic_volume2' :
-                    'ic_volume3';
         return (
-            <Fragment>
-                <div className={styles['control-bar-button']} onClick={this.toogleVolumeMute}>
-                    <Icon className={styles['icon']} icon={icon} />
-                </div>
-                <VolumeSlider
-                    className={styles['volume-slider']}
-                    volume={this.props.volume}
-                    setVolume={this.setVolume}
-                />
-            </Fragment>
+            <VolumeBar
+                className={styles['volume-bar']}
+                toggleButtonComponent={ControlBarButton}
+                volume={this.props.volume}
+                setVolume={this.setVolume}
+                mute={this.mute}
+                unmute={this.unmute}
+            />
         );
     }
 
@@ -117,9 +119,7 @@ class ControlBar extends Component {
         return (
             <Popup className={styles['popup-container']} border={true} onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
                 <Popup.Label>
-                    <div className={classnames(styles['control-bar-button'], { [styles['active']]: this.state.sharePopupOpen })}>
-                        <Icon className={styles['icon']} icon={'ic_share'} />
-                    </div>
+                    <ControlBarButton active={this.state.sharePopupOpen} icon={'ic_share'} />
                 </Popup.Label>
                 <Popup.Menu>
                     <div className={classnames(styles['popup-content'], styles['share-popup-content'])} />
@@ -136,9 +136,7 @@ class ControlBar extends Component {
         return (
             <Popup className={styles['popup-container']} border={true} onOpen={this.onSubtitlesPopupOpen} onClose={this.onSubtitlesPopupClose}>
                 <Popup.Label>
-                    <div className={classnames(styles['control-bar-button'], { [styles['active']]: this.state.subtitlesPopupOpen })}>
-                        <Icon className={styles['icon']} icon={'ic_sub'} />
-                    </div>
+                    <ControlBarButton active={this.state.subtitlesPopupOpen} icon={'ic_sub'} />
                 </Popup.Label>
                 <Popup.Menu>
                     <SubtitlesPicker
@@ -153,10 +151,6 @@ class ControlBar extends Component {
     }
 
     render() {
-        if (['paused', 'time', 'duration', 'volume', 'subtitleTracks'].every(propName => this.props[propName] === null)) {
-            return null;
-        }
-
         return (
             <div className={classnames(styles['control-bar-container'], this.props.className)}>
                 {this.renderSeekBar()}
diff --git a/src/routes/Player/ControlBar/VolumeBar/VolumeBar.js b/src/routes/Player/ControlBar/VolumeBar/VolumeBar.js
new file mode 100644
index 000000000..51e83382f
--- /dev/null
+++ b/src/routes/Player/ControlBar/VolumeBar/VolumeBar.js
@@ -0,0 +1,109 @@
+import React, { Component, Fragment } 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';
+
+class VolumeBar extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            volume: null
+        };
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.volume !== this.state.volume ||
+            nextProps.volume !== this.props.volume ||
+            nextProps.className !== this.props.className;
+    }
+
+    componentWillUnmount() {
+        this.resetVolumeDebounced.cancel();
+    }
+
+    toogleVolumeMute = () => {
+        this.props.volume === 0 ? this.props.unmute() : this.props.mute();
+    }
+
+    resetVolumeDebounced = debounce(() => {
+        this.setState({ volume: null });
+    }, 100)
+
+    onSlide = (volume) => {
+        this.resetVolumeDebounced.cancel();
+        this.setState({ volume });
+    }
+
+    onComplete = (volume) => {
+        this.resetVolumeDebounced();
+        this.setState({ volume });
+        this.props.setVolume(volume);
+    }
+
+    onCancel = () => {
+        this.resetVolumeDebounced.cancel();
+        this.setState({ volume: null });
+    }
+
+    render() {
+        if (this.props.volume === null) {
+            return null;
+        }
+
+        const volume = this.state.volume !== null ? this.state.volume : this.props.volume;
+        const icon = volume === 0 ? 'ic_volume0' :
+            volume < 30 ? 'ic_volume1' :
+                volume < 70 ? 'ic_volume2' :
+                    'ic_volume3';
+        return (
+            <div className={classnames(styles['volume-bar-container'], this.props.className)}>
+                {React.createElement(this.props.toggleButtonComponent, { icon, onClick: this.toogleVolumeMute }, null)}
+                <Slider
+                    className={styles['slider']}
+                    value={volume}
+                    minimumValue={0}
+                    maximumValue={100}
+                    orientation={'horizontal'}
+                    onSlide={this.onSlide}
+                    onComplete={this.onComplete}
+                    onCancel={this.onCancel}
+                />
+            </div>
+        );
+    }
+}
+
+VolumeBar.propTypes = {
+    className: PropTypes.string,
+    volume: PropTypes.number,
+    toggleButtonComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
+    setVolume: PropTypes.func.isRequired
+};
+
+export default VolumeBar;
+
+
+
+// if (this.props.volume === null) {
+//     return null;
+// }
+
+// const icon = this.props.volume === 0 ? 'ic_volume0' :
+//     this.props.volume < 50 ? 'ic_volume1' :
+//         this.props.volume < 100 ? 'ic_volume2' :
+//             'ic_volume3';
+// return (
+//     <Fragment>
+//         <div className={styles['control-bar-button']} onClick={this.toogleVolumeMute}>
+//             <Icon className={styles['icon']} icon={icon} />
+//         </div>
+//         <VolumeSlider
+//             className={styles['volume-slider']}
+//             volume={this.props.volume}
+//             setVolume={this.setVolume}
+//         />
+//     </Fragment>
+// );
\ No newline at end of file
diff --git a/src/routes/Player/ControlBar/VolumeBar/index.js b/src/routes/Player/ControlBar/VolumeBar/index.js
new file mode 100644
index 000000000..ebf5bde87
--- /dev/null
+++ b/src/routes/Player/ControlBar/VolumeBar/index.js
@@ -0,0 +1,3 @@
+import VolumeBar from './VolumeBar';
+
+export default VolumeBar;
diff --git a/src/routes/Player/ControlBar/VolumeBar/styles.less b/src/routes/Player/ControlBar/VolumeBar/styles.less
new file mode 100644
index 000000000..d4b33b3d9
--- /dev/null
+++ b/src/routes/Player/ControlBar/VolumeBar/styles.less
@@ -0,0 +1,15 @@
+.volume-bar-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .slider {
+        --thumb-size: var(--volume-bar-thumb-size);
+        --track-color: var(--color-surfacelight);
+        --thumb-color: var(--color-surfacelight);
+        --thumb-active-color: var(--color-surfacelighter);
+        --track-active-color: var(--color-surfacelighter);
+        flex: 1;
+        margin: 0 calc(var(--volume-slider-thumb-size) * 0.5);
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js
deleted file mode 100644
index 6f3b7c575..000000000
--- a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js
+++ /dev/null
@@ -1,74 +0,0 @@
-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';
-
-class VolumeSlider extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            volume: null
-        };
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return nextState.volume !== this.state.volume ||
-            nextProps.volume !== this.props.volume ||
-            nextProps.className !== this.props.className;
-    }
-
-    componentWillUnmount() {
-        this.resetVolumeDebounced.cancel();
-    }
-
-    resetVolumeDebounced = debounce(() => {
-        this.setState({ volume: null });
-    }, 100)
-
-    onSlide = (volume) => {
-        this.resetVolumeDebounced.cancel();
-        this.setState({ volume });
-    }
-
-    onComplete = (volume) => {
-        this.resetVolumeDebounced();
-        this.setState({ volume });
-        this.props.setVolume(volume);
-    }
-
-    onCancel = () => {
-        this.resetVolumeDebounced.cancel();
-        this.setState({ volume: null });
-    }
-
-    render() {
-        if (this.props.volume === null) {
-            return null;
-        }
-
-        const volume = this.state.volume !== null ? this.state.volume : this.props.volume;
-        return (
-            <Slider
-                className={classnames(styles['slider'], this.props.className)}
-                value={volume}
-                minimumValue={0}
-                maximumValue={100}
-                orientation={'horizontal'}
-                onSlide={this.onSlide}
-                onComplete={this.onComplete}
-                onCancel={this.onCancel}
-            />
-        );
-    }
-}
-
-VolumeSlider.propTypes = {
-    className: PropTypes.string,
-    volume: PropTypes.number,
-    setVolume: PropTypes.func.isRequired
-};
-
-export default VolumeSlider;
diff --git a/src/routes/Player/ControlBar/VolumeSlider/index.js b/src/routes/Player/ControlBar/VolumeSlider/index.js
deleted file mode 100644
index dbf4a9fba..000000000
--- a/src/routes/Player/ControlBar/VolumeSlider/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import VolumeSlider from './VolumeSlider';
-
-export default VolumeSlider;
diff --git a/src/routes/Player/ControlBar/VolumeSlider/styles.less b/src/routes/Player/ControlBar/VolumeSlider/styles.less
deleted file mode 100644
index 87dd2286e..000000000
--- a/src/routes/Player/ControlBar/VolumeSlider/styles.less
+++ /dev/null
@@ -1,8 +0,0 @@
-.slider {
-    --thumb-size: var(--volume-slider-thumb-size);
-    --track-color: var(--color-surfacelight);
-    --thumb-color: var(--color-surfacelight);
-    --thumb-active-color: var(--color-surfacelighter);
-    --track-active-color: var(--color-surfacelighter);
-    margin: 0 calc(var(--volume-slider-thumb-size) * 0.5);
-}
\ No newline at end of file
diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index 3b983da5a..4cf6c4a8d 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -52,10 +52,10 @@
             }
         }
 
-        .volume-slider {
-            --volume-slider-thumb-size: calc(var(--control-bar-button-height) * 0.3);
-            height: var(--volume-slider-thumb-size);
-            width: calc(var(--control-bar-button-height) * 3);
+        .volume-bar {
+            --volume-bar-thumb-size: calc(var(--control-bar-button-height) * 0.3);
+            height: var(--control-bar-button-height);
+            width: calc(var(--control-bar-button-height) * 4);
         }
 
         .flex-spacing {
@@ -69,7 +69,7 @@
         bottom: 0;
         left: 0;
         z-index: -1;
-        box-shadow: 0 0 calc(var(--control-bar-button-height) * 2) calc(var(--control-bar-button-height) * 2) var(--color-backgrounddarker);
+        box-shadow: 0 0 calc(var(--control-bar-button-height) * 2) calc(var(--control-bar-button-height) * 2.3) var(--color-backgrounddarker);
         content: "";
     }
 }