TVC/js/view.js

class View {
  constructor() {
    this.init();
  }

  init() {
    //this.colorTogglePlaySVG();

    this.videoPlayer = new VideoPlayer();

    /* Obarvení aktivního komentáře - dát do special metody */
    /*     var mySVG = document.getElementsByClassName("activeIcon")[0];
    var svgDoc;
    mySVG.addEventListener(
      "load",
      function () {
        svgDoc = mySVG.contentDocument;
        svgDoc.getElementById("path4").style.fill = "#ffa800";
      },
      false
    ); */
  }

  drawCommentTitles(comments) {
    let aside = document.getElementsByTagName("aside")[0];

    for (let i = 0; i < comments.length; i++) {
      let comment = document.createElement("div");
      comment.setAttribute("class", "comment");
      comment.setAttribute("id", "c" + i);

      let object = document.createElement("object");
      object.setAttribute("class", "icon");
      object.setAttribute("data", "./img/closed-captioning.svg");
      object.setAttribute("type", "image/svg+xml");

      comment.appendChild(object);

      let time = document.createElement("div");
      time.setAttribute("class", "time");

      var minutes = Math.floor(comments[i].start / 60);
      var seconds = comments[i].start % 60;

      time.innerHTML =
        minutes.toString().padStart(2, "0") +
        ":" +
        seconds.toString().padStart(2, "0");

      comment.appendChild(time);

      let commentTitle = document.createElement("div");
      commentTitle.setAttribute("class", "commentText");
      commentTitle.innerHTML = comments[i].title;

      comment.appendChild(commentTitle);

      aside.appendChild(comment);

      comment.addEventListener(
        "click",
        function () {
          this.videoPlayer.skipAhead(comments[i].start);
        }.bind(this)
      );
    }
  }

  drawCommentsToVideo(comments) {
    let videoProgress = document.getElementById("video-progress");

    for (let i = 0; i < comments.length; i++) {
      let videoComment = document.createElement("div");
      videoComment.setAttribute("class", "videoComment");
      let percentLeft =
        (comments[i].start / this.videoPlayer.videoDuration) * 100;
      videoComment.style.left = percentLeft + "%";
      let percentWidth =
        ((comments[i].end - comments[i].start) /
          this.videoPlayer.videoDuration) *
        100;
      videoComment.style.width = percentWidth + "%";
      videoComment.setAttribute("id", "v" + i);

      let img = document.createElement("img");
      img.setAttribute("src", "./img/note.svg");
      videoComment.appendChild(img);

      videoProgress.appendChild(videoComment);

      videoComment.addEventListener(
        "click",
        function () {
          this.videoPlayer.skipAhead(comments[i].start);
        }.bind(this)
      );
    }
  }

  activateComment(id) {
    if (id != null) {
      let activeComment = document.getElementById("c" + id);
      activeComment.classList.add("activeComment");

      activeComment.firstChild.contentDocument.getElementById(
        "path4"
      ).style.fill = "#ffa800";
    } else {
      let comments = document.getElementsByClassName("comment");

      for (let i = 0; i < comments.length; i++) {
        comments[i].classList.remove("activeComment");
        comments[i].firstChild.contentDocument.getElementById(
          "path4"
        ).style.fill = "#c1c1c1";
      }
    }
  }

  activateCommentText(text) {
    let textArea = document.getElementsByTagName("article")[0];

    if (text == null) {
      textArea.innerHTML = text;
      return;
    }

    let div = document.createElement("div");
    div.innerHTML = text;
    textArea.append(div);
  }

  commentHover(c, active = true) {
    let svgDoc = c.contentDocument;

    if (active) {
      svgDoc.getElementById("path4").style.fill = "#ffa800";
    } else {
      svgDoc.getElementById("path4").style.fill = "#c1c1c1";
    }
  }
  /* colorTogglePlaySVG() {
    var playSVG = document.getElementById("togglePlayIcon");
    var svgDoc;
    playSVG.addEventListener(
      "load",
      function () {
        svgDoc = playSVG.contentDocument;
        svgDoc.getElementById("path4").style.fill = "#ffa800";
      },
      false
    );
  } */
}