TVC/js/view.js

class View {
  constructor() {}

  createVideoPlayerObject() {
    this.videoPlayer = new VideoPlayer();
  }

  showAddVideo() {
    let body = document.getElementsByTagName("body")[0];
    let about = document.getElementById("about");
    let form = document.getElementById("form");
    let textInput = document.getElementById("textInput");
    let textArea = document.getElementById("textArea");

    about.classList.remove("hidden");
    form.classList.remove("hidden");
    textInput.classList.remove("hidden");
    body.style.gridTemplateRows = "20vh auto";

    var Connect = new XMLHttpRequest();
    // Define which file to open and
    // send the request.
    Connect.open("GET", "./videos/example.xml", false);
    Connect.setRequestHeader("Content-Type", "text/xml");
    Connect.send(null);
    // Place the response in an XML document.
    textArea.value = Connect.responseText;
  }

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