Feat: Favorite channels in Localstorage.

locales/en.json

@@ -1,30 +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",
+  "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",
+  "load": "Load",
   "search_placeholder": "Search channel or program...",
-  "copy_epg":   "EPG",
-  "copy_m3u":   "M3U",
-  "copied":     "\u2713 copied",
+  "copy_epg": "EPG",
+  "copy_m3u": "M3U",
+  "copied": "✓ copied",
   "program_info": "Program info",
-  "watch_now":  "Watch now",
+  "watch_now": "Watch now",
   "imdb_search": "Search on IMDb",
-  "close":      "Close",
+  "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",
+  "cancel": "Cancel",
+  "apply": "Apply",
   "setup_already_done": "Configuration already done. Use your admin key to access setup again.",
-  "shift_back": "\u25c4 1h",
-  "shift_fwd":  "1h \u25ba"
-}
+  "shift_back": "◄ 1h",
+  "shift_fwd": "1h ►",
+  "fav_add": "Add to favorites",
+  "fav_remove": "Remove from favorites"
+}

locales/es.json

@@ -1,30 +1,53 @@
 {
-  "days":   ["Dom", "Lun", "Mar", "Mi\u00e9", "Jue", "Vie", "S\u00e1b"],
-  "months": ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
-  "now":        "Ahora",
-  "channels":   "Canales",
-  "live":       "LIVE",
-  "loading":    "Cargando gu\u00eda...",
-  "epg_error":  "No se puede cargar el EPG",
+  "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",
+  "load": "Cargar",
   "search_placeholder": "Buscar canal o programa...",
-  "copy_epg":   "EPG",
-  "copy_m3u":   "M3U",
-  "copied":     "\u2713 copiado",
+  "copy_epg": "EPG",
+  "copy_m3u": "M3U",
+  "copied": "✓ copiado",
   "program_info": "Info del programa",
-  "watch_now":  "Ver ahora",
+  "watch_now": "Ver ahora",
   "imdb_search": "Buscar en IMDb",
-  "close":      "Cerrar",
+  "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\u00f3n ya realizada. Usa tu clave de administrador para volver al setup.",
-  "shift_back": "\u25c4 1h",
-  "shift_fwd":  "1h \u25ba"
-}
+  "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"
+}

locales/fr.json

@@ -1,30 +1,53 @@
 {
-  "days":   ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
-  "months": ["Jan", "F\u00e9v", "Mar", "Avr", "Mai", "Jun", "Jul", "Ao\u00fb", "Sep", "Oct", "Nov", "D\u00e9c"],
-  "now":        "Maintenant",
-  "channels":   "Cha\u00eenes",
-  "live":       "LIVE",
-  "loading":    "Chargement du guide...",
-  "epg_error":  "Impossible de charger l'EPG",
-  "epg_error_sub": "V\u00e9rifiez l'URL de votre flux XMLTV.",
-  "load":       "Charger",
-  "search_placeholder": "Rechercher une cha\u00eene ou un programme...",
-  "copy_epg":   "EPG",
-  "copy_m3u":   "M3U",
-  "copied":     "\u2713 copi\u00e9",
+  "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",
+  "watch_now": "Regarder",
   "imdb_search": "Rechercher sur IMDb",
-  "close":      "Fermer",
+  "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\u00e9j\u00e0 effectu\u00e9e. Utilisez votre cl\u00e9 admin pour acc\u00e9der \u00e0 nouveau au setup.",
-  "shift_back": "\u25c4 1h",
-  "shift_fwd":  "1h \u25ba"
-}
+  "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"
+}

src/js/epg.js

@@ -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 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);
-  });
+  const { favs, rest } = sortedChannels(channels);
+
+  if (favs.length) {
+    favs.forEach(ch => list.appendChild(makeChannelCell(ch)));
+    const sep = document.createElement('div');
+    sep.className = 'fav-separator';
+    list.appendChild(sep);
+  }
+  rest.forEach(ch => list.appendChild(makeChannelCell(ch)));
 }
 
 function renderRuler() {
@@ -70,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;`;

src/js/favorites.js

@@ -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 };
+}

src/js/mobile.js

@@ -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);

src/js/program.js

@@ -13,9 +13,9 @@ function openProgramModal(ch, p) {
   document.getElementById('pm-desc').textContent     = p.desc || '';
   document.getElementById('pm-desc').style.display   = p.desc ? 'block' : 'none';
 
-  // Bouton Watch now — seulement si live
+  // Bouton Watch now — seulement si live ET M3U fourni pour la source active
   const watchBtn = document.getElementById('pm-watch');
-  if (isLive) {
+  if (isLive && currentM3uUrl) {
     watchBtn.style.display = 'inline-flex';
     watchBtn.onclick = () => { closeProgramModal(); openPip(ch.name, p.title); };
   } else {

src/tpl/footer.php

@@ -3,7 +3,7 @@
 <?php
 $js_dir = __DIR__ . '/../js/';
 include $js_dir . 'config.js';
-$js_modules = ['utils', 'epg', 'mobile', 'tooltip', 'sources', 'm3u', 'player', 'themes', 'search', 'program', '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');
 }

src/tpl/head.php

@@ -851,6 +851,24 @@
     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>