From 9d8acd5e0326afcd0c0166cc169123d7fea3b655 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= Date: Tue, 26 Jan 2021 23:01:39 +0100 Subject: [PATCH] =?UTF-8?q?pro=C4=8Di=C5=A1t=C4=9Bn=C3=AD=20kodu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 9 +++--- js/controller.js | 73 ++++++++++++++++++++++++++++++++++++++---------- js/model.js | 6 ++-- js/video.js | 45 +++-------------------------- js/view.js | 17 ++++++++--- 5 files changed, 84 insertions(+), 66 deletions(-) diff --git a/css/style.css b/css/style.css index aef7db2..6e16eed 100644 --- a/css/style.css +++ b/css/style.css @@ -136,7 +136,7 @@ article p:last-child { #video-progress { width: 80%; - margin-bottom: max(30px,3vh); + margin-bottom: max(30px, 3vh); position: relative; } @@ -185,12 +185,13 @@ progress::-moz-progress-bar { height: 0.5vh; min-height: 5px; z-index: 6; + cursor: pointer; } .videoComment:hover { height: 0.9vh; min-height: 9px; - margin-top: min(-2px ,-0.2vh); + margin-top: min(-2px, -0.2vh); } .videoComment:hover img { @@ -199,10 +200,10 @@ progress::-moz-progress-bar { .videoComment img { position: relative; - top: min(-35px,-1.5vh); + top: min(-35px, -1.5vh); left: 50%; min-width: 28px; width: 1vh; - margin-left: min(-14px,-0.5vh); + margin-left: min(-14px, -0.5vh); cursor: pointer; } diff --git a/js/controller.js b/js/controller.js index 70771d0..89ef6d2 100644 --- a/js/controller.js +++ b/js/controller.js @@ -3,32 +3,75 @@ class Controller { this.model = model; this.view = view; - this.init(); - } - - init() { // Get video code const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); - this.videoToLoad = urlParams.get("v"); + let videoToLoad = urlParams.get("v"); + let video = document.getElementById("video"); + + this.loadVideo(videoToLoad).then( + function () { + video.addEventListener( + "loadedmetadata", + function () { + this.view.videoPlayer.updateVideoDuration(); + this.addEventListenersToVideoControls(); + this.init(videoToLoad); + }.bind(this) + ); + }.bind(this) + ); + } + + init(videoToLoad) { + this.loadXml(videoToLoad).then( + function (v) { + this.view.drawCommentsText(v); + this.view.drawCommentsToVideo(v); + }.bind(this) + ); + } + + // Přidání listenerů + addEventListenersToVideoControls() { + const video = document.getElementById("video"); + const videoControls = document.getElementById("video-controls"); + const togleButton = document.getElementById("togglePlayIcon"); + videoControls.addEventListener( + "click", + function (e) { + if (e.target !== videoControls && e.target !== togleButton) { + return; + } + this.view.videoPlayer.togglePlay(); + }.bind(this) + ); - this.loadVideo(this.videoToLoad); - this.loadXml(this.videoToLoad); - this.view.drawCommentsText(this.model.comments); + video.addEventListener( + "timeupdate", + function () { + this.view.videoPlayer.updateProgress(); + }.bind(this) + ); + video.addEventListener( + "ended", + function () { + this.view.videoPlayer.showButton(); + }.bind(this) + ); - this.view.videoPlayer.getVideoDuration().then(function(v) { - this.view.drawCommentsToVideo(this.model.comments, v); - }.bind(this)) + const seek = document.getElementById("seek"); + seek.addEventListener("input", this.view.videoPlayer.skipAhead); } - loadVideo(v) { + async loadVideo(v) { let video = document.getElementById("video"); video.children[0].src = "./videos/" + v + ".webm"; - video.load(); + await video.load(); } - loadXml(v) { + async loadXml(v) { var Connect = new XMLHttpRequest(); // Define which file to open and // send the request. @@ -40,6 +83,6 @@ class Controller { // Place the root node in an element. // var Customers = TheDocument.childNodes[0]; - this.model.parseXML(TheDocument); + return this.model.parseXML(TheDocument); } } diff --git a/js/model.js b/js/model.js index edf79a4..2bb153a 100644 --- a/js/model.js +++ b/js/model.js @@ -5,7 +5,7 @@ class Model { let parser = new DOMParser(); let xmlDoc = parser.parseFromString(xml, "text/xml"); - this.comments = []; + let comments = []; let comment = xmlDoc.getElementsByTagName("comment"); for (let i = 0; i < comment.length; i++) { @@ -14,7 +14,9 @@ class Model { let text = comment[i].getElementsByTagName("text")[0].innerHTML; let fulltext = comment[i].getElementsByTagName("fulltext")[0].innerHTML; - this.comments.push(new Comment(start, end, text, fulltext)); + comments.push(new Comment(start, end, text, fulltext)); } + + return comments; } } diff --git a/js/video.js b/js/video.js index 7bf3474..0ef0ad3 100644 --- a/js/video.js +++ b/js/video.js @@ -2,18 +2,10 @@ class VideoPlayer { constructor() { this.video = document.getElementById("video"); - this.video.addEventListener( - "loadedmetadata", - function () { - this.init(); - }.bind(this) - ); - } - // Init - init() { this.enableCustomControls(); - this.addEventListeners(); + } + updateVideoDuration() { this.videoDuration = Math.round(this.video.duration); const seek = document.getElementById("seek"); @@ -22,36 +14,7 @@ class VideoPlayer { const progressBar = document.getElementById("progress-bar"); progressBar.setAttribute("max", this.videoDuration); } - // Přidání listenerů - addEventListeners() { - const videoControls = document.getElementById("video-controls"); - const togleButton = document.getElementById("togglePlayIcon"); - videoControls.addEventListener( - "click", - function (e) { - if (e.target !== videoControls && e.target !== togleButton) { - return; - } - this.togglePlay(); - }.bind(this) - ); - this.video.addEventListener( - "timeupdate", - function () { - this.updateProgress(); - }.bind(this) - ); - this.video.addEventListener( - "ended", - function () { - this.showButton(); - }.bind(this) - ); - - const seek = document.getElementById("seek"); - seek.addEventListener("input", this.skipAhead); - } enableCustomControls() { const video = document.getElementById("video"); const videoControls = document.getElementById("video-controls"); @@ -109,7 +72,7 @@ class VideoPlayer { playButton.style.display = "none"; } } - async getVideoDuration() { - return Math.round(await this.video.duration); + getVideoDuration() { + return Math.round(this.video.duration); } } diff --git a/js/view.js b/js/view.js index dcd5c64..55549f8 100644 --- a/js/view.js +++ b/js/view.js @@ -27,6 +27,7 @@ class View { for (let i = 0; i < comments.length; i++) { let comment = document.createElement("div"); comment.setAttribute("class", "comment"); + comment.setAttribute("id", "c" + i); let object = document.createElement("object"); object.setAttribute("class", "icon"); @@ -37,7 +38,14 @@ class View { let time = document.createElement("div"); time.setAttribute("class", "time"); - time.innerHTML = comments[i].start; + + var minutes = Math.floor(comments[i].start / 60); + var seconds = comments[i].start % 60; + + time.innerHTML = + minutes.toString().padStart(2, "0") + + ":" + + seconds.toString().padStart(2, "0");; comment.appendChild(time); @@ -51,16 +59,17 @@ class View { } } - drawCommentsToVideo(comments, lenght) { + drawCommentsToVideo(comments) { let videoProgress = document.getElementById("video-progress"); for (let i = 0; i < comments.length; i++) { let videoComment = document.createElement("div"); videoComment.setAttribute("class", "videoComment"); - let percentLeft = (comments[i].start / lenght) * 100; + let percentLeft = (comments[i].start / this.videoPlayer.videoDuration) * 100; videoComment.style.left = percentLeft + "%"; - let percentWidth = ((comments[i].end - comments[i].start) / lenght) * 100; + let percentWidth = ((comments[i].end - comments[i].start) / this.videoPlayer.videoDuration) * 100; videoComment.style.width = percentWidth + "%"; + videoComment.setAttribute("id", "v" + i); let img = document.createElement("img"); img.setAttribute("src", "./img/note.svg");