diff --git a/css/style.css b/css/style.css
index a3154f4..bc95c65 100644
--- a/css/style.css
+++ b/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);
+}
diff --git a/index.html b/index.html
index 02698e6..406f3f7 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
+
@@ -52,6 +53,10 @@
+
+
diff --git a/js/controller.js b/js/controller.js
index 37c2171..fd7b79f 100644
--- a/js/controller.js
+++ b/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;
+ }
}
diff --git a/js/model.js b/js/model.js
index 83a2f9a..6a82a4b 100644
--- a/js/model.js
+++ b/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) {
diff --git a/js/popup.js b/js/popup.js
new file mode 100644
index 0000000..c494b8f
--- /dev/null
+++ b/js/popup.js
@@ -0,0 +1,7 @@
+class Popup {
+ constructor(start, end, text) {
+ this.start = start;
+ this.end = end;
+ this.text = text;
+ }
+}
diff --git a/js/view.js b/js/view.js
index b57b9e1..1e30076 100644
--- a/js/view.js
+++ b/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;