pročištění kodu

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

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

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

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

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