VolumeSlider refactored as a separate component

src/routes/Player/ControlBar/ControlBar.js

@@ -4,7 +4,7 @@ const classnames = require('classnames');
 const SeekBar = require('./SeekBar');
 const PlayPauseButton = require('./PlayPauseButton');
 const MuteButton = require('./MuteButton');
-const VolumeBar = require('./VolumeBar');
+const VolumeSlider = require('./VolumeSlider');
 const SubtitlesButton = require('./SubtitlesButton');
 const ShareButton = require('./ShareButton');
 const styles = require('./styles');
@@ -29,11 +29,9 @@ const ControlBar = (props) => (
                 muted={props.muted}
                 dispatch={props.dispatch}
             />
-            <VolumeBar
-                className={styles['volume-bar']}
-                buttonClassName={styles['control-bar-button']}
+            <VolumeSlider
+                className={styles['volume-slider']}
                 volume={props.volume}
-                muted={props.muted}
                 dispatch={props.dispatch}
             />
             <div className={styles['spacing']} />

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

@@ -1,3 +0,0 @@
-const VolumeBar = require('./VolumeBar');
-
-module.exports = VolumeBar;

src/routes/Player/ControlBar/VolumeBar/styles.less

@@ -1,23 +0,0 @@
-.volume-bar-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .slider {
-        --thumb-size: var(--volume-bar-thumb-size);
-        --track-size: var(--volume-bar-track-size);
-        --track-before-color: var(--color-primary);
-        --track-color: var(--color-backgroundlighter);
-        --thumb-color: transparent;
-        flex: 1;
-        align-self: stretch;
-        margin: 0 calc(var(--volume-bar-thumb-size) / 2);
-    }
-
-    &:hover, &:global(.active) {
-        .slider {
-            --track-before-color: var(--color-primarylight);
-            --thumb-color: var(--color-surfacelighter);
-        }
-    }
-}

src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js

@@ -2,11 +2,10 @@ 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 React.Component {
+class VolumeSlider extends React.Component {
     constructor(props) {
         super(props);
 
@@ -18,19 +17,13 @@ class VolumeBar extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
         return nextState.volume !== this.state.volume ||
             nextProps.className !== this.props.className ||
-            nextProps.buttonClassName !== this.props.buttonClassName ||
-            nextProps.volume !== this.props.volume ||
-            nextProps.muted !== this.props.muted;
+            nextProps.volume !== this.props.volume;
     }
 
     componentWillUnmount() {
         this.resetVolumeDebounced.cancel();
     }
 
-    toogleVolumeMute = () => {
-        this.props.dispatch('setProp', 'muted', !this.props.muted);
-    }
-
     resetVolumeDebounced = debounce(() => {
         this.setState({ volume: null });
     }, 100)
@@ -52,22 +45,11 @@ class VolumeBar extends React.Component {
     }
 
     render() {
-        if (this.props.volume === null) {
-            return null;
-        }
-
         const volume = this.state.volume !== null ? this.state.volume : this.props.volume;
-        const icon = (volume === 0 || this.props.muted) ? 'ic_volume0' :
-            volume < 30 ? 'ic_volume1' :
-                volume < 70 ? 'ic_volume2' :
-                    'ic_volume3';
         return (
-            <div className={classnames(styles['volume-bar-container'], { 'active': this.state.volume !== null }, this.props.className)}>
-                <div className={this.props.buttonClassName} onClick={this.toogleVolumeMute}>
-                    <Icon className={'icon'} icon={icon} />
-                </div>
+            <div className={classnames(this.props.className, styles['volume-slider-container'], { 'active': this.state.volume !== null })}>
                 <Slider
-                    className={styles['slider']}
+                    className={styles['volume-slider']}
                     value={volume}
                     minimumValue={0}
                     maximumValue={100}
@@ -81,12 +63,10 @@ class VolumeBar extends React.Component {
     }
 }
 
-VolumeBar.propTypes = {
+VolumeSlider.propTypes = {
     className: PropTypes.string,
-    buttonClassName: PropTypes.string,
     volume: PropTypes.number,
-    muted: PropTypes.bool,
     dispatch: PropTypes.func.isRequired
 };
 
-module.exports = VolumeBar;
+module.exports = VolumeSlider;

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

@@ -0,0 +1,3 @@
+const VolumeSlider = require('./VolumeSlider');
+
+module.exports = VolumeSlider;

src/routes/Player/ControlBar/VolumeSlider/styles.less

@@ -0,0 +1,24 @@
+.volume-slider-container {
+    padding: 0 calc(var(--thumb-size) / 2);
+
+    .volume-slider {
+        --thumb-size: var(--volume-slider-thumb-size);
+        --track-size: var(--volume-slider-track-size);
+        --track-before-color: var(--color-primary);
+        --track-color: var(--color-backgroundlighter);
+        --thumb-color: transparent;
+        width: 100%;
+        height: 100%;
+
+        &:global(.disabled) {
+            --track-color: var(--color-surfacedark);
+        }
+    }
+
+    &:hover, &:global(.active) {
+        .volume-slider {
+            --track-before-color: var(--color-primarylight);
+            --thumb-color: var(--color-surfacelighter);
+        }
+    }
+}

src/routes/Player/ControlBar/styles.less

@@ -57,19 +57,11 @@
             }
         }
 
-        .volume-bar {
-            --volume-bar-thumb-size: calc(var(--control-bar-button-size) * 0.36);
-            --volume-bar-track-size: calc(var(--control-bar-button-size) * 0.10);
+        .volume-slider {
+            --volume-slider-thumb-size: calc(var(--control-bar-button-size) * 0.36);
+            --volume-slider-track-size: calc(var(--control-bar-button-size) * 0.10);
+            width: calc(var(--control-bar-button-size) * 4);
             height: var(--control-bar-button-size);
-            width: calc(var(--control-bar-button-size) * 5);
-
-            &:hover, &:global(.active) {
-                .control-bar-button {
-                    :global(.icon) {
-                        fill: var(--color-surfacelighter);
-                    }
-                }
-            }
         }
 
         .spacing {