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", function () { this.view.videoPlayer.skipAhead(seek.value); }.bind(this) ); 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.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); this.view.activateCommentText( this.model.comments[this.activeComment].fulltext ); } } this.lastActiveComment = this.activeComment; } }