aboutsummaryrefslogtreecommitdiffstats
path: root/youtube/templates/embed.html
diff options
context:
space:
mode:
authorAstounds <kirito@disroot.org>2026-04-20 01:22:55 -0400
committerheckyel <heckyel@noreply.git.fridu.us>2026-04-20 01:22:55 -0400
commita0f315be51ef121618e73d5b450c8616c0d11d21 (patch)
treeb68f1268a901ded1a7afd2f12a16aed8d9f3d307 /youtube/templates/embed.html
parent62a028968e6d9b4e821b6014d6658b8317328fcf (diff)
downloadyt-local-a0f315be51ef121618e73d5b450c8616c0d11d21.tar.lz
yt-local-a0f315be51ef121618e73d5b450c8616c0d11d21.tar.xz
yt-local-a0f315be51ef121618e73d5b450c8616c0d11d21.zip
feature/hls: Add HLS playback support, and refactors documentation for better usability and maintainability. (#1)HEADv0.5.0master
## 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>
Diffstat (limited to 'youtube/templates/embed.html')
-rw-r--r--youtube/templates/embed.html72
1 files changed, 56 insertions, 16 deletions
diff --git a/youtube/templates/embed.html b/youtube/templates/embed.html
index 85d2d78..b1ad63f 100644
--- a/youtube/templates/embed.html
+++ b/youtube/templates/embed.html
@@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com; {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
+ <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src 'self' blob: https://*.googlevideo.com; img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com; connect-src 'self' https://*.googlevideo.com; font-src 'self' data:;">
<title>{{ title }}</title>
<link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
{% if settings.use_video_player == 2 %}
<!-- plyr -->
<link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet">
- <!--/ plyr -->
+ <!-- /plyr -->
{% endif %}
<style>
body {
@@ -37,9 +37,6 @@
<body>
<video id="js-video-player" controls autofocus onmouseleave="{{ title }}"
oncontextmenu="{{ title }}" onmouseenter="{{ title }}" title="{{ title }}">
- {% 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>
@@ -47,28 +44,71 @@
<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 js_data %}
- <script>
- // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
- data = {{ js_data|tojson }};
- // @license-end
- </script>
- {% endif %}
+
<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>
- {% 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 not use_dash %}
+ <script src="/youtube.com/static/js/hls.min.js"
+ integrity="sha512-CSVqc4a7tn+tizDNt+eDoVn2fXYAwMDpCLrwGlWrOktNfZQ9gp4dKKScElMeRlrIifhliXs0a06BLaUgmMlCUw=="
+ crossorigin="anonymous"></script>
+ {% endif %}
+
+ <script src="/youtube.com/static/js/common.js"></script>
+
+ {% if settings.use_video_player == 0 %}
+ <!-- Native player -->
+ {% 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 %}
+
+ {% if use_dash %}
+ <script src="/youtube.com/static/js/av-merge.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 %}
</body>
</html>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-21 07:49:47 +0000