display comments from xml

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;