class View { constructor() {} createVideoPlayerObject() { this.videoPlayer = new VideoPlayer(); } showAddVideo() { let body = document.getElementsByTagName("body")[0]; let about = document.getElementById("about"); let form = document.getElementById("form"); let textInput = document.getElementById("textInput"); let textArea = document.getElementById("textArea"); about.classList.remove("hidden"); form.classList.remove("hidden"); textInput.classList.remove("hidden"); body.style.gridTemplateRows = "20vh auto"; var Connect = new XMLHttpRequest(); // Define which file to open and // send the request. Connect.open("GET", "./videos/example.xml", false); Connect.setRequestHeader("Content-Type", "text/xml"); Connect.send(null); // Place the response in an XML document. var exampleText = document.createTextNode(Connect.responseText); textArea.append(exampleText); this.editor = ace.edit("textArea"); this.editor.setTheme("ace/theme/github"); this.editor.getSession().setMode("ace/mode/xml"); } drawCommentTitles(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 commentTitle = document.createElement("div"); commentTitle.setAttribute("class", "commentText"); commentTitle.innerHTML = comments[i].title; comment.appendChild(commentTitle); aside.appendChild(comment); comment.addEventListener( "click", function () { this.videoPlayer.skipAhead(comments[i].start); }.bind(this) ); } } 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); videoComment.addEventListener( "click", function () { this.videoPlayer.skipAhead(comments[i].start); }.bind(this) ); } } 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]; if (text == null) { textArea.innerHTML = text; return; } let div = document.createElement("div"); div.innerHTML = text; textArea.append(div); } commentHover(c, active = true) { let svgDoc = c.contentDocument; if (active) { svgDoc.getElementById("path4").style.fill = "#ffa800"; } else { svgDoc.getElementById("path4").style.fill = "#c1c1c1"; } } activatePopup(text) { let popArea = document.getElementById("popup"); if (text == null) { popArea.style.removeProperty("right"); setTimeout(function () { popArea.innerHTML = text; }, 300); return; } popArea.innerHTML = text; popArea.style.right = "0"; } /* colorTogglePlaySVG() { var playSVG = document.getElementById("togglePlayIcon"); var svgDoc; playSVG.addEventListener( "load", function () { svgDoc = playSVG.contentDocument; svgDoc.getElementById("path4").style.fill = "#ffa800"; }, false ); } */ }