pročištění kodu

js/controller.js

@@ -3,32 +3,75 @@ class Controller {
     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");
+    let videoToLoad = urlParams.get("v");
+    let video = document.getElementById("video");
 
-    this.loadVideo(this.videoToLoad);
-    this.loadXml(this.videoToLoad);
-    this.view.drawCommentsText(this.model.comments);
-
-    this.view.videoPlayer.getVideoDuration().then(function(v) {
-      this.view.drawCommentsToVideo(this.model.comments, v);
-    }.bind(this))
+    this.loadVideo(videoToLoad).then(
+      function () {
+        video.addEventListener(
+          "loadedmetadata",
+          function () {
+            this.view.videoPlayer.updateVideoDuration();
+            this.addEventListenersToVideoControls();
+            this.init(videoToLoad);
+          }.bind(this)
+        );
+      }.bind(this)
+    );
   }
 
-  loadVideo(v) {
+  init(videoToLoad) {
+    this.loadXml(videoToLoad).then(
+      function (v) {
+        this.view.drawCommentsText(v);
+        this.view.drawCommentsToVideo(v);
+      }.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();
+      }.bind(this)
+    );
+    video.addEventListener(
+      "ended",
+      function () {
+        this.view.videoPlayer.showButton();
+      }.bind(this)
+    );
+
+    const seek = document.getElementById("seek");
+    seek.addEventListener("input", this.view.videoPlayer.skipAhead);
+  }
+
+  async loadVideo(v) {
     let video = document.getElementById("video");
 
     video.children[0].src = "./videos/" + v + ".webm";
-    video.load();
+    await video.load();
   }
 
-  loadXml(v) {
+  async loadXml(v) {
     var Connect = new XMLHttpRequest();
     // Define which file to open and
     // send the request.
@@ -40,6 +83,6 @@ class Controller {
     // Place the root node in an element.
     // var Customers = TheDocument.childNodes[0];
 
-    this.model.parseXML(TheDocument);
+    return this.model.parseXML(TheDocument);
   }
 }