horizontal volume slider extracted as a separate component

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

@@ -0,0 +1,74 @@
+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;

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

@@ -0,0 +1,3 @@
+import VolumeSlider from './VolumeSlider';
+
+export default VolumeSlider;

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

@@ -0,0 +1,8 @@
+.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);
+}