implement comment frontend

tubearchivist/home/templates/home/video.html

@@ -123,6 +123,11 @@
             </div>
         {% endfor %}
     {% endif %}
+    <div class="comments-section">
+        <h3>Comments</h3>
+        <div id="comments-list" class="comments-list">
+        </div>
+    </div>
 </div>
 <script>
     var videoData = getVideoData('{{ video.youtube_id }}');

tubearchivist/static/css/style.css

@@ -619,7 +619,8 @@ video:-webkit-full-screen {
     margin-top: 1rem;
 }
 
-.description-box {
+.description-box,
+.comments-section {
     margin-top: 1rem;
     padding: 15px;
     background-color: var(--highlight-bg);
@@ -778,6 +779,10 @@ video:-webkit-full-screen {
     margin-left: 5px;
 }
 
+.thumb-icon {
+    display: flex;
+}
+
 .thumb-icon img,
 .rating-stars img {
     width: 20px;
@@ -819,6 +824,36 @@ video:-webkit-full-screen {
     width: 100%;
 }
 
+.comment-box {
+    padding-bottom: 1rem;
+}
+
+.comments-replies {
+    padding-left: 3rem;
+}
+
+.comment-highlight {
+    background-color: var(--main-font);
+    padding: 3px;
+    color: var(--accent-font-dark);
+    font-family: Sen-bold, sans-serif;
+    width: fit-content;
+}
+
+.comment-meta {
+    display: flex;
+}
+
+.space-carrot {
+    margin: 0 10px;
+}
+
+.comment-like img {
+    width: 20px;
+    margin-left: 5px;
+    filter: var(--img-filter-error);
+}
+
 /* multi search page */
 .multi-search-box {
     padding-right: 20px;

tubearchivist/static/img/icon-heart.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<path d="M499.9,159L499.9,159c0.1-1.7,0.1-3.4,0.1-5.2c0-69.5-58.6-129.7-130.9-129.7c-52.9,0-98.4,34-119,77.4h0
+	c-20.7-43.4-66.2-77.4-119-77.4C58.6,24.1,0,84.4,0,153.9c0,1.7,0.1,3.4,0.1,5.2h0c0,0-7.4,82.6,84.5,172.7
+	c41.8,41.9,88.5,81.6,165.4,144.1c76.9-62.5,123.6-102.3,165.4-144.1C507.2,241.6,499.9,159,499.9,159z"/>
+</svg>

tubearchivist/static/script.js

@@ -287,7 +287,7 @@ function resetToken() {
   document.getElementById('text-reveal').replaceWith(message);
 }
 
-// restore from snapshot 
+// restore from snapshot
 function restoreSnapshot(snapshotId) {
   console.log('restore ' + snapshotId);
   let apiEndpoint = '/api/snapshot/' + snapshotId + '/';
@@ -1104,6 +1104,81 @@ function createFulltext(fullText) {
   return fullTextDiv;
 }
 
+function getComments(videoId) {
+  let apiEndpoint = '/api/video/' + videoId + '/comment/';
+  let response = apiRequest(apiEndpoint, 'GET');
+  let allComments = response.data;
+
+  writeComments(allComments);
+}
+
+function writeComments(allComments) {
+  let commentsListBox = document.getElementById('comments-list');
+  for (let i = 0; i < allComments.length; i++) {
+    const rootComment = allComments[i];
+
+    let commentBox = createCommentBox(rootComment, true);
+
+    // add replies to commentBox
+    if (rootComment.comment_replies) {
+      let commentReplyBox = document.createElement('div');
+      commentReplyBox.setAttribute('class', 'comments-replies');
+      for (let j = 0; j < rootComment.comment_replies.length; j++) {
+        const commentReply = rootComment.comment_replies[j];
+        let commentReplyDiv = createCommentBox(commentReply, false);
+        commentReplyBox.appendChild(commentReplyDiv);
+      }
+      if (rootComment.comment_replies.length > 0) {
+        commentBox.appendChild(commentReplyBox);
+      }
+    }
+    commentsListBox.appendChild(commentBox);
+  }
+}
+
+function createCommentBox(comment, isRoot) {
+  let commentBox = document.createElement('div');
+  commentBox.setAttribute('class', 'comment-box');
+
+  let commentClass;
+  if (isRoot) {
+    commentClass = 'root-comment';
+  } else {
+    commentClass = 'reply-comment';
+  }
+
+  commentBox.classList.add = commentClass;
+
+  let commentAuthor = document.createElement('h3');
+  commentAuthor.innerText = comment.comment_author;
+  if (comment.comment_author_is_uploader) {
+    commentAuthor.setAttribute('class', 'comment-highlight');
+  }
+  commentBox.appendChild(commentAuthor);
+
+  let commentText = document.createElement('p');
+  commentText.innerText = comment.comment_text;
+  commentBox.appendChild(commentText);
+
+  const spacer = '<span class="space-carrot">|</span>';
+  let commentMeta = document.createElement('div');
+  commentMeta.setAttribute('class', 'comment-meta');
+
+  commentMeta.innerHTML = `<span>${comment.comment_time_text}</span>`;
+
+  if (comment.comment_likecount > 0) {
+    commentMeta.innerHTML += `${spacer}<span class="thumb-icon"><img src="/static/img/icon-thumb.svg"> ${comment.comment_likecount}</span>`;
+  }
+
+  if (comment.comment_is_favorited) {
+    commentMeta.innerHTML += `${spacer}<span class="comment-like"><img src="/static/img/icon-heart.svg"></span>`;
+  }
+
+  commentBox.appendChild(commentMeta);
+
+  return commentBox;
+}
+
 // generic
 
 function sendPost(payload) {