zprovoznění přehrávače

js/controller.js

@@ -1,9 +1,28 @@
 class Controller {
-  constructor() {
+  constructor(model, view) {
+    this.model = model;
+    this.view = view;
+
     this.init();
   }
 
   init() {
-    
+    // Get video code
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    this.videoToLoad = urlParams.get("v");
+
+    this.loadVideo(this.videoToLoad);
   }
-}
+
+  loadVideo(v) {
+    let video = document.getElementById("video");
+
+    console.log(video)
+
+    video.children[0].src = "./videos/" + v + ".webm";
+    video.load();
+
+    console.log("here");
+  }
+}

js/video.js

@@ -0,0 +1,112 @@
+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";
+    }
+  }
+}

js/view.js

@@ -4,8 +4,9 @@ class View {
   }
 
   init() {
-    this.colorTogglePlaySVG();
-    this.enableCustomControls();
+    //this.colorTogglePlaySVG();
+
+    this.videoPlayer = new VideoPlayer();
 
 
     /* Obarvení aktivního komentáře - dát do special metody */
@@ -21,19 +22,10 @@ class View {
     );
   }
 
-  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");
-    }
-  }
 
-  colorTogglePlaySVG() {
-    var playSVG = document.getElementById("togglePlay");
+  /* colorTogglePlaySVG() {
+    var playSVG = document.getElementById("togglePlayIcon");
     var svgDoc;
     playSVG.addEventListener(
       "load",
@@ -43,5 +35,5 @@ class View {
       },
       false
     );
-  }
+  } */
 }