diff --git a/src/css/topbar.css b/src/css/topbar.css index 61a1e5a..aec1395 100644 --- a/src/css/topbar.css +++ b/src/css/topbar.css @@ -184,3 +184,42 @@ } .source-select:hover { border-color: var(--accent2); color: var(--accent2) !important; } .source-select option { background: #111 !important; color: #eee !important; font-family: sans-serif; } + + /* ── SOURCE DROPDOWN ─────────────────────────────────────────────────────── */ + .source-dropdown { + position: relative; + flex-shrink: 0; + } + .source-dropdown-btn { + display: flex; align-items: center; gap: 6px; + background: var(--surface2); border: 1px solid var(--border-bright); + color: var(--text); font-family: var(--font-mono); font-size: 11px; + letter-spacing: 0.06em; padding: 5px 10px; height: 28px; + cursor: pointer; white-space: nowrap; + transition: border-color 0.15s, color 0.15s; + } + .source-dropdown-btn:hover { border-color: var(--accent2); color: var(--accent2); } + .source-dropdown-arrow { font-size: 8px; opacity: 0.6; } + + .source-dropdown-menu { + display: none; position: absolute; top: calc(100% + 4px); left: 0; + background: var(--surface); border: 1px solid var(--border-bright); + min-width: 160px; z-index: 1000; + flex-direction: column; + box-shadow: 0 8px 24px rgba(0,0,0,0.6); + } + .source-dropdown-menu.open { display: flex; } + + .source-dropdown-item { + background: none; border: none; color: var(--text); + font-family: var(--font-mono); font-size: 11px; + letter-spacing: 0.06em; padding: 10px 14px; + text-align: left; cursor: pointer; white-space: nowrap; + transition: background 0.1s, color 0.1s; + border-bottom: 1px solid var(--border); + } + .source-dropdown-item:last-child { border-bottom: none; } + .source-dropdown-item:hover { background: var(--surface2); color: var(--accent2); } + .source-dropdown-item.active { color: var(--accent); } + .source-dropdown-personal { color: var(--accent2); } + diff --git a/src/js/live.js b/src/js/live.js index 9305225..39e2e7d 100644 --- a/src/js/live.js +++ b/src/js/live.js @@ -13,8 +13,7 @@ window.addEventListener('load', () => { if (epg) { currentEpgUrl = epg; currentM3uUrl = m3u; - const sel = document.getElementById('sourceSelect'); - if (sel) sel.value = 'personal'; + updateSourceDropdownLabel('✏ Personal EPG'); loadEPG(epg); if (m3u) loadM3U(m3u); return; @@ -26,8 +25,7 @@ window.addEventListener('load', () => { activeSourceIndex = idx; currentEpgUrl = src.epg_url; currentM3uUrl = src.m3u_url ?? ''; - const sel = document.getElementById('sourceSelect'); - if (sel) sel.value = idx; + if (src) updateSourceDropdownLabel(src.name); } } loadEPG(currentEpgUrl); diff --git a/src/js/sources.js b/src/js/sources.js index 6b9de34..2ceb967 100644 --- a/src/js/sources.js +++ b/src/js/sources.js @@ -49,6 +49,7 @@ function applyPersonalEpg() { localStorage.setItem('gridtv-personal-epg', epg); localStorage.setItem('gridtv-personal-m3u', m3u); localStorage.setItem('gridtv-active-source', 'personal'); + updateSourceDropdownLabel('✏ Personal EPG'); currentEpgUrl = epg; currentM3uUrl = m3u; const sel = document.getElementById('sourceSelect'); @@ -58,3 +59,24 @@ function applyPersonalEpg() { if (m3u) loadM3U(m3u); } +function toggleSourceDropdown() { + document.getElementById('sourceDropdownMenu')?.classList.toggle('open'); +} + +function closeSourceDropdown() { + document.getElementById('sourceDropdownMenu')?.classList.remove('open'); +} + +// Fermer si clic en dehors +document.addEventListener('click', e => { + if (!e.target.closest('.source-dropdown')) closeSourceDropdown(); +}); + +function updateSourceDropdownLabel(label) { + const el = document.getElementById('sourceDropdownLabel'); + if (el) el.textContent = label; + // Mettre à jour la classe active + document.querySelectorAll('.source-dropdown-item').forEach((btn, i) => { + btn.classList.toggle('active', i === activeSourceIndex); + }); +} diff --git a/src/tpl/topbar.php b/src/tpl/topbar.php index f17f7a4..5014075 100644 --- a/src/tpl/topbar.php +++ b/src/tpl/topbar.php @@ -14,14 +14,24 @@ 1 || $allow_personal_epg): ?> - + +