frontend similar videos
This commit is contained in:
parent
aa1d0b759e
commit
fa518c029c
|
@ -132,6 +132,12 @@
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% 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 %}
|
{% if video.comment_count %}
|
||||||
<div class="comments-section">
|
<div class="comments-section">
|
||||||
<h3>Comments: {{video.comment_count}}</h3>
|
<h3>Comments: {{video.comment_count}}</h3>
|
||||||
|
|
|
@ -793,7 +793,11 @@ function apiRequest(apiEndpoint, method, data) {
|
||||||
xhttp.setRequestHeader('Authorization', 'Token ' + sessionToken);
|
xhttp.setRequestHeader('Authorization', 'Token ' + sessionToken);
|
||||||
xhttp.setRequestHeader('Content-Type', 'application/json');
|
xhttp.setRequestHeader('Content-Type', 'application/json');
|
||||||
xhttp.send(JSON.stringify(data));
|
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
|
// Gets origin URL
|
||||||
|
@ -951,7 +955,7 @@ function createVideo(video, viewStyle) {
|
||||||
// create video item div from template
|
// create video item div from template
|
||||||
const videoId = video.youtube_id;
|
const videoId = video.youtube_id;
|
||||||
// const mediaUrl = video.media_url;
|
// const mediaUrl = video.media_url;
|
||||||
const thumbUrl = '/cache/' + video.vid_thumb_url;
|
// const thumbUrl = '/cache/' + video.vid_thumb_url;
|
||||||
const videoTitle = video.title;
|
const videoTitle = video.title;
|
||||||
const videoPublished = video.published;
|
const videoPublished = video.published;
|
||||||
const videoDuration = video.player.duration_str;
|
const videoDuration = video.player.duration_str;
|
||||||
|
@ -968,7 +972,7 @@ function createVideo(video, viewStyle) {
|
||||||
<a href="#player" data-id="${videoId}" onclick="createPlayer(this)">
|
<a href="#player" data-id="${videoId}" onclick="createPlayer(this)">
|
||||||
<div class="video-thumb-wrap ${viewStyle}">
|
<div class="video-thumb-wrap ${viewStyle}">
|
||||||
<div class="video-thumb">
|
<div class="video-thumb">
|
||||||
<img src="${thumbUrl}" alt="video-thumb">
|
<img src="${video.vid_thumb_url}" alt="video-thumb">
|
||||||
</div>
|
</div>
|
||||||
<div class="video-play">
|
<div class="video-play">
|
||||||
<img src="/static/img/icon-play.svg" alt="play-icon">
|
<img src="/static/img/icon-play.svg" alt="play-icon">
|
||||||
|
@ -1154,7 +1158,7 @@ function toggleCommentReplies(button) {
|
||||||
let commentReplyId = button.getAttribute('data-id');
|
let commentReplyId = button.getAttribute('data-id');
|
||||||
let state = document.getElementById(commentReplyId).style.display;
|
let state = document.getElementById(commentReplyId).style.display;
|
||||||
|
|
||||||
if (state === 'none' || state === "") {
|
if (state === 'none' || state === '') {
|
||||||
document.getElementById(commentReplyId).style.display = 'block';
|
document.getElementById(commentReplyId).style.display = 'block';
|
||||||
button.querySelector('#toggle-icon').innerHTML = '-';
|
button.querySelector('#toggle-icon').innerHTML = '-';
|
||||||
} else {
|
} else {
|
||||||
|
@ -1207,6 +1211,35 @@ function createCommentBox(comment, isRoot) {
|
||||||
return commentBox;
|
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
|
// generic
|
||||||
|
|
||||||
function sendPost(payload) {
|
function sendPost(payload) {
|
||||||
|
|
Loading…
Reference in New Issue