display comments from xml

master
David Zálešák 4 years ago
parent 9d8acd5e03
commit ffc9352f91

@ -51,6 +51,7 @@ class Controller {
"timeupdate", "timeupdate",
function () { function () {
this.view.videoPlayer.updateProgress(); this.view.videoPlayer.updateProgress();
this.getActiveComment();
}.bind(this) }.bind(this)
); );
video.addEventListener( video.addEventListener(
@ -85,4 +86,24 @@ class Controller {
return this.model.parseXML(TheDocument); 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);
}
}
}
} }

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

@ -45,7 +45,7 @@ class View {
time.innerHTML = time.innerHTML =
minutes.toString().padStart(2, "0") + minutes.toString().padStart(2, "0") +
":" + ":" +
seconds.toString().padStart(2, "0");; seconds.toString().padStart(2, "0");
comment.appendChild(time); comment.appendChild(time);
@ -65,9 +65,13 @@ class View {
for (let i = 0; i < comments.length; i++) { for (let i = 0; i < comments.length; i++) {
let videoComment = document.createElement("div"); let videoComment = document.createElement("div");
videoComment.setAttribute("class", "videoComment"); 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 + "%"; 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.style.width = percentWidth + "%";
videoComment.setAttribute("id", "v" + i); 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() { /* colorTogglePlaySVG() {
var playSVG = document.getElementById("togglePlayIcon"); var playSVG = document.getElementById("togglePlayIcon");
var svgDoc; var svgDoc;

Loading…
Cancel
Save