joaquin/KiraTV-APP-NodeCast-Modificada-y-Personalizada
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dedicated transcoding settings tab

Browse Source
This commit is contained in:
Trevor Mears
2026-01-17 01:27:27 -08:00
parent f0c1393ce0
commit 77eb7bff5f
4 changed files with 299 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+88 -31
View File
@@ -368,6 +368,7 @@
<div class="tabs">
<button class="tab active" data-tab="sources">Sources</button>
<button class="tab" data-tab="player">Player</button>
<button class="tab" data-tab="transcode">Transcoding</button>
<button class="tab" data-tab="content">Manage Content</button>
<button class="tab" data-tab="users" id="users-tab" style="display:none;">Users</button>
</div>
@@ -484,21 +485,75 @@
</div>
<div class="settings-section">
<h3>Streaming</h3>
<h3>Keyboard Shortcuts</h3>
<div class="shortcuts-grid">
<div class="shortcut"><kbd>↑</kbd> / <kbd>↓</kbd> Channel up/down (or volume)</div>
<div class="shortcut"><kbd>←</kbd> / <kbd>→</kbd> Volume down/up (when arrows = channels)</div>
<div class="shortcut"><kbd>Space</kbd> / <kbd>K</kbd> Play/Pause</div>
<div class="shortcut"><kbd>F</kbd> Fullscreen</div>
<div class="shortcut"><kbd>M</kbd> Mute/Unmute</div>
<div class="shortcut"><kbd>I</kbd> Toggle info overlay</div>
<div class="shortcut"><kbd>PgUp</kbd> / <kbd>PgDn</kbd> Channel up/down</div>
</div>
</div>
</div>
<!-- Transcoding Tab -->
<div id="tab-transcode" class="tab-content">
<div class="settings-section">
<h3>Detected Hardware</h3>
<div id="hw-info-container" class="hw-info-container">
<p class="hint">Loading hardware information...</p>
</div>
</div>
<div class="settings-section">
<h3>Encoder Settings</h3>
<div class="setting-item">
<label class="setting-toggle">
<input type="checkbox" id="setting-auto-transcode">
<span class="toggle-slider"></span>
</label>
<div class="setting-info">
<span class="setting-label">Auto Transcode (Smart)</span>
<span class="setting-hint">Automatically detect stream codecs and only transcode/remux when needed.
Adds ~1-3s probe delay on first play.</span>
<div class="setting-info" style="flex: 1;">
<span class="setting-label">Hardware Encoder</span>
<span class="setting-hint">Select which GPU encoder to use for transcoding. Auto will use the best
available.</span>
</div>
<select id="setting-hw-encoder" class="source-select" style="width: auto; min-width: 200px;">
<option value="auto">Auto (Recommended)</option>
<option value="nvenc">NVIDIA NVENC</option>
<option value="amf">AMD AMF</option>
<option value="qsv">Intel QuickSync</option>
<option value="vaapi">VAAPI (Linux)</option>
<option value="software">Software (CPU)</option>
</select>
</div>
<div class="setting-item">
<div class="setting-info" style="flex: 1;">
<span class="setting-label">Max Resolution</span>
<span class="setting-hint">Limit transcoded output resolution. Lower = faster, more compatible.</span>
</div>
<select id="setting-max-resolution" class="source-select" style="width: auto; min-width: 200px;">
<option value="4k">4K (2160p)</option>
<option value="1080p" selected>1080p (Full HD)</option>
<option value="720p">720p (HD)</option>
<option value="480p">480p (SD)</option>
</select>
</div>
<div class="setting-item">
<div class="setting-info" style="flex: 1;">
<span class="setting-label">Quality Preset</span>
<span class="setting-hint">Higher quality uses more bandwidth and CPU/GPU.</span>
</div>
<select id="setting-quality" class="source-select" style="width: auto; min-width: 200px;">
<option value="high">High</option>
<option value="medium" selected>Medium</option>
<option value="low">Low (Fastest)</option>
</select>
</div>
</div>
<div class="settings-section">
<h3>Stream Processing</h3>
<div class="setting-item">
<label class="setting-toggle">
<input type="checkbox" id="setting-force-proxy">
<input type="checkbox" id="setting-force-proxy-tc">
<span class="toggle-slider"></span>
</label>
<div class="setting-info">
@@ -509,7 +564,18 @@
</div>
<div class="setting-item">
<label class="setting-toggle">
<input type="checkbox" id="setting-force-transcode">
<input type="checkbox" id="setting-auto-transcode-tc">
<span class="toggle-slider"></span>
</label>
<div class="setting-info">
<span class="setting-label">Auto Transcode (Smart)</span>
<span class="setting-hint">Automatically detect stream codecs and only transcode/remux when needed.
Adds ~1-3s probe delay on first play.</span>
</div>
</div>
<div class="setting-item">
<label class="setting-toggle">
<input type="checkbox" id="setting-force-transcode-tc">
<span class="toggle-slider"></span>
</label>
<div class="setting-info">
@@ -520,13 +586,13 @@
</div>
<div class="setting-item">
<label class="setting-toggle">
<input type="checkbox" id="setting-force-remux">
<input type="checkbox" id="setting-force-remux-tc">
<span class="toggle-slider"></span>
</label>
<div class="setting-info">
<span class="setting-label">Force Remux</span>
<span class="setting-hint">Remux streams to MP4 container. Enable for raw .ts streams
from IPTV middleware like m3u-editor or dispatcharr.</span>
<span class="setting-hint">Remux streams to MP4 container. Enable for raw .ts streams from IPTV
middleware like m3u-editor or dispatcharr.</span>
</div>
</div>
<div class="setting-item">
@@ -535,46 +601,37 @@
<span class="setting-hint">Container format for Xtream streams. Try TS if you experience buffering
issues.</span>
</div>
<select id="setting-stream-format" class="source-select" style="width: auto; min-width: 200px;">
<select id="setting-stream-format-tc" class="source-select" style="width: auto; min-width: 200px;">
<option value="m3u8">HLS (m3u8) - Recommended</option>
<option value="ts">MPEG-TS (ts) - Better buffer</option>
</select>
</div>
</div>
<div class="settings-section">
<h3>HTTP Settings</h3>
<div class="setting-item">
<div class="setting-info" style="flex: 1;">
<span class="setting-label">User-Agent</span>
<span class="setting-hint">HTTP User-Agent for stream requests. Try VLC if your provider blocks
Chrome.</span>
</div>
<select id="setting-user-agent" class="source-select" style="width: auto; min-width: 200px;">
<select id="setting-user-agent-tc" class="source-select" style="width: auto; min-width: 200px;">
<option value="chrome">Chrome (Default)</option>
<option value="vlc">VLC</option>
<option value="tivimate">TiviMate</option>
<option value="custom">Custom...</option>
</select>
</div>
<div class="setting-item" id="custom-user-agent-container" style="display: none;">
<div class="setting-item" id="custom-user-agent-container-tc" style="display: none;">
<div class="setting-info" style="flex: 1;">
<span class="setting-label">Custom User-Agent</span>
<span class="setting-hint">Enter your own User-Agent string.</span>
</div>
<input type="text" id="setting-user-agent-custom" class="search-input" style="width: 300px;"
<input type="text" id="setting-user-agent-custom-tc" class="search-input" style="width: 300px;"
placeholder="Custom User-Agent string...">
</div>
</div>
<div class="settings-section">
<h3>Keyboard Shortcuts</h3>
<div class="shortcuts-grid">
<div class="shortcut"><kbd>↑</kbd> / <kbd>↓</kbd> Channel up/down (or volume)</div>
<div class="shortcut"><kbd>←</kbd> / <kbd>→</kbd> Volume down/up (when arrows = channels)</div>
<div class="shortcut"><kbd>Space</kbd> / <kbd>K</kbd> Play/Pause</div>
<div class="shortcut"><kbd>F</kbd> Fullscreen</div>
<div class="shortcut"><kbd>M</kbd> Mute/Unmute</div>
<div class="shortcut"><kbd>I</kbd> Toggle info overlay</div>
<div class="shortcut"><kbd>PgUp</kbd> / <kbd>PgDn</kbd> Channel up/down</div>
</div>
</div>
</div>
<!-- Manage Content Tab -->