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"); this.loadVideo(videoToLoad).then( function () { video.addEventListener( "loadedmetadata", function () { this.view.videoPlayer.updateVideoDuration(); this.addEventListenersToVideoControls(); this.init(videoToLoad); }.bind(this) ); }.bind(this) ); } init(videoToLoad) { this.loadXml(videoToLoad).then( function (v) { this.view.drawCommentsText(v); 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", this.view.videoPlayer.skipAhead); document.addEventListener("keyup", function (e) { if (e.keyCode == 32) { this.view.videoPlayer.togglePlay(); } }.bind(this)); } async loadVideo(v) { let video = document.getElementById("video"); video.children[0].src = "./videos/" + v + ".webm"; await video.load(); } 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.view.activateComment(i); this.view.activateCommentText(this.model.comments[i].fulltext); return; } else { this.view.activateComment(null); this.view.activateCommentText(null); } } } }