implement comment frontend

This commit is contained in:
simon 2022-11-14 16:31:49 +07:00
parent 79d134cea8
commit ad016df105
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
4 changed files with 125 additions and 2 deletions

View File

@ -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 }}');

View File

@ -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;

View File

@ -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>

After

Width:  |  Height:  |  Size: 684 B

View File

@ -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) {