tubearchivist
/
tubearchivist
mirror of https://github.com/tubearchivist/tubearchivist.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added sponsorblock skipping (#208) 

* Added sponsorblock skipping.

* Basic framework for sending SB timestamps

* Sponsorblock send timestamp UI improvements

* Added Sponsorblock Icons

* Minor UI tweaks

* Revert UI changes, implement in new UI

* Added notification when sponsor segment is skipped

* Add formatting for notifications & SB messages

* Added SB messages to JS player

* Added SB skip notifcation to videos page.

* Added SB messages to video page

* Change SB messages.

* Check channel_overwrites

* Check Per Channel Settings.

* Cleanup
This commit is contained in:
Nathan DeTar 2022-04-10 02:20:58 -07:00 committed by GitHub
parent 31378ac756
commit c316d05549
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 199 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,36 @@
{% load static %}
{% load humanize %}
<div class="video-main"></div>
<div class="notifications" id="notifications"></div>
<div class="sponsorblock" id="sponsorblock">
{% if video.channel.channel_overwrites.integrate_sponsorblock %}
{% if video.channel.channel_overwrites.integrate_sponsorblock == True %}
{% if not video.sponsorblock %}
<h4>This video doesn't have any sponsor segments added. To add a segment go to <u><a href="https://www.youtube.com/watch?v={{ video.youtube_id }}">this video on YouTube</a></u> and add a segment using the <u><a href="https://sponsor.ajay.app/">SponsorBlock</a></u> extension.</h4>
{% endif %}
{% if video.sponsorblock %}
{% for segment in video.sponsorblock %}
{% if segment.locked != 1 %}
<h4>This video has unlocked sponsor segments. Go to <u><a href="https://www.youtube.com/watch?v={{ video.youtube_id }}">this video on YouTube</a></u> and vote on the segments using the <u><a href="https://sponsor.ajay.app/">SponsorBlock</a></u> extension.</h4>
{{ break }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% elif config.downloads.integrate_sponsorblock %}
{% if not video.sponsorblock %}
<h4>This video doesn't have any sponsor segments added. To add a segment go to <u><a href="https://www.youtube.com/watch?v={{ video.youtube_id }}">this video on YouTube</a></u> and add a segment using the <u><a href="https://sponsor.ajay.app/">SponsorBlock</a></u> extension.</h4>
{% endif %}
{% if video.sponsorblock %}
{% for segment in video.sponsorblock %}
{% if segment.locked != 1 %}
<h4>This video has unlocked sponsor segments. Go to <u><a href="https://www.youtube.com/watch?v={{ video.youtube_id }}">this video on YouTube</a></u> and vote on the segments using the <u><a href="https://sponsor.ajay.app/">SponsorBlock</a></u> extension.</h4>
{{ break }}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
</div>
<div class="boxed-content">
<div class="title-bar">
{% if cast %}
@ -114,6 +144,7 @@
</div>
<script>
var videoData = getVideoData('{{ video.youtube_id }}');
sponsorBlock = videoData.data.sponsorblock;
var videoProgress = getVideoProgress('{{ video.youtube_id }}').position;
window.onload = insertVideoTag(videoData, videoProgress);
</script>

19
tubearchivist/static/css/style.css
View File

@ -62,6 +62,13 @@ h3 {
color: var(--accent-font-light);
}
h4 {
font-size: 0.7em;
margin-bottom: 7px;
font-family: Sen-Regular, sans-serif;
color: var(--accent-font-light);
}
p, i, li {
font-family: Sen-Regular, sans-serif;
margin-bottom: 10px;
@ -355,6 +362,18 @@ button:hover {
height: 100vh;
}
.notifications {
text-align: center;
width: 80%;
margin: auto;
}
.sponsorblock {
text-align: center;
width: 80%;
margin: auto;
}
.video-player video,
.video-main video {
max-height: 80vh;

150
tubearchivist/static/script.js
View File

@ -327,9 +327,33 @@ function cancelDelete() {
}
// player
var sponsorBlock = [];
function createPlayer(button) {
var videoId = button.getAttribute('data-id');
var videoData = getVideoData(videoId);
var sponsorBlockElements = '';
if (videoData.config.downloads.integrate_sponsorblock && (typeof(videoData.data.channel.channel_overwrites) == "undefined" || typeof(videoData.data.channel.channel_overwrites.integrate_sponsorblock) == "undefined" || videoData.data.channel.channel_overwrites.integrate_sponsorblock == true)) {
sponsorBlock = videoData.data.sponsorblock;
if (!sponsorBlock) {
sponsorBlockElements = `
<div class="sponsorblock" id="sponsorblock">
<h4>This video doesn't have any sponsor segments added. To add a segment go to <u><a href="https://www.youtube.com/watch?v=${videoId}">this video on Youtube</a></u> and add a segment using the <u><a href="https://sponsor.ajay.app/">SponsorBlock</a></u> extension.</h4>
</div>
`;
} else {
for(let i in sponsorBlock) {
if(sponsorBlock[i].locked != 1) {
sponsorBlockElements = `
<div class="sponsorblock" id="sponsorblock">
<h4>This video has unlocked sponsor segments. Go to <u><a href="https://www.youtube.com/watch?v=${videoId}">this video on YouTube</a></u> and vote on the segments using the <u><a href="https://sponsor.ajay.app/">SponsorBlock</a></u> extension.</h4>
</div>
`;
break;
}
}
}
}
var videoProgress = getVideoProgress(videoId).position;
var videoName = videoData.data.title;
@ -353,7 +377,6 @@ function createPlayer(button) {
var channelName = videoData.data.channel.channel_name;
removePlayer();
// document.getElementById(videoId).outerHTML = ''; // Remove watch indicator from video info
// If cast integration is enabled create cast button
var castButton = '';
@ -383,6 +406,8 @@ function createPlayer(button) {
const markup = `
<div class="video-player" data-id="${videoId}">
${videoTag}
<div class="notifications" id="notifications"></div>
${sponsorBlockElements}
<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">
${watchStatusIndicator}
@ -400,6 +425,53 @@ function createPlayer(button) {
divPlayer.innerHTML = markup;
}
// function sendSponsorBlockVote(uuid, vote) {
// var videoId = getVideoPlayerVideoId();
// postSponsorSegmentVote(videoId, uuid, vote);
// }
// var sponsorBlockTimestamps = [];
// function sendSponsorBlockSegment() {
// var videoId = getVideoPlayerVideoId();
// var currentTime = getVideoPlayerCurrentTime();
// var sponsorBlockElement = document.getElementById("sponsorblock");
// if (sponsorBlockTimestamps[1]) {
// if (sponsorBlockTimestamps[1] > sponsorBlockTimestamps[0]) {
// postSponsorSegment(videoId, sponsorBlockTimestamps[0], sponsorBlockTimestamps[1]);
// sponsorBlockElement.innerHTML = `
// <p>Timestamps sent! (Not really)</p>
// `;
// setTimeout(function(){
// sponsorBlockElement.innerHTML = `
// <img src="/static/img/PlayerStartIconSponsorBlocker.svg" class="sponsorblockIcon"><button onclick="sendSponsorBlockSegment()">Start</button>
// `;
// }, 3000);
// } else {
// sponsorBlockElement.innerHTML = `
// <span class="danger-zone">Invalid Timestamps!</span>
// `;
// setTimeout(function(){
// sponsorBlockElement.innerHTML = `
// <img src="/static/img/PlayerStartIconSponsorBlocker.svg" class="sponsorblockIcon"><button onclick="sendSponsorBlockSegment()">Start</button>
// `;
// }, 3000);
// }
// sponsorBlockTimestamps = [];
// } else if (sponsorBlockTimestamps[0]) {
// sponsorBlockTimestamps.push(currentTime);
// sponsorBlockElement.innerHTML = `
// <img src="/static/img/PlayerStartIconSponsorBlocker.svg" class="sponsorblockIcon" onclick="getVideoPlayer().currentTime = '${sponsorBlockTimestamps[0]}'"><p>${sponsorBlockTimestamps[0].toFixed(1)} s | </p>
// <img src="/static/img/PlayerStopIconSponsorBlocker.svg" class="sponsorblockIcon" onclick="getVideoPlayer().currentTime = '${sponsorBlockTimestamps[1]}'"><p>${sponsorBlockTimestamps[1].toFixed(1)} s | </p>
// <img src="/static/img/PlayerUploadIconSponsorBlocker.svg" class="sponsorblockIcon"><button onclick="sendSponsorBlockSegment()">Confirm</button>
// `;
// } else {
// sponsorBlockTimestamps.push(currentTime);
// sponsorBlockElement.innerHTML = `
// <img src="/static/img/PlayerStopIconSponsorBlocker.svg" class="sponsorblockIcon"><button onclick="sendSponsorBlockSegment()">End</button>
// `;
// }
// }
// Add video tag to video page when passed a video id, function loaded on page load `video.html (115-117)`
function insertVideoTag(videoData, videoProgress) {
var videoTag = createVideoTag(videoData, videoProgress);
@ -488,6 +560,32 @@ function onVideoProgress() {
var videoId = getVideoPlayerVideoId();
var currentTime = getVideoPlayerCurrentTime();
var duration = getVideoPlayerDuration();
var videoElement = getVideoPlayer();
// var sponsorBlockElement = document.getElementById("sponsorblock");
var notificationsElement = document.getElementById("notifications");
if (sponsorBlock) {
for(let i in sponsorBlock) {
if(sponsorBlock[i].segment[0] <= currentTime + 0.3 && sponsorBlock[i].segment[0] >= currentTime) {
videoElement.currentTime = sponsorBlock[i].segment[1];
notificationsElement.innerHTML += `<h3 id="notification-${sponsorBlock[i].UUID}">Skipped sponsor segment from ${formatTime(sponsorBlock[i].segment[0])} to ${formatTime(sponsorBlock[i].segment[1])}.</h3>`;
}
// if(currentTime >= sponsorBlock[i].segment[1] && currentTime <= sponsorBlock[i].segment[1] + 0.2) {
// if(sponsorBlock[i].locked != 1) {
// sponsorBlockElement.innerHTML += `
// <div id="${sponsorBlock[i].UUID}">
// <button onclick="sendSponsorBlockVote('${sponsorBlock[i].UUID}', 1)">Up Vote</button>
// <button onclick="sendSponsorBlockVote('${sponsorBlock[i].UUID}', -1)">Down Vote</button>
// </div>`;
// }
// }
if(currentTime > sponsorBlock[i].segment[1] + 10) {
var notificationsElementUUID = document.getElementById("notification-" + sponsorBlock[i].UUID);
if(notificationsElementUUID) {
notificationsElementUUID.outerHTML = '';
}
}
}
}
if ((currentTime % 10).toFixed(1) <= 0.2) { // Check progress every 10 seconds or else progress is checked a few times a second
postVideoProgress(videoId, currentTime);
if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
@ -542,6 +640,32 @@ function formatNumbers(number) {
return numberFormatted;
}
// Formats times in seconds for frontend
function formatTime(time) {
var hoursUnformatted = time / 3600;
var minutesUnformatted = (time % 3600) / 60;
var secondsUnformatted = time % 60;
var hoursFormatted = Math.trunc(hoursUnformatted);
if(minutesUnformatted < 10 && hoursFormatted > 0) {
var minutesFormatted = "0" + Math.trunc(minutesUnformatted);
} else {
var minutesFormatted = Math.trunc(minutesUnformatted);
}
if(secondsUnformatted < 10) {
var secondsFormatted = "0" + Math.trunc(secondsUnformatted);
} else {
var secondsFormatted = Math.trunc(secondsUnformatted);
}
var timeUnformatted = '';
if(hoursFormatted > 0) {
timeUnformatted = hoursFormatted + ":"
}
var timeFormatted = timeUnformatted.concat(minutesFormatted, ":", secondsFormatted);
return timeFormatted;
}
// Gets video data when passed video ID
function getVideoData(videoId) {
var apiEndpoint = "/api/video/" + videoId + "/";
@ -599,6 +723,30 @@ function postVideoProgress(videoId, videoProgress) {
}
}
// Send sponsor segment when given video id and and timestamps
function postSponsorSegment(videoId, startTime, endTime) {
var apiEndpoint = "/api/video/" + videoId + "/sponsor/";
var data = {
"segment": {
"startTime": startTime,
"endTime": endTime
}
};
apiRequest(apiEndpoint, "POST", data);
}
// Send sponsor segment when given video id and and timestamps
function postSponsorSegmentVote(videoId, uuid, vote) {
var apiEndpoint = "/api/video/" + videoId + "/sponsor/";
var data = {
"vote": {
"uuid": uuid,
"yourVote": vote
}
};
apiRequest(apiEndpoint, "POST", data);
}
// Makes api requests when passed an endpoint and method ("GET", "POST", "DELETE")
function apiRequest(apiEndpoint, method, data) {
const xhttp = new XMLHttpRequest();