Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Johnnybegood90
|
aac2b4404f | ||
|
Johnnybegood90
|
8460771d20 | ||
|
Johnnybegood90
|
76dbd18ca7 | ||
|
Johnnybegood90
|
e924c945d6 | ||
|
Johnnybegood90
|
7b42539bc8 | ||
|
Johnnybegood90
|
d7617bfeaa | ||
|
Johnnybegood90
|
23e0f29990 | ||
|
Johnnybegood90
|
2b201b7ec3 | ||
|
Johnnybegood90
|
c905497c38 | ||
|
Johnnybegood90
|
14ddd411b0 | ||
|
Johnnybegood90
|
54265a2d9f | ||
|
Johnnybegood90
|
d81e8d70c8 | ||
|
Johnnybegood90
|
de7ef1645b | ||
|
Johnnybegood90
|
8826926168 | ||
|
Johnnybegood90
|
c6e147ab93 | ||
|
Johnnybegood90
|
8d223359f4 | ||
|
Johnnybegood90
|
9c3f8793af | ||
|
Johnnybegood90
|
4e1518f484 | ||
|
Johnnybegood90
|
100ad77058 | ||
|
Johnnybegood90
|
c97d19fa99 | ||
|
Johnnybegood90
|
89da5fa3f6 | ||
|
Johnnybegood90
|
dae8bd4634 | ||
|
Johnnybegood90
|
35c4053bec |
@@ -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
|
## ✨ Features
|
||||||
|
|
||||||
- 🎛️ **Timeline grid** — horizontal EPG-style view with a live "now" indicator
|
- 🎛️ **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
|
- 📱 **Responsive** — optimized list view on mobile
|
||||||
- ⏱️ **Live progress bar** on the currently airing program
|
- ⏱️ **Live progress bar** on the currently airing program
|
||||||
- 🕶️ **Past programs** automatically dimmed
|
- 🕶️ **Past programs** automatically dimmed
|
||||||
- 📋 **Hover tooltip** — title, synopsis, season/episode, schedule, duration
|
- 📋 **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
|
- 🔗 **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
|
- ▶️ **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
|
- 🔀 **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
|
- 🎨 **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
|
- 📡 **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)
|
- 👤 **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
|
- ⚙️ **Guided setup** on first launch — no config files to edit manually
|
||||||
- 🔄 **Auto-reload** EPG every 30 minutes
|
- 🔄 **Auto-reload** EPG every 30 minutes
|
||||||
- 0️⃣ **Zero JS dependencies** — vanilla PHP, hls.js loaded from CDN
|
- 0️⃣ **Zero JS dependencies** — vanilla PHP, hls.js loaded from CDN
|
||||||
@@ -208,29 +212,35 @@ gridtv/
|
|||||||
├── Dockerfile
|
├── Dockerfile
|
||||||
├── docker-compose.yml
|
├── docker-compose.yml
|
||||||
├── .gitignore # config.json excluded
|
├── .gitignore # config.json excluded
|
||||||
|
├── locales/ # i18n translation files
|
||||||
|
│ ├── en.json
|
||||||
|
│ ├── fr.json
|
||||||
|
│ └── es.json
|
||||||
├── themes/ # CSS theme files
|
├── themes/ # CSS theme files
|
||||||
│ ├── default.css
|
│ ├── default.css
|
||||||
│ ├── magazine.css
|
│ ├── magazine.css
|
||||||
│ ├── cyberpunk.css
|
│ ├── cyberpunk.css
|
||||||
│ └── steampunk.css
|
│ └── steampunk.css
|
||||||
└── src/
|
└── src/
|
||||||
├── config.php # Config loader + migration
|
├── config.php # Config loader, migration, locale detection
|
||||||
├── tpl/ # HTML templates
|
├── 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
|
└── js/ # JavaScript modules
|
||||||
├── config.js # Constants + PHP-injected vars
|
├── config.js # Constants + PHP-injected vars (incl. locale)
|
||||||
├── utils.js # Helpers, clock, EPG fetch
|
├── utils.js # Helpers, clock, EPG fetch
|
||||||
├── epg.js # Grid rendering
|
├── epg.js # Grid rendering
|
||||||
├── mobile.js # Mobile list view
|
├── mobile.js # Mobile list view
|
||||||
├── tooltip.js # Hover tooltip
|
├── tooltip.js # Hover tooltip
|
||||||
├── sources.js # Multi-EPG switcher
|
├── sources.js # Multi-EPG switcher + Personal EPG
|
||||||
├── m3u.js # M3U parser
|
├── m3u.js # M3U parser
|
||||||
├── player.js # HLS PiP player
|
├── player.js # HLS PiP player
|
||||||
├── themes.js # Theme switcher
|
├── themes.js # Theme switcher
|
||||||
|
├── search.js # Search + filter (debounced)
|
||||||
|
├── program.js # Program info modal + IMDb link
|
||||||
└── live.js # Live updates + responsive
|
└── live.js # Live updates + responsive
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -295,6 +305,22 @@ GridTV parses the standard **XMLTV format**. Tested with:
|
|||||||
- ✅ [Jellyfin](https://jellyfin.org/)
|
- ✅ [Jellyfin](https://jellyfin.org/)
|
||||||
- ✅ Any XMLTV-compliant source
|
- ✅ 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
|
## 🤝 Contributing
|
||||||
@@ -306,3 +332,28 @@ PRs are welcome! Got an idea, a fix, or a feature request — open an issue or s
|
|||||||
## 📄 License
|
## 📄 License
|
||||||
|
|
||||||
GNU Affero General Public License v3.0 (AGPLv3)
|
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
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 281 KiB After Width: | Height: | Size: 1.0 MiB |
@@ -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"
|
||||||
|
}
|
||||||
@@ -1,10 +1,9 @@
|
|||||||
<?php
|
<?php
|
||||||
// ── Migration automatique ancien format → nouveau ─────────────────────────────
|
|
||||||
$config_path = __DIR__ . '/config.json';
|
$config_path = __DIR__ . '/config.json';
|
||||||
|
|
||||||
|
// Migration automatique ancien format
|
||||||
if (file_exists($config_path)) {
|
if (file_exists($config_path)) {
|
||||||
$existing = json_decode(file_get_contents($config_path), true);
|
$existing = json_decode(file_get_contents($config_path), true);
|
||||||
// Vieille instance : epg_url à la racine, pas de epg_sources
|
|
||||||
if (isset($existing['epg_url']) && !isset($existing['epg_sources'])) {
|
if (isset($existing['epg_url']) && !isset($existing['epg_sources'])) {
|
||||||
$existing['epg_sources'] = [[
|
$existing['epg_sources'] = [[
|
||||||
'name' => 'Main',
|
'name' => 'Main',
|
||||||
@@ -15,18 +14,45 @@ if (file_exists($config_path)) {
|
|||||||
unset($existing['epg_url'], $existing['m3u_url']);
|
unset($existing['epg_url'], $existing['m3u_url']);
|
||||||
file_put_contents($config_path, json_encode($existing, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
|
file_put_contents($config_path, json_encode($existing, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
|
||||||
}
|
}
|
||||||
http_response_code(403);
|
// Bootstrap : config existante sans cle admin -> on en genere une maintenant
|
||||||
die('Configuration déjà effectuée. Modifiez config.json via SSH pour changer les paramètres.');
|
if (empty($existing['admin_key'])) {
|
||||||
|
$existing['admin_key'] = bin2hex(random_bytes(16));
|
||||||
|
file_put_contents($config_path, json_encode($existing, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$error = '';
|
$is_first_setup = !file_exists($config_path);
|
||||||
$success = false;
|
$existing = $is_first_setup ? [] : json_decode(file_get_contents($config_path), true);
|
||||||
|
$admin_key = $existing['admin_key'] ?? null;
|
||||||
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
$mode = 'setup';
|
||||||
|
$error = '';
|
||||||
|
$new_key = '';
|
||||||
|
|
||||||
|
if (!$is_first_setup) {
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['admin_key_input'])) {
|
||||||
|
if (trim($_POST['admin_key_input']) === $admin_key) {
|
||||||
|
$mode = 'setup';
|
||||||
|
} else {
|
||||||
|
$mode = 'lock';
|
||||||
|
$error = 'Invalid admin key.';
|
||||||
|
}
|
||||||
|
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['group_name'])) {
|
||||||
|
if (trim($_POST['admin_key_hidden'] ?? '') !== $admin_key) {
|
||||||
|
$mode = 'lock';
|
||||||
|
$error = 'Invalid admin key.';
|
||||||
|
} else {
|
||||||
|
$mode = 'setup';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$mode = 'lock';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($mode === 'setup' && $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['group_name'])) {
|
||||||
$group_name = trim($_POST['group_name'] ?? '');
|
$group_name = trim($_POST['group_name'] ?? '');
|
||||||
$allow_personal_epg = isset($_POST['allow_personal_epg']);
|
$allow_personal_epg = isset($_POST['allow_personal_epg']);
|
||||||
|
|
||||||
// Récupérer les sources EPG dynamiques
|
|
||||||
$names = $_POST['source_name'] ?? [];
|
$names = $_POST['source_name'] ?? [];
|
||||||
$epg_urls = $_POST['source_epg_url'] ?? [];
|
$epg_urls = $_POST['source_epg_url'] ?? [];
|
||||||
$m3u_urls = $_POST['source_m3u_url'] ?? [];
|
$m3u_urls = $_POST['source_m3u_url'] ?? [];
|
||||||
@@ -37,13 +63,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
$m3u_url = trim($m3u_urls[$i] ?? '');
|
$m3u_url = trim($m3u_urls[$i] ?? '');
|
||||||
if (empty($epg_url)) continue;
|
if (empty($epg_url)) continue;
|
||||||
if (!filter_var($epg_url, FILTER_VALIDATE_URL)) {
|
if (!filter_var($epg_url, FILTER_VALIDATE_URL)) {
|
||||||
$error = "URL EPG invalide pour la source « $name »."; break;
|
$error = "Invalid EPG URL for source \"$name\"."; break;
|
||||||
}
|
}
|
||||||
if (!empty($m3u_url) && !filter_var($m3u_url, FILTER_VALIDATE_URL)) {
|
if (!empty($m3u_url) && !filter_var($m3u_url, FILTER_VALIDATE_URL)) {
|
||||||
$error = "URL M3U invalide pour la source « $name »."; break;
|
$error = "Invalid M3U URL for source \"$name\"."; break;
|
||||||
}
|
}
|
||||||
$epg_sources[] = [
|
$epg_sources[] = [
|
||||||
'name' => trim($name) ?: "Source " . ($i + 1),
|
'name' => trim($name) ?: 'Source ' . ($i + 1),
|
||||||
'epg_url' => $epg_url,
|
'epg_url' => $epg_url,
|
||||||
'm3u_url' => $m3u_url,
|
'm3u_url' => $m3u_url,
|
||||||
];
|
];
|
||||||
@@ -51,303 +77,224 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
|
|
||||||
if (empty($error)) {
|
if (empty($error)) {
|
||||||
if (empty($group_name)) {
|
if (empty($group_name)) {
|
||||||
$error = 'Le nom du groupe est obligatoire.';
|
$error = 'Group name is required.';
|
||||||
} elseif (empty($epg_sources)) {
|
} elseif (empty($epg_sources)) {
|
||||||
$error = 'Au moins une source EPG est obligatoire.';
|
$error = 'At least one EPG source is required.';
|
||||||
} else {
|
} else {
|
||||||
$config = [
|
$new_key = $is_first_setup ? strtoupper(bin2hex(random_bytes(8))) : $admin_key;
|
||||||
|
$config = [
|
||||||
'group_name' => $group_name,
|
'group_name' => $group_name,
|
||||||
'epg_sources' => $epg_sources,
|
'epg_sources' => $epg_sources,
|
||||||
'allow_personal_epg' => $allow_personal_epg,
|
'allow_personal_epg' => $allow_personal_epg,
|
||||||
|
'admin_key' => $new_key,
|
||||||
];
|
];
|
||||||
$written = file_put_contents(
|
$written = file_put_contents($config_path, json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
|
||||||
$config_path,
|
|
||||||
json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)
|
|
||||||
);
|
|
||||||
if ($written === false) {
|
if ($written === false) {
|
||||||
$error = 'Impossible d\'écrire config.json. Vérifiez les permissions (chmod 775 .).';
|
$error = 'Cannot write config.json. Check permissions (chmod 775 .).';
|
||||||
} else {
|
} else {
|
||||||
$success = true;
|
$mode = 'success';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$prefill_group = $_POST['group_name'] ?? $existing['group_name'] ?? '';
|
||||||
|
$prefill_sources = $existing['epg_sources'] ?? [];
|
||||||
|
$prefill_epg = !empty($existing['allow_personal_epg']);
|
||||||
|
$submitted_key = trim($_POST['admin_key_input'] ?? $_POST['admin_key_hidden'] ?? '');
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>GridTV — Configuration</title>
|
<title>GridTV — Setup</title>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg: #0a0b0d; --surface: #111318; --surface2: #181b22;
|
--bg:#0a0b0d;--surface:#111318;--surface2:#181b22;
|
||||||
--border: #232733; --border-bright: #2e3444;
|
--border:#232733;--border-bright:#2e3444;
|
||||||
--accent: #e8c842; --accent2: #4a9eff;
|
--accent:#e8c842;--accent2:#4a9eff;
|
||||||
--text: #c8cdd8; --text-dim: #5a6070; --text-bright: #eef0f5;
|
--text:#c8cdd8;--text-dim:#5a6070;--text-bright:#eef0f5;
|
||||||
--error: #ff4444; --success: #44cc77;
|
--error:#ff4444;--success:#44cc77;
|
||||||
}
|
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
||||||
html, body {
|
|
||||||
min-height: 100%; background: var(--bg); color: var(--text);
|
|
||||||
font-family: 'Barlow Condensed', sans-serif;
|
|
||||||
display: flex; align-items: flex-start; justify-content: center;
|
|
||||||
}
|
|
||||||
.setup-card {
|
|
||||||
width: 100%; max-width: 580px;
|
|
||||||
background: var(--surface); border: 1px solid var(--border-bright);
|
|
||||||
padding: 40px 40px 36px; margin: 40px 16px;
|
|
||||||
}
|
|
||||||
.setup-logo {
|
|
||||||
font-family: 'Share Tech Mono', monospace; font-size: 22px;
|
|
||||||
color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.setup-logo span { color: var(--text-dim); margin: 0 6px; }
|
|
||||||
.setup-subtitle {
|
|
||||||
font-size: 13px; color: var(--text-dim); letter-spacing: 0.05em;
|
|
||||||
margin-bottom: 32px; line-height: 1.5;
|
|
||||||
}
|
|
||||||
.form-group { margin-bottom: 22px; }
|
|
||||||
.section-title {
|
|
||||||
font-family: 'Share Tech Mono', monospace; font-size: 11px;
|
|
||||||
letter-spacing: 0.12em; text-transform: uppercase;
|
|
||||||
color: var(--accent); margin: 32px 0 16px;
|
|
||||||
padding-bottom: 8px; border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
display: block; font-size: 11px; letter-spacing: 0.12em;
|
|
||||||
text-transform: uppercase; color: var(--text-dim);
|
|
||||||
margin-bottom: 7px; font-family: 'Share Tech Mono', monospace;
|
|
||||||
}
|
|
||||||
label .required { color: var(--accent); margin-left: 3px; }
|
|
||||||
label .optional { color: var(--text-dim); font-size: 10px; text-transform: none; letter-spacing: 0; margin-left: 4px; opacity: 0.6; }
|
|
||||||
input[type="text"], input[type="url"] {
|
|
||||||
width: 100%; background: var(--surface2); border: 1px solid var(--border-bright);
|
|
||||||
color: var(--text-bright); font-family: 'Share Tech Mono', monospace;
|
|
||||||
font-size: 13px; padding: 10px 12px; outline: none; transition: border-color 0.15s;
|
|
||||||
}
|
|
||||||
input[type="text"]:focus, input[type="url"]:focus { border-color: var(--accent); }
|
|
||||||
input::placeholder { color: var(--text-dim); opacity: 0.5; }
|
|
||||||
.hint { font-size: 11px; color: var(--text-dim); margin-top: 5px; line-height: 1.4; }
|
|
||||||
|
|
||||||
/* Sources EPG */
|
|
||||||
.sources-list { display: flex; flex-direction: column; gap: 16px; }
|
|
||||||
.source-block {
|
|
||||||
background: var(--surface2); border: 1px solid var(--border);
|
|
||||||
padding: 16px; position: relative;
|
|
||||||
}
|
|
||||||
.source-block .source-num {
|
|
||||||
font-family: 'Share Tech Mono', monospace; font-size: 10px;
|
|
||||||
color: var(--accent); letter-spacing: 0.1em; margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.source-fields { display: grid; gap: 10px; }
|
|
||||||
.source-remove {
|
|
||||||
position: absolute; top: 10px; right: 10px;
|
|
||||||
background: none; border: none; color: var(--text-dim);
|
|
||||||
font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 5px;
|
|
||||||
}
|
|
||||||
.source-remove:hover { color: var(--error); }
|
|
||||||
.btn-add-source {
|
|
||||||
width: 100%; background: none; border: 1px dashed var(--border-bright);
|
|
||||||
color: var(--accent2); font-family: 'Barlow Condensed', sans-serif;
|
|
||||||
font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
|
|
||||||
text-transform: uppercase; padding: 10px; cursor: pointer;
|
|
||||||
margin-top: 8px; transition: border-color 0.15s, color 0.15s;
|
|
||||||
}
|
|
||||||
.btn-add-source:hover { border-color: var(--accent2); color: var(--text-bright); }
|
|
||||||
|
|
||||||
/* Toggle personal EPG */
|
|
||||||
.toggle-row {
|
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
|
||||||
background: var(--surface2); border: 1px solid var(--border);
|
|
||||||
padding: 14px 16px; margin-bottom: 22px;
|
|
||||||
}
|
|
||||||
.toggle-label { font-size: 13px; color: var(--text); line-height: 1.4; }
|
|
||||||
.toggle-label small { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
|
|
||||||
.toggle {
|
|
||||||
position: relative; width: 40px; height: 22px; flex-shrink: 0; margin-left: 16px;
|
|
||||||
}
|
|
||||||
.toggle input { opacity: 0; width: 0; height: 0; }
|
|
||||||
.toggle-slider {
|
|
||||||
position: absolute; inset: 0; background: var(--border-bright);
|
|
||||||
cursor: pointer; transition: background 0.2s; border-radius: 22px;
|
|
||||||
}
|
|
||||||
.toggle-slider:before {
|
|
||||||
content: ''; position: absolute; width: 16px; height: 16px;
|
|
||||||
left: 3px; top: 3px; background: var(--text-dim);
|
|
||||||
transition: transform 0.2s, background 0.2s; border-radius: 50%;
|
|
||||||
}
|
|
||||||
.toggle input:checked + .toggle-slider { background: var(--accent); }
|
|
||||||
.toggle input:checked + .toggle-slider:before { transform: translateX(18px); background: #000; }
|
|
||||||
|
|
||||||
.btn-submit {
|
|
||||||
width: 100%; background: var(--accent); color: #000; border: none;
|
|
||||||
font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
|
|
||||||
letter-spacing: 0.12em; text-transform: uppercase; padding: 13px;
|
|
||||||
cursor: pointer; margin-top: 8px; transition: opacity 0.15s;
|
|
||||||
}
|
|
||||||
.btn-submit:hover { opacity: 0.85; }
|
|
||||||
.alert {
|
|
||||||
padding: 12px 14px; font-size: 13px; margin-bottom: 24px;
|
|
||||||
line-height: 1.5; border-left: 3px solid;
|
|
||||||
}
|
|
||||||
.alert-error { background: rgba(255,68,68,0.08); border-color: var(--error); color: var(--error); }
|
|
||||||
.alert-success{ background: rgba(68,204,119,0.08); border-color: var(--success); color: var(--success); }
|
|
||||||
.success-actions { text-align: center; margin-top: 28px; }
|
|
||||||
.btn-go {
|
|
||||||
display: inline-block; background: var(--accent); color: #000;
|
|
||||||
font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700;
|
|
||||||
letter-spacing: 0.12em; text-transform: uppercase; padding: 13px 40px;
|
|
||||||
text-decoration: none; transition: opacity 0.15s;
|
|
||||||
}
|
|
||||||
.btn-go:hover { opacity: 0.85; }
|
|
||||||
.setup-note {
|
|
||||||
margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
|
|
||||||
font-size: 11px; color: var(--text-dim); line-height: 1.6;
|
|
||||||
}
|
|
||||||
.setup-note code {
|
|
||||||
font-family: 'Share Tech Mono', monospace; background: var(--surface2);
|
|
||||||
padding: 1px 5px; border: 1px solid var(--border); color: var(--accent2); font-size: 11px;
|
|
||||||
}
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0;}
|
||||||
|
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'Barlow Condensed',sans-serif;display:flex;align-items:flex-start;justify-content:center;}
|
||||||
|
.setup-card{width:100%;max-width:580px;background:var(--surface);border:1px solid var(--border-bright);padding:40px 40px 36px;margin:40px 16px;}
|
||||||
|
.setup-logo{font-family:'Share Tech Mono',monospace;font-size:22px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
|
||||||
|
.setup-logo span{color:var(--text-dim);margin:0 6px;}
|
||||||
|
.setup-subtitle{font-size:13px;color:var(--text-dim);letter-spacing:.05em;margin-bottom:32px;line-height:1.5;}
|
||||||
|
.form-group{margin-bottom:22px;}
|
||||||
|
.section-title{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:32px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border);}
|
||||||
|
label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;font-family:'Share Tech Mono',monospace;}
|
||||||
|
label .required{color:var(--accent);margin-left:3px;}
|
||||||
|
label .optional{color:var(--text-dim);font-size:10px;text-transform:none;letter-spacing:0;margin-left:4px;opacity:.6;}
|
||||||
|
input[type=text],input[type=url],input[type=password]{width:100%;background:var(--surface2);border:1px solid var(--border-bright);color:var(--text-bright);font-family:'Share Tech Mono',monospace;font-size:13px;padding:10px 12px;outline:none;transition:border-color .15s;}
|
||||||
|
input:focus{border-color:var(--accent);}
|
||||||
|
input::placeholder{color:var(--text-dim);opacity:.5;}
|
||||||
|
.hint{font-size:11px;color:var(--text-dim);margin-top:5px;line-height:1.4;}
|
||||||
|
.sources-list{display:flex;flex-direction:column;gap:16px;}
|
||||||
|
.source-block{background:var(--surface2);border:1px solid var(--border);padding:16px;position:relative;}
|
||||||
|
.source-block .source-num{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:.1em;margin-bottom:12px;}
|
||||||
|
.source-fields{display:grid;gap:10px;}
|
||||||
|
.source-remove{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;line-height:1;padding:2px 5px;}
|
||||||
|
.source-remove:hover{color:var(--error);}
|
||||||
|
.btn-add-source{width:100%;background:none;border:1px dashed var(--border-bright);color:var(--accent2);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:10px;cursor:pointer;margin-top:8px;transition:border-color .15s,color .15s;}
|
||||||
|
.btn-add-source:hover{border-color:var(--accent2);color:var(--text-bright);}
|
||||||
|
.toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);padding:14px 16px;margin-bottom:22px;}
|
||||||
|
.toggle-label{font-size:13px;color:var(--text);line-height:1.4;}
|
||||||
|
.toggle-label small{display:block;font-size:11px;color:var(--text-dim);margin-top:2px;}
|
||||||
|
.toggle{position:relative;width:40px;height:22px;flex-shrink:0;margin-left:16px;}
|
||||||
|
.toggle input{opacity:0;width:0;height:0;}
|
||||||
|
.toggle-slider{position:absolute;inset:0;background:var(--border-bright);cursor:pointer;transition:background .2s;border-radius:22px;}
|
||||||
|
.toggle-slider:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--text-dim);transition:transform .2s,background .2s;border-radius:50%;}
|
||||||
|
.toggle input:checked+.toggle-slider{background:var(--accent);}
|
||||||
|
.toggle input:checked+.toggle-slider:before{transform:translateX(18px);background:#000;}
|
||||||
|
.btn-submit{width:100%;background:var(--accent);color:#000;border:none;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:13px;cursor:pointer;margin-top:8px;transition:opacity .15s;}
|
||||||
|
.btn-submit:hover{opacity:.85;}
|
||||||
|
.alert{padding:12px 14px;font-size:13px;margin-bottom:24px;line-height:1.5;border-left:3px solid;}
|
||||||
|
.alert-error{background:rgba(255,68,68,.08);border-color:var(--error);color:var(--error);}
|
||||||
|
.alert-success{background:rgba(68,204,119,.08);border-color:var(--success);color:var(--success);}
|
||||||
|
.success-actions{text-align:center;margin-top:28px;}
|
||||||
|
.btn-go{display:inline-block;background:var(--accent);color:#000;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:13px 40px;text-decoration:none;transition:opacity .15s;}
|
||||||
|
.btn-go:hover{opacity:.85;}
|
||||||
|
.key-box{background:var(--surface2);border:1px solid var(--accent);padding:18px 20px;margin:24px 0;text-align:center;}
|
||||||
|
.key-label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px;}
|
||||||
|
.key-value{font-family:'Share Tech Mono',monospace;font-size:22px;color:var(--accent);letter-spacing:.15em;word-break:break-all;}
|
||||||
|
.key-warning{font-size:11px;color:var(--text-dim);margin-top:10px;line-height:1.5;}
|
||||||
|
.key-warning strong{color:var(--error);}
|
||||||
|
.lock-screen{text-align:center;padding:10px 0 20px;}
|
||||||
|
.lock-icon{font-size:36px;margin-bottom:16px;}
|
||||||
|
.lock-title{font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:.1em;color:var(--text);margin-bottom:8px;}
|
||||||
|
.lock-sub{font-size:12px;color:var(--text-dim);margin-bottom:24px;line-height:1.5;}
|
||||||
|
.lock-form{display:flex;gap:8px;}
|
||||||
|
.lock-form input{flex:1;}
|
||||||
|
.setup-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);line-height:1.6;}
|
||||||
|
.setup-note code{font-family:'Share Tech Mono',monospace;background:var(--surface2);padding:1px 5px;border:1px solid var(--border);color:var(--accent2);font-size:11px;}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="setup-card">
|
<div class="setup-card">
|
||||||
|
|
||||||
<div class="setup-logo">Grid<span>/</span>TV</div>
|
<div class="setup-logo">Grid<span>/</span>TV</div>
|
||||||
<div class="setup-subtitle">
|
|
||||||
Bienvenue sur GridTV — votre guide TV IPTV.<br>
|
|
||||||
Configurez votre instance en remplissant les champs ci-dessous.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php if ($error): ?>
|
<?php if ($mode === 'lock'): ?>
|
||||||
<div class="alert alert-error"><?= htmlspecialchars($error) ?></div>
|
<div class="setup-subtitle">Enter your admin key to access the configuration.</div>
|
||||||
<?php endif; ?>
|
<?php if ($error): ?><div class="alert alert-error"><?= htmlspecialchars($error) ?></div><?php endif; ?>
|
||||||
|
<div class="lock-screen">
|
||||||
|
<div class="lock-icon">🔒</div>
|
||||||
|
<div class="lock-title">Configuration locked</div>
|
||||||
|
<div class="lock-sub">GridTV is already configured.<br>Enter your admin key to edit the settings.</div>
|
||||||
|
<form method="POST" action="setup.php">
|
||||||
|
<div class="lock-form">
|
||||||
|
<input type="password" name="admin_key_input" placeholder="Your admin key" autofocus autocomplete="off">
|
||||||
|
<button type="submit" class="btn-submit" style="width:auto;padding:10px 20px;">Unlock</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
<?php if ($success): ?>
|
<?php elseif ($mode === 'success'): ?>
|
||||||
<div class="alert alert-success">
|
<div class="setup-subtitle">Configuration saved successfully.</div>
|
||||||
✓ Configuration enregistrée dans <code>config.json</code>.<br>
|
<div class="alert alert-success">✓ Settings saved to <code>config.json</code>.</div>
|
||||||
Cette page ne sera plus accessible. Pour modifier la config, éditez <code>config.json</code> via SSH.
|
<?php if ($is_first_setup): ?>
|
||||||
</div>
|
<div class="key-box">
|
||||||
<div class="success-actions">
|
<div class="key-label">Your admin key</div>
|
||||||
<a href="index.php" class="btn-go">Ouvrir GridTV →</a>
|
<div class="key-value"><?= htmlspecialchars($new_key) ?></div>
|
||||||
|
<div class="key-warning"><strong>Save this key now.</strong> It will not be shown again.<br>You will need it to access this setup page in the future.</div>
|
||||||
</div>
|
</div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="alert alert-success" style="margin-top:0">Your admin key is unchanged.</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<div class="success-actions"><a href="index.php" class="btn-go">Open GridTV →</a></div>
|
||||||
|
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
|
<div class="setup-subtitle">
|
||||||
<form method="POST" action="setup.php">
|
<?= $is_first_setup ? 'Welcome to GridTV. Fill in the fields below to get started.' : 'Edit your GridTV configuration.' ?>
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Nom du groupe TV <span class="required">*</span></label>
|
|
||||||
<input type="text" name="group_name"
|
|
||||||
value="<?= htmlspecialchars($_POST['group_name'] ?? '') ?>"
|
|
||||||
placeholder="Ex: JohnnyBeGood, MaTV, FamilleTV..."
|
|
||||||
required>
|
|
||||||
<div class="hint">S'affiche en haut à gauche dans la topbar.</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<?php if ($error): ?><div class="alert alert-error"><?= htmlspecialchars($error) ?></div><?php endif; ?>
|
||||||
|
|
||||||
<div class="section-title">Sources EPG</div>
|
<form method="POST" action="setup.php">
|
||||||
|
<?php if (!$is_first_setup): ?>
|
||||||
|
<input type="hidden" name="admin_key_hidden" value="<?= htmlspecialchars($submitted_key ?: $admin_key) ?>">
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="sources-list" id="sourcesList">
|
<div class="form-group">
|
||||||
<div class="source-block" data-index="0">
|
<label>TV Group Name <span class="required">*</span></label>
|
||||||
<div class="source-num">SOURCE 1</div>
|
<input type="text" name="group_name" value="<?= htmlspecialchars($prefill_group) ?>" placeholder="e.g. JohnnyBeGood, MyTV, FamilyTV..." required>
|
||||||
<button type="button" class="source-remove" onclick="removeSource(this)" style="display:none">✕</button>
|
<div class="hint">Displayed top-left in the topbar.</div>
|
||||||
<div class="source-fields">
|
</div>
|
||||||
<div>
|
|
||||||
<label>Nom de la source</label>
|
<div class="section-title">EPG Sources</div>
|
||||||
<input type="text" name="source_name[]" value="Main" placeholder="Ex: Main, Sports, Films...">
|
<div class="sources-list" id="sourcesList">
|
||||||
</div>
|
<?php
|
||||||
<div>
|
$sources_to_show = !empty($prefill_sources) ? $prefill_sources : [['name'=>'Main','epg_url'=>'','m3u_url'=>'']];
|
||||||
<label>URL EPG (XMLTV) <span class="required">*</span></label>
|
foreach ($sources_to_show as $i => $src): ?>
|
||||||
<input type="url" name="source_epg_url[]" placeholder="http://votre-serveur/api/xmltv.xml" required>
|
<div class="source-block" data-index="<?= $i ?>">
|
||||||
</div>
|
<div class="source-num">SOURCE <?= $i + 1 ?></div>
|
||||||
<div>
|
<button type="button" class="source-remove" onclick="removeSource(this)"<?= count($sources_to_show) === 1 ? ' style="display:none"' : '' ?>>✕</button>
|
||||||
<label>URL M3U <span class="optional">(optionnel)</span></label>
|
<div class="source-fields">
|
||||||
<input type="url" name="source_m3u_url[]" placeholder="http://votre-serveur/api/channels.m3u">
|
<div>
|
||||||
<div class="hint">Utilisé par le lecteur intégré pour matcher les chaînes.</div>
|
<label>Source name</label>
|
||||||
|
<input type="text" name="source_name[]" value="<?= htmlspecialchars($src['name'] ?? '') ?>" placeholder="e.g. Main, Sports, Movies...">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>EPG URL (XMLTV) <span class="required">*</span></label>
|
||||||
|
<input type="url" name="source_epg_url[]" value="<?= htmlspecialchars($src['epg_url'] ?? '') ?>" placeholder="http://your-server/api/xmltv.xml">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>M3U URL <span class="optional">(optional)</span></label>
|
||||||
|
<input type="url" name="source_m3u_url[]" value="<?= htmlspecialchars($src['m3u_url'] ?? '') ?>" placeholder="http://your-server/api/channels.m3u">
|
||||||
|
<div class="hint">Used by the built-in player to match channels to streams.</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<button type="button" class="btn-add-source" onclick="addSource()">+ Add EPG source</button>
|
||||||
|
|
||||||
<button type="button" class="btn-add-source" onclick="addSource()">+ Ajouter une source EPG</button>
|
<div class="section-title">Options</div>
|
||||||
|
<div class="toggle-row">
|
||||||
<div class="section-title">Options</div>
|
<div class="toggle-label">
|
||||||
|
Allow personal EPG
|
||||||
<div class="toggle-row">
|
<small>Visitors can use your instance with their own EPG/M3U URLs.</small>
|
||||||
<div class="toggle-label">
|
</div>
|
||||||
Autoriser les EPG personnels
|
<label class="toggle">
|
||||||
<small>Les visiteurs peuvent utiliser votre instance avec leur propre EPG/M3U.</small>
|
<input type="checkbox" name="allow_personal_epg" id="allowPersonalEpg"<?= $prefill_epg ? ' checked' : '' ?>>
|
||||||
|
<span class="toggle-slider"></span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label class="toggle">
|
|
||||||
<input type="checkbox" name="allow_personal_epg" id="allowPersonalEpg">
|
|
||||||
<span class="toggle-slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn-submit">Enregistrer la configuration</button>
|
<button type="submit" class="btn-submit">Save configuration</button>
|
||||||
|
</form>
|
||||||
</form>
|
|
||||||
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="setup-note">
|
<div class="setup-note">
|
||||||
<strong>Note :</strong> La configuration est stockée dans <code>config.json</code> sur le serveur.
|
<strong>Note:</strong> Configuration is stored in <code>config.json</code> on the server.
|
||||||
Ce fichier est exclu du dépôt Git (<code>.gitignore</code>).
|
This file is excluded from the Git repository (<code>.gitignore</code>).
|
||||||
Pour modifier les paramètres ultérieurement, éditez ce fichier directement via SSH.
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let sourceCount = 1;
|
let sourceCount = document.querySelectorAll('.source-block').length;
|
||||||
|
|
||||||
function addSource() {
|
function addSource() {
|
||||||
sourceCount++;
|
sourceCount++;
|
||||||
const list = document.getElementById('sourcesList');
|
const list = document.getElementById('sourcesList');
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'source-block';
|
div.className = 'source-block';
|
||||||
div.dataset.index = sourceCount - 1;
|
|
||||||
div.innerHTML = `
|
div.innerHTML = `
|
||||||
<div class="source-num">SOURCE ${sourceCount}</div>
|
<div class="source-num">SOURCE ${sourceCount}</div>
|
||||||
<button type="button" class="source-remove" onclick="removeSource(this)">✕</button>
|
<button type="button" class="source-remove" onclick="removeSource(this)">✕</button>
|
||||||
<div class="source-fields">
|
<div class="source-fields">
|
||||||
<div>
|
<div><label>Source name</label><input type="text" name="source_name[]" placeholder="e.g. Sports, Movies..."></div>
|
||||||
<label>Nom de la source</label>
|
<div><label>EPG URL (XMLTV) <span class="required">*</span></label><input type="url" name="source_epg_url[]" placeholder="http://your-server/api/xmltv.xml"></div>
|
||||||
<input type="text" name="source_name[]" placeholder="Ex: Sports, Films...">
|
<div><label>M3U URL <span class="optional">(optional)</span></label><input type="url" name="source_m3u_url[]" placeholder="http://your-server/api/channels.m3u"><div class="hint">Used by the built-in player to match channels to streams.</div></div>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>URL EPG (XMLTV) <span class="required">*</span></label>
|
|
||||||
<input type="url" name="source_epg_url[]" placeholder="http://votre-serveur/api/xmltv.xml">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>URL M3U <span class="optional">(optionnel)</span></label>
|
|
||||||
<input type="url" name="source_m3u_url[]" placeholder="http://votre-serveur/api/channels.m3u">
|
|
||||||
<div class="hint">Utilisé par le lecteur intégré pour matcher les chaînes.</div>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
</div>`;
|
||||||
list.appendChild(div);
|
list.appendChild(div);
|
||||||
updateRemoveButtons();
|
updateRemoveButtons();
|
||||||
}
|
}
|
||||||
|
function removeSource(btn) { btn.closest('.source-block').remove(); renumberSources(); updateRemoveButtons(); }
|
||||||
function removeSource(btn) {
|
function renumberSources() { document.querySelectorAll('.source-block').forEach((b,i) => b.querySelector('.source-num').textContent = `SOURCE ${i+1}`); }
|
||||||
btn.closest('.source-block').remove();
|
function updateRemoveButtons() { const b = document.querySelectorAll('.source-block'); b.forEach(bl => bl.querySelector('.source-remove').style.display = b.length > 1 ? '' : 'none'); }
|
||||||
renumberSources();
|
|
||||||
updateRemoveButtons();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renumberSources() {
|
|
||||||
document.querySelectorAll('.source-block').forEach((block, i) => {
|
|
||||||
block.querySelector('.source-num').textContent = `SOURCE ${i + 1}`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateRemoveButtons() {
|
|
||||||
const blocks = document.querySelectorAll('.source-block');
|
|
||||||
blocks.forEach(block => {
|
|
||||||
block.querySelector('.source-remove').style.display = blocks.length > 1 ? '' : 'none';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+13
-1
@@ -30,9 +30,21 @@ $allow_personal_epg = !empty($config['allow_personal_epg']);
|
|||||||
$first_source = $epg_sources[0] ?? [];
|
$first_source = $epg_sources[0] ?? [];
|
||||||
$epg_url = htmlspecialchars($first_source['epg_url'] ?? '');
|
$epg_url = htmlspecialchars($first_source['epg_url'] ?? '');
|
||||||
$m3u_url = htmlspecialchars($first_source['m3u_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>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="<?= $locale ?>">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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 EPG_SOURCES = <?= json_encode(array_values($epg_sources)) ?>;
|
||||||
|
const L = <?= json_encode($L) ?>;
|
||||||
const ALLOW_PERSONAL_EPG = <?= $allow_personal_epg ? 'true' : 'false' ?>;
|
const ALLOW_PERSONAL_EPG = <?= $allow_personal_epg ? 'true' : 'false' ?>;
|
||||||
|
|
||||||
// Source active (index)
|
// Source active (index)
|
||||||
|
|||||||
+41
-22
@@ -10,24 +10,35 @@ function makePlaceholder(name) {
|
|||||||
return el;
|
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() {
|
function renderChannels() {
|
||||||
const list = document.getElementById('channelsList');
|
const list = document.getElementById('channelsList');
|
||||||
list.innerHTML = '';
|
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() {
|
function renderRuler() {
|
||||||
@@ -37,10 +48,18 @@ function renderRuler() {
|
|||||||
let t = new Date(GRID_START); t.setSeconds(0,0);
|
let t = new Date(GRID_START); t.setSeconds(0,0);
|
||||||
const rem = t.getMinutes()%15; if (rem) t.setMinutes(t.getMinutes()+(15-rem));
|
const rem = t.getMinutes()%15; if (rem) t.setMinutes(t.getMinutes()+(15-rem));
|
||||||
while (t <= GRID_END) {
|
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 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);
|
tick.appendChild(lbl); tick.appendChild(line); ruler.appendChild(tick);
|
||||||
t = new Date(t.getTime()+15*60000);
|
t = new Date(t.getTime()+15*60000);
|
||||||
}
|
}
|
||||||
@@ -62,7 +81,9 @@ function renderPrograms() {
|
|||||||
|
|
||||||
const now = new Date();
|
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');
|
const row = document.createElement('div');
|
||||||
row.className = 'program-row';
|
row.className = 'program-row';
|
||||||
row.style.cssText = `top:${i*ROW_H}px;position:absolute;left:0;right:0;`;
|
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('mouseenter', e=>showTooltip(e,p));
|
||||||
block.addEventListener('mousemove', e=>moveTooltip(e));
|
block.addEventListener('mousemove', e=>moveTooltip(e));
|
||||||
block.addEventListener('mouseleave', hideTooltip);
|
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);
|
row.appendChild(block);
|
||||||
});
|
});
|
||||||
inner.appendChild(row);
|
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 };
|
||||||
|
}
|
||||||
+4
-1
@@ -6,7 +6,9 @@ function renderMobile() {
|
|||||||
const winStart = new Date(now.getTime() - 30*60000);
|
const winStart = new Date(now.getTime() - 30*60000);
|
||||||
const winEnd = new Date(now.getTime() + 4*3600000);
|
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);
|
const progs = (programs[ch.id]||[]).filter(p => p.stop>winStart && p.start<winEnd);
|
||||||
if (!progs.length) return;
|
if (!progs.length) return;
|
||||||
|
|
||||||
@@ -49,6 +51,7 @@ function renderMobile() {
|
|||||||
const badge = document.createElement('div'); badge.className='mobile-live-badge'; badge.textContent='LIVE';
|
const badge = document.createElement('div'); badge.className='mobile-live-badge'; badge.textContent='LIVE';
|
||||||
item.appendChild(badge);
|
item.appendChild(badge);
|
||||||
}
|
}
|
||||||
|
item.addEventListener('click', () => openProgramModal(ch, p));
|
||||||
list.appendChild(item);
|
list.appendChild(item);
|
||||||
});
|
});
|
||||||
section.appendChild(list); container.appendChild(section);
|
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;
|
currentEpgUrl = src.epg_url;
|
||||||
currentM3uUrl = src.m3u_url ?? '';
|
currentM3uUrl = src.m3u_url ?? '';
|
||||||
localStorage.setItem('gridtv-active-source', idx);
|
localStorage.setItem('gridtv-active-source', idx);
|
||||||
|
if (typeof clearSearch === "function") clearSearch();
|
||||||
loadEPG(currentEpgUrl);
|
loadEPG(currentEpgUrl);
|
||||||
if (currentM3uUrl) loadM3U(currentM3uUrl);
|
if (currentM3uUrl) loadM3U(currentM3uUrl);
|
||||||
updateCopyButtons();
|
updateCopyButtons();
|
||||||
|
|||||||
+4
-6
@@ -12,12 +12,12 @@ function copyUrl(type) {
|
|||||||
navigator.clipboard.writeText(url).then(() => {
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
const btns = document.querySelectorAll('.copy-btn');
|
const btns = document.querySelectorAll('.copy-btn');
|
||||||
btns.forEach(b => { if (b.textContent.toLowerCase() === type) {
|
btns.forEach(b => { if (b.textContent.toLowerCase() === type) {
|
||||||
b.textContent = '✓ copié';
|
b.textContent = L.copied;
|
||||||
b.classList.add('copied');
|
b.classList.add('copied');
|
||||||
setTimeout(() => { b.textContent = type.toUpperCase(); b.classList.remove('copied'); }, 1800);
|
setTimeout(() => { b.textContent = type.toUpperCase(); b.classList.remove('copied'); }, 1800);
|
||||||
}});
|
}});
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
prompt('Copiez cette URL :', url);
|
prompt(url, url);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
function fmtTime(d) { return `${pad(d.getHours())}:${pad(d.getMinutes())}`; }
|
function fmtTime(d) { return `${pad(d.getHours())}:${pad(d.getMinutes())}`; }
|
||||||
@@ -36,10 +36,8 @@ function parseXMLTVDate(str) {
|
|||||||
function updateClock() {
|
function updateClock() {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
document.getElementById('clock').textContent = fmtTimeFull(now);
|
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 =
|
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);
|
setInterval(updateClock, 1000);
|
||||||
updateClock();
|
updateClock();
|
||||||
@@ -62,7 +60,7 @@ async function loadEPG(url) {
|
|||||||
} catch(e) {
|
} catch(e) {
|
||||||
document.getElementById('loading').style.display = 'none';
|
document.getElementById('loading').style.display = 'none';
|
||||||
document.getElementById('errorMsg').style.display = 'flex';
|
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;
|
document.getElementById('epgInput').value = url;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-1
@@ -3,7 +3,7 @@
|
|||||||
<?php
|
<?php
|
||||||
$js_dir = __DIR__ . '/../js/';
|
$js_dir = __DIR__ . '/../js/';
|
||||||
include $js_dir . 'config.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) {
|
foreach ($js_modules as $mod) {
|
||||||
echo file_get_contents($js_dir . $mod . '.js');
|
echo file_get_contents($js_dir . $mod . '.js');
|
||||||
}
|
}
|
||||||
|
|||||||
+5
-5
@@ -1,14 +1,14 @@
|
|||||||
<div class="loading" id="loading">
|
<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 class="loading-bar"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="error-msg" id="errorMsg">
|
<div class="error-msg" id="errorMsg">
|
||||||
<div class="err-title">⚠ Impossible de charger l'EPG</div>
|
<div class="err-title">⚠ <?= 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">
|
<div class="epg-input-bar">
|
||||||
<input class="epg-input" id="epgInput" type="text" placeholder="<?= $epg_url ?>" />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
<!-- GRID (desktop/tablet) -->
|
<!-- GRID (desktop/tablet) -->
|
||||||
<div class="grid-wrapper">
|
<div class="grid-wrapper">
|
||||||
<div class="channels-col">
|
<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 class="channels-list" id="channelsList"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline-area" id="timelineArea">
|
<div class="timeline-area" id="timelineArea">
|
||||||
|
|||||||
@@ -759,6 +759,116 @@
|
|||||||
.pip { width: calc(100vw - 16px); bottom: 8px; right: 8px; left: 8px; }
|
.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>
|
</style>
|
||||||
<link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
|
<link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
+22
-6
@@ -1,19 +1,35 @@
|
|||||||
|
<!-- MODAL PROGRAMME -->
|
||||||
|
<div class="modal-overlay" id="programModal">
|
||||||
|
<div class="modal-card program-card">
|
||||||
|
<button class="pm-close" onclick="closeProgramModal()">✕</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">▶ <?= htmlspecialchars($L["watch_now"]) ?></button>
|
||||||
|
<a class="pm-btn pm-imdb" id="pm-imdb" href="#" target="_blank" rel="noopener">🎥 <?= htmlspecialchars($L["imdb_search"]) ?></a>
|
||||||
|
<button class="pm-btn pm-cancel" onclick="closeProgramModal()"><?= htmlspecialchars($L["close"]) ?></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- MODAL PERSONAL EPG -->
|
<!-- MODAL PERSONAL EPG -->
|
||||||
<div class="modal-overlay" id="personalEpgModal">
|
<div class="modal-overlay" id="personalEpgModal">
|
||||||
<div class="modal-card">
|
<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">
|
<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">
|
<input type="url" id="personalEpgInput" placeholder="http://mon-serveur/xmltv.xml">
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-field">
|
<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">
|
<input type="url" id="personalM3uInput" placeholder="http://mon-serveur/channels.m3u">
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-actions">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+11
-6
@@ -3,14 +3,14 @@
|
|||||||
<div class="date-label" id="dateLabel"></div>
|
<div class="date-label" id="dateLabel"></div>
|
||||||
<div class="clock" id="clock">00:00:00</div>
|
<div class="clock" id="clock">00:00:00</div>
|
||||||
<div class="nav-btns" id="navBtns">
|
<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>
|
||||||
<div class="copy-btns">
|
<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)): ?>
|
<?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; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php if (count($epg_sources) > 1 || $allow_personal_epg): ?>
|
<?php if (count($epg_sources) > 1 || $allow_personal_epg): ?>
|
||||||
@@ -47,6 +47,11 @@ foreach ($theme_files as $file) {
|
|||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</select>
|
</select>
|
||||||
<div class="live-dot">LIVE</div>
|
<button class="search-btn" onclick="toggleSearch()" title="Search">🔍</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()">✕</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user