From 99c97a703fc02c5b197cba1fbea14785c63d7a4b Mon Sep 17 00:00:00 2001
From: Nathan DeTar <n8detar@gmail.com>
Date: Thu, 24 Feb 2022 19:39:33 -0800
Subject: [PATCH] Reduce API Calls (#181)

* 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
---
 .../home/templates/home/channel_id.html       |  2 +
 tubearchivist/home/templates/home/home.html   |  2 +
 .../home/templates/home/playlist_id.html      |  2 +
 tubearchivist/home/templates/home/video.html  |  4 +-
 tubearchivist/static/cast-videos.js           |  1 +
 tubearchivist/static/script.js                | 51 ++++++++++++++-----
 6 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel_id.html b/tubearchivist/home/templates/home/channel_id.html
index 0402e09..41ee11e 100644
--- a/tubearchivist/home/templates/home/channel_id.html
+++ b/tubearchivist/home/templates/home/channel_id.html
@@ -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">
diff --git a/tubearchivist/home/templates/home/home.html b/tubearchivist/home/templates/home/home.html
index 6cf643a..d24263a 100644
--- a/tubearchivist/home/templates/home/home.html
+++ b/tubearchivist/home/templates/home/home.html
@@ -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">
diff --git a/tubearchivist/home/templates/home/playlist_id.html b/tubearchivist/home/templates/home/playlist_id.html
index efac62b..687df98 100644
--- a/tubearchivist/home/templates/home/playlist_id.html
+++ b/tubearchivist/home/templates/home/playlist_id.html
@@ -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">
diff --git a/tubearchivist/home/templates/home/video.html b/tubearchivist/home/templates/home/video.html
index 90e986d..7a8b522 100644
--- a/tubearchivist/home/templates/home/video.html
+++ b/tubearchivist/home/templates/home/video.html
@@ -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 %}
diff --git a/tubearchivist/static/cast-videos.js b/tubearchivist/static/cast-videos.js
index 0a30af4..867093e 100644
--- a/tubearchivist/static/cast-videos.js
+++ b/tubearchivist/static/cast-videos.js
@@ -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);
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index 162e5ab..8df9ffd 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -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) {