From b3836d47a63b7c1cca04b2c20183c551a5ba60ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= <dz@pixx.cz>
Date: Sat, 30 Jan 2021 20:26:04 +0100
Subject: [PATCH] =?UTF-8?q?U=20<comment>=20v=20XML=20lze=20m=C3=ADt=20v?=
 =?UTF-8?q?=C3=ADce=20<text>=20fix=20#3=20@1h?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css    | 23 +++++++++++++----------
 js/comments.js   | 10 +++++++---
 js/controller.js | 16 ++++++++++++----
 js/model.js      |  6 +++---
 js/view.js       | 19 +++++++++++++------
 5 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/css/style.css b/css/style.css
index aca630a..89968d7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -48,17 +48,19 @@ article {
   overflow-y: auto;
 }
 article img {
-  max-width: 100%;
-  max-height: 25vh;
-  margin: 1em;
-}
-
-article img:nth-child(odd) {
-  float: right;
+  max-width: 25vh;
+  max-height: 100%;
+  margin: 0.5em 1em;
+  padding: .2em;
+  clear: both;
+  border: 1px solid #bbb;
+  border-radius: .2rem;
+  float: left;
+  clear: left;
 }
 
-article img:nth-child(even) {
-  float: left;
+article p {
+  clear: right;
 }
 
 article h1:first-child {
@@ -69,6 +71,7 @@ h1,
 h2,
 h3 {
   margin-bottom: 0;
+  clear: right;
 }
 
 h1 {
@@ -154,7 +157,7 @@ article p:last-child {
   position: relative;
 }
 
-progress {
+#video-progress progress {
   position: absolute;
   width: 100%;
   height: 0.5vh;
diff --git a/js/comments.js b/js/comments.js
index d1f39cd..b6c1051 100644
--- a/js/comments.js
+++ b/js/comments.js
@@ -1,8 +1,12 @@
 class Comment {
-  constructor(start, end, text, fulltext) {
+  constructor(start, end, tittle, text) {
     this.start = start;
     this.end = end;
-    this.text = text;
-    this.fulltext = fulltext;
+    this.tittle = tittle;
+    this.text = [];
+
+    for (let i = 0; i < text.length; i++) {
+      this.text.push(text[i].innerHTML);
+    }
   }
 }
diff --git a/js/controller.js b/js/controller.js
index 4c0a1d8..029b431 100644
--- a/js/controller.js
+++ b/js/controller.js
@@ -26,7 +26,7 @@ class Controller {
   init(videoToLoad) {
     this.loadXml(videoToLoad).then(
       function (v) {
-        this.view.drawCommentsText(v);
+        this.view.drawCommentTittles(v);
         this.addEventListeners();
         this.view.drawCommentsToVideo(v);
       }.bind(this)
@@ -145,9 +145,17 @@ class Controller {
 
       if (this.activeComment !== null) {
         this.view.activateComment(this.activeComment);
-        this.view.activateCommentText(
-          this.model.comments[this.activeComment].fulltext
-        );
+        console.log(this.model.comments[this.activeComment].text.length);
+
+        for (
+          let i = 0;
+          i < this.model.comments[this.activeComment].text.length;
+          i++
+        ) {
+          this.view.activateCommentText(
+            this.model.comments[this.activeComment].text[i]
+          );
+        }
       }
     }
     this.lastActiveComment = this.activeComment;
diff --git a/js/model.js b/js/model.js
index 92a9196..10d6b33 100644
--- a/js/model.js
+++ b/js/model.js
@@ -11,10 +11,10 @@ class Model {
     for (let i = 0; i < comment.length; i++) {
       let start = comment[i].getElementsByTagName("start")[0].innerHTML;
       let end = comment[i].getElementsByTagName("end")[0].innerHTML;
-      let text = comment[i].getElementsByTagName("text")[0].innerHTML;
-      let fulltext = comment[i].getElementsByTagName("fulltext")[0].innerHTML;
+      let tittle = comment[i].getElementsByTagName("tittle")[0].innerHTML;
+      let text = comment[i].getElementsByTagName("text");
 
-      this.comments.push(new Comment(start, end, text, fulltext));
+      this.comments.push(new Comment(start, end, tittle, text));
     }
 
     return this.comments;
diff --git a/js/view.js b/js/view.js
index aae320d..839745d 100644
--- a/js/view.js
+++ b/js/view.js
@@ -21,7 +21,7 @@ class View {
     ); */
   }
 
-  drawCommentsText(comments) {
+  drawCommentTittles(comments) {
     let aside = document.getElementsByTagName("aside")[0];
 
     for (let i = 0; i < comments.length; i++) {
@@ -49,11 +49,11 @@ class View {
 
       comment.appendChild(time);
 
-      let commentText = document.createElement("div");
-      commentText.setAttribute("class", "commentText");
-      commentText.innerHTML = comments[i].text;
+      let commentTittle = document.createElement("div");
+      commentTittle.setAttribute("class", "commentText");
+      commentTittle.innerHTML = comments[i].tittle;
 
-      comment.appendChild(commentText);
+      comment.appendChild(commentTittle);
 
       aside.appendChild(comment);
 
@@ -120,7 +120,14 @@ class View {
   activateCommentText(text) {
     let textArea = document.getElementsByTagName("article")[0];
 
-    textArea.innerHTML = text;
+    if (text == null) {
+      textArea.innerHTML = text;
+      return;
+    }
+
+    let div = document.createElement("div");
+    div.innerHTML = text;
+    textArea.append(div);
   }
 
   commentHover(c, active = true) {