Astounds
a0f315be51
## 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: #1 Co-authored-by: Astounds <kirito@disroot.org> Co-committed-by: Astounds <kirito@disroot.org>
333 lines
17 KiB
HTML
333 lines
17 KiB
HTML
{% set page_title = title %}
|
|
{% extends "base.html" %}
|
|
{% 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">
|
|
{% 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 %}
|
|
{% if playability_error %}
|
|
<div class="playability-error">
|
|
<span>{{ 'Error: ' + playability_error }}
|
|
{% if invidious_reload_button %}
|
|
<a href="{{ video_url }}&use_invidious=0"><br>
|
|
Reload without invidious (for usage of new identity button).</a>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% else %}
|
|
<figure class="sc-video">
|
|
<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>
|
|
{% else %}
|
|
<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 %}
|
|
|
|
<div class="sc-info">
|
|
<div class="video-info">
|
|
<h1 class="v-title">{{ title }}</h1>
|
|
|
|
<ul class="labels">
|
|
{%- if unlisted -%}
|
|
<li class="is-unlisted">Unlisted</li>
|
|
{%- endif -%}
|
|
{%- if age_restricted -%}
|
|
<li class="age-restricted">Age-restricted</li>
|
|
{%- endif -%}
|
|
{%- if limited_state -%}
|
|
<li>Limited state</li>
|
|
{%- endif -%}
|
|
{%- if live -%}
|
|
<li>Live</li>
|
|
{%- endif -%}
|
|
</ul>
|
|
|
|
<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</span>
|
|
|
|
<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 %}
|
|
{% 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>
|
|
<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">
|
|
{% if music_list.__len__() != 0 %}
|
|
<hr>
|
|
<table>
|
|
<caption>Music</caption>
|
|
<tr>
|
|
{% for attribute in music_attributes %}
|
|
<th>{{ attribute }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
{% for track in music_list %}
|
|
<tr>
|
|
{% for attribute in music_attributes %}
|
|
{% 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 %}
|
|
</table>
|
|
{% endif %}
|
|
</div>
|
|
<details class="v-more-info">
|
|
<summary>{{ _('More info') }}</summary>
|
|
<div class="more-info-content">
|
|
<p>Tor exit node: {{ ip_address }}</p>
|
|
{% if invidious_used %}
|
|
<p>Used Invidious as fallback.</p>
|
|
{% endif %}
|
|
<p class="allowed-countries">Allowed countries: {{ allowed_countries|join(', ') }}</p>
|
|
{% if settings.use_sponsorblock_js %}
|
|
<ul class="more-actions">
|
|
<li><label><input type=checkbox id=skip_sponsors checked>skip sponsors</label> <span id=skip_n></span>
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<div class="side-videos">
|
|
|
|
<!-- 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><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>
|
|
{% 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 %}
|
|
|
|
{% if subtitle_sources %}
|
|
<details id="transcript-details">
|
|
<summary>Transcript</summary>
|
|
<div id="transcript-div">
|
|
<select id="select-tt">
|
|
{% for source in subtitle_sources %}
|
|
<option>{{ source['label'] }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<label for="transcript-use-table">Table view</label>
|
|
<input id="transcript-use-table" type="checkbox">
|
|
<table id="transcript-table"></table>
|
|
</div>
|
|
</details>
|
|
{% endif %}
|
|
|
|
|
|
{% if settings.related_videos_mode != 0 %}
|
|
<details class="related-videos-outer" {{'open' if settings.related_videos_mode == 1 else ''}}>
|
|
<summary>{{ _('Related Videos') }}</summary>
|
|
<nav class="related-videos-inner">
|
|
{% for info in related %}
|
|
{{ common_elements.item(info, include_badges=false) }}
|
|
{% endfor %}
|
|
</nav>
|
|
</details>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<!-- comments -->
|
|
{% if settings.comments_mode != 0 %}
|
|
{% if comments_disabled %}
|
|
<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>
|
|
<div class="comments-area-inner comments-area">
|
|
{% if comments_info %}
|
|
{{ comments.video_comments(comments_info) }}
|
|
{% endif %}
|
|
</div>
|
|
</details>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<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>
|
|
|
|
{% 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 %}
|