You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.7 KiB
JavaScript
95 lines
2.7 KiB
JavaScript
class View {
|
|
constructor() {
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
//this.colorTogglePlaySVG();
|
|
|
|
this.videoPlayer = new VideoPlayer();
|
|
|
|
/* Obarvení aktivního komentáře - dát do special metody */
|
|
/* var mySVG = document.getElementsByClassName("activeIcon")[0];
|
|
var svgDoc;
|
|
mySVG.addEventListener(
|
|
"load",
|
|
function () {
|
|
svgDoc = mySVG.contentDocument;
|
|
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");
|
|
comment.setAttribute("id", "c" + i);
|
|
|
|
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");
|
|
|
|
var minutes = Math.floor(comments[i].start / 60);
|
|
var seconds = comments[i].start % 60;
|
|
|
|
time.innerHTML =
|
|
minutes.toString().padStart(2, "0") +
|
|
":" +
|
|
seconds.toString().padStart(2, "0");;
|
|
|
|
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) {
|
|
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 / this.videoPlayer.videoDuration) * 100;
|
|
videoComment.style.left = percentLeft + "%";
|
|
let percentWidth = ((comments[i].end - comments[i].start) / this.videoPlayer.videoDuration) * 100;
|
|
videoComment.style.width = percentWidth + "%";
|
|
videoComment.setAttribute("id", "v" + i);
|
|
|
|
let img = document.createElement("img");
|
|
img.setAttribute("src", "./img/note.svg");
|
|
videoComment.appendChild(img);
|
|
|
|
videoProgress.appendChild(videoComment);
|
|
}
|
|
}
|
|
|
|
/* colorTogglePlaySVG() {
|
|
var playSVG = document.getElementById("togglePlayIcon");
|
|
var svgDoc;
|
|
playSVG.addEventListener(
|
|
"load",
|
|
function () {
|
|
svgDoc = playSVG.contentDocument;
|
|
svgDoc.getElementById("path4").style.fill = "#ffa800";
|
|
},
|
|
false
|
|
);
|
|
} */
|
|
}
|