mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-04 19:30:13 +00:00
Continue Watching Section (#188)
* Replaced isWatched() function. * Switched to `updateVideoWatchStatus()` function * Updated Onclick to `updateVideoWatchStatus(this)` * Handle `this` input in `updateVideoWatchStatus()`
This commit is contained in:
parent
1ce832b846
commit
6e3df21f8c
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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 %}
|
||||||
|
@ -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");
|
|
||||||
seenIcon.setAttribute('onclick', "isUnwatched(this.id)");
|
|
||||||
seenIcon.classList = 'seen-icon';
|
|
||||||
document.getElementById(youtube_id).replaceWith(seenIcon);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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
|
// 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,9 +484,13 @@ 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") {
|
|
||||||
|
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;
|
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,14 +650,22 @@ 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
|
||||||
function searchMulti(query) {
|
function searchMulti(query) {
|
||||||
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user