TVC/js/video.js

class VideoPlayer {
  constructor() {
    this.video = document.getElementById("video");

    this.video.addEventListener(
      "loadedmetadata",
      function () {
        this.init();
      }.bind(this)
    );
  }
  // Init
  init() {
    this.enableCustomControls();
    this.addEventListeners();

    this.videoDuration = Math.round(this.video.duration);

    const seek = document.getElementById("seek");
    seek.setAttribute("max", this.videoDuration);
    seek.value = 0;
    const progressBar = document.getElementById("progress-bar");
    progressBar.setAttribute("max", this.videoDuration);
  }
  // Přidání listenerů
  addEventListeners() {
    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.togglePlay();
      }.bind(this)
    );

    this.video.addEventListener(
      "timeupdate",
      function () {
        this.updateProgress();
      }.bind(this)
    );
    this.video.addEventListener(
      "ended",
      function () {
        this.showButton();
      }.bind(this)
    );

    const seek = document.getElementById("seek");
    seek.addEventListener("input", this.skipAhead);
  }
  enableCustomControls() {
    const video = document.getElementById("video");
    const videoControls = document.getElementById("video-controls");

    const videoWorks = !!document.createElement("video").canPlayType;
    if (videoWorks) {
      video.controls = false;
      videoControls.classList.remove("hidden");
    }
  }
  // Posouvání ve videu
  skipAhead() {
    const progressBar = document.getElementById("progress-bar");
    video = document.getElementById("video");

    let skipTo = this.value;

    video.currentTime = skipTo;
    progressBar.value = skipTo;
  }
  // Aktualizování progress baru
  updateProgress() {
    const seek = document.getElementById("seek");
    const progressBar = document.getElementById("progress-bar");

    seek.value = Math.floor(this.video.currentTime);
    progressBar.value = Math.floor(this.video.currentTime);

    if (this.video.currentTime == this.videoDuration) {
      this.showButton();
      console.log("here");
    }
  }
  // Play pause
  togglePlay() {
    if (this.video.paused || this.video.ended) {
      this.video.play();
      this.showButton();
    } else {
      this.video.pause();
      this.showButton();
    }
  }
  // Zobrazenení a změna tlačítka k přehrávání
  showButton() {
    let playButton = document.getElementById("togglePlayIcon");

    if (this.video.ended) {
      playButton.setAttribute("src", "./img/play.svg");
      playButton.style.removeProperty("display");
    } else if (this.video.paused) {
      playButton.setAttribute("src", "./img/pause.svg");
      playButton.style.removeProperty("display");
    } else {
      playButton.style.display = "none";
    }
  }
}