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;