tubearchivist/tubearchivist
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist.git synced 2024-12-22 09:50:12 +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-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>

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

@ -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>

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

@ -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>

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

@ -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 %}

142
tubearchivist/static/script.js
View File

@ -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 = `<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,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) {
</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>