parsování xml a výpis xml

js/view.js

@@ -8,9 +8,8 @@ class View {
 
     this.videoPlayer = new VideoPlayer();
 
-
     /* Obarvení aktivního komentáře - dát do special metody */
-    var mySVG = document.getElementsByClassName("activeIcon")[0];
+    /*     var mySVG = document.getElementsByClassName("activeIcon")[0];
     var svgDoc;
     mySVG.addEventListener(
       "load",
@@ -19,10 +18,57 @@ class View {
         svgDoc.getElementById("path4").style.fill = "#ffa800";
       },
       false
-    );
+    ); */
   }
 
+  drawCommentsText(comments) {
+    let aside = document.getElementsByTagName("aside")[0];
 
+    for (let i = 0; i < comments.length; i++) {
+      let comment = document.createElement("div");
+      comment.setAttribute("class", "comment");
+
+      let object = document.createElement("object");
+      object.setAttribute("class", "icon");
+      object.setAttribute("data", "./img/closed-captioning.svg");
+      object.setAttribute("type", "image/svg+xml");
+
+      comment.appendChild(object);
+
+      let time = document.createElement("div");
+      time.setAttribute("class", "time");
+      time.innerHTML = comments[i].start;
+
+      comment.appendChild(time);
+
+      let commentText = document.createElement("div");
+      commentText.setAttribute("class", "commentText");
+      commentText.innerHTML = comments[i].text;
+
+      comment.appendChild(commentText);
+
+      aside.appendChild(comment);
+    }
+  }
+
+  drawCommentsToVideo(comments, lenght) {
+    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;
+      videoComment.style.left = percentLeft + "%";
+      let percentWidth = ((comments[i].end - comments[i].start) / lenght) * 100;
+      videoComment.style.width = percentWidth + "%";
+
+      let img = document.createElement("img");
+      img.setAttribute("src", "./img/note.svg");
+      videoComment.appendChild(img);
+
+      videoProgress.appendChild(videoComment);
+    }
+  }
 
   /* colorTogglePlaySVG() {
     var playSVG = document.getElementById("togglePlayIcon");