parsování xml a výpis xml

js/comments.js

@@ -0,0 +1,8 @@
+class Comment {
+  constructor(start, end, text, fulltext) {
+    this.start = start;
+    this.end = end;
+    this.text = text;
+    this.fulltext = fulltext;
+  }
+}

js/controller.js

@@ -13,16 +13,33 @@ class Controller {
     this.videoToLoad = urlParams.get("v");
 
     this.loadVideo(this.videoToLoad);
+    this.loadXml(this.videoToLoad);
+    this.view.drawCommentsText(this.model.comments);
+
+    this.view.videoPlayer.getVideoDuration().then(function(v) {
+      this.view.drawCommentsToVideo(this.model.comments, v);
+    }.bind(this))
   }
 
   loadVideo(v) {
     let video = document.getElementById("video");
 
-    console.log(video)
-
     video.children[0].src = "./videos/" + v + ".webm";
     video.load();
+  }
 
-    console.log("here");
+  loadXml(v) {
+    var Connect = new XMLHttpRequest();
+    // Define which file to open and
+    // send the request.
+    Connect.open("GET", "./videos/" + v + ".xml", false);
+    Connect.setRequestHeader("Content-Type", "text/xml");
+    Connect.send(null);
+    // Place the response in an XML document.
+    var TheDocument = Connect.responseText;
+    // Place the root node in an element.
+    // var Customers = TheDocument.childNodes[0];
+
+    this.model.parseXML(TheDocument);
   }
 }

js/model.js

@@ -1,3 +1,20 @@
 class Model {
   constructor() {}
+
+  parseXML(xml) {
+    let parser = new DOMParser();
+    let xmlDoc = parser.parseFromString(xml, "text/xml");
+
+    this.comments = [];
+
+    let comment = xmlDoc.getElementsByTagName("comment");
+    for (let i = 0; i < comment.length; i++) {
+      let start = comment[i].getElementsByTagName("start")[0].innerHTML;
+      let end = comment[i].getElementsByTagName("end")[0].innerHTML;
+      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));
+    }
+  }
 }

js/video.js

@@ -109,4 +109,7 @@ class VideoPlayer {
       playButton.style.display = "none";
     }
   }
+  async getVideoDuration() {
+    return Math.round(await this.video.duration);
+  }
 }

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