Added popups

css/style.css

@@ -9,6 +9,10 @@ html {
 
 * {
   box-sizing: border-box;
+  -webkit-user-select: none; /* Chrome all / Safari all */
+  -moz-user-select: none; /* Firefox all */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none;
 }
 
 body {
@@ -17,6 +21,7 @@ body {
   height: 100%;
   margin: 0;
   scrollbar-color: #969696 #d8d8d8;
+  overflow: hidden;
 
   display: grid;
   grid-template-columns: 25vw auto;
@@ -52,6 +57,12 @@ article {
   padding: 4vh 5vw 4vh 2vw;
   overflow-y: auto;
 }
+article * {
+  -webkit-user-select: text; /* Chrome all / Safari all */
+  -moz-user-select: text; /* Firefox all */
+  -ms-user-select: text; /* IE 10+ */
+  user-select: text;
+}
 article img {
   max-width: 12vw;
   max-height: 100%;
@@ -367,3 +378,17 @@ form input {
 #textInput input:hover {
   background-color: #ff9100;
 }
+
+#popup {
+  width: 20vw;
+  background-color: rgba(255, 255, 255, 0.8);
+  position: absolute;
+  right: -30vw;
+  bottom: max(80px, 10vh);
+  padding: 2em 3em;
+
+  transition: all 300ms ease-in;
+  -webkit-box-shadow: 0px 0px 17px 0px rgba(50, 50, 50, 0.75);
+  -moz-box-shadow: 0px 0px 17px 0px rgba(50, 50, 50, 0.75);
+  box-shadow: 0px 0px 17px 0px rgba(50, 50, 50, 0.75);
+}

index.html

@@ -13,6 +13,7 @@
     <script src="./js/video.js"></script>
     <script src="./js/comments.js"></script>
     <script src="./js/ace/ace.js"></script>
+    <script src="./js/popup.js"></script>
 
 
 </head>
@@ -52,6 +53,10 @@
                 </div>
                 <input class="" id="volume" value="100" min="0" max="100" type="range" step="1">
             </div>
+
+            <div id="popup">
+               Toto je ukázkový text, který se zde někdy objeví.
+            </div>
         </div>
     </main>
     <article>

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;
+  }
 }

js/model.js

@@ -6,6 +6,7 @@ class Model {
     let xmlDoc = parser.parseFromString(xml, "text/xml");
 
     this.comments = [];
+    this.popups = [];
 
     let comment = xmlDoc.getElementsByTagName("comment");
     for (let i = 0; i < comment.length; i++) {
@@ -16,8 +17,14 @@ class Model {
 
       this.comments.push(new Comment(start, end, title, text));
     }
+    let popup = xmlDoc.getElementsByTagName("popup");
+    for (let i = 0; i < popup.length; i++) {
+      let start = popup[i].getElementsByTagName("start")[0].innerHTML;
+      let end = popup[i].getElementsByTagName("end")[0].innerHTML;
+      let text = popup[i].getElementsByTagName("text")[0].innerHTML;
 
-    return this.comments;
+      this.popups.push(new Popup(start, end, text));
+    }
   }
 
   getVideoFileName(xml) {

js/popup.js

@@ -0,0 +1,7 @@
+class Popup {
+  constructor(start, end, text) {
+    this.start = start;
+    this.end = end;
+    this.text = text;
+  }
+}

js/view.js

@@ -150,6 +150,21 @@ class View {
       svgDoc.getElementById("path4").style.fill = "#c1c1c1";
     }
   }
+
+  activatePopup(text) {
+    let popArea = document.getElementById("popup");
+
+    if (text == null) {
+      popArea.style.removeProperty("right");
+      setTimeout(function () {
+        popArea.innerHTML = text;
+      }, 300);
+      return;
+    }
+
+    popArea.innerHTML = text;
+    popArea.style.right = "0";
+  }
   /* colorTogglePlaySVG() {
     var playSVG = document.getElementById("togglePlayIcon");
     var svgDoc;