display comments from xml

js/controller.js

@@ -51,6 +51,7 @@ class Controller {
       "timeupdate",
       function () {
         this.view.videoPlayer.updateProgress();
+        this.getActiveComment();
       }.bind(this)
     );
     video.addEventListener(
@@ -85,4 +86,24 @@ class Controller {
 
     return this.model.parseXML(TheDocument);
   }
+
+  getActiveComment() {
+    const video = document.getElementById("video");
+    let currentTime = Math.round(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
+      } else {
+        this.view.activateComment(null);
+        this.view.activateCommentText(null);
+      }
+    }
+  }
 }

js/model.js

@@ -5,7 +5,7 @@ class Model {
     let parser = new DOMParser();
     let xmlDoc = parser.parseFromString(xml, "text/xml");
 
-    let comments = [];
+    this.comments = [];
 
     let comment = xmlDoc.getElementsByTagName("comment");
     for (let i = 0; i < comment.length; i++) {
@@ -14,9 +14,9 @@ class Model {
       let text = comment[i].getElementsByTagName("text")[0].innerHTML;
       let fulltext = comment[i].getElementsByTagName("fulltext")[0].innerHTML;
 
-      comments.push(new Comment(start, end, text, fulltext));
+      this.comments.push(new Comment(start, end, text, fulltext));
     }
 
-    return comments;
+    return this.comments;
   }
 }

js/view.js

@@ -45,7 +45,7 @@ class View {
       time.innerHTML =
         minutes.toString().padStart(2, "0") +
         ":" +
-        seconds.toString().padStart(2, "0");;
+        seconds.toString().padStart(2, "0");
 
       comment.appendChild(time);
 
@@ -65,9 +65,13 @@ class View {
     for (let i = 0; i < comments.length; i++) {
       let videoComment = document.createElement("div");
       videoComment.setAttribute("class", "videoComment");
-      let percentLeft = (comments[i].start / this.videoPlayer.videoDuration) * 100;
+      let percentLeft =
+        (comments[i].start / this.videoPlayer.videoDuration) * 100;
       videoComment.style.left = percentLeft + "%";
-      let percentWidth = ((comments[i].end - comments[i].start) / this.videoPlayer.videoDuration) * 100;
+      let percentWidth =
+        ((comments[i].end - comments[i].start) /
+          this.videoPlayer.videoDuration) *
+        100;
       videoComment.style.width = percentWidth + "%";
       videoComment.setAttribute("id", "v" + i);
 
@@ -79,6 +83,32 @@ class View {
     }
   }
 
+  activateComment(id) {
+    if (id != null) {
+      let activeComment = document.getElementById("c" + id);
+      activeComment.classList.add("activeComment");
+
+      activeComment.firstChild.contentDocument.getElementById(
+        "path4"
+      ).style.fill = "#ffa800";
+    } else {
+      let comments = document.getElementsByClassName("comment");
+
+      for (let i = 0; i < comments.length; i++) {
+        comments[i].classList.remove("activeComment");
+        comments[i].firstChild.contentDocument.getElementById(
+          "path4"
+        ).style.fill = "#c1c1c1";
+      }
+    }
+  }
+
+  activateCommentText(text) {
+    let textArea = document.getElementsByTagName("article")[0];
+
+    textArea.innerHTML = text;
+  }
+
   /* colorTogglePlaySVG() {
     var playSVG = document.getElementById("togglePlayIcon");
     var svgDoc;