Feat: Reconfigure in setup.php

This commit is contained in:
Johnnybegood90
2026-03-13 21:24:51 +01:00
parent 7b42539bc8
commit 76dbd18ca7
+192 -250
View File
@@ -1,10 +1,9 @@
<?php
// ── Migration automatique ancien format → nouveau ─────────────────────────────
$config_path = __DIR__ . '/config.json';
// Migration automatique ancien format
if (file_exists($config_path)) {
$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'])) {
$existing['epg_sources'] = [[
'name' => 'Main',
@@ -15,18 +14,40 @@ if (file_exists($config_path)) {
unset($existing['epg_url'], $existing['m3u_url']);
file_put_contents($config_path, json_encode($existing, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
}
http_response_code(403);
die('Configuration déjà effectuée. Modifiez config.json via SSH pour changer les paramètres.');
}
$error = '';
$success = false;
$is_first_setup = !file_exists($config_path);
$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'] ?? '');
$allow_personal_epg = isset($_POST['allow_personal_epg']);
// Récupérer les sources EPG dynamiques
$names = $_POST['source_name'] ?? [];
$epg_urls = $_POST['source_epg_url'] ?? [];
$m3u_urls = $_POST['source_m3u_url'] ?? [];
@@ -37,13 +58,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$m3u_url = trim($m3u_urls[$i] ?? '');
if (empty($epg_url)) continue;
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)) {
$error = "URL M3U invalide pour la source « $name »."; break;
$error = "Invalid M3U URL for source \"$name\"."; break;
}
$epg_sources[] = [
'name' => trim($name) ?: "Source " . ($i + 1),
'name' => trim($name) ?: 'Source ' . ($i + 1),
'epg_url' => $epg_url,
'm3u_url' => $m3u_url,
];
@@ -51,303 +72,224 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (empty($error)) {
if (empty($group_name)) {
$error = 'Le nom du groupe est obligatoire.';
$error = 'Group name is required.';
} elseif (empty($epg_sources)) {
$error = 'Au moins une source EPG est obligatoire.';
$error = 'At least one EPG source is required.';
} else {
$config = [
$new_key = $is_first_setup ? strtoupper(bin2hex(random_bytes(8))) : $admin_key;
$config = [
'group_name' => $group_name,
'epg_sources' => $epg_sources,
'allow_personal_epg' => $allow_personal_epg,
'admin_key' => $new_key,
];
$written = file_put_contents(
$config_path,
json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)
);
$written = file_put_contents($config_path, json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
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 {
$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>
<html lang="fr">
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<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: 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;
--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: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>
</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 ($mode === 'lock'): ?>
<div class="setup-subtitle">Enter your admin key to access the configuration.</div>
<?php if ($error): ?><div class="alert alert-error"><?= htmlspecialchars($error) ?></div><?php endif; ?>
<div class="lock-screen">
<div class="lock-icon">&#128274;</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): ?>
<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>
<?php elseif ($mode === 'success'): ?>
<div class="setup-subtitle">Configuration saved successfully.</div>
<div class="alert alert-success">&#10003; Settings saved to <code>config.json</code>.</div>
<?php if ($is_first_setup): ?>
<div class="key-box">
<div class="key-label">Your admin key</div>
<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>
<?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 &rarr;</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 class="setup-subtitle">
<?= $is_first_setup ? 'Welcome to GridTV. Fill in the fields below to get started.' : 'Edit your GridTV configuration.' ?>
</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="source-block" data-index="0">
<div class="source-num">SOURCE 1</div>
<button type="button" class="source-remove" onclick="removeSource(this)" style="display:none">✕</button>
<div class="source-fields">
<div>
<label>Nom de la source</label>
<input type="text" name="source_name[]" value="Main" placeholder="Ex: Main, Sports, Films...">
</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" required>
</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 class="form-group">
<label>TV Group Name <span class="required">*</span></label>
<input type="text" name="group_name" value="<?= htmlspecialchars($prefill_group) ?>" placeholder="e.g. JohnnyBeGood, MyTV, FamilyTV..." required>
<div class="hint">Displayed top-left in the topbar.</div>
</div>
<div class="section-title">EPG Sources</div>
<div class="sources-list" id="sourcesList">
<?php
$sources_to_show = !empty($prefill_sources) ? $prefill_sources : [['name'=>'Main','epg_url'=>'','m3u_url'=>'']];
foreach ($sources_to_show as $i => $src): ?>
<div class="source-block" data-index="<?= $i ?>">
<div class="source-num">SOURCE <?= $i + 1 ?></div>
<button type="button" class="source-remove" onclick="removeSource(this)"<?= count($sources_to_show) === 1 ? ' style="display:none"' : '' ?>>&#10005;</button>
<div class="source-fields">
<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>
<?php endforeach; ?>
</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="toggle-label">
Autoriser les EPG personnels
<small>Les visiteurs peuvent utiliser votre instance avec leur propre EPG/M3U.</small>
<div class="section-title">Options</div>
<div class="toggle-row">
<div class="toggle-label">
Allow personal EPG
<small>Visitors can use your instance with their own EPG/M3U URLs.</small>
</div>
<label class="toggle">
<input type="checkbox" name="allow_personal_epg" id="allowPersonalEpg"<?= $prefill_epg ? ' checked' : '' ?>>
<span class="toggle-slider"></span>
</label>
</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>
</form>
<button type="submit" class="btn-submit">Save 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.
<strong>Note:</strong> Configuration is stored in <code>config.json</code> on the server.
This file is excluded from the Git repository (<code>.gitignore</code>).
</div>
</div>
<script>
let sourceCount = 1;
let sourceCount = document.querySelectorAll('.source-block').length;
function addSource() {
sourceCount++;
const list = document.getElementById('sourcesList');
const div = document.createElement('div');
div.className = 'source-block';
div.dataset.index = sourceCount - 1;
div.className = 'source-block';
div.innerHTML = `
<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)">&#10005;</button>
<div class="source-fields">
<div>
<label>Nom de la source</label>
<input type="text" name="source_name[]" placeholder="Ex: Sports, Films...">
</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><label>Source name</label><input type="text" name="source_name[]" placeholder="e.g. Sports, Movies..."></div>
<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>
<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>`;
list.appendChild(div);
updateRemoveButtons();
}
function removeSource(btn) {
btn.closest('.source-block').remove();
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';
});
}
function removeSource(btn) { btn.closest('.source-block').remove(); renumberSources(); updateRemoveButtons(); }
function renumberSources() { document.querySelectorAll('.source-block').forEach((b,i) => b.querySelector('.source-num').textContent = `SOURCE ${i+1}`); }
function updateRemoveButtons() { const b = document.querySelectorAll('.source-block'); b.forEach(bl => bl.querySelector('.source-remove').style.display = b.length > 1 ? '' : 'none'); }
</script>
</body>
</html>