ffmpeg implemented

This commit is contained in:
2026-01-11 13:40:01 +01:00
parent 34c3f0dc89
commit c4020615d2
18 changed files with 474 additions and 16 deletions

View File

@@ -27,7 +27,9 @@
<div class="header-info" data-tauri-drag-region>
<span class="app-title">Radio1 Player</span>
<span class="status-indicator" id="status-indicator">
<span class="status-dot"></span> <span id="status-text">Ready</span>
<span class="status-dot"></span>
<span id="status-text">Ready</span>
<span id="engine-badge" class="engine-badge" title="Playback engine">FFMPEG</span>
</span>
</div>
<div class="header-buttons">

View File

@@ -15,6 +15,7 @@ const stationNameEl = document.getElementById('station-name');
const stationSubtitleEl = document.getElementById('station-subtitle');
const statusTextEl = document.getElementById('status-text');
const statusDotEl = document.querySelector('.status-dot');
const engineBadgeEl = document.getElementById('engine-badge');
const playBtn = document.getElementById('play-btn');
const iconPlay = document.getElementById('icon-play');
const iconStop = document.getElementById('icon-stop');
@@ -34,6 +35,34 @@ async function init() {
await loadStations();
setupEventListeners();
updateUI();
updateEngineBadge();
}
function updateEngineBadge() {
if (!engineBadgeEl) return;
const kind = currentMode === 'cast' ? 'cast' : 'ffmpeg';
const label = kind === 'cast' ? 'CAST' : 'FFMPEG';
const title = kind === 'cast' ? 'Google Cast playback' : 'Native playback (FFmpeg)';
const iconSvg = kind === 'cast'
? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M2 16.1A5 5 0 0 1 5.9 20" />
<path d="M2 12.05A9 9 0 0 1 9.95 20" />
<path d="M2 8V6a14 14 0 0 1 14 14h-2" />
</svg>`
: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 15V9" />
<path d="M8 19V5" />
<path d="M12 16V8" />
<path d="M16 18V6" />
<path d="M20 15V9" />
</svg>`;
engineBadgeEl.innerHTML = `${iconSvg}<span>${label}</span>`;
engineBadgeEl.title = title;
engineBadgeEl.classList.remove('engine-ffmpeg', 'engine-cast', 'engine-html');
engineBadgeEl.classList.add(`engine-${kind}`);
}
async function loadStations() {
@@ -239,6 +268,8 @@ function updateUI() {
statusDotEl.style.backgroundColor = 'var(--text-muted)';
stationSubtitleEl.textContent = currentMode === 'cast' ? `Connected to ${currentCastDevice}` : 'Live Stream';
}
updateEngineBadge();
}
function handleVolumeInput() {

View File

@@ -143,6 +143,31 @@ header {
gap: 6px;
}
.engine-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.68rem;
letter-spacing: 0.6px;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.06);
color: var(--text-main);
opacity: 0.9;
}
.engine-badge svg {
width: 12px;
height: 12px;
display: block;
}
.engine-ffmpeg { border-color: rgba(125,255,179,0.30); }
.engine-cast { border-color: rgba(223,166,255,0.35); }
.engine-html { border-color: rgba(255,255,255,0.22); }
.status-dot {
width: 6px;
height: 6px;