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.html366
1 files changed, 171 insertions, 195 deletions
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 7184872..6b4f48f 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,22 +23,9 @@
{% endif %}
</span>
</div>
- {% elif (video_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>
- {% for fmt in hls_formats %}
- <li class="url-choice"><div class="url-choice-label">{{ fmt['video_quality'] }}: </div><input class="url-choice-copy" value="{{ fmt['url'] }}" readonly onclick="this.select();"></li>
- {% endfor %}
- </ol>
- </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 }}>
{% for source in subtitle_sources %}
{% if source['on'] %}
<track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}" default>
@@ -40,14 +33,19 @@
<track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}">
{% endif %}
{% endfor %}
+
+ {% if uni_sources %}
+ {% for source in uni_sources %}
+ <source src="{{ source['url'] }}" type="{{ source['type'] }}" title="{{ source['quality_string'] }}">
+ {% endfor %}
+ {% endif %}
</video>
+ {% if hls_unavailable and not uni_sources %}
+ <div class="playability-error">
+ <span>Error: HLS streams unavailable. Video may not play without JavaScript fallback.</span>
+ </div>
+ {% endif %}
</figure>
-
- {% if time_start != 0 %}
- <script>
- document.getElementById('js-video-player').currentTime = {{ time_start|tojson }};
- </script>
- {% endif %}
{% endif %}
<div class="sc-info">
@@ -72,34 +70,73 @@
<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 %}
+ <!-- Quality selector (populated by JS: HLS adds Auto+levels, DASH adds discrete sources) -->
+ <select id="quality-select" autocomplete="off">
+ </select>
+ {% else %}
+ <select id="quality-select" autocomplete="off" style="display: none;">
+ </select>
+ {% endif %}
+ {% if settings.use_video_player != 2 %}
+ {% if audio_tracks|length > 1 %}
+ <select id="audio-track-select" autocomplete="off">
+ {% for track in audio_tracks %}
+ <option value="{{ track['id'] }}" {{ 'selected' if track['is_default'] else '' }}>{{ track['name'] }}</option>
+ {% endfor %}
+ </select>
+ {% endif %}
+ {% 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">
- {% for format in download_formats %}
- <li class="download-format">
- <a class="download-link" href="{{ format['url'] }}" download="{{ title }}.{{ format['ext'] }}">
- {{ format['ext'] }} {{ format['video_quality'] }} {{ format['audio_quality'] }} {{ format['file_size'] }} {{ format['codecs'] }}
- </a>
- </li>
- {% endfor %}
- {% for download in other_downloads %}
- <li class="download-format">
- <a href="{{ download['url'] }}" download>
- {{ download['ext'] }} {{ download['label'] }}
- </a>
- </li>
- {% endfor %}
- </ul>
+ <summary class="download-dropdown-label">{{ _('Download') }}</summary>
+ <div class="download-table-container">
+ <table class="download-table" aria-label="Download formats">
+ <thead>
+ <tr>
+ <th scope="col">{{ _('Ext') }}</th>
+ <th scope="col">{{ _('Video') }}</th>
+ <th scope="col">{{ _('Audio') }}</th>
+ <th scope="col">{{ _('Size') }}</th>
+ <th scope="col">{{ _('Codecs') }}</th>
+ <th scope="col">{{ _('Link') }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for format in download_formats %}
+ <tr>
+ <td data-label="{{ _('Ext') }}">{{ format['ext'] }}</td>
+ <td data-label="{{ _('Video') }}">{{ format['video_quality'] }}</td>
+ <td data-label="{{ _('Audio') }}">{{ format['audio_quality'] }}</td>
+ <td data-label="{{ _('Size') }}">{{ format['file_size'] }}</td>
+ <td data-label="{{ _('Codecs') }}">{{ format['codecs'] }}</td>
+ <td data-label="{{ _('Link') }}"><a class="download-link" href="{{ format['url'] }}" download="{{ title }}.{{ format['ext'] }}" aria-label="{{ _('Download') }} {{ format['ext'] }} {{ format['video_quality'] }} {{ format['audio_quality'] }}">{{ _('Download') }}</a></td>
+ </tr>
+ {% endfor %}
+ {% for download in other_downloads %}
+ <tr>
+ <td data-label="{{ _('Ext') }}">{{ download['ext'] }}</td>
+ <td data-label="{{ _('Video') }}" colspan="3">{{ download['label'] }}</td>
+ <td data-label="{{ _('Codecs') }}">{{ download.get('codecs', 'N/A') }}</td>
+ <td data-label="{{ _('Link') }}"><a class="download-link" href="{{ download['url'] }}" download aria-label="{{ _('Download') }} {{ download['label'] }}">{{ _('Download') }}</a></td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div>
</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 +152,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 %}
@@ -123,7 +164,7 @@
{% endif %}
</div>
<details class="v-more-info">
- <summary>More info</summary>
+ <summary>{{ _('More info') }}</summary>
<div class="more-info-content">
<p>Tor exit node: {{ ip_address }}</p>
{% if invidious_used %}
@@ -143,154 +184,39 @@
<!-- 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">{{ _('AutoNext') }}: </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 %}
+ {% if playlist['author_url'] %}
+ <li><a href="{{ playlist['author_url'] }}" title="{{ playlist['author'] }}">{{ playlist['author'] }}</a></li>
+ {% elif playlist['author'] %}
+ <li>{{ playlist['author'] }}</li>
+ {% endif %}
+ </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">{{ _('AutoNext') }}: </label><input id="related-autoplay-toggle" type="checkbox" class="autoplay-toggle"></div>
{% endif %}
- <!-- /playlist -->
{% if subtitle_sources %}
<details id="transcript-details">
@@ -311,7 +237,7 @@
{% if settings.related_videos_mode != 0 %}
<details class="related-videos-outer" {{'open' if settings.related_videos_mode == 1 else ''}}>
- <summary>Related Videos</summary>
+ <summary>{{ _('Related Videos') }}</summary>
<nav class="related-videos-inner">
{% for info in related %}
{{ common_elements.item(info, include_badges=false) }}
@@ -325,10 +251,10 @@
<!-- comments -->
{% if settings.comments_mode != 0 %}
{% if comments_disabled %}
- <div class="comments-area-outer comments-disabled">Comments disabled</div>
+ <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) }}
@@ -342,12 +268,62 @@
<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 }};
+ let hls_manifest_url = {{ hls_manifest_url | tojson }};
+ let hls_unavailable = {{ hls_unavailable | tojson }};
+ let playback_mode = {{ playback_mode | tojson }};
+ let pair_sources = {{ pair_sources | tojson }};
+ let pair_idx = {{ pair_idx | 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 %}
+
+ {% set hls_should_work = (playback_mode == 'hls' or playback_mode == 'auto') and not hls_unavailable %}
+ {% set use_dash = not hls_should_work %}
+
+ {% if use_dash %}
+ <script src="/youtube.com/static/js/av-merge.js"></script>
+ {% else %}
+ <script src="/youtube.com/static/js/hls.min.js"
+ integrity="sha512-CSVqc4a7tn+tizDNt+eDoVn2fXYAwMDpCLrwGlWrOktNfZQ9gp4dKKScElMeRlrIifhliXs0a06BLaUgmMlCUw=="
+ crossorigin="anonymous"></script>
+ {% endif %}
+
+ {% if settings.use_video_player == 0 %}
+ <!-- Native player (no hotkeys) -->
+ {% if use_dash %}
+ <script src="/youtube.com/static/js/watch.dash.js"></script>
+ {% else %}
+ <script src="/youtube.com/static/js/watch.hls.js"></script>
+ {% endif %}
+ {% elif settings.use_video_player == 1 %}
+ <!-- Native player with hotkeys -->
+ <script src="/youtube.com/static/js/hotkeys.js"></script>
+ {% if use_dash %}
+ <script src="/youtube.com/static/js/watch.dash.js"></script>
+ {% else %}
+ <script src="/youtube.com/static/js/watch.hls.js"></script>
+ {% endif %}
+ {% elif 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>
+ {% if use_dash %}
+ <script src="/youtube.com/static/js/plyr.dash.start.js"></script>
+ {% else %}
+ <script src="/youtube.com/static/js/plyr.hls.start.js"></script>
+ {% endif %}
+ <!-- /plyr -->
+ {% endif %}
+
+ <!-- Storyboard Preview Thumbnails (native players only; Plyr handles this internally) -->
+ {% if settings.use_video_player != 2 and settings.native_player_storyboard %}
+ <script src="/youtube.com/static/js/storyboard-preview.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 2026-05-14 07:06:17 +0000