From 309ff409436a5a016c33f71f8b483d9ed226aaaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs?= <heckyel@hyperbola.info>
Date: Sun, 29 Aug 2021 22:43:10 -0500
Subject: watch.html: Move loose inline javascript into watch.js

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>
---
 youtube/templates/watch.html | 219 +------------------------------------------
 1 file changed, 4 insertions(+), 215 deletions(-)

(limited to 'youtube/templates/watch.html')

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 %}
-- 
cgit v1.2.3