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.drawCommentTittles(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)
    );

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

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