Continue Watching Section (#188)

* Replaced isWatched() function.

* Switched to `updateVideoWatchStatus()` function

* Updated Onclick to `updateVideoWatchStatus(this)`

* Handle `this` input in `updateVideoWatchStatus()`

tubearchivist/home/templates/home/channel_id.html

@@ -124,9 +124,9 @@
                     <div class="video-desc {{ view_style }}">
                         <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
                             {% if video.source.player.watched %}
-                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="isUnwatched(this.id)" class="watch-button" title="Mark as unwatched">
+                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as unwatched">
                             {% else %}
-                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="isWatched(this.id)" class="watch-button" title="Mark as watched">
+                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as watched">
                             {% endif %}
                             <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
                         </div>

tubearchivist/home/templates/home/home.html

@@ -27,9 +27,9 @@
                     <div class="video-desc {{ view_style }}">
                         <div class="video-desc-player" id="video-info-{{ video.youtube_id }}">
                             {% if video.player.watched %}
-                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.youtube_id }}" data-status="watched" onclick="isUnwatched(this.id)" class="watch-button" title="Mark as unwatched">
+                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.youtube_id }}" data-status="watched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as unwatched">
                             {% else %}
-                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.youtube_id }}" data-status="unwatched" onclick="isWatched(this.id)" class="watch-button" title="Mark as watched">
+                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.youtube_id }}" data-status="unwatched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as watched">
                             {% endif %}
                             <span>{{ video.published }} | {{ video.player.duration_str }}</span>
                         </div>
@@ -103,9 +103,9 @@
                     <div class="video-desc {{ view_style }}">
                         <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
                             {% if video.source.player.watched %}
-                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="isUnwatched(this.id)" class="watch-button" title="Mark as unwatched">
+                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as unwatched">
                             {% else %}
-                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="isWatched(this.id)" class="watch-button" title="Mark as watched">
+                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as watched">
                             {% endif %}
                             <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
                         </div>

tubearchivist/home/templates/home/playlist_id.html

@@ -105,9 +105,9 @@
                     <div class="video-desc {{ view_style }}">
                         <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
                             {% if video.source.player.watched %}
-                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="isUnwatched(this.id)" class="watch-button" title="Mark as unwatched">
+                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as unwatched">
                             {% else %}
-                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="isWatched(this.id)" class="watch-button" title="Mark as watched">
+                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as watched">
                             {% endif %}
                             <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
                         </div>

tubearchivist/home/templates/home/video.html

@@ -32,9 +32,9 @@
                 <p>Last refreshed: {{ video.vid_last_refresh }}</p>
                 <p class="video-info-watched">Watched:
                     {% if video.player.watched %}
-                        <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
+                        <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.youtube_id }}" data-status="watched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as unwatched">
                     {% else %}
-                        <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
+                        <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.youtube_id }}" data-status="unwatched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as watched">
                     {% endif %}
                 </p>
                 {% if video.active %}

tubearchivist/static/script.js

@@ -8,21 +8,62 @@ function sortChange(sortValue) {
     }, 500);
 }
 
-function isWatched(youtube_id) {
-    postVideoProgress(youtube_id, 0); // Reset video progress on watched;
-    removeProgressBar(youtube_id);
-    var payload = JSON.stringify({'watched': youtube_id});
+// Updates video watch status when passed a video id and it's current state (ex if the video was unwatched but you want to mark it as watched you will pass "unwatched")
+function updateVideoWatchStatus(input1, videoCurrentWatchStatus) {
+    if (videoCurrentWatchStatus) {
+        videoId = input1;
+    } else if (input1.getAttribute("data-id")) {
+        videoId = input1.getAttribute("data-id");
+        videoCurrentWatchStatus = input1.getAttribute("data-status");
+    }
+
+    postVideoProgress(videoId, 0); // Reset video progress on watched/unwatched;
+    removeProgressBar(videoId);
+
+    if (videoCurrentWatchStatus == "watched") {
+        var watchStatusIndicator = createWatchStatusIndicator(videoId, "unwatched");
+        var payload = JSON.stringify({'un_watched': videoId});
         sendPost(payload);
-    var seenIcon = document.createElement('img');
-    seenIcon.setAttribute('src', "/static/img/icon-seen.svg");
-    seenIcon.setAttribute('alt', 'seen-icon');
-    seenIcon.setAttribute('id', youtube_id);
-    seenIcon.setAttribute('title', "Mark as unwatched");
-    seenIcon.setAttribute('onclick', "isUnwatched(this.id)");
-    seenIcon.classList = 'seen-icon';
-    document.getElementById(youtube_id).replaceWith(seenIcon);
+    } else if (videoCurrentWatchStatus == "unwatched") {
+        var watchStatusIndicator = createWatchStatusIndicator(videoId, "watched");
+        var payload = JSON.stringify({'watched': videoId});
+        sendPost(payload);
+    }
+
+    var watchButtons = document.getElementsByClassName("watch-button");
+    for (let i = 0; i < watchButtons.length; i++) {
+        if (watchButtons[i].getAttribute("data-id") == videoId) {
+            watchButtons[i].outerHTML = watchStatusIndicator;
+        }
+    }
 }
 
+// Creates a watch status indicator when passed a video id and the videos watch status
+function createWatchStatusIndicator(videoId, videoWatchStatus) {
+    if (videoWatchStatus == "watched") {
+        var seen = "seen";
+        var title = "Mark as unwatched";
+    } else if (videoWatchStatus == "unwatched") {
+        var seen = "unseen";
+        var title = "Mark as watched";
+    }
+    var watchStatusIndicator = `<img src="/static/img/icon-${seen}.svg" alt="${seen}-icon" data-id="${videoId}" data-status="${videoWatchStatus}" onclick="updateVideoWatchStatus(this)" class="watch-button" title="${title}">`;
+    return watchStatusIndicator;
+}
+
+// function isWatched(youtube_id) {
+//     var payload = JSON.stringify({'watched': youtube_id});
+//     sendPost(payload);
+//     var seenIcon = document.createElement('img');
+//     seenIcon.setAttribute('src', "/static/img/icon-seen.svg");
+//     seenIcon.setAttribute('alt', 'seen-icon');
+//     seenIcon.setAttribute('id', youtube_id);
+//     seenIcon.setAttribute('title', "Mark as unwatched");
+//     seenIcon.setAttribute('onclick', "isUnwatched(this.id)");
+//     seenIcon.classList = 'seen-icon';
+//     document.getElementById(youtube_id).replaceWith(seenIcon);
+// }
+
 // Removes the progress bar when passed a video id
 function removeProgressBar(videoId) {
     setProgressBar(videoId, 0, 1);
@@ -39,19 +80,19 @@ function isWatchedButton(button) {
     }, 1000);
 }
 
-function isUnwatched(youtube_id) {
-    postVideoProgress(youtube_id, 0); // Reset video progress on unwatched;
-    var payload = JSON.stringify({'un_watched': youtube_id});
-    sendPost(payload);
-    var unseenIcon = document.createElement('img');
-    unseenIcon.setAttribute('src', "/static/img/icon-unseen.svg");
-    unseenIcon.setAttribute('alt', 'unseen-icon');
-    unseenIcon.setAttribute('id', youtube_id);
-    unseenIcon.setAttribute('title', "Mark as watched");
-    unseenIcon.setAttribute('onclick', "isWatched(this.id)");
-    unseenIcon.classList = 'unseen-icon';
-    document.getElementById(youtube_id).replaceWith(unseenIcon);
-}
+// function isUnwatched(youtube_id) {
+//     postVideoProgress(youtube_id, 0); // Reset video progress on unwatched;
+//     var payload = JSON.stringify({'un_watched': youtube_id});
+//     sendPost(payload);
+//     var unseenIcon = document.createElement('img');
+//     unseenIcon.setAttribute('src', "/static/img/icon-unseen.svg");
+//     unseenIcon.setAttribute('alt', 'unseen-icon');
+//     unseenIcon.setAttribute('id', youtube_id);
+//     unseenIcon.setAttribute('title', "Mark as watched");
+//     unseenIcon.setAttribute('onclick', "isWatched(this.id)");
+//     unseenIcon.classList = 'unseen-icon';
+//     document.getElementById(youtube_id).replaceWith(unseenIcon);
+// }
 
 function unsubscribe(id_unsub) {
     var payload = JSON.stringify({'unsubscribe': id_unsub});
@@ -327,7 +368,7 @@ function createPlayer(button) {
     var channelName = videoData.data.channel.channel_name;
 
     removePlayer();
-    document.getElementById(videoId).outerHTML = ''; // Remove watch indicator from video info
+    // document.getElementById(videoId).outerHTML = ''; // Remove watch indicator from video info
 
     // If cast integration is enabled create cast button
     var castButton = '';
@@ -337,13 +378,12 @@ function createPlayer(button) {
 
     // Watched indicator
     if (videoData.data.player.watched) {
-        var playerState = "seen";
-        var watchedFunction = "Unwatched";
+        var watchStatusIndicator = createWatchStatusIndicator(videoId, "watched");
     } else {
-        var playerState = "unseen";
-        var watchedFunction = "Watched";  
+        var watchStatusIndicator = createWatchStatusIndicator(videoId, "unwatched");
     }
     
+
     var playerStats = `<div class="thumb-icon player-stats"><img src="/static/img/icon-eye.svg" alt="views icon"><span>${videoViews}</span>`;
     if (videoData.data.stats.like_count) {
         var likes = formatNumbers(videoData.data.stats.like_count);
@@ -360,7 +400,7 @@ function createPlayer(button) {
         ${videoTag}
         <div class="player-title boxed-content">
             <img class="close-button" src="/static/img/icon-close.svg" alt="close-icon" data="${videoId}" onclick="removePlayer()" title="Close player">
-            <img src="/static/img/icon-${playerState}.svg" alt="${playerState}-icon" id="${videoId}" onclick="is${watchedFunction}(this.id)" class="${playerState}-icon" title="Mark as ${watchedFunction}">
+            ${watchStatusIndicator}
             ${castButton}
             ${playerStats}
             <div class="player-channel-playlist">
@@ -444,9 +484,13 @@ function getVideoPlayerDuration() {
 function getVideoPlayerWatchStatus() {
     var videoId = getVideoPlayerVideoId();
     var watched = false;
-    if(document.getElementById(videoId) != null && document.getElementById(videoId).className != "unseen-icon") {
+
+    var watchButtons = document.getElementsByClassName("watch-button");
+    for (let i = 0; i < watchButtons.length; i++) {
+        if (watchButtons[i].getAttribute("data-id") == videoId && watchButtons[i].getAttribute("data-status") == "watched") {
             watched = true;
         }
+    }
     return watched;
 }
 
@@ -459,7 +503,7 @@ function onVideoProgress() {
         postVideoProgress(videoId, currentTime);
         if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
             if (watchedThreshold(currentTime, duration)) {
-                isWatched(videoId);
+                updateVideoWatchStatus(videoId, "unwatched");
             }
         }
     }
@@ -469,7 +513,7 @@ function onVideoProgress() {
 function onVideoEnded() {
     var videoId = getVideoPlayerVideoId();
     if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
-        isWatched(videoId);
+        updateVideoWatchStatus(videoId, "unwatched");
     }
 }
 
@@ -606,13 +650,21 @@ 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 && !getVideoPlayerWatchStatus()) {
-        progressBar.style.width = progressBarWidth;
-    } else if (progressBar) {
-        progressBar.style.width = "0%";
+    var progressBarWidth = (currentTime / duration) * 100 + "%";
+    var progressBars = document.getElementsByClassName("video-progress-bar");
+    for (let i = 0; i < progressBars.length; i++) {
+        if (progressBars[i].id == "progress-" + videoId) {
+            if (!getVideoPlayerWatchStatus()) {
+                progressBars[i].style.width = progressBarWidth;
+            } else {
+                progressBars[i].style.width = "0%";
             }
+        }
+    }
+
+    // progressBar = document.getElementById("progress-" + videoId);
+    
+    
 }
 
 // multi search form
@@ -681,9 +733,9 @@ function createVideo(video, viewStyle) {
     const videoPublished = video.published;
     const videoDuration = video.player.duration_str;
     if (video.player.watched) {
-        var playerState = "seen";
+        var watchStatusIndicator = createWatchStatusIndicator(videoId, "watched");
     } else {
-        var playerState = "unseen";
+        var watchStatusIndicator = createWatchStatusIndicator(videoId, "unwatched");
     };
     const channelId = video.channel.channel_id;
     const channelName = video.channel.channel_name;
@@ -701,7 +753,7 @@ function createVideo(video, viewStyle) {
     </a>
     <div class="video-desc ${viewStyle}">
         <div class="video-desc-player" id="video-info-${videoId}">
-                <img src="/static/img/icon-${playerState}.svg" alt="${playerState}-icon" id="${videoId}" onclick="isWatched(this.id)" class="${playerState}-icon">
+                ${watchStatusIndicator}
             <span>${videoPublished} | ${videoDuration}</span>
         </div>
         <div>