- Nadpis velký
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sunt, quo incidunt modi nostrum harum. Deserunt accusamus doloribus numquam ut? Sequi et provident modi eveniet enim repellat error mollitia explicabo!
-
- Nadpis menší
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sunt animi veritatis.
-
- Nadpis nejmenší
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sunt animi veritatis.
-
+
diff --git a/js/comments.js b/js/comments.js
new file mode 100644
index 0000000..d1f39cd
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/js/controller.js b/js/controller.js
index 698634a..70771d0 100644
--- a/js/controller.js
+++ b/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();
+ }
+
+ 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];
- console.log("here");
+ this.model.parseXML(TheDocument);
}
}
diff --git a/js/model.js b/js/model.js
index 4d6f467..edf79a4 100644
--- a/js/model.js
+++ b/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));
+ }
+ }
}
diff --git a/js/video.js b/js/video.js
index 2d44c96..7bf3474 100644
--- a/js/video.js
+++ b/js/video.js
@@ -109,4 +109,7 @@ class VideoPlayer {
playButton.style.display = "none";
}
}
+ async getVideoDuration() {
+ return Math.round(await this.video.duration);
+ }
}
diff --git a/js/view.js b/js/view.js
index ba07588..dcd5c64 100644
--- a/js/view.js
+++ b/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");
diff --git a/videos/video.xml b/videos/video.xml
index e69de29..149c2af 100644
--- a/videos/video.xml
+++ b/videos/video.xml
@@ -0,0 +1,17 @@
+
+