feature/hls: Add HLS playback support, and refactors documentation for better usability and maintainability. (#1)

## 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>

youtube/static/modules/plyr/custom_plyr.css

@@ -44,13 +44,14 @@ e.g. Firefox playback speed options */
 .plyr__controls {
     display: flex;
     justify-content: center;
+    padding-bottom: 0px;
 }
 
 .plyr__progress__container {
     position: absolute;
     bottom: 0;
     width: 100%;
-    margin-bottom: -10px;
+    margin-bottom: -5px;
 }
 
 .plyr__controls .plyr__controls__item:first-child {
@@ -72,6 +73,120 @@ e.g. Firefox playback speed options */
     margin-bottom: 50px;
 }
 
+/*
+* Plyr Custom Controls
+*/
+
+.plyr__control svg.hls_audio_icon,
+.plyr__control svg.hls_quality_icon {
+  fill: none;
+}
+
+.plyr__control[data-plyr="quality-custom"],
+.plyr__control[data-plyr="audio-custom"] {
+  cursor: pointer;
+}
+
+.plyr__control[data-plyr="quality-custom"]:hover,
+.plyr__control[data-plyr="audio-custom"]:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/*
+* Custom styles for dropdown controls
+*/
+.plyr__control--custom {
+  padding: 0;
+}
+
+/* Quality and Audio containers */
+#plyr-quality-container,
+#plyr-audio-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Quality and Audio buttons */
+#plyr-quality-container .plyr__control,
+#plyr-audio-container .plyr__control {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Text labels */
+#plyr-quality-text,
+#plyr-audio-text {
+  font-size: 12px;
+  margin-left: 2px;
+}
+
+/* Dropdowns */
+.plyr-quality-dropdown,
+.plyr-audio-dropdown {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 8px;
+  background: #E6E6E6;
+  color: #23282f;
+  border-radius: 4px;
+  padding: 4px 6px;
+  min-width: 90px;
+  display: none;
+  z-index: 100;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+/* Audio dropdown needs slightly wider */
+.plyr-audio-dropdown {
+  min-width: 120px;
+}
+
+/* Dropdown options */
+.plyr-quality-option,
+.plyr-audio-option {
+  padding: 6px 16px;
+  margin-bottom: 2px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+  color: #23282f;
+  white-space: nowrap;
+  text-align: left;
+}
+
+/* Active/selected option */
+.plyr-quality-option[data-active="true"],
+.plyr-audio-option[data-active="true"] {
+  background: #00b3ff;
+  color: #FFF;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+/* Hover state */
+.plyr-quality-option:hover,
+.plyr-audio-option:hover {
+  background: #00b3ff;
+  color: #FFF;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+/* No audio tracks message */
+.plyr-audio-no-tracks {
+  padding: 6px 16px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+}
+
 /*
 * End custom styles
 */