ffmpeg implemented
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user