tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-04 19:30:13 +00:00
Code Issues Projects Releases Wiki Activity

Continue Watching Section (#188)

Browse Source 
* Replaced isWatched() function.

* Switched to `updateVideoWatchStatus()` function

* Updated Onclick to `updateVideoWatchStatus(this)`

* Handle `this` input in `updateVideoWatchStatus()`
This commit is contained in:
Nathan DeTar 2022-03-10 05:20:23 -08:00 committed by GitHub
parent 1ce832b846
commit 6e3df21f8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 107 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,9 +124,9 @@
<div class="video-desc {{ view_style }}"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %} {% 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 %} {% 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 %} {% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div> </div>

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

@ -27,9 +27,9 @@
<div class="video-desc {{ view_style }}"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.youtube_id }}">
{% if video.player.watched %} {% 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 %} {% 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 %} {% endif %}
<span>{{ video.published }} | {{ video.player.duration_str }}</span> <span>{{ video.published }} | {{ video.player.duration_str }}</span>
</div> </div>
@ -103,9 +103,9 @@
<div class="video-desc {{ view_style }}"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %} {% 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 %} {% 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 %} {% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div> </div>

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

@ -105,9 +105,9 @@
<div class="video-desc {{ view_style }}"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %} {% 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 %} {% 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 %} {% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div> </div>

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

@ -32,9 +32,9 @@
<p>Last refreshed: {{ video.vid_last_refresh }}</p> <p>Last refreshed: {{ video.vid_last_refresh }}</p>
<p class="video-info-watched">Watched: <p class="video-info-watched">Watched:
{% if video.player.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 %} {% 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 %} {% endif %}
</p> </p>
{% if video.active %} {% if video.active %}

142
tubearchivist/static/script.js
View File

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