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>
186 lines
9.5 KiB
HTML
186 lines
9.5 KiB
HTML
{% if settings.app_public %}
|
|
{% set app_url = settings.app_url|string %}
|
|
{% else %}
|
|
{% set app_url = settings.app_url|string + ':' + settings.port_number|string %}
|
|
{% endif %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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' 'unsafe-eval' blob:; media-src 'self' blob: {{ app_url }}/* data: 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:; worker-src 'self' blob:;">
|
|
<title>{{ page_title }}</title>
|
|
<link title="YT Local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
|
|
<link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
|
|
<link href="/youtube.com/static/normalize.css" rel="stylesheet">
|
|
<link href="{{ theme_path }}" rel="stylesheet">
|
|
<link href="/youtube.com/shared.css" rel="stylesheet">
|
|
{% block style %}
|
|
{{ style }}
|
|
{% endblock %}
|
|
|
|
{% 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
|
|
// Image prefix for thumbnails
|
|
let settings_img_prefix = "{{ settings.img_prefix or '' }}";
|
|
// @license-end
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<header class="header">
|
|
<nav class="home">
|
|
<a href="/youtube.com" id="home-link">YT Local</a>
|
|
</nav>
|
|
<form class="form" id="site-search" action="/youtube.com/results">
|
|
<input type="search" name="search_query" class="search-box" value="{{ search_box_value }}"
|
|
{{ "autofocus" if (request.path in ("/", "/results") or error_message) else "" }} required placeholder="{{ _('Type to search...') }}">
|
|
<button type="submit" value="Search" class="search-button">{{ _('Search') }}</button>
|
|
<!-- options -->
|
|
<div class="dropdown">
|
|
<!-- hidden box -->
|
|
<input id="options-toggle-cbox" class="opt-box" type="checkbox">
|
|
<!-- end hidden box -->
|
|
<label class="dropdown-label" for="options-toggle-cbox">{{ _('Options') }}</label>
|
|
<div class="dropdown-content">
|
|
<h3>{{ _('Sort by') }}</h3>
|
|
<div class="option">
|
|
<input type="radio" id="sort_relevance" name="sort" value="0">
|
|
<label for="sort_relevance">{{ _('Relevance') }}</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="sort_upload_date" name="sort" value="2">
|
|
<label for="sort_upload_date">{{ _('Upload date') }}</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="sort_view_count" name="sort" value="3">
|
|
<label for="sort_view_count">{{ _('View count') }}</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="sort_rating" name="sort" value="1">
|
|
<label for="sort_rating">{{ _('Rating') }}</label>
|
|
</div>
|
|
|
|
<h3>{{ _('Upload date') }}</h3>
|
|
<div class="option">
|
|
<input type="radio" id="time_any" name="time" value="0">
|
|
<label for="time_any">{{ _('Any') }}</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="time_last_hour" name="time" value="1">
|
|
<label for="time_last_hour">{{ _('Last hour') }}</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="time_today" name="time" value="2">
|
|
<label for="time_today">{{ _('Today') }}</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="time_this_week" name="time" value="3">
|
|
<label for="time_this_week">{{ _('This week') }}</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="time_this_month" name="time" value="4">
|
|
<label for="time_this_month">{{ _('This month') }}</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="time_this_year" name="time" value="5">
|
|
<label for="time_this_year">{{ _('This year') }}</label>
|
|
</div>
|
|
|
|
<h3>Type</h3>
|
|
<div class="option">
|
|
<input type="radio" id="type_any" name="type" value="0">
|
|
<label for="type_any">Any</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="type_video" name="type" value="1">
|
|
<label for="type_video">Video</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="type_channel" name="type" value="2">
|
|
<label for="type_channel">Channel</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="type_playlist" name="type" value="3">
|
|
<label for="type_playlist">Playlist</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="type_movie" name="type" value="4">
|
|
<label for="type_movie">Movie</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="type_show" name="type" value="5">
|
|
<label for="type_show">Show</label>
|
|
</div>
|
|
|
|
<h3>Duration</h3>
|
|
<div class="option">
|
|
<input type="radio" id="duration_any" name="duration" value="0">
|
|
<label for="duration_any">Any</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="duration_short" name="duration" value="1">
|
|
<label for="duration_short">Short (< 4 minutes)</label>
|
|
</div>
|
|
<div class="option">
|
|
<input type="radio" id="duration_long" name="duration" value="2">
|
|
<label for="duration_long">Long (> 20 minutes)</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{% if header_playlist_names is defined %}
|
|
<form class="playlist" id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self">
|
|
<input class="play-box" name="playlist_name" id="playlist-name-selection" list="playlist-options" type="search" placeholder="Add name of your playlist...">
|
|
<datalist class="play-hidden" id="playlist-options">
|
|
{% for playlist_name in header_playlist_names %}
|
|
<option value="{{ playlist_name }}">{{ playlist_name }}</option>
|
|
{% endfor %}
|
|
</datalist>
|
|
<button class="play-add" type="submit" id="playlist-add-button" name="action" value="add">+List</button>
|
|
<div class="play-clean">
|
|
<button type="reset" id="item-selection-reset">Clear</button>
|
|
</div>
|
|
</form>
|
|
<script src="/youtube.com/static/js/playlistadd.js"></script>
|
|
{% endif %}
|
|
|
|
</header>
|
|
<main class="main">
|
|
|
|
{% block main %}
|
|
{{ main }}
|
|
{% endblock %}
|
|
|
|
</main>
|
|
<footer class="footer">
|
|
<div>
|
|
<a href="https://git.sr.ht/~heckyel/yt-local"
|
|
rel="noopener noreferrer" target="_blank">
|
|
Released under the AGPLv3 or later
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<p>This site is Free/Libre Software</p>
|
|
{% if current_commit != None %}
|
|
<p>Current version: {{ current_commit }} @ {{ current_branch }}</p>
|
|
{% else %}
|
|
<p>Current version: {{ current_version }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<a href="/youtube.com/licenses" data-jslicense="1" rel="noopener noreferrer" target="_blank">JavaScript licenses</a>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html>
|