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.html242
1 files changed, 76 insertions, 166 deletions
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 7184872..0991457 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -3,8 +3,14 @@
{% import "common_elements.html" as common_elements %}
{% import "comments.html" as comments with context %}
{% block style %}
- <link href="/youtube.com/static/message_box.css" rel="stylesheet"/>
- <link href="/youtube.com/static/watch.css" rel="stylesheet"/>
+ <link href="/youtube.com/static/message_box.css" rel="stylesheet">
+ <link href="/youtube.com/static/watch.css" rel="stylesheet">
+ {% if settings.use_video_player == 2 %}
+ <!-- plyr -->
+ <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet">
+ <link href="/youtube.com/static/modules/plyr/custom_plyr.css" rel="stylesheet">
+ <!--/ plyr -->
+ {% endif %}
{% endblock style %}
{% block main %}
@@ -17,7 +23,7 @@
{% endif %}
</span>
</div>
- {% elif (video_sources.__len__() == 0 or live) and hls_formats.__len__() != 0 %}
+ {% elif (uni_sources.__len__() == 0 or live) and hls_formats.__len__() != 0 %}
<div class="live-url-choices">
<span>Copy a url into your video player:</span>
<ol>
@@ -28,10 +34,10 @@
</div>
{% else %}
<figure class="sc-video">
- <video id="js-video-player" playsinline controls>
- {% for video_source in video_sources %}
- <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
- {% endfor %}
+ <video id="js-video-player" playsinline controls {{ 'autoplay' if settings.autoplay_videos }}>
+ {% if uni_sources %}
+ <source src="{{ uni_sources[uni_idx]['url'] }}" type="{{ uni_sources[uni_idx]['type'] }}" data-res="{{ uni_sources[uni_idx]['quality'] }}">
+ {% endif %}
{% for source in subtitle_sources %}
{% if source['on'] %}
@@ -42,12 +48,6 @@
{% endfor %}
</video>
</figure>
-
- {% if time_start != 0 %}
- <script>
- document.getElementById('js-video-player').currentTime = {{ time_start|tojson }};
- </script>
- {% endif %}
{% endif %}
<div class="sc-info">
@@ -72,15 +72,26 @@
<address class="v-uploaded">Uploaded by <a href="{{ uploader_channel_url }}">{{ uploader }}</a></address>
<span class="v-views">{{ view_count }} views</span>
<time class="v-published" datetime="{{ time_published_utc }}">Published on {{ time_published }}</time>
- <span class="v-likes-dislikes">{{ like_count }} likes {{ dislike_count }} dislikes</span>
+ <span class="v-likes-dislikes">{{ like_count }} likes</span>
<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>
+ {% if settings.use_video_player != 2 %}
+ <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>
+ {% endfor %}
+ {% for src_pair in pair_sources %}
+ <option value='{"type": "pair", "index": {{ loop.index0}}}' {{ 'selected' if loop.index0 == pair_idx and using_pair_sources else '' }} >{{ src_pair['quality_string'] }}</option>
+ {% endfor %}
+ </select>
+ {% endif %}
</div>
-
<input class="v-checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
+ <span class="v-direct-link"><a href="https://youtu.be/{{ video_id }}" rel="noopener noreferrer" target="_blank">Direct Link</a></span>
+
+ {% if settings.use_video_download != 0 %}
<details class="v-download">
<summary class="download-dropdown-label">Download</summary>
<ul class="download-dropdown-content">
@@ -100,6 +111,9 @@
{% endfor %}
</ul>
</details>
+ {% else %}
+ <span class="v-download"></span>
+ {% endif %}
<span class="v-description">{{ common_elements.text_runs(description)|escape|urlize|timestamps|safe }}</span>
<div class="v-music-list">
@@ -115,7 +129,11 @@
{% for track in music_list %}
<tr>
{% for attribute in music_attributes %}
- <td>{{ track.get(attribute.lower(), '') }}</td>
+ {% if attribute.lower() == 'title' and track['url'] is not none %}
+ <td><a href="{{ track['url'] }}">{{ track.get(attribute.lower(), '') }}</a></td>
+ {% else %}
+ <td>{{ track.get(attribute.lower(), '') }}</td>
+ {% endif %}
{% endfor %}
</tr>
{% endfor %}
@@ -143,154 +161,35 @@
<!-- playlist -->
{% if playlist %}
- <div class="site-playlist">
- <div class="playlist-header">
- <a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a>
- <ul class="playlist-metadata">
- <li>Autoplay: <input type="checkbox" id="autoplay-toggle"></li>
- {% if playlist['current_index'] is none %}
- <li>[Error!]/{{ playlist['video_count'] }}</li>
- {% else %}
- <li>{{ playlist['current_index']+1 }}/{{ playlist['video_count'] }}</li>
- {% endif %}
- <li><a href="{{ playlist['author_url'] }}" title="{{ playlist['author'] }}">{{ playlist['author'] }}</a></li>
- </ul>
+ <div class="site-playlist">
+ <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 id="playlist-autoplay-toggle" type="checkbox" class="autoplay-toggle"></li>
+ {% if playlist['current_index'] is none %}
+ <li>[Error!]/{{ playlist['video_count'] }}</li>
+ {% else %}
+ <li>{{ playlist['current_index']+1 }}/{{ playlist['video_count'] }}</li>
+ {% endif %}
+ <li><a href="{{ playlist['author_url'] }}" title="{{ playlist['author'] }}">{{ playlist['author'] }}</a></li>
+ </ul>
+ </div>
+ <nav class="playlist-videos">
+ {% for info in playlist['items'] %}
+ {# non-lazy load for 5 videos surrounding current video #}
+ {# for non-js browsers or old such that IntersectionObserver doesn't work #}
+ {# -10 is sentinel to not load anything if there's no current_index for some reason #}
+ {% if (playlist.get('current_index', -10) - loop.index0)|abs is lt(5) %}
+ {{ common_elements.item(info, include_badges=false, lazy_load=false) }}
+ {% else %}
+ {{ common_elements.item(info, include_badges=false, lazy_load=true) }}
+ {% endif %}
+ {% endfor %}
+ </nav>
</div>
- <nav class="playlist-videos">
- {% for info in playlist['items'] %}
- {# non-lazy load for 5 videos surrounding current video #}
- {# for non-js browsers or old such that IntersectionObserver doesn't work #}
- {# -10 is sentinel to not load anything if there's no current_index for some reason #}
- {% if (playlist.get('current_index', -10) - loop.index0)|abs is lt(5) %}
- {{ common_elements.item(info, include_badges=false, lazy_load=false) }}
- {% else %}
- {{ common_elements.item(info, include_badges=false, lazy_load=true) }}
- {% endif %}
- {% endfor %}
- </nav>
- {% if playlist['current_index'] is not none %}
- <script>
- // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
- (function main() {
- // from https://stackoverflow.com/a/6969486
- function escapeRegExp(string) {
- return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
- }
- let playability_error = {{ 'true' if playability_error else 'false' }};
- let playlist_id = {{ playlist['id']|tojson }};
- playlist_id = escapeRegExp(playlist_id);
-
- // read cookies on whether to autoplay thru playlist
- // pain in the ass:
- // https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
- let cookieValue = document.cookie.replace(new RegExp(
- '(?:(?:^|.*;\\s*)autoplay_' + playlist_id + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1');
- let autoplayEnabled = 0;
- if(cookieValue.length === 0){
- autoplayEnabled = 0;
- } else {
- autoplayEnabled = Number(cookieValue);
- }
-
- // check the checkbox if autoplay is on
- let checkbox = document.querySelector('#autoplay-toggle');
- if(autoplayEnabled){
- checkbox.checked = true;
- }
-
- // listen for checkbox to turn autoplay on and off
- checkbox.addEventListener( 'change', function() {
- if(this.checked) {
- autoplayEnabled = 1;
- document.cookie = 'autoplay_' + playlist_id + '=1';
- } else {
- autoplayEnabled = 0;
- document.cookie = 'autoplay_' + playlist_id + '=0';
- }
- });
-
- const vid = document.getElementById('js-video-player');
- if(!playability_error){
- if(autoplayEnabled){
- vid.play();
- }
- }
-
- 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 %}
- let nextVideoDelay = 1000;
-
- // scroll playlist to proper position
- let pl = document.querySelector('.playlist-videos');
- // item height + gap == 100
- pl.scrollTop = 100*currentIndex;
-
- // 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 %}
- {% if playlist['id'] is not none %}
- <script>
- // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
- (function main() {
- // 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 id="related-autoplay-toggle" type="checkbox" class="autoplay-toggle"></div>
{% endif %}
- <!-- /playlist -->
{% if subtitle_sources %}
<details id="transcript-details">
@@ -328,7 +227,7 @@
<div class="comments-area-outer comments-disabled">Comments disabled</div>
{% else %}
<details class="comments-area-outer" {{'open' if settings.comments_mode == 1 else ''}}>
- <summary>{{ comment_count|commatize }} comment{{'s' if comment_count != 1 else ''}}</summary>
+ <summary>{{ comment_count|commatize }} comment{{'s' if comment_count != '1' else ''}}</summary>
<div class="comments-area-inner comments-area">
{% if comments_info %}
{{ comments.video_comments(comments_info) }}
@@ -340,14 +239,25 @@
</div>
+ <script src="/youtube.com/static/js/av-merge.js"></script>
+ <script src="/youtube.com/static/js/watch.js"></script>
<script>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
- data = {{ js_data|tojson }};
+ let storyboard_url = {{ storyboard_url | tojson }};
// @license-end
</script>
<script src="/youtube.com/static/js/common.js"></script>
<script src="/youtube.com/static/js/transcript-table.js"></script>
- {% if settings.use_video_hotkeys %} <script src="/youtube.com/static/js/hotkeys.js"></script> {% endif %}
+ {% if settings.use_video_player == 2 %}
+ <!-- plyr -->
+ <script src="/youtube.com/static/modules/plyr/plyr.min.js"
+ integrity="sha512-l6ZzdXpfMHRfifqaR79wbYCEWjLDMI9DnROvb+oLkKq6d7MGroGpMbI7HFpicvmAH/2aQO+vJhewq8rhysrImw=="
+ crossorigin="anonymous"></script>
+ <script src="/youtube.com/static/js/plyr-start.js"></script>
+ <!-- /plyr -->
+ {% elif settings.use_video_player == 1 %}
+ <script src="/youtube.com/static/js/hotkeys.js"></script>
+ {% endif %}
{% if settings.use_comments_js %} <script src="/youtube.com/static/js/comments.js"></script> {% endif %}
{% if settings.use_sponsorblock_js %} <script src="/youtube.com/static/js/sponsorblock.js"></script> {% endif %}
{% endblock main %}
generated by cgit v1.2.3 (git 2.25.1) at 2025-03-12 01:54:04 +0000