|
|
|
@ -3,32 +3,75 @@ class Controller {
|
|
|
|
|
this.model = model;
|
|
|
|
|
this.view = view;
|
|
|
|
|
|
|
|
|
|
this.init();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
init() {
|
|
|
|
|
// Get video code
|
|
|
|
|
const queryString = window.location.search;
|
|
|
|
|
const urlParams = new URLSearchParams(queryString);
|
|
|
|
|
this.videoToLoad = urlParams.get("v");
|
|
|
|
|
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)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
this.loadVideo(this.videoToLoad);
|
|
|
|
|
this.loadXml(this.videoToLoad);
|
|
|
|
|
this.view.drawCommentsText(this.model.comments);
|
|
|
|
|
video.addEventListener(
|
|
|
|
|
"timeupdate",
|
|
|
|
|
function () {
|
|
|
|
|
this.view.videoPlayer.updateProgress();
|
|
|
|
|
}.bind(this)
|
|
|
|
|
);
|
|
|
|
|
video.addEventListener(
|
|
|
|
|
"ended",
|
|
|
|
|
function () {
|
|
|
|
|
this.view.videoPlayer.showButton();
|
|
|
|
|
}.bind(this)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
this.view.videoPlayer.getVideoDuration().then(function(v) {
|
|
|
|
|
this.view.drawCommentsToVideo(this.model.comments, v);
|
|
|
|
|
}.bind(this))
|
|
|
|
|
const seek = document.getElementById("seek");
|
|
|
|
|
seek.addEventListener("input", this.view.videoPlayer.skipAhead);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
loadVideo(v) {
|
|
|
|
|
async loadVideo(v) {
|
|
|
|
|
let video = document.getElementById("video");
|
|
|
|
|
|
|
|
|
|
video.children[0].src = "./videos/" + v + ".webm";
|
|
|
|
|
video.load();
|
|
|
|
|
await video.load();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
loadXml(v) {
|
|
|
|
|
async loadXml(v) {
|
|
|
|
|
var Connect = new XMLHttpRequest();
|
|
|
|
|
// Define which file to open and
|
|
|
|
|
// send the request.
|
|
|
|
@ -40,6 +83,6 @@ class Controller {
|
|
|
|
|
// Place the root node in an element.
|
|
|
|
|
// var Customers = TheDocument.childNodes[0];
|
|
|
|
|
|
|
|
|
|
this.model.parseXML(TheDocument);
|
|
|
|
|
return this.model.parseXML(TheDocument);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|