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>

1 files changed, 111 insertions, 7 deletions

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 {