From fa518c029c1ba74c86ba3762e26e3b5c547a8fc0 Mon Sep 17 00:00:00 2001 From: simon Date: Mon, 21 Nov 2022 15:13:37 +0700 Subject: [PATCH] frontend similar videos --- tubearchivist/home/templates/home/video.html | 6 +++ tubearchivist/static/script.js | 41 ++++++++++++++++++-- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/tubearchivist/home/templates/home/video.html b/tubearchivist/home/templates/home/video.html index e3096fa0..dac51c3b 100644 --- a/tubearchivist/home/templates/home/video.html +++ b/tubearchivist/home/templates/home/video.html @@ -132,6 +132,12 @@ {% endfor %} {% endif %} +
+

Similar Videos

+
+
+ +
{% if video.comment_count %}

Comments: {{video.comment_count}}

diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js index 6395b09b..aec85661 100644 --- a/tubearchivist/static/script.js +++ b/tubearchivist/static/script.js @@ -793,7 +793,11 @@ function apiRequest(apiEndpoint, method, data) { xhttp.setRequestHeader('Authorization', 'Token ' + sessionToken); xhttp.setRequestHeader('Content-Type', 'application/json'); xhttp.send(JSON.stringify(data)); - return JSON.parse(xhttp.responseText); + if (xhttp.status === 404) { + return false; + } else { + return JSON.parse(xhttp.responseText); + } } // Gets origin URL @@ -951,7 +955,7 @@ function createVideo(video, viewStyle) { // create video item div from template const videoId = video.youtube_id; // const mediaUrl = video.media_url; - const thumbUrl = '/cache/' + video.vid_thumb_url; + // const thumbUrl = '/cache/' + video.vid_thumb_url; const videoTitle = video.title; const videoPublished = video.published; const videoDuration = video.player.duration_str; @@ -968,7 +972,7 @@ function createVideo(video, viewStyle) {
- video-thumb + video-thumb
play-icon @@ -1154,7 +1158,7 @@ function toggleCommentReplies(button) { let commentReplyId = button.getAttribute('data-id'); let state = document.getElementById(commentReplyId).style.display; - if (state === 'none' || state === "") { + if (state === 'none' || state === '') { document.getElementById(commentReplyId).style.display = 'block'; button.querySelector('#toggle-icon').innerHTML = '-'; } else { @@ -1207,6 +1211,35 @@ function createCommentBox(comment, isRoot) { return commentBox; } +function getSimilarVideos(videoId) { + let apiEndpoint = '/api/video/' + videoId + '/similar/'; + let response = apiRequest(apiEndpoint, 'GET'); + if (!response) { + populateEmpty(); + return; + } + let allSimilar = response.data; + if (allSimilar.length > 0) { + populateSimilar(allSimilar); + } +} + +function populateSimilar(allSimilar) { + let similarBox = document.getElementById('similar-videos'); + for (let i = 0; i < allSimilar.length; i++) { + const similarRaw = allSimilar[i]; + let similarDiv = createVideo(similarRaw, 'grid'); + similarBox.appendChild(similarDiv); + } +} + +function populateEmpty() { + let similarBox = document.getElementById('similar-videos'); + let emptyMessage = document.createElement('p'); + emptyMessage.innerText = 'No similar videos found.'; + similarBox.appendChild(emptyMessage); +} + // generic function sendPost(payload) {