Archives/tubearchivist
2
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist synced 2024-11-02 09:41:07 +00:00
Code Issues Projects Releases Wiki Activity

frontend similar videos

Browse Source
This commit is contained in:
simon 2022-11-21 15:13:37 +07:00
parent aa1d0b759e
commit fa518c029c
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
2 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
tubearchivist/home/templates/home/video.html
View File

@ -132,6 +132,12 @@
</div>
{% endfor %}
{% endif %}
<div class="description-box">
<h3>Similar Videos</h3>
<div class="video-list grid grid-3" id="similar-videos">
</div>
<script>getSimilarVideos('{{ video.youtube_id }}')</script>
</div>
{% if video.comment_count %}
<div class="comments-section">
<h3>Comments: {{video.comment_count}}</h3>

41
tubearchivist/static/script.js
View File

@ -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) {
<a href="#player" data-id="${videoId}" onclick="createPlayer(this)">
<div class="video-thumb-wrap ${viewStyle}">
<div class="video-thumb">
<img src="${thumbUrl}" alt="video-thumb">
<img src="${video.vid_thumb_url}" alt="video-thumb">
</div>
<div class="video-play">
<img src="/static/img/icon-play.svg" alt="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) {