diff options
Diffstat (limited to 'youtube/templates/watch.html')
| -rw-r--r-- | youtube/templates/watch.html | 165 |
1 files changed, 114 insertions, 51 deletions
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index d62884f..079a01c 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -9,7 +9,7 @@ <!-- 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 --> + <!-- /plyr --> {% endif %} {% endblock style %} @@ -23,22 +23,9 @@ {% endif %} </span> </div> - {% 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> - {% 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 {{ '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'] %} <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}" default> @@ -46,7 +33,18 @@ <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> {% endif %} @@ -76,41 +74,68 @@ <div class="external-player-controls"> <input class="speed" id="speed-control" type="text" title="Video speed"> + {% if settings.use_video_player < 2 %} + <!-- Native player quality selector --> + <select id="quality-select" autocomplete="off"> + <option value="-1" selected>Auto</option> + <!-- Quality options will be populated by HLS --> + </select> + {% else %} + <select id="quality-select" autocomplete="off" style="display: none;"> + <!-- Quality options will be populated by HLS --> + </select> + {% endif %} {% 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> + {% 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> + <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> @@ -142,7 +167,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 %} @@ -166,7 +191,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 id="playlist-autoplay-toggle" type="checkbox" class="autoplay-toggle"></li> + <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 %} @@ -193,7 +218,7 @@ </nav> </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> + <div class="related-autoplay"><label for="related-autoplay-toggle">{{ _('AutoNext') }}: </label><input id="related-autoplay-toggle" type="checkbox" class="autoplay-toggle"></div> {% endif %} {% if subtitle_sources %} @@ -215,7 +240,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) }} @@ -229,10 +254,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) }} @@ -244,26 +269,64 @@ </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 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_player == 2 %} + + {% 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> - <script src="/youtube.com/static/js/plyr-start.js"></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 --> - {% elif settings.use_video_player == 1 %} - <script src="/youtube.com/static/js/hotkeys.js"></script> {% 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 %} |