From 14ac360ccddd3a2415fc2317d6aa140057aff050 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 12 Nov 2018 16:04:59 +0200
Subject: [PATCH] control bar styled like in the old design

---
 src/routes/Player/ControlBar/ControlBar.js |  3 +-
 src/routes/Player/ControlBar/styles.less   | 70 +++++++++++-----------
 2 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index a3aac3248..8c6e62340 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -41,6 +41,7 @@ class ControlBar extends PureComponent {
             window.removeEventListener('mousemove', mousemove);
             window.removeEventListener('mouseup', mouseup);
             document.body.style['pointer-events'] = 'initial';
+            document.documentElement.style.cursor = 'initial';
             currentTarget.classList.remove(styles['active']);
             const seekTime = this.calculateSeekTime(clientX, currentTarget);
             this.props.seek(seekTime);
@@ -50,6 +51,7 @@ class ControlBar extends PureComponent {
         window.addEventListener('mousemove', mousemove);
         window.addEventListener('mouseup', mouseup);
         document.body.style['pointer-events'] = 'none';
+        document.documentElement.style.cursor = 'pointer';
         currentTarget.classList.add(styles['active']);
         this.setState({ seekTime: this.calculateSeekTime(clientX, currentTarget) });
         this.resetSeekTime.cancel();
@@ -89,7 +91,6 @@ class ControlBar extends PureComponent {
     render() {
         return (
             <div className={classnames(this.props.className, styles['root-container'])}>
-                {this.renderPlayPauseButton()}
                 {this.renderSeekBar()}
                 {this.renderPlayPauseButton()}
             </div>
diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index d72dc4055..90558cd44 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -1,53 +1,35 @@
 @import 'stremio-colors';
 
-@control-bar-height: 52px;
+@control-bar-height: 68px;
+@seek-bar-height: 26px;
 
 .root-container {
     height: @control-bar-height;
     top: initial !important;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .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%;
-            fill: @colorwhite;
-        }
-    }
+    padding-left: 2%;
+    padding-right: 2%;
 
     .seek-bar {
-        height: round((@control-bar-height * 0.5));
-        flex: 1;
+        width: 100%;
+        height: @seek-bar-height;
         position: relative;
+        cursor: pointer;
 
         .seek-line {
             position: absolute;
-            z-index: 0;
             left: 0;
             right: 0;
-            top: round((@control-bar-height * 0.2));
-            height: round((@control-bar-height * 0.1));
-            background-color: @colorprim80;
+            top: round((@seek-bar-height * 0.4));
+            bottom: round((@seek-bar-height * 0.4));
+            z-index: 1;
+            background-color: @colorprim;
         }
 
         .thumb-container {
             position: absolute;
-            z-index: 1;
-            width: round((@control-bar-height * 0.5));
-            height: round((@control-bar-height * 0.5));
+            z-index: 2;
+            width: @seek-bar-height;
+            height: @seek-bar-height;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -57,8 +39,8 @@
             transition-duration: 0.06s;
 
             .thumb {
-                width: round((@control-bar-height * 0.4));
-                height: round((@control-bar-height * 0.4));
+                width: round((@seek-bar-height * 0.8));
+                height: round((@seek-bar-height * 0.8));
                 border-radius: 50%;
                 background-color: @colorprimlight;
             }
@@ -75,4 +57,24 @@
         }
     }
 
+    .button {
+        height: (@control-bar-height - @seek-bar-height);
+        width: (@control-bar-height - @seek-bar-height);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        .icon {
+            width: 70%;
+            height: 70%;
+            fill: @colorwhite80;
+        }
+
+        &:hover {
+            .icon {
+                fill: @colorwhite;
+            }
+        }
+    }
 }
\ No newline at end of file