diff options
Diffstat (limited to 'youtube/templates/watch.html')
| -rw-r--r-- | youtube/templates/watch.html | 99 |
1 files changed, 72 insertions, 27 deletions
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index d62884f..2a6c823 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,16 +74,25 @@ <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"> @@ -244,26 +251,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 --> + {% if settings.use_video_player != 2 %} + <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 %} |