TimeSlider renamed to SeekBar

src/routes/Player/ControlBar/ControlBar.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Icon from 'stremio-icons/dom';
 import { Popup } from 'stremio-common';
-import TimeSlider from './TimeSlider';
+import SeekBar from './SeekBar';
 import VolumeSlider from './VolumeSlider';
 import SubtitlesPicker from './SubtitlesPicker';
 import styles from './styles';
@@ -66,6 +66,53 @@ class ControlBar extends Component {
         this.setState({ subtitlesPopupOpen: false });
     }
 
+    renderSeekBar() {
+        return (
+            <SeekBar
+                className={styles['seek-bar']}
+                time={this.props.time}
+                duration={this.props.duration}
+                setTime={this.setTime}
+            />
+        );
+    }
+
+    renderPlayPauseButton() {
+        if (this.props.paused === null) {
+            return null;
+        }
+
+        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>
+        );
+    }
+
+    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>
+        );
+    }
+
     renderShareButton() {
         return (
             <Popup className={styles['popup-container']} border={true} onOpen={this.onSharePopupOpen} onClose={this.onSharePopupClose}>
@@ -105,56 +152,17 @@ class ControlBar extends Component {
         );
     }
 
-    renderVolumeButton() {
-        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 (
-            <div className={styles['control-bar-button']} onClick={this.toogleVolumeMute}>
-                <Icon className={styles['icon']} icon={icon} />
-            </div>
-        );
-    }
-
-    renderPlayPauseButton() {
-        if (this.props.paused === null) {
-            return null;
-        }
-
-        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>
-        );
-    }
-
     render() {
-        if (['paused', 'time', 'duration', 'volume', 'subtitles'].every(propName => this.props[propName] === null)) {
+        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)}>
-                <TimeSlider
-                    className={styles['time-slider']}
-                    time={this.props.time}
-                    duration={this.props.duration}
-                    setTime={this.setTime}
-                />
+                {this.renderSeekBar()}
                 <div className={styles['control-bar-buttons-container']}>
                     {this.renderPlayPauseButton()}
-                    {this.renderVolumeButton()}
-                    <VolumeSlider
-                        className={styles['volume-slider']}
-                        volume={this.props.volume}
-                        setVolume={this.setVolume}
-                    />
+                    {this.renderVolumeBar()}
                     <div className={styles['flex-spacing']} />
                     {this.renderSubtitlesButton()}
                     {this.renderShareButton()}

src/routes/Player/ControlBar/SeekBar/SeekBar.js

@@ -5,7 +5,7 @@ import debounce from 'lodash.debounce';
 import { Slider } from 'stremio-common';
 import styles from './styles';
 
-class TimeSlider extends Component {
+class SeekBar extends Component {
     constructor(props) {
         super(props);
 
@@ -99,7 +99,7 @@ class TimeSlider extends Component {
         }
 
         return (
-            <div className={classnames(styles['time-slider-container'], { [styles['active']]: this.state.time !== null }, this.props.className)}>
+            <div className={classnames(styles['seek-bar-container'], { [styles['active']]: this.state.time !== null }, this.props.className)}>
                 {this.renderTimeLabel()}
                 {this.renderSlider()}
                 {this.renderDurationLabel()}
@@ -108,11 +108,11 @@ class TimeSlider extends Component {
     }
 }
 
-TimeSlider.propTypes = {
+SeekBar.propTypes = {
     className: PropTypes.string,
     time: PropTypes.number,
     duration: PropTypes.number,
     setTime: PropTypes.func.isRequired
 };
 
-export default TimeSlider;
+export default SeekBar;

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

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

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

@@ -1,20 +1,20 @@
-.time-slider-container {
+.seek-bar-container {
     display: flex;
     flex-direction: row;
     align-items: center;
 
     .label {
-        font-size: calc(var(--time-slider-thumb-size) * 0.7);
+        font-size: calc(var(--seek-bar-thumb-size) * 0.7);
         color: var(--color-surfacelight);
     }
 
     .slider {
-        --thumb-size: var(--time-slider-thumb-size);
+        --thumb-size: var(--seek-bar-thumb-size);
         --track-color: var(--color-primarydark);
         --thumb-color: var(--color-primary);
         --thumb-active-color: var(--color-primarylight);
         flex: 1;
-        margin: 0 var(--time-slider-thumb-size);
+        margin: 0 var(--seek-bar-thumb-size);
     }
 
     &:hover, &.active {

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

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

src/routes/Player/ControlBar/styles.less

@@ -9,9 +9,9 @@
     justify-content: flex-end;
     overflow: hidden;
 
-    .time-slider {
-        --time-slider-thumb-size: calc(var(--control-bar-button-height) * 0.4);
-        height: var(--time-slider-thumb-size);
+    .seek-bar {
+        --seek-bar-thumb-size: calc(var(--control-bar-button-height) * 0.4);
+        height: var(--seek-bar-thumb-size);
         width: 100%;
     }