aboutsummaryrefslogtreecommitdiffstats
path: root/youtube/templates/watch.html
diff options
context:
space:
mode:
Diffstat (limited to 'youtube/templates/watch.html')
-rw-r--r--youtube/templates/watch.html219
1 files changed, 4 insertions, 215 deletions
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 4b2aa50..5b0fce5 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -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,172 +182,10 @@
{% 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>
- {% 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>
+ <div class="related-autoplay"><label for="related-autoplay-toggle">Autoplay: </label><input type="checkbox" class="autoplay-toggle"></div>
{% endif %}
- <!-- /playlist -->
{% if subtitle_sources %}
<details id="transcript-details">
@@ -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 %}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 05:35:29 +0000