From a0f315be51ef121618e73d5b450c8616c0d11d21 Mon Sep 17 00:00:00 2001 From: Astounds 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 Co-committed-by: Astounds --- youtube/static/watch.css | 118 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 111 insertions(+), 7 deletions(-) (limited to 'youtube/static/watch.css') diff --git a/youtube/static/watch.css b/youtube/static/watch.css index c0bdec6..fb81a12 100644 --- a/youtube/static/watch.css +++ b/youtube/static/watch.css @@ -307,18 +307,122 @@ figure.sc-video { padding-top: 0.5rem; padding-bottom: 0.5rem; } -.v-download { grid-area: v-download; } -.v-download > ul.download-dropdown-content { - background: var(--secondary-background); - padding-left: 0px; +.v-download { + grid-area: v-download; + margin-bottom: 0.5rem; } -.v-download > ul.download-dropdown-content > li.download-format { - list-style: none; +.v-download details { + display: block; + width: 100%; +} +.v-download > summary { + cursor: pointer; padding: 0.4rem 0; padding-left: 1rem; } -.v-download > ul.download-dropdown-content > li.download-format a.download-link { +.v-download > summary.download-dropdown-label { + cursor: pointer; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding-bottom: 6px; + padding-left: .75em; + padding-right: .75em; + padding-top: 6px; + text-align: center; + white-space: nowrap; + background-color: var(--buttom); + border: 1px solid var(--button-border); + color: var(--buttom-text); + border-radius: 5px; + margin-bottom: 0.5rem; +} +.v-download > summary.download-dropdown-label:hover { + background-color: var(--buttom-hover); +} +.v-download > .download-table-container { + background: var(--secondary-background); + max-height: 65vh; + overflow-y: auto; + border: 1px solid var(--button-border); + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); +} +.download-table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + font-size: 0.875rem; +} +.download-table thead { + background: var(--thead-background); + position: sticky; + top: 0; + z-index: 1; +} +.download-table th, +.download-table td { + padding: 0.7rem 0.9rem; + text-align: left; + border-bottom: 1px solid var(--button-border); +} +.download-table th { + font-weight: 600; + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.8px; +} +.download-table tbody tr { + transition: all 0.2s ease; +} +.download-table tbody tr:hover { + background: var(--primary-background); +} +.download-table a.download-link { + display: inline-block; + padding: 0.4rem 0.85rem; + background: rgba(0,0,0,0.12); + color: var(--buttom-text); text-decoration: none; + border-radius: 5px; + font-weight: 500; + font-size: 0.85rem; + transition: background 0.2s ease; + white-space: nowrap; +} +.download-table a.download-link:hover { + background: rgba(0,0,0,0.28); + color: var(--buttom-text); +} +.download-table tbody tr:last-child td { + border-bottom: none; +} +.download-table td[data-label="Ext"] { + font-family: monospace; + font-size: 0.8rem; + font-weight: 600; +} +.download-table td[data-label="Link"] { + white-space: nowrap; + vertical-align: middle; +} +.download-table td[data-label="Codecs"] { + max-width: 180px; + text-overflow: ellipsis; + overflow: hidden; + font-family: monospace; + font-size: 0.75rem; +} +.download-table td[data-label="Size"] { + font-family: monospace; + font-size: 0.85rem; +} +.download-table td[colspan="3"] { + font-style: italic; + opacity: 0.7; } .v-description { -- cgit v1.2.3