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.model.loadXml(videoToLoad).then(
        function (v) {
          this.model.parseXML(v);
          let comments = this.model.comments;
          let videoFileName = this.model.getVideoFileName(v);
          this.view.drawCommentTitles(comments);
          this.addEventListeners();
          this.loadVideo(videoFileName).then(
            function () {
              video.addEventListener(
                "loadedmetadata",
                function () {
                  this.view.videoPlayer.updateVideoDuration();
                  this.view.drawCommentsToVideo(comments);
                  this.addEventListenersToVideoControls();
                }.bind(this)
              );
            }.bind(this)
          );
        }.bind(this)
      );
    } else {
      this.view.showAddVideo();
      this.addEventListenersToAddVideo();
    }
  }

  addEventListenersToAddVideo() {
    let form = document.getElementById("form");
    form.addEventListener(
      "submit",
      function () {
        document.getElementById("xmlFile").value = this.view.editor.getValue();
      }.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();
        this.getActivePopup();
      }.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);
    video.append(source);

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

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

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

  getActivePopup() {
    const video = document.getElementById("video");
    let currentTime = video.currentTime;

    for (let i = 0; i < this.model.popups.length; i++) {
      if (
        currentTime >= this.model.popups[i].start &&
        currentTime <= this.model.popups[i].end
      ) {
        this.activePopup = i;
        break;
      }
      if (i == this.model.popups.length - 1) {
        this.activePopup = null;
      }
    }

    if (this.activePopup !== this.lastActivePopup) {
      if (this.activePopup !== null) {
        this.view.activatePopup(this.model.popups[this.activePopup].text);
      } else {
        this.view.activatePopup(null);
      }
    }
    this.lastActivePopup = this.activePopup;
  }
}