Added popups

js/controller.js

@@ -12,7 +12,8 @@ class Controller {
     if (videoToLoad != null && videoToLoad != "") {
       this.model.loadXml(videoToLoad).then(
         function (v) {
-          let comments = this.model.parseXML(v);
+          this.model.parseXML(v);
+          let comments = this.model.comments;
           let videoFileName = this.model.getVideoFileName(v);
           this.view.drawCommentTitles(comments);
           this.addEventListeners();
@@ -66,6 +67,7 @@ class Controller {
       function () {
         this.view.videoPlayer.updateProgress();
         this.getActiveComment();
+        this.getActivePopup();
       }.bind(this)
     );
     video.addEventListener(
@@ -152,7 +154,6 @@ class Controller {
 
       if (this.activeComment !== null) {
         this.view.activateComment(this.activeComment);
-        console.log(this.model.comments[this.activeComment].text.length);
 
         for (
           let i = 0;
@@ -167,4 +168,31 @@ class Controller {
     }
     this.lastActiveComment = this.activeComment;
   }
+
+  getActivePopup() {
+    const video = document.getElementById("video");
+    let currentTime = video.currentTime;
+
+    for (let i = 0; i < this.model.popups.length; i++) {
+      if (
+        currentTime >= this.model.popups[i].start &&
+        currentTime <= this.model.popups[i].end
+      ) {
+        this.activePopup = i;
+        break;
+      }
+      if (i == this.model.popups.length - 1) {
+        this.activePopup = null;
+      }
+    }
+
+    if (this.activePopup !== this.lastActivePopup) {
+      if (this.activePopup !== null) {
+        this.view.activatePopup(this.model.popups[this.activePopup].text);
+      } else {
+        this.view.activatePopup(null);
+      }
+    }
+    this.lastActivePopup = this.activePopup;
+  }
 }