class Controller { constructor(model, view) { this.model = model; this.view = view; // Get video code const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); let videoToLoad = urlParams.get("v"); let video = document.getElementById("video"); if (videoToLoad != null && videoToLoad != "") { this.loadVideo(videoToLoad).then( function () { video.addEventListener( "loadedmetadata", function () { this.view.videoPlayer.updateVideoDuration(); this.addEventListenersToVideoControls(); this.init(videoToLoad); }.bind(this) ); }.bind(this) ); } else { this.view.showAddVideo(); } } init(videoToLoad) { this.loadXml(videoToLoad).then( function (v) { this.view.drawCommentTitles(v); this.addEventListeners(); this.view.drawCommentsToVideo(v); }.bind(this) ); } // Přidání listenerů addEventListenersToVideoControls() { const video = document.getElementById("video"); const videoControls = document.getElementById("video-controls"); const togleButton = document.getElementById("togglePlayIcon"); videoControls.addEventListener( "click", function (e) { if (e.target !== videoControls && e.target !== togleButton) { return; } this.view.videoPlayer.togglePlay(); }.bind(this) ); video.addEventListener( "timeupdate", function () { this.view.videoPlayer.updateProgress(); this.getActiveComment(); }.bind(this) ); video.addEventListener( "ended", function () { this.view.videoPlayer.showButton(); }.bind(this) ); const seek = document.getElementById("seek"); seek.addEventListener( "input", function () { this.view.videoPlayer.skipAhead(seek.value); }.bind(this) ); const volume = document.getElementById("volume"); volume.addEventListener("input", this.view.videoPlayer.updateVolume); document.addEventListener( "keyup", function (e) { if (e.keyCode == 32) { this.view.videoPlayer.togglePlay(); } }.bind(this) ); } addEventListeners() { let comments = document.getElementsByClassName("comment"); for (let i = 0; i < comments.length; i++) { comments[i].addEventListener( "mouseover", function () { this.view.commentHover(comments[i].firstChild); }.bind(this) ); comments[i].addEventListener( "mouseout", function () { if (!comments[i].classList.contains("activeComment")) this.view.commentHover(comments[i].firstChild, false); }.bind(this) ); } } async loadVideo(v) { let video = document.getElementById("video"); let source = document.createElement("source"); video.classList.remove("hidden"); source.setAttribute("src", "./videos/" + v + ".webm"); video.append(source); await video.load(); this.view.createVideoPlayerObject(); } async 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]; return this.model.parseXML(TheDocument); } getActiveComment() { const video = document.getElementById("video"); let currentTime = 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 ) { this.activeComment = i; break; } if (i == this.model.comments.length - 1) { this.activeComment = null; } } if (this.activeComment !== this.lastActiveComment) { this.view.activateComment(null); this.view.activateCommentText(null); if (this.activeComment !== null) { this.view.activateComment(this.activeComment); console.log(this.model.comments[this.activeComment].text.length); for ( let i = 0; i < this.model.comments[this.activeComment].text.length; i++ ) { this.view.activateCommentText( this.model.comments[this.activeComment].text[i] ); } } } this.lastActiveComment = this.activeComment; } }