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 ); } */ }