tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 03:40:14 +00:00
Code Issues Projects Releases Wiki Activity

Reduce API Calls (#181)

Browse Source 
* Reduce API calls

* Fix video id

* Updated `createVideoTag()` description.

* Fixed URL used for cast integration

* Check video duration

* Updates progress bar on watched and close.

* Set progress bar width to 0% by default

* Cleanup, function descriptions

* Cleanup console logging

* Update progress bar on cast progress every 10s

* Catch short <30s videos and mark as watched
This commit is contained in:
Nathan DeTar 2022-02-24 19:39:33 -08:00 committed by GitHub
parent 806448624d
commit 99c97a703f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tubearchivist/home/templates/home/channel_id.html
View File

@ -112,6 +112,8 @@
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
{% if video.source.player.progress %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: {{video.source.player.progress}}%;"></div>
{% else %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: 0%;"></div>
{% endif %}
</div>
<div class="video-play">

2
tubearchivist/home/templates/home/home.html
View File

@ -51,6 +51,8 @@
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
{% if video.source.player.progress %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: {{video.source.player.progress}}%;"></div>
{% else %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: 0%;"></div>
{% endif %}
</div>
<div class="video-play">

2
tubearchivist/home/templates/home/playlist_id.html
View File

@ -93,6 +93,8 @@
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
{% if video.source.player.progress %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: {{video.source.player.progress}}%;"></div>
{% else %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: 0%;"></div>
{% endif %}
</div>
<div class="video-play">

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

@ -113,6 +113,8 @@
{% endif %}
</div>
<script>
window.onload = insertVideoTag('{{ video.youtube_id }}');
var videoData = getVideoData('{{ video.youtube_id }}');
var videoProgress = getVideoProgress('{{ video.youtube_id }}').position;
window.onload = insertVideoTag(videoData, videoProgress);
</script>
{% endblock content %}

1
tubearchivist/static/cast-videos.js
View File

@ -43,6 +43,7 @@ function castVideoProgress(player) {
var duration = player.duration;
if ((currentTime % 10) <= 1.0 && currentTime != 0 && duration != 0) { // Check progress every 10 seconds or else progress is checked a few times a second
postVideoProgress(videoId, currentTime);
setProgressBar(videoId, currentTime, duration);
if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
if (watchedThreshold(currentTime, duration)) {
isWatched(videoId);

51
tubearchivist/static/script.js
View File

@ -10,6 +10,7 @@ function sortChange(sortValue) {
function isWatched(youtube_id) {
postVideoProgress(youtube_id, 0); // Reset video progress on watched;
removeProgressBar(youtube_id);
var payload = JSON.stringify({'watched': youtube_id});
sendPost(payload);
var seenIcon = document.createElement('img');
@ -22,6 +23,11 @@ function isWatched(youtube_id) {
document.getElementById(youtube_id).replaceWith(seenIcon);
}
// Removes the progress bar when passed a video id
function removeProgressBar(videoId) {
setProgressBar(videoId, 0, 1);
}
function isWatchedButton(button) {
youtube_id = button.getAttribute("data-id");
var payload = JSON.stringify({'watched': youtube_id});
@ -298,9 +304,10 @@ function cancelDelete() {
function createPlayer(button) {
var videoId = button.getAttribute('data-id');
var videoData = getVideoData(videoId);
var videoProgress = getVideoProgress(videoId).position;
var videoName = videoData.data.title;
var videoTag = createVideoTag(videoId);
var videoTag = createVideoTag(videoData, videoProgress);
var playlist = '';
var videoPlaylists = videoData.data.playlist; // Array of playlists the video is in
@ -369,19 +376,17 @@ function createPlayer(button) {
}
// Add video tag to video page when passed a video id, function loaded on page load `video.html (115-117)`
function insertVideoTag(videoId) {
var videoTag = createVideoTag(videoId);
function insertVideoTag(videoData, videoProgress) {
var videoTag = createVideoTag(videoData, videoProgress);
var videoMain = document.getElementsByClassName("video-main");
videoMain[0].innerHTML = videoTag;
}
// Generates a video tag with subtitles when passed a video id.
function createVideoTag(videoId) {
var videoData = getVideoData(videoId);
var videoProgress = getVideoProgress(videoId).position;
// Generates a video tag with subtitles when passed videoData and videoProgress.
function createVideoTag(videoData, videoProgress) {
var videoId = videoData.data.youtube_id;
var videoUrl = videoData.data.media_url;
var videoThumbUrl = videoData.data.vid_thumb_url;
var subtitles = '';
var videoSubtitles = videoData.data.subtitles; // Array of subtitles
if (typeof(videoSubtitles) != 'undefined' && videoData.config.downloads.subtitle) {
@ -391,7 +396,7 @@ function createVideoTag(videoId) {
}
var videoTag = `
<video poster="${videoThumbUrl}" ontimeupdate="onVideoProgress()" onpause="onVideoPause()" controls autoplay width="100%" playsinline id="video-item">
<video poster="${videoThumbUrl}" ontimeupdate="onVideoProgress()" onpause="onVideoPause()" onended="onVideoEnded()" controls autoplay width="100%" playsinline id="video-item">
<source src="${videoUrl}#t=${videoProgress}" type="video/mp4" id="video-source" videoid="${videoId}">
${subtitles}
</video>
@ -460,6 +465,14 @@ function onVideoProgress() {
}
}
// Runs on video end, marks video as watched
function onVideoEnded() {
var videoId = getVideoPlayerVideoId();
if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
isWatched(videoId);
}
}
function watchedThreshold(currentTime, duration) {
var watched = false;
if (duration <= 1800){ // If video is less than 30 min
@ -538,16 +551,17 @@ function getSubbedPlaylists(videoPlaylists) {
// Send video position when given video id and progress in seconds
function postVideoProgress(videoId, videoProgress) {
var apiEndpoint = "/api/video/" + videoId + "/progress/";
if (!isNaN(videoProgress)) {
var duartion = getVideoPlayerDuration();
if (!isNaN(videoProgress) && duartion != 'undefined') {
var data = {
"position": videoProgress
};
if (videoProgress == 0) {
apiRequest(apiEndpoint, "DELETE");
console.log("Deleting Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
// console.log("Deleting Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
} else if (!getVideoPlayerWatchStatus()) {
apiRequest(apiEndpoint, "POST", data);
console.log("Saving Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
// console.log("Saving Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
}
}
}
@ -564,14 +578,17 @@ function apiRequest(apiEndpoint, method, data) {
return JSON.parse(xhttp.responseText);
}
// Gets origin URL
function getURL() {
return window.location.href.replace(window.location.pathname, "");
return window.location.origin;
}
function removePlayer() {
var currentTime = getVideoPlayerCurrentTime();
var duration = getVideoPlayerDuration();
var videoId = getVideoPlayerVideoId();
postVideoProgress(videoId, currentTime);
setProgressBar(videoId, currentTime, duration);
var playerElement = document.getElementById('player');
if (playerElement.hasChildNodes()) {
var youtubeId = playerElement.childNodes[1].getAttribute("data-id");
@ -587,6 +604,14 @@ function removePlayer() {
}
}
// Sets the progress bar when passed a video id, video progress and video duration
function setProgressBar(videoId, currentTime, duration) {
progressBar = document.getElementById("progress-" + videoId);
progressBarWidth = (currentTime / duration) * 100 + "%";
if (progressBar) {
progressBar.style.width = progressBarWidth;
}
}
// multi search form
function searchMulti(query) {