mirror of
https://github.com/tubearchivist/tubearchivist.git
synced 2024-10-13 09:17:16 +00:00
frontend similar videos
This commit is contained in:
parent
aa1d0b759e
commit
fa518c029c
@ -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>
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user