style for webkit browsers

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;

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);

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;