From a0f315be51ef121618e73d5b450c8616c0d11d21 Mon Sep 17 00:00:00 2001
From: Astounds <kirito@disroot.org>
Date: Mon, 20 Apr 2026 01:22:55 -0400
Subject: feature/hls: Add HLS playback support, and refactors documentation
 for better usability and maintainability. (#1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Overview
This PR introduces HLS playback support, improves the player experience, and refactors documentation for better usability and maintainability.

## Key Features

### HLS Playback Support
- Add HLS integration via new JavaScript assets:
  - `hls.min.js`
  - `plyr.hls.start.js`
  - `watch.hls.js`
- Separate DASH and HLS logic:
  - `plyr-start.js` → `plyr.dash.start.js`
  - `watch.js` → `watch.dash.js`
- Update templates (`embed.html`, `watch.html`) for conditional player loading

### Native Storyboard Preview
- Add `native_player_storyboard` setting in `settings.py`
- Implement hover thumbnail preview for native player modes
- Add `storyboard-preview.js`

### UI and Player Adjustments
- Update templates and styles (`custom_plyr.css`)
- Modify backend modules to support new player modes:
  - `watch.py`, `channel.py`, `util.py`, and related components

### Internationalization
- Update translation files:
  - `messages.po`
  - `messages.pot`

### Testing and CI
- Add and update tests:
  - `test_shorts.py`
  - `test_util.py`
- Minor CI and release script improvements

## Documentation

### OpenRC Service Guide Rewrite
- Restructure `docs/basic-script-openrc/README.md` into:
  - Prerequisites
  - Installation
  - Service Management
  - Verification
  - Troubleshooting
- Add admonition blocks:
  - `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, `[!CAUTION]`
- Fix log inspection command:
  ```bash
  doas tail -f /var/log/ytlocal.log
  ````

* Add path placeholders and clarify permission requirements
* Remove legacy and duplicate content

Reviewed-on: https://git.fridu.us/heckyel/yt-local/pulls/1
Co-authored-by: Astounds <kirito@disroot.org>
Co-committed-by: Astounds <kirito@disroot.org>
---
 youtube/templates/watch.html | 165 ++++++++++++++++++++++++++++++-------------
 1 file changed, 114 insertions(+), 51 deletions(-)

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

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