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

    if (videoToLoad != null && videoToLoad != "") {
      this.loadVideo(videoToLoad).then(
        function () {
          video.addEventListener(
            "loadedmetadata",
            function () {
              this.view.videoPlayer.updateVideoDuration();
              this.addEventListenersToVideoControls();
              this.init(videoToLoad);
            }.bind(this)
          );
        }.bind(this)
      );
    } else {
      this.view.showAddVideo();
    }
  }

  init(videoToLoad) {
    this.loadXml(videoToLoad).then(
      function (v) {
        this.view.drawCommentTitles(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)
    );

    const volume = document.getElementById("volume");
    volume.addEventListener("input", this.view.videoPlayer.updateVolume);

    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");
    let source = document.createElement("source");

    video.classList.remove("hidden");

    source.setAttribute("src", "./videos/" + v + ".webm");
    video.append(source);

    await video.load();
    this.view.createVideoPlayerObject();
  }

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