simple control bar implemted

src/routes/Player/ControlBar/ControlBar.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Icon from 'stremio-icons/dom';
+import styles from './styles';
+
+class ControlBar extends Component {
+    onSeekRequested = (event) => {
+        this.props.seek(event.target.value);
+    }
+
+    render() {
+        return (
+            <div className={classnames(this.props.className, styles['root-container'])}>
+                <div className={styles['button']} onClick={this.props.paused ? this.props.play : this.props.pause}>
+                    <Icon
+                        className={styles['icon']}
+                        icon={this.props.paused ? 'ic_play' : 'ic_pause'}
+                    />
+                </div>
+                {
+                    this.props.time !== null && this.props.duration !== null
+                        ?
+                        <input
+                            className={styles['seek-bar']}
+                            type={'range'}
+                            step={1000}
+                            min={0}
+                            max={this.props.duration}
+                            value={this.props.time}
+                            onChange={this.onSeekRequested}
+                        />
+                        :
+                        null
+                }
+            </div>
+        );
+    }
+}
+
+ControlBar.propTypes = {
+    className: PropTypes.string,
+    paused: PropTypes.bool,
+    time: PropTypes.number,
+    duration: PropTypes.number,
+    volume: PropTypes.number,
+    play: PropTypes.func.isRequired,
+    pause: PropTypes.func.isRequired,
+    seek: PropTypes.func.isRequired
+};
+
+export default ControlBar;

src/routes/Player/ControlBar/index.js

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

src/routes/Player/ControlBar/styles.less

@@ -0,0 +1,34 @@
+@import 'stremio-colors';
+
+@control-bar-height: 56px;
+
+.root-container {
+    height: @control-bar-height;
+    top: initial !important;
+    display: flex;
+    flex-direction: row;
+    background-color: @colorprimlight60;
+
+    .button {
+        height: @control-bar-height;
+        width: @control-bar-height;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            background-color: @colorprim;
+        }
+
+        .icon {
+            width: 66%;
+            height: 66%;
+        }
+    }
+
+    .seek-bar {
+        flex: 1
+    }
+
+}

src/routes/Player/Player.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
+import classnames from 'classnames';
 import ReactHTMLVideo from './stremio-video/ReactHTMLVideo';
+import ControlBar from './ControlBar';
 import styles from './styles';
 
 class Player extends Component {
@@ -64,6 +66,18 @@ class Player extends Component {
         alert(error.message);
     }
 
+    play = () => {
+        this.video.dispatch('setProp', 'paused', false);
+    }
+
+    pause = () => {
+        this.video.dispatch('setProp', 'paused', true);
+    }
+
+    seek = (time) => {
+        this.video.dispatch('setProp', 'time', time);
+    }
+
     renderVideo() {
         if (this.state.videoComponent === null) {
             return null;
@@ -72,7 +86,7 @@ class Player extends Component {
         return (
             <this.state.videoComponent
                 ref={this.assignVideo}
-                className={styles['layer']}
+                className={classnames(styles['layer'], styles['video'])}
                 onPropChanged={this.onPropChanged}
                 onPropValue={this.onPropValue}
                 onEnded={this.onEnded}
@@ -82,10 +96,30 @@ class Player extends Component {
         );
     }
 
+    renderControlBar() {
+        if (this.state.videoComponent === null) {
+            return null;
+        }
+
+        return (
+            <ControlBar
+                className={styles['layer']}
+                paused={this.state.paused}
+                time={this.state.time}
+                duration={this.state.duration}
+                volume={this.state.volume}
+                play={this.play}
+                pause={this.pause}
+                seek={this.seek}
+            />
+        );
+    }
+
     render() {
         return (
             <div className={styles['root-container']}>
                 {this.renderVideo()}
+                {this.renderControlBar()}
             </div>
         );
     }

src/routes/Player/styles.less

@@ -8,7 +8,12 @@
         position: absolute;
         top: 0;
         left: 0;
-        width: 100%;
-        height: 100%;
+        right: 0;
+        bottom: 0;
+
+        &.video {
+            width: 100%;
+            height: 100%;
+        }
     }
 }