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

locales/en.json

@@ -0,0 +1,30 @@
+{
+  "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":     "\u2713 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": "\u25c4 1h",
+  "shift_fwd":  "1h \u25ba"
+}

locales/es.json

@@ -0,0 +1,30 @@
+{
+  "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",
+  "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":     "\u2713 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\u00f3n ya realizada. Usa tu clave de administrador para volver al setup.",
+  "shift_back": "\u25c4 1h",
+  "shift_fwd":  "1h \u25ba"
+}

locales/fr.json

@@ -0,0 +1,30 @@
+{
+  "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",
+  "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\u00e9j\u00e0 effectu\u00e9e. Utilisez votre cl\u00e9 admin pour acc\u00e9der \u00e0 nouveau au setup.",
+  "shift_back": "\u25c4 1h",
+  "shift_fwd":  "1h \u25ba"
+}

src/js/config.js

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

src/js/epg.js

@@ -37,10 +37,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);
   }
@@ -88,9 +96,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);

src/js/program.js

@@ -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
+  const watchBtn = document.getElementById('pm-watch');
+  if (isLive) {
+    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();
+});

src/js/utils.js

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

src/tpl/config.php

@@ -0,0 +1,51 @@
+<?php
+// GridTV — index.php
+$config_path = __DIR__ . "/../config.json";
+
+if (!file_exists($config_path)) {
+    header("Location: ../setup.php");
+    exit;
+}
+
+$config = json_decode(file_get_contents($config_path), true);
+
+// ── Migration automatique ancien format → nouveau ─────────────────────────────
+if (isset($config['epg_url']) && !isset($config['epg_sources'])) {
+    $config['epg_sources'] = [[
+        'name'    => 'Main',
+        'epg_url' => $config['epg_url'],
+        'm3u_url' => $config['m3u_url'] ?? '',
+    ]];
+    $config['allow_personal_epg'] = false;
+    unset($config['epg_url'], $config['m3u_url']);
+    file_put_contents($config_path, json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+
+$group_name         = htmlspecialchars($config['group_name'] ?? 'GridTV');
+$epg_sources        = $config['epg_sources'] ?? [];
+$allow_personal_epg = !empty($config['allow_personal_epg']);
+
+// Première source par défaut (pour compatibilité avec le reste du code)
+$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="<?= $locale ?>">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>GridTV — <?= $group_name ?></title>

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', 'live'];
+$js_modules = ['utils', '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/grid.php

@@ -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">

src/tpl/head.php

@@ -800,6 +800,57 @@
     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;
+  }
+
 </style>
 <link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
 </head>

src/tpl/modals.php

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

src/tpl/topbar.php

@@ -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): ?>
@@ -48,10 +48,10 @@ foreach ($theme_files as $file) {
 ?>
   </select>
   <button class="search-btn" onclick="toggleSearch()" title="Search">&#128269;</button>
-  <div class="live-dot">LIVE</div>
+  <div class="live-dot"><?= htmlspecialchars($L["live"]) ?></div>
 </div>
 <div class="search-bar" id="searchBar">
-  <input class="search-input" id="searchInput" type="text" placeholder="Search channel or program..." oninput="onSearchInput(this.value)" />
+  <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>