From 6e3df21f8c959640a3c50687641a58fb12f3e557 Mon Sep 17 00:00:00 2001 From: Nathan DeTar Date: Thu, 10 Mar 2022 05:20:23 -0800 Subject: [PATCH] Continue Watching Section (#188) * Replaced isWatched() function. * Switched to `updateVideoWatchStatus()` function * Updated Onclick to `updateVideoWatchStatus(this)` * Handle `this` input in `updateVideoWatchStatus()` --- .../home/templates/home/channel_id.html | 4 +- tubearchivist/home/templates/home/home.html | 8 +- .../home/templates/home/playlist_id.html | 4 +- tubearchivist/home/templates/home/video.html | 4 +- tubearchivist/static/script.js | 142 ++++++++++++------ 5 files changed, 107 insertions(+), 55 deletions(-) diff --git a/tubearchivist/home/templates/home/channel_id.html b/tubearchivist/home/templates/home/channel_id.html index 1198a15..3a84037 100644 --- a/tubearchivist/home/templates/home/channel_id.html +++ b/tubearchivist/home/templates/home/channel_id.html @@ -124,9 +124,9 @@
{% if video.source.player.watched %} - seen-icon + seen-icon {% else %} - unseen-icon + unseen-icon {% endif %} {{ video.source.published }} | {{ video.source.player.duration_str }}
diff --git a/tubearchivist/home/templates/home/home.html b/tubearchivist/home/templates/home/home.html index 042ceed..0eb2926 100644 --- a/tubearchivist/home/templates/home/home.html +++ b/tubearchivist/home/templates/home/home.html @@ -27,9 +27,9 @@
{% if video.player.watched %} - seen-icon + seen-icon {% else %} - unseen-icon + unseen-icon {% endif %} {{ video.published }} | {{ video.player.duration_str }}
@@ -103,9 +103,9 @@
{% if video.source.player.watched %} - seen-icon + seen-icon {% else %} - unseen-icon + unseen-icon {% endif %} {{ video.source.published }} | {{ video.source.player.duration_str }}
diff --git a/tubearchivist/home/templates/home/playlist_id.html b/tubearchivist/home/templates/home/playlist_id.html index 635bdca..f9e987e 100644 --- a/tubearchivist/home/templates/home/playlist_id.html +++ b/tubearchivist/home/templates/home/playlist_id.html @@ -105,9 +105,9 @@
{% if video.source.player.watched %} - seen-icon + seen-icon {% else %} - unseen-icon + unseen-icon {% endif %} {{ video.source.published }} | {{ video.source.player.duration_str }}
diff --git a/tubearchivist/home/templates/home/video.html b/tubearchivist/home/templates/home/video.html index 7a8b522..324d293 100644 --- a/tubearchivist/home/templates/home/video.html +++ b/tubearchivist/home/templates/home/video.html @@ -32,9 +32,9 @@

Last refreshed: {{ video.vid_last_refresh }}

Watched: {% if video.player.watched %} - seen-icon + seen-icon {% else %} - unseen-icon + unseen-icon {% endif %}

{% if video.active %} diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js index acc592a..6e5c818 100644 --- a/tubearchivist/static/script.js +++ b/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}); - 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); +// 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); + } 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 = `${seen}-icon`; + 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,12 +378,11 @@ 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 = `
views icon${videoViews}`; if (videoData.data.stats.like_count) { @@ -360,7 +400,7 @@ function createPlayer(button) { ${videoTag}
close-icon - ${playerState}-icon + ${watchStatusIndicator} ${castButton} ${playerStats}
@@ -444,8 +484,12 @@ function getVideoPlayerDuration() { function getVideoPlayerWatchStatus() { var videoId = getVideoPlayerVideoId(); var watched = false; - if(document.getElementById(videoId) != null && document.getElementById(videoId).className != "unseen-icon") { - watched = true; + + 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) {
- ${playerState}-icon + ${watchStatusIndicator} ${videoPublished} | ${videoDuration}