From c32b52e367ce9fcf1afa090bf9acd3ae4d83a6c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= <dz@pixx.cz>
Date: Wed, 27 Jan 2021 01:53:36 +0100
Subject: [PATCH] style for webkit browsers

---
 css/style.css    | 27 ++++++++++++++++++++++++++-
 js/controller.js | 11 ++++++++---
 js/video.js      |  2 +-
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6e16eed..e00c238 100644
--- a/css/style.css
+++ b/css/style.css
@@ -47,6 +47,10 @@ article {
   padding: 4vh 5vw 4vh 2vw;
   overflow-y: auto;
 }
+article img {
+  max-width: 100%;
+  max-height: 25vh;
+}
 
 article h1:first-child {
   margin-top: 0;
@@ -153,6 +157,14 @@ progress::-moz-progress-bar {
   background-color: #616161;
 }
 
+progress::-webkit-progress-value {
+  background-color: #616161;
+}
+
+progress::-webkit-progress-bar {
+  background-color: #616161;
+}
+
 .seek {
   position: absolute;
   appearance: none;
@@ -171,12 +183,25 @@ progress::-moz-progress-bar {
 
 .seek::-moz-range-thumb {
   background-color: #ffa800;
+  min-width: 24px;
   width: 2vh;
+  min-height: 24px;
   height: 2vh;
-  border-radius: 2vh;
+  border-radius: max(24px, 2vh);
   border: none;
 }
 
+.seek::-webkit-slider-thumb {
+  background-color: #ffa800;
+  min-width: 24px;
+  width: 2vh;
+  min-height: 24px;
+  height: 2vh;
+  border-radius: max(24px, 2vh);
+  border: none;
+  appearance: none;
+}
+
 .videoComment {
   position: absolute;
   background-color: #ffa800;
diff --git a/js/controller.js b/js/controller.js
index 3ce6db4..e08c5cc 100644
--- a/js/controller.js
+++ b/js/controller.js
@@ -63,6 +63,12 @@ class Controller {
 
     const seek = document.getElementById("seek");
     seek.addEventListener("input", this.view.videoPlayer.skipAhead);
+
+    document.addEventListener("keyup", function (e) {
+      if (e.keyCode == 32) {
+        this.view.videoPlayer.togglePlay();
+      }
+    }.bind(this));
   }
 
   async loadVideo(v) {
@@ -89,17 +95,16 @@ class Controller {
 
   getActiveComment() {
     const video = document.getElementById("video");
-    let currentTime = Math.round(video.currentTime);
+    let currentTime = video.currentTime;
 
     for (let i = 0; i < this.model.comments.length; i++) {
       if (
         currentTime > this.model.comments[i].start &&
         currentTime < this.model.comments[i].end
       ) {
-        console.log("active: " + i);
         this.view.activateComment(i);
         this.view.activateCommentText(this.model.comments[i].fulltext);
-        return
+        return;
       } else {
         this.view.activateComment(null);
         this.view.activateCommentText(null);
diff --git a/js/video.js b/js/video.js
index 0ef0ad3..f373ab8 100644
--- a/js/video.js
+++ b/js/video.js
@@ -28,7 +28,7 @@ class VideoPlayer {
   // Posouvání ve videu
   skipAhead() {
     const progressBar = document.getElementById("progress-bar");
-    video = document.getElementById("video");
+    const video = document.getElementById("video");
 
     let skipTo = this.value;