stephane.david/GridTV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit — GridTV

Browse Source
This commit is contained in:
Johnnybegood90
2026-03-09 14:27:40 +01:00
commit 8165ce41e3
5 changed files with 1479 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -0,0 +1 @@
config.json
README.md
+178
View File
@@ -0,0 +1,178 @@
# 📺 GridTV
> Guide TV IPTV en temps réel, pensé pour [Tunarr](https://github.com/chrisbenincasa/tunarr) et toute source XMLTV/M3U.
![PHP](https://img.shields.io/badge/PHP-8.0+-777BB4?style=flat-square&logo=php&logoColor=white)
![Nginx](https://img.shields.io/badge/Nginx-ready-009639?style=flat-square&logo=nginx&logoColor=white)
![License](https://img.shields.io/badge/license-MIT-blue?style=flat-square)
---
## ✨ Fonctionnalités
- 🎛️ **Grille timeline** — vue horizontale façon guide TV classique, avec ligne "maintenant" en temps réel
- 📱 **Responsive** — vue liste optimisée sur mobile
- ⏱️ **Barre de progression** en direct sur le programme en cours
- 🕶️ **Programmes passés** atténués automatiquement
- 📋 **Tooltip** au survol — titre, synopsis, saison/épisode, horaires, durée
- 🔗 **Boutons copie** EPG & M3U en un clic dans la topbar
- ⚙️ **Setup guidé** au premier lancement — zéro fichier à éditer à la main
- 🔄 **Rechargement automatique** de l'EPG toutes les 30 minutes
- 0️⃣ **Zéro dépendance** — PHP vanilla + nginx, c'est tout
---
## 📸 Aperçu
```
┌─────────────────────────────────────────────────────────────────┐
│ MonGroupe / GridTV Lun 09 Mar 14:32:18 ◀1h Maintenant 1h▶ EPG M3U ● LIVE │
├──────────┬────────────────────────┬──────────────────┬──────────┤
│ 1 Action │ ██████ Terminator ████ │ Die Hard │ ... │
│ 2 Legend │ Bio de Jimi Hendrix │ ████████████████ │ ... │
│ 3 Séries │ Sopranos S02E07 ████ │ ... │ │
└──────────┴────────────────────────┴──────────────────┴──────────┘
```
---
## 🚀 Installation
### Prérequis
- Serveur web avec **PHP 8.0+** et **php-fpm**
- **Nginx** (ou Apache)
- Une source **EPG au format XMLTV** (ex: Tunarr, Jellyfin, xTeVe...)
- *(Optionnel)* Une playlist **M3U**
---
### 1. Cloner le repo
```bash
git clone https://github.com/Johnnybegood90/gridtv.git /var/www/gridtv
cd /var/www/gridtv
```
---
### 2. Permissions
```bash
# Le serveur web doit pouvoir écrire config.json lors du setup
chmod 775 /var/www/gridtv
chown -R www-data:www-data /var/www/gridtv
```
---
### 3. Configurer Nginx
```nginx
server {
listen 80;
server_name guide.ton-domaine.fr;
root /var/www/gridtv;
index index.php;
location / {
try_files $uri $uri/ /index.php;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php8.2-fpm.sock;
}
}
```
> 💡 Adapte la version de PHP (`php8.2-fpm`) à celle installée sur ton serveur.
```bash
nginx -t && systemctl reload nginx
```
---
### 4. Premier lancement — Setup
Ouvre ton navigateur sur `http://guide.ton-domaine.fr`.
GridTV détecte l'absence de config et te redirige automatiquement vers la page de setup :
| Champ | Description |
|---|---|
| **Nom du groupe** | S'affiche en haut à gauche (ex: *JohnnyBeGood*, *MaTV*...) |
| **URL EPG (XMLTV)** | L'URL de ton guide électronique des programmes |
| **URL M3U** *(optionnel)* | Ta playlist IPTV, pour copie rapide depuis la topbar |
Une fois validé, le fichier `config.json` est créé sur le serveur. **La page setup devient inaccessible.**
---
### 5. Modifier la config plus tard
```bash
# Via SSH
nano /var/www/gridtv/config.json
```
```json
{
"group_name": "MonGroupe TV",
"epg_url": "http://192.168.0.3:8000/api/xmltv.xml",
"m3u_url": "http://192.168.0.3:8000/api/channels.m3u"
}
```
---
## 📁 Structure du projet
```
gridtv/
├── index.php # Le guide TV (redirige vers setup si pas de config)
├── setup.php # Page de configuration initiale
├── config.example.json # Template de config (à copier → config.json)
├── .gitignore # config.json exclu du repo
└── README.md
```
> `config.json` est dans le `.gitignore` — tes URLs privées ne seront jamais poussées sur GitHub.
---
## ⚙️ Configuration avancée
Les constantes suivantes sont modifiables directement dans `index.php` :
```js
const PX_PER_MIN = 5; // Zoom horizontal (pixels par minute)
const HOURS_BEFORE = 1; // Heures passées visibles dans la grille
const HOURS_AFTER = 3; // Heures futures visibles
const ROW_H = 80; // Hauteur d'une ligne chaîne (px)
```
---
## 🧩 Compatibilité EPG
GridTV parse le format **XMLTV standard**. Testé avec :
- ✅ [Tunarr](https://github.com/chrisbenincasa/tunarr)
- ✅ [xTeVe](https://github.com/xteve-project/xTeVe)
- ✅ [Jellyfin](https://jellyfin.org/) (via plugin LiveTV)
- ✅ Tout fichier XMLTV conforme à la spec
---
## 🤝 Contribuer
Les PRs sont les bienvenues ! Si t'as une idée, une correction, ou une feature — ouvre une issue ou envoie direct une PR.
---
## 📄 Licence
MIT — fais-en ce que tu veux.
config.example.json
+5
View File
@@ -0,0 +1,5 @@
{
"group_name": "MonGroupe TV",
"epg_url": "http://votre-serveur/api/xmltv.xml",
"m3u_url": "http://votre-serveur/api/channels.m3u"
}
index.php
+1031
View File
File diff suppressed because it is too large Load Diff
setup.php
+264
View File
@@ -0,0 +1,264 @@
<?php
// Si config.json existe déjà → on refuse l'accès
if (file_exists(__DIR__ . '/config.json')) {
http_response_code(403);
die('Configuration déjà effectuée. Modifiez config.json via SSH pour changer les paramètres.');
}
$error = '';
$success = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$group_name = trim($_POST['group_name'] ?? '');
$epg_url = trim($_POST['epg_url'] ?? '');
$m3u_url = trim($_POST['m3u_url'] ?? '');
if (empty($group_name) || empty($epg_url)) {
$error = 'Le nom du groupe et l\'URL EPG sont obligatoires.';
} elseif (!filter_var($epg_url, FILTER_VALIDATE_URL)) {
$error = 'L\'URL EPG ne semble pas valide.';
} elseif (!empty($m3u_url) && !filter_var($m3u_url, FILTER_VALIDATE_URL)) {
$error = 'L\'URL M3U ne semble pas valide.';
} else {
$config = [
'group_name' => $group_name,
'epg_url' => $epg_url,
'm3u_url' => $m3u_url,
];
$written = file_put_contents(
__DIR__ . '/config.json',
json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)
);
if ($written === false) {
$error = 'Impossible d\'écrire config.json. Vérifiez les permissions du dossier (chmod 775 .).';
} else {
$success = true;
}
}
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GridTV — Configuration</title>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0b0d;
--surface: #111318;
--surface2: #181b22;
--border: #232733;
--border-bright: #2e3444;
--accent: #e8c842;
--accent2: #4a9eff;
--text: #c8cdd8;
--text-dim: #5a6070;
--text-bright: #eef0f5;
--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: center;
justify-content: center;
}
.setup-card {
width: 100%;
max-width: 520px;
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;
}
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;
}
.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;
}
</style>
</head>
<body>
<div class="setup-card">
<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): ?>
<div class="alert alert-error"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>
<?php if ($success): ?>
<div class="alert alert-success">
✓ Configuration enregistrée dans <code>config.json</code>.<br>
Cette page ne sera plus accessible. Pour modifier la config, éditez <code>config.json</code> via SSH.
</div>
<div class="success-actions">
<a href="index.php" class="btn-go">Ouvrir GridTV →</a>
</div>
<?php else: ?>
<form method="POST" action="setup.php">
<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 class="form-group">
<label>URL du guide EPG (XMLTV) <span class="required">*</span></label>
<input type="url" name="epg_url"
value="<?= htmlspecialchars($_POST['epg_url'] ?? '') ?>"
placeholder="http://votre-serveur/api/xmltv.xml"
required>
<div class="hint">URL du fichier XMLTV généré par Tunarr ou autre source.</div>
</div>
<div class="form-group">
<label>URL de la playlist M3U <span class="optional">(optionnel)</span></label>
<input type="url" name="m3u_url"
value="<?= htmlspecialchars($_POST['m3u_url'] ?? '') ?>"
placeholder="http://votre-serveur/api/channels.m3u">
<div class="hint">Permet de copier l'URL M3U depuis la topbar du guide.</div>
</div>
<button type="submit" class="btn-submit">Enregistrer la configuration</button>
</form>
<?php endif; ?>
<div class="setup-note">
<strong>Note :</strong> La configuration est stockée dans <code>config.json</code> sur le serveur.
Ce fichier est exclu du dépôt Git (<code>.gitignore</code>).
Pour modifier les paramètres ultérieurement, éditez ce fichier directement via SSH.
</div>
</div>
</body>
</html>