heckyel/yt-local
0
0
Fork 0
Code Issues Pull Requests Releases Activity

watch.html: Move loose inline javascript into watch.js

Browse Source 
The number of inline code blocks and the dependencies between them
became unmanageable.

From 9d96c07a3c2e68f1893634574c3be64e41a2c041 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
This commit is contained in:
Jesús
2021-08-29 22:43:10 -05:00
parent 56b17c634c
commit 309ff40943
5 changed files with 209 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
youtube/templates/watch.html
View File

@@ -54,49 +54,6 @@
{% endfor %}
</video>
</figure>
<script src="/youtube.com/static/js/av-merge.js"></script>
<script>
function changeQuality(selection) {
var video = document.getElementById('js-video-player');
var currentVideoTime = video.currentTime;
var videoPaused = video.paused;
var videoSpeed = video.playbackRate;
var videoSource;
if (avMerge)
avMerge.close();
if (selection.type == 'uni'){
videoSource = data['uni_sources'][selection.index];
video.src = videoSource.url;
} else {
let srcPair = data['pair_sources'][selection.index];
videoSource = srcPair[0];
avInitialize(video, srcPair, currentVideoTime);
}
video.currentTime = currentVideoTime;
if (!videoPaused){
video.play();
}
video.playbackRate = videoSpeed;
}
</script>
{% if using_pair_sources %}
<!-- Initialize av-merge -->
<script>
var srcPair = data['pair_sources'][data['pair_idx']];
var video = document.getElementById('js-video-player');
var videoSource = srcPair[0];
// Do it dynamically rather than as the default in jinja
// in case javascript is disabled
avInitialize(video, srcPair, 0);
</script>
{% endif %}
{% if time_start != 0 %}
<script>
document.getElementById('js-video-player').currentTime = {{ time_start|tojson }};
</script>
{% endif %}
{% endif %}
<div class="sc-info">
@@ -125,7 +82,6 @@
<div class="external-player-controls">
<input class="speed" id="speed-control" type="text" title="Video speed">
<script src="/youtube.com/static/js/speedyplay.js"></script>
<select id="quality-select" autocomplete="off">
{% for src in uni_sources %}
<option value='{"type": "uni", "index": {{ loop.index0 }}}' {{ 'selected' if loop.index0 == uni_idx and not using_pair_sources else '' }} >{{ src['quality_string'] }}</option>
@@ -134,13 +90,6 @@
<option value='{"type": "pair", "index": {{ loop.index0}}}' {{ 'selected' if loop.index0 == pair_idx and using_pair_sources else '' }} >{{ src_pair[0]['quality_string'] }}, {{ src_pair[1]['quality_string'] }}</option>
{% endfor %}
</select>
<script>
document.getElementById('quality-select').addEventListener(
'change', function(e) {
changeQuality(JSON.parse(this.value))
}
);
</script>
</div>
<input class="v-checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
@@ -212,7 +161,7 @@
<div class="playlist-header">
<a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a>
<ul class="playlist-metadata">
<li><label for="playlist-autoplay-toggle">Autoplay: </label><input type="checkbox" id="playlist-autoplay-toggle"></li>
<li><label for="playlist-autoplay-toggle">Autoplay: </label><input type="checkbox" class="autoplay-toggle"></li>
{% if playlist['current_index'] is none %}
<li>[Error!]/{{ playlist['video_count'] }}</li>
{% else %}
@@ -233,173 +182,11 @@
{% endif %}
{% endfor %}
</nav>
{% if playlist['id'] is not none %}
<script>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
// lazy load playlist images
// copied almost verbatim from
// https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/
// IntersectionObserver isn't supported in pre-quantum
// firefox versions, but the alternative of making it
// manually is a performance drain, so oh well
let observer = new IntersectionObserver(lazyLoad, {
// where in relation to the edge of the viewport, we are observing
rootMargin: "100px",
// how much of the element needs to have intersected
// in order to fire our loading function
threshold: 1.0
});
function lazyLoad(elements) {
elements.forEach(item => {
if (item.intersectionRatio > 0) {
// set the src attribute to trigger a load
item.target.src = item.target.dataset.src;
// stop observing this element. Our work here is done!
observer.unobserve(item.target);
};
});
};
// Tell our observer to observe all img elements with a "lazy" class
let lazyImages = document.querySelectorAll('img.lazy');
lazyImages.forEach(img => {
observer.observe(img);
});
// @license-end
</script>
{% endif %}
</div>
{% elif settings.related_videos_mode != 0 %}
<div class="related-autoplay"><label for="related-autoplay-toggle">Autoplay: </label><input type="checkbox" id="related-autoplay-toggle"></div>
<div class="related-autoplay"><label for="related-autoplay-toggle">Autoplay: </label><input type="checkbox" class="autoplay-toggle"></div>
{% endif %}
{% if settings.related_videos_mode != 0 or playlist %}
<script>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
let playability_error = {{ 'true' if playability_error else 'false' }};
{% if playlist and playlist['current_index'] is not none %}
{% set isPlaylist = true %}
{% endif %}
{% if isPlaylist %}
// from https://stackoverflow.com/a/6969486
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
let playlist_id = {{ playlist['id']|tojson }};
playlist_id = escapeRegExp(playlist_id);
{% endif %}
// read cookies on whether to autoplay
// pain in the ass:
// https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
{% if isPlaylist %}
let cookieValue = document.cookie.replace(new RegExp(
'(?:(?:^|.*;\\s*)autoplay_' + playlist_id + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1');
{% else %}
let cookieValue = document.cookie.replace(new RegExp(
'(?:(?:^|.*;\\s*)autoplay\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1');
{% endif %}
let autoplayEnabled = 0;
if(cookieValue.length === 0){
autoplayEnabled = 0;
} else {
autoplayEnabled = Number(cookieValue);
}
// check the autoplay checkbox if autoplay is on
{% if isPlaylist %}
let PlaylistAutoplayCheck = document.getElementById('playlist-autoplay-toggle');
if(autoplayEnabled){
PlaylistAutoplayCheck.checked = true;
}
{% else %}
let RelatedAutoplayCheck = document.getElementById('related-autoplay-toggle');
if(autoplayEnabled){
RelatedAutoplayCheck.checked = true;
}
{% endif %}
// listen for checkbox to turn autoplay on and off
let cookie = 'autoplay'
{% if isPlaylist %}
cookie += '_' + playlist_id;
PlaylistAutoplayCheck.addEventListener( 'change', function() {
if(this.checked) {
autoplayEnabled = 1;
document.cookie = cookie + '=1; SameSite=Strict';
} else {
autoplayEnabled = 0;
document.cookie = cookie + '=0; SameSite=Strict';
}
});
{% else %}
RelatedAutoplayCheck.addEventListener( 'change', function() {
if(this.checked) {
autoplayEnabled = 1;
document.cookie = cookie + '=1; SameSite=Strict';
} else {
autoplayEnabled = 0;
document.cookie = cookie + '=0; SameSite=Strict';
}
});
{% endif %}
const vid = document.getElementById('js-video-player');
if(!playability_error){
// play the video if autoplay is on
if(autoplayEnabled){
vid.play();
}
}
// determine next video url
{% if isPlaylist %}
let currentIndex = {{ playlist['current_index']|tojson }};
{% if playlist['current_index']+1 == playlist['items']|length %}
let nextVideoUrl = null;
{% else %}
let nextVideoUrl = {{ (playlist['items'][playlist['current_index']+1]['url'])|tojson }};
{% endif %}
// scroll playlist to proper position
// item height + gap == 100
let pl = document.querySelector('.playlist-videos');
pl.scrollTop = 100*currentIndex;
{% else %}
{% if related|length == 0 %}
let nextVideoUrl = null;
{% else %}
let nextVideoUrl = {{ (related[0]['url'])|tojson }};
{% endif %}
{% endif %}
let nextVideoDelay = 1000;
// go to next video when video ends
// https://stackoverflow.com/a/2880950
if (nextVideoUrl) {
if(playability_error){
videoEnded();
} else {
vid.addEventListener('ended', videoEnded, false);
}
function nextVideo(){
if(autoplayEnabled){
window.location.href = nextVideoUrl;
}
}
function videoEnded(e) {
window.setTimeout(nextVideo, nextVideoDelay);
}
}
// @license-end
</script>
{% endif %}
<!-- /playlist -->
{% if subtitle_sources %}
<details id="transcript-details">
<summary>Transcript</summary>
@@ -448,6 +235,8 @@
</div>
<script src="/youtube.com/static/js/av-merge.js"></script>
<script src="/youtube.com/static/js/watch.js"></script>
<script src="/youtube.com/static/js/common.js"></script>
<script src="/youtube.com/static/js/transcript-table.js"></script>
{% if settings.use_video_player == 2 %}