From dad87aab79d818144743cabc0e3d2c3b2eabcebf Mon Sep 17 00:00:00 2001
From: ThaUnknown <kapi.skowronek@gmail.com>
Date: Thu, 24 Sep 2020 21:31:23 +0200
Subject: [PATCH] player cleanup, fixes

---
 app/css/player.css      |  8 +++---
 app/index.html          | 58 ++++++++++++++++++-----------------------
 app/js/playerHandler.js |  6 ++---
 3 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/app/css/player.css b/app/css/player.css
index 68d74e6..20a2ea1 100644
--- a/app/css/player.css
+++ b/app/css/player.css
@@ -225,14 +225,14 @@ video::cue {
 }
 
 .controls input[type=range]::-webkit-slider-thumb {
-    height: 0px;
-    width: 0px;
+    height: 0;
+    width: 0;
     border-radius: 50%;
     background: var(--accent-color);
     cursor: pointer;
     -webkit-appearance: none;
-    margin-top: 1px;
-    transition: all .1s ease
+    margin-top: 2px;
+    transition: all .1s ease;
 }
 
 #nowPlayingDisplay {
diff --git a/app/index.html b/app/index.html
index 7684cae..084dbf6 100644
--- a/app/index.html
+++ b/app/index.html
@@ -132,41 +132,33 @@
                 </video>
                 <a href="#player" class="w-full h-full"></a>
                 <div class="player d-none flex-column justify-content-between w-full h-full">
-                    <div class="h-full w-full d-flex flex-column justify-content-between" id="ptoggle">
-                        <div class="stats row">
-                            <div id="nowPlayingDisplay" class="col ts">
-                            </div>
-                            <div class="d-flex col justify-content-center">
-                                <div class="d-flex">
-                                    <span class="material-icons">
-                                        people
-                                    </span>
-                                    <span class="ts" id="peers">-</span>
-                                </div>
-                                <div class="d-flex">
-                                    <span class="material-icons">
-                                        arrow_downward
-                                    </span>
-                                    <span class="ts" id="downSpeed">-</span>
-                                </div>
-                                <div class="d-flex">
-                                    <span class="material-icons">
-                                        arrow_upward
-                                    </span>
-                                    <span class="ts" id="upSpeed">-</span>
-                                </div>
-                            </div>
-                            <div class="col d-flex justify-content-end">
-                                <a id="dl">
-                                    <span class="material-icons">
-                                        get_app
-                                    </span>
-                                </a>
-                            </div>
+                    <div class="stats row">
+                        <div id="nowPlayingDisplay" class="col ts">
                         </div>
-                        <div id="buffering" class="align-self-center hidden">
+                        <div class="d-flex col justify-content-center">
+                            <span class="material-icons">
+                                people
+                            </span>
+                            <span class="ts" id="peers">-</span>
+                            <span class="material-icons">
+                                arrow_downward
+                            </span>
+                            <span class="ts" id="downSpeed">-</span>
+                            <span class="material-icons">
+                                arrow_upward
+                            </span>
+                            <span class="ts" id="upSpeed">-</span>
                         </div>
-                        <div>
+                        <div class="col d-flex justify-content-end">
+                            <a id="dl" class="material-icons">
+                                <span class="material-icons">
+                                    get_app
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                    <div id="ptoggle" class="h-full d-flex justify-content-center align-items-center">
+                        <div id="buffering" class="hidden">
                         </div>
                     </div>
                     <div class="controls d-flex">
diff --git a/app/js/playerHandler.js b/app/js/playerHandler.js
index 4878f5c..bfbebb5 100644
--- a/app/js/playerHandler.js
+++ b/app/js/playerHandler.js
@@ -227,9 +227,9 @@ function toTS(sec) {
 async function playVideo() {
     try {
         await video.play();
-        btnpp.innerHTML = "pause";
+        bpp.innerHTML = "pause";
     } catch (err) {
-        btnpp.innerHTML = "play_arrow";
+        bpp.innerHTML = "play_arrow";
     }
 }
 
@@ -237,7 +237,7 @@ function btnpp() {
     if (video.paused) {
         playVideo();
     } else {
-        btnpp.innerHTML = "play_arrow";
+        bpp.innerHTML = "play_arrow";
         video.pause();
     }
 }