Feat: Favorite channels in Localstorage.

Feat: Fav channel in localstorage
Update screenshots.
2026-03-13 20:47:47 +01:00 · 2026-03-13 20:46:01 +01:00 · 2026-03-12 15:57:24 +01:00 · 2026-03-12 15:57:00 +01:00 · 2026-03-12 14:15:42 +01:00 · 2026-03-12 14:14:25 +01:00
20 changed files with 712 additions and 56 deletions
@@ -0,0 +1,3 @@
 GridTV aims to stay lightweight and dependency-free.
 Please avoid adding heavy JS frameworks or external dependencies.
@@ -27,16 +27,20 @@ This demo runs with sample XMLTV feeds to showcase the interface.
 ## ✨ Features
 - 🎛️ **Timeline grid** — horizontal EPG-style view with a live "now" indicator
 - 📅 **Date in timebar** — midnight markers show the day/date so you always know where you are
 - 📱 **Responsive** — optimized list view on mobile
 - ⏱️ **Live progress bar** on the currently airing program
 - 🕶️ **Past programs** automatically dimmed
 - 📋 **Hover tooltip** — title, synopsis, season/episode, schedule, duration
 - 🎬 **Program popup** — click any program for full details + IMDb search link
 - 🔗 **One-click copy** buttons for EPG & M3U URLs in the topbar
 - ▶️ **Built-in HLS player** — click any channel or live program to watch in a PiP overlay
 - 🔀 **HTTP→HTTPS proxy** — streams Tunarr over HTTP transparently from an HTTPS page
 - 🎨 **Theme system** — drop a CSS file in `themes/` and it appears in the menu automatically
 - 📡 **Multi-EPG sources** — configure multiple EPG/M3U sources, switch from the topbar
 - 👤 **Personal EPG** — optionally let visitors use your instance with their own EPG/M3U URLs (saved in localStorage)
 - 🔍 **Search** — filter the grid by channel name or program title/synopsis (debounced)
 - 🌍 **i18n** — auto-detects browser language, supports EN / FR / ES (add your own in `locales/`)
 - ⚙️ **Guided setup** on first launch — no config files to edit manually
 - 🔄 **Auto-reload** EPG every 30 minutes
 - 0️⃣ **Zero JS dependencies** — vanilla PHP, hls.js loaded from CDN
@@ -208,29 +212,35 @@ gridtv/
 ├── Dockerfile
 ├── docker-compose.yml
 ├── .gitignore           # config.json excluded
 ├── locales/             # i18n translation files
 │   ├── en.json
 │   ├── fr.json
 │   └── es.json
 ├── themes/              # CSS theme files
 │   ├── default.css
 │   ├── magazine.css
 │   ├── cyberpunk.css
 │   └── steampunk.css
 └── src/
-    ├── config.php       # Config loader + migration
+    ├── config.php       # Config loader, migration, locale detection
    ├── tpl/             # HTML templates
-    │   ├── head.php
+    │   ├── head.php     # DOCTYPE, <head>, CSS
-    │   ├── topbar.php
+    │   ├── topbar.php   # Topbar (nav, source switcher, search, theme)
-    │   ├── grid.php
+    │   ├── grid.php     # Grid + mobile + PiP + overlays
-    │   ├── modals.php
+    │   ├── modals.php   # Program info modal + Personal EPG modal
-    │   └── footer.php
+    │   └── footer.php   # JS modules loader, </body></html>
    └── js/              # JavaScript modules
-        ├── config.js    # Constants + PHP-injected vars
+        ├── config.js    # Constants + PHP-injected vars (incl. locale)
        ├── utils.js     # Helpers, clock, EPG fetch
        ├── epg.js       # Grid rendering
        ├── mobile.js    # Mobile list view
        ├── tooltip.js   # Hover tooltip
-        ├── sources.js   # Multi-EPG switcher
+        ├── sources.js   # Multi-EPG switcher + Personal EPG
        ├── m3u.js       # M3U parser
        ├── player.js    # HLS PiP player
        ├── themes.js    # Theme switcher
        ├── search.js    # Search + filter (debounced)
        ├── program.js   # Program info modal + IMDb link
        └── live.js      # Live updates + responsive
 ```
@@ -295,6 +305,22 @@ GridTV parses the standard **XMLTV format**. Tested with:
 - ✅ [Jellyfin](https://jellyfin.org/)
 - ✅ Any XMLTV-compliant source
 ---
 ## 🌍 Internationalization
 GridTV auto-detects the visitor's browser language and serves the matching locale. Supported out of the box: **English**, **French**, **Spanish**.
 To add a new language, create a file in `locales/` based on an existing one:
 ```bash
 cp locales/en.json locales/de.json
 # then translate the values
 ```
 GridTV will automatically pick it up for browsers with that language set — no code changes needed.
 ---
 ## 🤝 Contributing
@@ -306,3 +332,28 @@ PRs are welcome! Got an idea, a fix, or a feature request — open an issue or s
 ## 📄 License
 GNU Affero General Public License v3.0 (AGPLv3)
 ---
 ## 🗺️ Roadmap
 ### ✅ Done
 - Timeline grid with live "now" indicator
 - Mobile responsive list view
 - Built-in HLS PiP player
 - HTTP→HTTPS proxy
 - Theme system (4 built-in themes)
 - Multi-EPG sources with topbar switcher
 - Personal EPG (localStorage)
 - Modular codebase (src/tpl + src/js)
 - Docker support
 - **Search** — filter grid by channel name or program title/synopsis (debounced)
 - **Date in timebar** — midnight markers with day/date in the ruler
 - **Program popup** — full details + IMDb search link on any program click
 - **i18n** — EN / FR / ES with browser auto-detection, extensible via locales/
 ### 🔜 Coming soon
 - **Favorites** — pin channels to the top of the grid (localStorage)
 - **Setup re-editable** — reopen setup.php with an admin key, no SSH required
 - **Dark/Light auto mode** — follow system preference when using the default theme
 - **Grid export** — export today's schedule as PDF or image
@@ -0,0 +1,53 @@
 {
  "days": [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat"
  ],
  "months": [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ],
  "now": "Now",
  "channels": "Channels",
  "live": "LIVE",
  "loading": "Loading guide...",
  "epg_error": "Unable to load EPG",
  "epg_error_sub": "Check your XMLTV stream URL.",
  "load": "Load",
  "search_placeholder": "Search channel or program...",
  "copy_epg": "EPG",
  "copy_m3u": "M3U",
  "copied": "✓ copied",
  "program_info": "Program info",
  "watch_now": "Watch now",
  "imdb_search": "Search on IMDb",
  "close": "Close",
  "duration_min": "min",
  "personal_epg_title": "Personal EPG",
  "personal_epg_subtitle": "Use your own EPG/M3U source on this instance.",
  "personal_epg_label": "EPG URL (XMLTV) *",
  "personal_epg_m3u_label": "M3U URL",
  "personal_epg_optional": "optional",
  "cancel": "Cancel",
  "apply": "Apply",
  "setup_already_done": "Configuration already done. Use your admin key to access setup again.",
  "shift_back": "◄ 1h",
  "shift_fwd": "1h ►",
  "fav_add": "Add to favorites",
  "fav_remove": "Remove from favorites"
 }
@@ -0,0 +1,53 @@
 {
  "days": [
    "Dom",
    "Lun",
    "Mar",
    "Mié",
    "Jue",
    "Vie",
    "Sáb"
  ],
  "months": [
    "Ene",
    "Feb",
    "Mar",
    "Abr",
    "May",
    "Jun",
    "Jul",
    "Ago",
    "Sep",
    "Oct",
    "Nov",
    "Dic"
  ],
  "now": "Ahora",
  "channels": "Canales",
  "live": "LIVE",
  "loading": "Cargando guía...",
  "epg_error": "No se puede cargar el EPG",
  "epg_error_sub": "Comprueba la URL de tu fuente XMLTV.",
  "load": "Cargar",
  "search_placeholder": "Buscar canal o programa...",
  "copy_epg": "EPG",
  "copy_m3u": "M3U",
  "copied": "✓ copiado",
  "program_info": "Info del programa",
  "watch_now": "Ver ahora",
  "imdb_search": "Buscar en IMDb",
  "close": "Cerrar",
  "duration_min": "min",
  "personal_epg_title": "EPG Personal",
  "personal_epg_subtitle": "Usa tu propia fuente EPG/M3U en esta instancia.",
  "personal_epg_label": "URL EPG (XMLTV) *",
  "personal_epg_m3u_label": "URL M3U",
  "personal_epg_optional": "opcional",
  "cancel": "Cancelar",
  "apply": "Aplicar",
  "setup_already_done": "Configuración ya realizada. Usa tu clave de administrador para volver al setup.",
  "shift_back": "◄ 1h",
  "shift_fwd": "1h ►",
  "fav_add": "Agregar a favoritos",
  "fav_remove": "Quitar de favoritos"
 }
@@ -0,0 +1,53 @@
 {
  "days": [
    "Dim",
    "Lun",
    "Mar",
    "Mer",
    "Jeu",
    "Ven",
    "Sam"
  ],
  "months": [
    "Jan",
    "Fév",
    "Mar",
    "Avr",
    "Mai",
    "Jun",
    "Jul",
    "Aoû",
    "Sep",
    "Oct",
    "Nov",
    "Déc"
  ],
  "now": "Maintenant",
  "channels": "Chaînes",
  "live": "LIVE",
  "loading": "Chargement du guide...",
  "epg_error": "Impossible de charger l'EPG",
  "epg_error_sub": "Vérifiez l'URL de votre flux XMLTV.",
  "load": "Charger",
  "search_placeholder": "Rechercher une chaîne ou un programme...",
  "copy_epg": "EPG",
  "copy_m3u": "M3U",
  "copied": "✓ copié",
  "program_info": "Infos programme",
  "watch_now": "Regarder",
  "imdb_search": "Rechercher sur IMDb",
  "close": "Fermer",
  "duration_min": "min",
  "personal_epg_title": "EPG Personnel",
  "personal_epg_subtitle": "Utilisez votre propre source EPG/M3U sur cette instance.",
  "personal_epg_label": "URL EPG (XMLTV) *",
  "personal_epg_m3u_label": "URL M3U",
  "personal_epg_optional": "optionnel",
  "cancel": "Annuler",
  "apply": "Appliquer",
  "setup_already_done": "Configuration déjà effectuée. Utilisez votre clé admin pour accéder à nouveau au setup.",
  "shift_back": "◄ 1h",
  "shift_fwd": "1h ►",
  "fav_add": "Ajouter aux favoris",
  "fav_remove": "Retirer des favoris"
 }
@@ -30,9 +30,21 @@ $allow_personal_epg = !empty($config['allow_personal_epg']);
 $first_source = $epg_sources[0] ?? [];
 $epg_url      = htmlspecialchars($first_source['epg_url'] ?? '');
 $m3u_url      = htmlspecialchars($first_source['m3u_url'] ?? '');
 // ── Locale detection ─────────────────────────────────────────────────────────
 $supported_locales = ['en', 'fr', 'es'];
 $locale = 'en';
 $accept = $_SERVER['HTTP_ACCEPT_LANGUAGE'] ?? 'en';
 foreach (explode(',', $accept) as $lang) {
    $code = strtolower(substr(trim($lang), 0, 2));
    if (in_array($code, $supported_locales)) { $locale = $code; break; }
 }
 $locale_path = __DIR__ . "/../locales/{$locale}.json";
 $L = json_decode(file_get_contents($locale_path), true);
 // ─────────────────────────────────────────────────────────────────────────────
 ?>
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="<?= $locale ?>">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -1,4 +1,5 @@
 const EPG_SOURCES = <?= json_encode(array_values($epg_sources)) ?>;
 const L = <?= json_encode($L) ?>;
 const ALLOW_PERSONAL_EPG = <?= $allow_personal_epg ? 'true' : 'false' ?>;
 // Source active (index)
@@ -10,24 +10,35 @@ function makePlaceholder(name) {
  return el;
 }
 function makeChannelCell(ch) {
  const cell = document.createElement('div');
  cell.className = 'channel-cell';
  if (ch.icon) {
    const img = document.createElement('img');
    img.className = 'channel-logo'; img.src = ch.icon;
    img.onerror = () => img.replaceWith(makePlaceholder(ch.name));
    cell.appendChild(img);
  } else { cell.appendChild(makePlaceholder(ch.name)); }
  const name = document.createElement('div');
  name.className = 'channel-name'; name.textContent = ch.name; name.title = ch.name;
  cell.appendChild(name);
  cell.appendChild(makeFavBtn(ch.id));
  cell.addEventListener('click', () => openPip(ch.name, getNowPlaying(ch.id)));
  return cell;
 }
 function renderChannels() {
  const list = document.getElementById('channelsList');
  list.innerHTML = '';
-  channels.forEach(ch => {
+  const { favs, rest } = sortedChannels(channels);
-    const cell = document.createElement('div');
+
-    cell.className = 'channel-cell';
+  if (favs.length) {
-    if (ch.icon) {
+    favs.forEach(ch => list.appendChild(makeChannelCell(ch)));
-      const img = document.createElement('img');
+    const sep = document.createElement('div');
-      img.className = 'channel-logo'; img.src = ch.icon;
+    sep.className = 'fav-separator';
-      img.onerror = () => img.replaceWith(makePlaceholder(ch.name));
+    list.appendChild(sep);
-      cell.appendChild(img);
+  }
-    } else { cell.appendChild(makePlaceholder(ch.name)); }
+  rest.forEach(ch => list.appendChild(makeChannelCell(ch)));
    const name = document.createElement('div');
    name.className = 'channel-name'; name.textContent = ch.name; name.title = ch.name;
    cell.appendChild(name);
    cell.addEventListener('click', () => openPip(ch.name, getNowPlaying(ch.id)));
    list.appendChild(cell);
  });
 }
 function renderRuler() {
@@ -37,10 +48,18 @@ function renderRuler() {
  let t = new Date(GRID_START); t.setSeconds(0,0);
  const rem = t.getMinutes()%15; if (rem) t.setMinutes(t.getMinutes()+(15-rem));
  while (t <= GRID_END) {
-    const x = msToX(t.getTime()); const isHour = t.getMinutes()===0;
+    const x = msToX(t.getTime());
    const isHour = t.getMinutes() === 0;
    const isMidnight = isHour && t.getHours() === 0;
    const tick = document.createElement('div'); tick.className='time-tick'; tick.style.left=x+'px';
-    const lbl = document.createElement('div'); lbl.className='time-tick-label'+(isHour?' hour':''); lbl.textContent=fmtTime(t);
+    const lbl = document.createElement('div');
-    const line = document.createElement('div'); line.className='time-tick-line'+(isHour?' hour':'');
+    lbl.className = 'time-tick-label' + (isHour ? ' hour' : '') + (isMidnight ? ' midnight' : '');
    if (isMidnight) {
      lbl.textContent = `${L.days[t.getDay()]} ${t.getDate()} ${L.months[t.getMonth()]}`;
    } else {
      lbl.textContent = fmtTime(t);
    }
    const line = document.createElement('div'); line.className='time-tick-line'+(isHour?' hour':'')+(isMidnight?' midnight':'');
    tick.appendChild(lbl); tick.appendChild(line); ruler.appendChild(tick);
    t = new Date(t.getTime()+15*60000);
  }
@@ -62,7 +81,9 @@ function renderPrograms() {
  const now = new Date();
-  channels.forEach((ch, i) => {
+  const { favs: _f, rest: _r } = sortedChannels(channels);
  const orderedChannels = [..._f, ..._r];
  orderedChannels.forEach((ch, i) => {
    const row = document.createElement('div');
    row.className = 'program-row';
    row.style.cssText = `top:${i*ROW_H}px;position:absolute;left:0;right:0;`;
@@ -88,9 +109,7 @@ function renderPrograms() {
      block.addEventListener('mouseenter', e=>showTooltip(e,p));
      block.addEventListener('mousemove',  e=>moveTooltip(e));
      block.addEventListener('mouseleave', hideTooltip);
-      if (p.start <= now && p.stop > now) {
+      block.addEventListener('click', (e) => { hideTooltip(); openProgramModal(ch, p); });
        block.addEventListener('click', () => openPip(ch.name, p.title));
      }
      row.appendChild(block);
    });
    inner.appendChild(row);
@@ -0,0 +1,35 @@
 // ── FAVORITES ─────────────────────────────────────────────────────────────────
 let favorites = new Set(JSON.parse(localStorage.getItem('gridtv-favorites') || '[]'));
 function saveFavorites() {
  localStorage.setItem('gridtv-favorites', JSON.stringify([...favorites]));
 }
 function toggleFavorite(chId, btn) {
  if (favorites.has(chId)) {
    favorites.delete(chId);
    btn.classList.remove('is-fav');
    btn.title = L.fav_add;
  } else {
    favorites.add(chId);
    btn.classList.add('is-fav');
    btn.title = L.fav_remove;
  }
  saveFavorites();
  renderAll();
 }
 function makeFavBtn(chId) {
  const btn = document.createElement('button');
  btn.className = 'fav-btn' + (favorites.has(chId) ? ' is-fav' : '');
  btn.title = favorites.has(chId) ? L.fav_remove : L.fav_add;
  btn.textContent = '★';
  btn.addEventListener('click', e => { e.stopPropagation(); toggleFavorite(chId, btn); });
  return btn;
 }
 function sortedChannels(list) {
  const favs = list.filter(ch => favorites.has(ch.id));
  const rest  = list.filter(ch => !favorites.has(ch.id));
  return { favs, rest };
 }
@@ -6,7 +6,9 @@ function renderMobile() {
  const winStart = new Date(now.getTime() - 30*60000);
  const winEnd   = new Date(now.getTime() + 4*3600000);
-  channels.forEach(ch => {
+  const { favs: _f, rest: _r } = sortedChannels(channels);
  const orderedChannels = [..._f, ..._r];
  orderedChannels.forEach(ch => {
    const progs = (programs[ch.id]||[]).filter(p => p.stop>winStart && p.start<winEnd);
    if (!progs.length) return;
@@ -49,6 +51,7 @@ function renderMobile() {
        const badge = document.createElement('div'); badge.className='mobile-live-badge'; badge.textContent='LIVE';
        item.appendChild(badge);
      }
      item.addEventListener('click', () => openProgramModal(ch, p));
      list.appendChild(item);
    });
    section.appendChild(list); container.appendChild(section);
@@ -0,0 +1,45 @@
 // ── PROGRAM MODAL ─────────────────────────────────────────────────────────────
 function openProgramModal(ch, p) {
  const now = new Date();
  const isLive = p.start <= now && p.stop > now;
  const dur = Math.round((p.stop - p.start) / 60000);
  const ep  = fmtEpisode(p.season, p.episode);
  document.getElementById('pm-title').textContent    = p.title;
  document.getElementById('pm-channel').textContent  = ch.name;
  document.getElementById('pm-time').textContent     =
    `${fmtTime(p.start)} — ${fmtTime(p.stop)}  ·  ${dur} ${L.duration_min}` +
    (ep ? `  ·  ${ep}` : '');
  document.getElementById('pm-desc').textContent     = p.desc || '';
  document.getElementById('pm-desc').style.display   = p.desc ? 'block' : 'none';
  // Bouton Watch now — seulement si live ET M3U fourni pour la source active
  const watchBtn = document.getElementById('pm-watch');
  if (isLive && currentM3uUrl) {
    watchBtn.style.display = 'inline-flex';
    watchBtn.onclick = () => { closeProgramModal(); openPip(ch.name, p.title); };
  } else {
    watchBtn.style.display = 'none';
  }
  // Bouton IMDb
  document.getElementById('pm-imdb').href =
    `https://www.imdb.com/find/?q=${encodeURIComponent(p.title)}&s=tt`;
  document.getElementById('programModal').classList.add('visible');
 }
 function closeProgramModal() {
  document.getElementById('programModal').classList.remove('visible');
 }
 // Fermer sur clic overlay
 document.addEventListener('click', e => {
  const modal = document.getElementById('programModal');
  if (e.target === modal) closeProgramModal();
 });
 // Fermer sur Escape
 document.addEventListener('keydown', e => {
  if (e.key === 'Escape') closeProgramModal();
 });
@@ -0,0 +1,198 @@
 // ── SEARCH ────────────────────────────────────────────────────────────────────
 let searchActive = false;
 let searchQuery  = '';
 let searchTimer  = null;
 function toggleSearch() {
  const bar = document.getElementById('searchBar');
  const inp = document.getElementById('searchInput');
  searchActive = !searchActive;
  bar.classList.toggle('visible', searchActive);
  if (searchActive) {
    inp.focus();
  } else {
    clearSearch();
  }
 }
 function clearSearch() {
  searchQuery = '';
  document.getElementById('searchInput').value = '';
  applySearch('');
 }
 function onSearchInput(val) {
  clearTimeout(searchTimer);
  searchTimer = setTimeout(() => {
    searchQuery = val.trim().toLowerCase();
    applySearch(searchQuery);
  }, 350);
 }
 function applySearch(q) {
  if (!q) {
    // Remettre toutes les chaines
    renderAll();
    return;
  }
  const today = new Date();
  today.setHours(0,0,0,0);
  const tomorrow = new Date(today.getTime() + 24*3600000);
  // Filtrer les chaines : nom OU programme aujourd'hui correspond
  const filtered = channels.filter(ch => {
    // Match sur le nom de la chaine
    if (ch.name.toLowerCase().includes(q)) return true;
    // Match sur les programmes d'aujourd'hui (titre + desc)
    return (programs[ch.id]||[]).some(p => {
      if (p.stop < today || p.start > tomorrow) return false;
      if (p.title.toLowerCase().includes(q)) return true;
      if (p.desc && p.desc.toLowerCase().includes(q)) return true;
      return false;
    });
  });
  renderFiltered(filtered, q);
 }
 function renderFiltered(filteredChannels, q) {
  if (isMobile()) {
    renderMobileFiltered(filteredChannels, q);
    return;
  }
  // ── GRID ──
  const list = document.getElementById('channelsList');
  const inner = document.getElementById('programsInner');
  const ROW_H = 80;
  list.innerHTML = '';
  inner.innerHTML = '';
  inner.style.width = TOTAL_WIDTH_PX + 'px';
  inner.style.height = (filteredChannels.length * ROW_H) + 'px';
  // Remettre la now-line
  const nowLine = document.createElement('div');
  nowLine.className = 'now-line'; nowLine.id = 'nowLine';
  nowLine.style.height = (filteredChannels.length * ROW_H) + 'px';
  inner.appendChild(nowLine);
  const now = new Date();
  filteredChannels.forEach((ch, i) => {
    // Colonne chaîne
    const cell = document.createElement('div');
    cell.className = 'channel-cell';
    if (ch.icon) {
      const img = document.createElement('img');
      img.className = 'channel-logo'; img.src = ch.icon;
      img.onerror = () => img.replaceWith(makePlaceholder(ch.name));
      cell.appendChild(img);
    } else { cell.appendChild(makePlaceholder(ch.name)); }
    const name = document.createElement('div');
    name.className = 'channel-name'; name.textContent = ch.name; name.title = ch.name;
    cell.appendChild(name);
    cell.addEventListener('click', () => openPip(ch.name, getNowPlaying(ch.id)));
    list.appendChild(cell);
    // Programmes
    const row = document.createElement('div');
    row.className = 'program-row';
    row.style.cssText = `top:${i*ROW_H}px;position:absolute;left:0;right:0;`;
    (programs[ch.id]||[]).filter(p => p.stop > GRID_START && p.start < GRID_END).forEach(p => {
      const x = Math.max(0, msToX(p.start.getTime()));
      const w = Math.min(TOTAL_WIDTH_PX, msToX(p.stop.getTime())) - x;
      if (w < 2) return;
      const block = document.createElement('div');
      block.className = 'program-block';
      // Highlight si le programme matche la recherche
      const matchesProg = p.title.toLowerCase().includes(q) || (p.desc && p.desc.toLowerCase().includes(q));
      if (matchesProg) block.classList.add('search-match');
      if (p.stop < now) block.classList.add('is-past');
      if (p.start <= now && p.stop > now) {
        block.classList.add('is-live');
        block.style.setProperty('--progress', (((now-p.start)/(p.stop-p.start))*100).toFixed(1)+'%');
      }
      block.style.left = x + 'px'; block.style.width = w + 'px';
      if (w > 40) { const t = document.createElement('div'); t.className = 'program-title'; t.textContent = p.title; block.appendChild(t); }
      if (w > 80) {
        const ep = fmtEpisode(p.season, p.episode);
        const t = document.createElement('div'); t.className = 'program-time';
        t.textContent = (ep ? ep + '  ' : '') + `${fmtTime(p.start)} — ${fmtTime(p.stop)}`;
        block.appendChild(t);
      }
      block.addEventListener('mouseenter', e => showTooltip(e, p));
      block.addEventListener('mousemove',  e => moveTooltip(e));
      block.addEventListener('mouseleave', hideTooltip);
      if (p.start <= now && p.stop > now) {
        block.addEventListener('click', () => openPip(ch.name, p.title));
      }
      row.appendChild(block);
    });
    inner.appendChild(row);
  });
  positionNowLine();
 }
 function renderMobileFiltered(filteredChannels, q) {
  const container = document.getElementById('mobileView');
  container.innerHTML = '';
  const now = new Date();
  const winStart = new Date(now.getTime() - 30*60000);
  const winEnd   = new Date(now.getTime() + 4*3600000);
  filteredChannels.forEach(ch => {
    const progs = (programs[ch.id]||[]).filter(p => p.stop > winStart && p.start < winEnd);
    if (!progs.length) return;
    const section = document.createElement('div'); section.className = 'mobile-channel';
    const header  = document.createElement('div'); header.className = 'mobile-channel-header';
    if (ch.icon) {
      const img = document.createElement('img'); img.className = 'channel-logo'; img.src = ch.icon;
      img.onerror = () => img.replaceWith(makePlaceholder(ch.name));
      header.appendChild(img);
    } else { header.appendChild(makePlaceholder(ch.name)); }
    const name = document.createElement('div'); name.className = 'channel-name'; name.textContent = ch.name;
    header.appendChild(name); section.appendChild(header);
    const list = document.createElement('div'); list.className = 'mobile-programs';
    progs.forEach(p => {
      const isLive = p.start <= now && p.stop > now;
      const isPast = p.stop < now;
      const dur = Math.round((p.stop - p.start) / 60000);
      const matchesProg = p.title.toLowerCase().includes(q) || (p.desc && p.desc.toLowerCase().includes(q));
      const item = document.createElement('div');
      item.className = 'mobile-program' + (isLive ? ' is-live' : '') + (isPast ? ' is-past' : '') + (matchesProg ? ' search-match' : '');
      if (isLive) {
        const bar = document.createElement('div'); bar.className = 'mobile-program-progress';
        bar.style.width = (((now-p.start)/(p.stop-p.start))*100).toFixed(1) + '%';
        item.appendChild(bar);
      }
      const timeCol = document.createElement('div'); timeCol.className = 'mobile-program-time';
      timeCol.innerHTML = `<span>${fmtTime(p.start)}</span><span>${fmtTime(p.stop)}</span>`;
      item.appendChild(timeCol);
      const info = document.createElement('div'); info.className = 'mobile-program-info';
      const ep = fmtEpisode(p.season, p.episode);
      info.innerHTML = `<div class="mobile-program-title">${p.title}</div><div class="mobile-program-dur">${ep ? ep + ' · ' : ''}${dur} min</div>`;
      item.appendChild(info);
      if (isLive) {
        const badge = document.createElement('div'); badge.className = 'mobile-live-badge'; badge.textContent = 'LIVE';
        item.appendChild(badge);
      }
      list.appendChild(item);
    });
    section.appendChild(list); container.appendChild(section);
  });
 }
@@ -14,6 +14,7 @@ function switchSource(value) {
  currentEpgUrl = src.epg_url;
  currentM3uUrl = src.m3u_url ?? '';
  localStorage.setItem('gridtv-active-source', idx);
  if (typeof clearSearch === "function") clearSearch();
  loadEPG(currentEpgUrl);
  if (currentM3uUrl) loadM3U(currentM3uUrl);
  updateCopyButtons();
@@ -12,12 +12,12 @@ function copyUrl(type) {
  navigator.clipboard.writeText(url).then(() => {
    const btns = document.querySelectorAll('.copy-btn');
    btns.forEach(b => { if (b.textContent.toLowerCase() === type) {
-      b.textContent = '✓ copié';
+      b.textContent = L.copied;
      b.classList.add('copied');
      setTimeout(() => { b.textContent = type.toUpperCase(); b.classList.remove('copied'); }, 1800);
    }});
  }).catch(() => {
-    prompt('Copiez cette URL :', url);
+    prompt(url, url);
  });
 }
 function fmtTime(d) { return `${pad(d.getHours())}:${pad(d.getMinutes())}`; }
@@ -36,10 +36,8 @@ function parseXMLTVDate(str) {
 function updateClock() {
  const now = new Date();
  document.getElementById('clock').textContent = fmtTimeFull(now);
  const days=['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'];
  const months=['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'];
  document.getElementById('dateLabel').textContent =
-    `${days[now.getDay()]} ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
+    `${L.days[now.getDay()]} ${now.getDate()} ${L.months[now.getMonth()]} ${now.getFullYear()}`;
 }
 setInterval(updateClock, 1000);
 updateClock();
@@ -62,7 +60,7 @@ async function loadEPG(url) {
  } catch(e) {
    document.getElementById('loading').style.display = 'none';
    document.getElementById('errorMsg').style.display = 'flex';
-    document.getElementById('errorDetail').textContent = `Erreur: ${e.message}`;
+    document.getElementById('errorDetail').textContent = `${L.epg_error_sub} (${e.message})`;
    document.getElementById('epgInput').value = url;
  }
 }
@@ -3,7 +3,7 @@
 <?php
 $js_dir = __DIR__ . '/../js/';
 include $js_dir . 'config.js';
-$js_modules = ['utils', 'epg', 'mobile', 'tooltip', 'sources', 'm3u', 'player', 'themes', 'live'];
+$js_modules = ['utils', 'favorites', 'epg', 'mobile', 'tooltip', 'sources', 'm3u', 'player', 'themes', 'search', 'program', 'live'];
 foreach ($js_modules as $mod) {
    echo file_get_contents($js_dir . $mod . '.js');
 }
@@ -1,14 +1,14 @@
 <div class="loading" id="loading">
-  <div class="loading-text">Chargement du guide</div>
+  <div class="loading-text"><?= htmlspecialchars($L["loading"]) ?></div>
  <div class="loading-bar"></div>
 </div>
 <div class="error-msg" id="errorMsg">
-  <div class="err-title">&#9888; Impossible de charger l'EPG</div>
+  <div class="err-title">&#9888; <?= htmlspecialchars($L["epg_error"]) ?></div>
-  <div class="err-sub" id="errorDetail">Vérifiez l'URL de votre flux XMLTV.</div>
+  <div class="err-sub" id="errorDetail"><?= htmlspecialchars($L["epg_error_sub"]) ?></div>
  <div class="epg-input-bar">
    <input class="epg-input" id="epgInput" type="text" placeholder="<?= $epg_url ?>" />
-    <button class="epg-btn" onclick="loadFromInput()">Charger</button>
+    <button class="epg-btn" onclick="loadFromInput()"><?= htmlspecialchars($L["load"]) ?></button>
  </div>
 </div>
@@ -32,7 +32,7 @@
 <!-- GRID (desktop/tablet) -->
 <div class="grid-wrapper">
  <div class="channels-col">
-    <div class="channels-col-header"><span>Chaînes</span></div>
+    <div class="channels-col-header"><span><?= htmlspecialchars($L["channels"]) ?></span></div>
    <div class="channels-list" id="channelsList"></div>
  </div>
  <div class="timeline-area" id="timelineArea">
@@ -759,6 +759,116 @@
    .pip { width: calc(100vw - 16px); bottom: 8px; right: 8px; left: 8px; }
  }
  /* ── SEARCH ───────────────────────────────────────────────────────────────── */
  .search-btn {
    background: none; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-muted); cursor: pointer; font-size: 14px;
    padding: 4px 8px; transition: color .2s, border-color .2s;
  }
  .search-btn:hover { color: var(--accent); border-color: var(--accent); }
  .search-bar {
    display: none; align-items: center; gap: 8px;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    padding: 8px 16px;
  }
  .search-bar.visible { display: flex; }
  .search-input {
    flex: 1; background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text); font-family: inherit;
    font-size: 14px; outline: none; padding: 6px 12px;
    transition: border-color .2s;
  }
  .search-input:focus { border-color: var(--accent); }
  .search-input::placeholder { color: var(--text-muted); }
  .search-clear {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 16px; padding: 4px 8px;
    transition: color .2s;
  }
  .search-clear:hover { color: var(--accent); }
  /* Highlight programmes qui matchent */
  .program-block.search-match {
    border: 1px solid var(--accent);
    box-shadow: 0 0 6px var(--accent);
  }
  .mobile-program.search-match {
    border-left: 3px solid var(--accent);
  }
  /* ── PROGRAM MODAL ───────────────────────────────────────────────────────── */
  .program-card {
    max-width: 520px; padding: 28px; position: relative;
  }
  .pm-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 18px; line-height: 1;
    transition: color .2s;
  }
  .pm-close:hover { color: var(--accent); }
  .pm-channel {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 6px;
  }
  .pm-title {
    font-size: 20px; font-weight: 700; color: var(--text);
    margin-bottom: 8px; line-height: 1.2;
  }
  .pm-time {
    font-size: 12px; color: var(--accent); margin-bottom: 14px;
  }
  .pm-desc {
    font-size: 13px; color: var(--text-muted); line-height: 1.6;
    margin-bottom: 20px; max-height: 140px; overflow-y: auto;
  }
  .pm-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
  }
  .pm-btn {
    border-radius: 4px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; padding: 8px 16px;
    text-decoration: none; transition: opacity .2s;
    display: inline-flex; align-items: center; gap: 6px;
    border: none;
  }
  .pm-btn:hover { opacity: .8; }
  .pm-watch  { background: var(--accent); color: var(--bg); }
  .pm-imdb   { background: #f5c518; color: #000; }
  .pm-cancel { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
  /* Date midnight dans la timebar */
  .time-tick-label.midnight {
    color: var(--accent); font-weight: 700; font-size: 11px;
    white-space: nowrap;
  }
  .time-tick-line.midnight {
    background: var(--accent); opacity: .4; width: 2px;
  }
  /* ── FAVORITES ───────────────────────────────────────────────────────────── */
  .fav-btn {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; line-height: 1;
    margin-left: auto; padding: 2px 4px; flex-shrink: 0;
    transition: color .15s, transform .15s;
    opacity: 0;
  }
  .channel-cell:hover .fav-btn { opacity: 1; }
  .fav-btn.is-fav { color: var(--accent); opacity: 1; }
  .fav-btn:hover { transform: scale(1.2); }
  .fav-separator {
    height: 2px; background: var(--accent);
    opacity: .3; margin: 0;
  }
 </style>
 <link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
 </head>
@@ -1,19 +1,35 @@
 <!-- MODAL PROGRAMME -->
 <div class="modal-overlay" id="programModal">
  <div class="modal-card program-card">
    <button class="pm-close" onclick="closeProgramModal()">&#10005;</button>
    <div class="pm-channel" id="pm-channel"></div>
    <div class="pm-title" id="pm-title"></div>
    <div class="pm-time" id="pm-time"></div>
    <div class="pm-desc" id="pm-desc"></div>
    <div class="pm-actions">
      <button class="pm-btn pm-watch" id="pm-watch">&#9654; <?= htmlspecialchars($L["watch_now"]) ?></button>
      <a class="pm-btn pm-imdb" id="pm-imdb" href="#" target="_blank" rel="noopener">&#127909; <?= htmlspecialchars($L["imdb_search"]) ?></a>
      <button class="pm-btn pm-cancel" onclick="closeProgramModal()"><?= htmlspecialchars($L["close"]) ?></button>
    </div>
  </div>
 </div>
 <!-- MODAL PERSONAL EPG -->
 <div class="modal-overlay" id="personalEpgModal">
  <div class="modal-card">
-    <div class="modal-title">✏ Personal EPG</div>
+    <div class="modal-title">✏ <?= htmlspecialchars($L["personal_epg_title"]) ?></div>
-    <div class="modal-subtitle">Utilisez votre propre source EPG/M3U sur cette instance.</div>
+    <div class="modal-subtitle"><?= htmlspecialchars($L["personal_epg_subtitle"]) ?></div>
    <div class="modal-field">
-      <label>URL EPG (XMLTV) *</label>
+      <label><?= htmlspecialchars($L["personal_epg_label"]) ?></label>
      <input type="url" id="personalEpgInput" placeholder="http://mon-serveur/xmltv.xml">
    </div>
    <div class="modal-field">
-      <label>URL M3U <span style="opacity:.5;font-size:10px">(optionnel)</span></label>
+      <label><?= htmlspecialchars($L["personal_epg_m3u_label"]) ?> <span style="opacity:.5;font-size:10px">(<?= htmlspecialchars($L["personal_epg_optional"]) ?>)</span></label>
      <input type="url" id="personalM3uInput" placeholder="http://mon-serveur/channels.m3u">
    </div>
    <div class="modal-actions">
-      <button class="modal-btn-cancel" onclick="closePersonalEpgModal()">Annuler</button>
+      <button class="modal-btn-cancel" onclick="closePersonalEpgModal()"><?= htmlspecialchars($L["cancel"]) ?></button>
-      <button class="modal-btn-apply" onclick="applyPersonalEpg()">Appliquer</button>
+      <button class="modal-btn-apply" onclick="applyPersonalEpg()"><?= htmlspecialchars($L["apply"]) ?></button>
    </div>
  </div>
 </div>
@@ -3,14 +3,14 @@
  <div class="date-label" id="dateLabel"></div>
  <div class="clock" id="clock">00:00:00</div>
  <div class="nav-btns" id="navBtns">
-    <button class="nav-btn" onclick="shiftView(-60)">◀ 1h</button>
+    <button class="nav-btn" onclick="shiftView(-60)"><?= htmlspecialchars($L["shift_back"]) ?></button>
-    <button class="nav-btn active" onclick="centerNow()">Maintenant</button>
+    <button class="nav-btn active" onclick="centerNow()"><?= htmlspecialchars($L["now"]) ?></button>
-    <button class="nav-btn" onclick="shiftView(60)">1h ▶</button>
+    <button class="nav-btn" onclick="shiftView(60)"><?= htmlspecialchars($L["shift_fwd"]) ?></button>
  </div>
  <div class="copy-btns">
-    <button class="copy-btn" onclick="copyUrl('epg')" title="Copier l'URL EPG">EPG</button>
+    <button class="copy-btn" onclick="copyUrl('epg')" title="<?= htmlspecialchars($L["copy_epg"]) ?>"><?= htmlspecialchars($L["copy_epg"]) ?></button>
 <?php if (!empty($m3u_url)): ?>
-    <button class="copy-btn" onclick="copyUrl('m3u')" title="Copier l'URL M3U">M3U</button>
+    <button class="copy-btn" onclick="copyUrl('m3u')" title="<?= htmlspecialchars($L["copy_m3u"]) ?>"><?= htmlspecialchars($L["copy_m3u"]) ?></button>
 <?php endif; ?>
  </div>
 <?php if (count($epg_sources) > 1 || $allow_personal_epg): ?>
@@ -47,6 +47,11 @@ foreach ($theme_files as $file) {
 }
 ?>
  </select>
-  <div class="live-dot">LIVE</div>
+  <button class="search-btn" onclick="toggleSearch()" title="Search">&#128269;</button>
  <div class="live-dot"><?= htmlspecialchars($L["live"]) ?></div>
 </div>
 <div class="search-bar" id="searchBar">
  <input class="search-input" id="searchInput" type="text" placeholder="<?= htmlspecialchars($L["search_placeholder"]) ?>" oninput="onSearchInput(this.value)" />
  <button class="search-clear" onclick="clearSearch()">&#10005;</button>
 </div>
Author	SHA1	Message	Date
Johnnybegood90	e924c945d6	Feat: Favorite channels in Localstorage.	2026-03-13 20:47:47 +01:00
Johnnybegood90	7b42539bc8	Feat: Fav channel in localstorage	2026-03-13 20:46:01 +01:00
Johnnybegood90	d7617bfeaa	Update screenshots.	2026-03-12 15:57:24 +01:00
Johnnybegood90	23e0f29990	Update screenshots.	2026-03-12 15:57:00 +01:00
Johnnybegood90	2b201b7ec3	Hotfix: Modal wasn't working on mobile + Watch button was shown even without M3U.	2026-03-12 14:15:42 +01:00
Johnnybegood90	c905497c38	Hotfix: Modal wasn't working on mobile + Watch button was shown even without M3U.	2026-03-12 14:14:25 +01:00
Johnnybegood90	14ddd411b0	README update	2026-03-12 13:18:41 +01:00
Johnnybegood90	54265a2d9f	Readme update	2026-03-12 13:18:13 +01:00
Johnnybegood90	d81e8d70c8	Feat: Language support via json files in the locales folder + Feat: Popup with title, channel, schedule, duration, season, episode, synopsis, Watch button (if M3U provided) and IMDb link + Fix: Date added to the timebar	2026-03-12 13:15:49 +01:00
Johnnybegood90	de7ef1645b	Bad config.php location.	2026-03-12 13:14:09 +01:00
Johnnybegood90	8826926168	Feat: Language support via json files in the locales folder + Feat: Popup with title, channel, schedule, duration, season, episode, synopsis, Watch button (if M3U provided) and IMDb link + Fix: Date added to the timebar	2026-03-12 13:11:49 +01:00
Johnnybegood90	c6e147ab93	Fix: Debouncer into search engine. 350ms after last entry before live search.	2026-03-12 12:47:52 +01:00
Johnnybegood90	8d223359f4	Fix: Debouncer into search engine. 350ms after last entry before live search.	2026-03-12 12:46:32 +01:00
Johnnybegood90	9c3f8793af	Feat: Search engine + Prez: Adding roadmap into README.md	2026-03-12 12:20:44 +01:00
Johnnybegood90	4e1518f484	prez: Adding roadmap into README.md	2026-03-12 12:19:45 +01:00
Johnnybegood90	100ad77058	feat: Search engine channel name + program name today	2026-03-12 12:15:51 +01:00
Johnnybegood90	c97d19fa99	Adding CONTRIBUTING.md	2026-03-12 11:17:11 +01:00
Johnnybegood90	89da5fa3f6	Adding CONTRIBUTING.md	2026-03-12 11:16:12 +01:00
Johnnybegood90	dae8bd4634	Updating preview	2026-03-12 11:07:07 +01:00
Johnnybegood90	35c4053bec	Updating preview	2026-03-12 11:06:29 +01:00
		`@@ -0,0 +1,3 @@`
							`GridTV aims to stay lightweight and dependency-free.`

							`Please avoid adding heavy JS frameworks or external dependencies.`