TVC/js/controller.js

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();
      }.bind(this)
    );
    video.addEventListener(
      "ended",
      function () {
        this.view.videoPlayer.showButton();
      }.bind(this)
    );

    const seek = document.getElementById("seek");
    seek.addEventListener("input", this.view.videoPlayer.skipAhead);
  }

  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);
  }
}