refactor: split monolithic index.php into src/tpl + src/js modules
This commit is contained in:
Johnnybegood90
@@ -0,0 +1,20 @@
|
||||
const EPG_SOURCES = <?= json_encode(array_values($epg_sources)) ?>;
|
||||
const ALLOW_PERSONAL_EPG = <?= $allow_personal_epg ? 'true' : 'false' ?>;
|
||||
|
||||
// Source active (index)
|
||||
let activeSourceIndex = 0;
|
||||
|
||||
const DEFAULT_EPG_URL = EPG_SOURCES[0]?.epg_url ?? '';
|
||||
const DEFAULT_M3U_URL = EPG_SOURCES[0]?.m3u_url ?? '';
|
||||
const PX_PER_MIN = 5;
|
||||
const GRID_HOURS = 72;
|
||||
const CORS_PROXY = 'https://corsproxy.io/?';
|
||||
|
||||
// Ancre : 2h avant maintenant, arrondi au quart d'heure inférieur
|
||||
const _d = new Date();
|
||||
_d.setMinutes(Math.floor(_d.getMinutes()/15)*15, 0, 0);
|
||||
const GRID_START = new Date(_d.getTime() - 2*3600000);
|
||||
const GRID_END = new Date(GRID_START.getTime() + GRID_HOURS*3600000);
|
||||
const TOTAL_WIDTH_PX = GRID_HOURS * 60 * PX_PER_MIN;
|
||||
|
||||
function msToX(ms) { return (ms - GRID_START.getTime()) / 60000 * PX_PER_MIN; }
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
// ── GRID ──────────────────────────────────────────────────────────────────────
|
||||
function renderGrid() {
|
||||
renderChannels(); renderRuler(); renderPrograms(); positionNowLine();
|
||||
}
|
||||
|
||||
function makePlaceholder(name) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'channel-logo-placeholder';
|
||||
el.textContent = name.substring(0,2).toUpperCase();
|
||||
return el;
|
||||
}
|
||||
|
||||
function renderChannels() {
|
||||
const list = document.getElementById('channelsList');
|
||||
list.innerHTML = '';
|
||||
channels.forEach(ch => {
|
||||
const cell = document.createElement('div');
|
||||
cell.className = 'channel-cell';
|
||||
if (ch.icon) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'channel-logo'; img.src = ch.icon;
|
||||
img.onerror = () => img.replaceWith(makePlaceholder(ch.name));
|
||||
cell.appendChild(img);
|
||||
} else { cell.appendChild(makePlaceholder(ch.name)); }
|
||||
const name = document.createElement('div');
|
||||
name.className = 'channel-name'; name.textContent = ch.name; name.title = ch.name;
|
||||
cell.appendChild(name);
|
||||
cell.addEventListener('click', () => openPip(ch.name, getNowPlaying(ch.id)));
|
||||
list.appendChild(cell);
|
||||
});
|
||||
}
|
||||
|
||||
function renderRuler() {
|
||||
const ruler = document.getElementById('timeRulerInner');
|
||||
ruler.innerHTML = ''; ruler.style.width = TOTAL_WIDTH_PX + 'px';
|
||||
document.getElementById('timeRuler').style.width = TOTAL_WIDTH_PX + 'px';
|
||||
let t = new Date(GRID_START); t.setSeconds(0,0);
|
||||
const rem = t.getMinutes()%15; if (rem) t.setMinutes(t.getMinutes()+(15-rem));
|
||||
while (t <= GRID_END) {
|
||||
const x = msToX(t.getTime()); const isHour = t.getMinutes()===0;
|
||||
const 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 line = document.createElement('div'); line.className='time-tick-line'+(isHour?' hour':'');
|
||||
tick.appendChild(lbl); tick.appendChild(line); ruler.appendChild(tick);
|
||||
t = new Date(t.getTime()+15*60000);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPrograms() {
|
||||
const ROW_H = 80;
|
||||
const inner = document.getElementById('programsInner');
|
||||
const totalH = channels.length * ROW_H;
|
||||
inner.innerHTML = '';
|
||||
inner.style.width = TOTAL_WIDTH_PX+'px';
|
||||
inner.style.height = totalH+'px';
|
||||
|
||||
// Remettre la now-line (détruite par innerHTML='')
|
||||
const nowLine = document.createElement('div');
|
||||
nowLine.className = 'now-line'; nowLine.id = 'nowLine';
|
||||
nowLine.style.height = totalH + 'px';
|
||||
inner.appendChild(nowLine);
|
||||
|
||||
const now = new Date();
|
||||
|
||||
channels.forEach((ch, i) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'program-row';
|
||||
row.style.cssText = `top:${i*ROW_H}px;position:absolute;left:0;right:0;`;
|
||||
|
||||
(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';
|
||||
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();
|
||||
if (!scrollListenerAdded) {
|
||||
scrollListenerAdded = true;
|
||||
document.getElementById('timelineArea').addEventListener('scroll', function() {
|
||||
document.getElementById('channelsList').scrollTop = this.scrollTop;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function positionNowLine() {
|
||||
const x = msToX(Date.now());
|
||||
const line = document.getElementById('nowLine');
|
||||
if (line) line.style.left = x + 'px';
|
||||
}
|
||||
|
||||
function centerNow() {
|
||||
const area = document.getElementById('timelineArea');
|
||||
area.scrollLeft = Math.max(0, msToX(Date.now()) - area.offsetWidth * 0.3);
|
||||
document.querySelectorAll('.nav-btn').forEach((b,i) => b.classList.toggle('active', i===1));
|
||||
}
|
||||
|
||||
function shiftView(mins) {
|
||||
const area = document.getElementById('timelineArea');
|
||||
area.scrollLeft = Math.max(0, area.scrollLeft + mins * PX_PER_MIN);
|
||||
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
// ── RESPONSIVE SWITCH ─────────────────────────────────────────────────────────
|
||||
let lastMobile = null;
|
||||
window.addEventListener('resize', () => {
|
||||
const m = isMobile();
|
||||
if (m !== lastMobile) { lastMobile=m; scrollListenerAdded=false; if (channels.length) renderAll(); }
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const savedSource = localStorage.getItem('gridtv-active-source');
|
||||
if (savedSource === 'personal') {
|
||||
const epg = localStorage.getItem('gridtv-personal-epg');
|
||||
const m3u = localStorage.getItem('gridtv-personal-m3u') ?? '';
|
||||
if (epg) {
|
||||
currentEpgUrl = epg;
|
||||
currentM3uUrl = m3u;
|
||||
const sel = document.getElementById('sourceSelect');
|
||||
if (sel) sel.value = 'personal';
|
||||
loadEPG(epg);
|
||||
if (m3u) loadM3U(m3u);
|
||||
return;
|
||||
}
|
||||
} else if (savedSource !== null) {
|
||||
const idx = parseInt(savedSource);
|
||||
const src = EPG_SOURCES[idx];
|
||||
if (src) {
|
||||
activeSourceIndex = idx;
|
||||
currentEpgUrl = src.epg_url;
|
||||
currentM3uUrl = src.m3u_url ?? '';
|
||||
const sel = document.getElementById('sourceSelect');
|
||||
if (sel) sel.value = idx;
|
||||
}
|
||||
}
|
||||
loadEPG(currentEpgUrl);
|
||||
loadM3U(currentM3uUrl);
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
// ── M3U PARSER ────────────────────────────────────────────────────────────────
|
||||
function slugify(str) {
|
||||
return str.toLowerCase()
|
||||
.replace(/^\d+\s*/, '') // virer le numéro de chaîne en début
|
||||
.replace(/[^a-z0-9]/g, ''); // garder que alphanum
|
||||
}
|
||||
|
||||
async function loadM3U(url) {
|
||||
if (!url) return;
|
||||
try {
|
||||
let text;
|
||||
try {
|
||||
const r = await fetch(url); text = await r.text();
|
||||
} catch(e) {
|
||||
const r = await fetch(CORS_PROXY + encodeURIComponent(url)); text = await r.text();
|
||||
}
|
||||
parseM3U(text);
|
||||
} catch(e) { console.warn('M3U load failed:', e); }
|
||||
}
|
||||
|
||||
function parseM3U(text) {
|
||||
m3uStreams = {};
|
||||
const lines = text.split('\n');
|
||||
let currentName = null;
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
if (line.startsWith('#EXTINF')) {
|
||||
// Extraire le nom : dernière partie après la virgule
|
||||
const comma = line.lastIndexOf(',');
|
||||
currentName = comma !== -1 ? line.slice(comma + 1).trim() : null;
|
||||
} else if (line && !line.startsWith('#') && currentName) {
|
||||
m3uStreams[slugify(currentName)] = line;
|
||||
currentName = null;
|
||||
}
|
||||
}
|
||||
console.log(`M3U: ${Object.keys(m3uStreams).length} streams chargés`);
|
||||
}
|
||||
|
||||
function getStreamUrl(channelName) {
|
||||
const slug = slugify(channelName);
|
||||
let url = null;
|
||||
if (m3uStreams[slug]) {
|
||||
url = m3uStreams[slug];
|
||||
} else {
|
||||
// Fallback : chercher une clé qui contient le slug ou l'inverse
|
||||
for (const [key, u] of Object.entries(m3uStreams)) {
|
||||
if (key.includes(slug) || slug.includes(key)) { url = u; break; }
|
||||
}
|
||||
}
|
||||
if (!url) return null;
|
||||
// Passer par proxy.php pour éviter le mixed content HTTP/HTTPS
|
||||
if (url.startsWith('http://')) {
|
||||
return 'proxy.php?url=' + encodeURIComponent(url);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
// ── MOBILE ────────────────────────────────────────────────────────────────────
|
||||
function renderMobile() {
|
||||
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);
|
||||
|
||||
channels.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 item = document.createElement('div');
|
||||
item.className = 'mobile-program'+(isLive?' is-live':'')+(isPast?' is-past':'');
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
// ── PLAYER PiP ────────────────────────────────────────────────────────────────
|
||||
let hlsInstance = null;
|
||||
|
||||
function openPip(channelName, programTitle) {
|
||||
const url = getStreamUrl(channelName);
|
||||
const pip = document.getElementById('pip');
|
||||
const video = document.getElementById('pipVideo');
|
||||
const err = document.getElementById('pipError');
|
||||
|
||||
document.getElementById('pipChannel').textContent = channelName;
|
||||
document.getElementById('pipProgram').textContent = programTitle || '';
|
||||
err.style.display = 'none';
|
||||
pip.classList.add('visible');
|
||||
|
||||
// Détruire l'instance HLS précédente
|
||||
if (hlsInstance) { hlsInstance.destroy(); hlsInstance = null; }
|
||||
video.src = '';
|
||||
|
||||
if (!url) {
|
||||
err.style.display = 'block';
|
||||
err.textContent = '⚠ Aucun stream trouvé pour cette chaîne';
|
||||
return;
|
||||
}
|
||||
|
||||
if (Hls.isSupported()) {
|
||||
hlsInstance = new Hls({ enableWorker: false, debug: false });
|
||||
hlsInstance.loadSource(url);
|
||||
hlsInstance.attachMedia(video);
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
console.log('[PiP] Manifest parsed, lecture...');
|
||||
video.play().catch(e => console.warn('[PiP] play() refusé:', e));
|
||||
});
|
||||
hlsInstance.on(Hls.Events.ERROR, (e, data) => {
|
||||
console.error('[PiP] HLS error:', data.type, data.details, data.fatal, data.response);
|
||||
if (data.fatal) {
|
||||
const detail = data.response ? ` (HTTP ${data.response.code})` : ` (${data.details})`;
|
||||
err.style.display = 'block';
|
||||
err.textContent = '⚠ Erreur de lecture du stream' + detail;
|
||||
}
|
||||
});
|
||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
// Safari natif HLS
|
||||
video.src = url;
|
||||
video.addEventListener('loadedmetadata', () => video.play().catch(() => {}));
|
||||
} else {
|
||||
err.style.display = 'block';
|
||||
err.textContent = '⚠ HLS non supporté sur ce navigateur';
|
||||
}
|
||||
}
|
||||
|
||||
function closePip() {
|
||||
const pip = document.getElementById('pip');
|
||||
const video = document.getElementById('pipVideo');
|
||||
pip.classList.remove('visible');
|
||||
if (hlsInstance) { hlsInstance.destroy(); hlsInstance = null; }
|
||||
video.pause(); video.src = '';
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
// ── SOURCE SWITCHER ───────────────────────────────────────────────────────────
|
||||
let currentEpgUrl = EPG_SOURCES[0]?.epg_url ?? '';
|
||||
let currentM3uUrl = EPG_SOURCES[0]?.m3u_url ?? '';
|
||||
|
||||
function switchSource(value) {
|
||||
if (value === 'personal') {
|
||||
openPersonalEpgModal();
|
||||
return;
|
||||
}
|
||||
const idx = parseInt(value);
|
||||
const src = EPG_SOURCES[idx];
|
||||
if (!src) return;
|
||||
activeSourceIndex = idx;
|
||||
currentEpgUrl = src.epg_url;
|
||||
currentM3uUrl = src.m3u_url ?? '';
|
||||
localStorage.setItem('gridtv-active-source', idx);
|
||||
loadEPG(currentEpgUrl);
|
||||
if (currentM3uUrl) loadM3U(currentM3uUrl);
|
||||
updateCopyButtons();
|
||||
}
|
||||
|
||||
function updateCopyButtons() {
|
||||
// Rien à faire visuellement, copyUrl() lit currentEpgUrl/currentM3uUrl
|
||||
}
|
||||
|
||||
function openPersonalEpgModal() {
|
||||
const saved_epg = localStorage.getItem('gridtv-personal-epg') ?? '';
|
||||
const saved_m3u = localStorage.getItem('gridtv-personal-m3u') ?? '';
|
||||
const modal = document.getElementById('personalEpgModal');
|
||||
document.getElementById('personalEpgInput').value = saved_epg;
|
||||
document.getElementById('personalM3uInput').value = saved_m3u;
|
||||
modal.classList.add('visible');
|
||||
}
|
||||
|
||||
function closePersonalEpgModal(applied) {
|
||||
document.getElementById('personalEpgModal').classList.remove('visible');
|
||||
// Si annulé (pas applied), remettre le select sur la source précédente
|
||||
if (!applied) {
|
||||
const sel = document.getElementById('sourceSelect');
|
||||
if (sel) sel.value = localStorage.getItem('gridtv-active-source') === 'personal' ? 'personal' : activeSourceIndex;
|
||||
}
|
||||
}
|
||||
|
||||
function applyPersonalEpg() {
|
||||
const epg = document.getElementById('personalEpgInput').value.trim();
|
||||
const m3u = document.getElementById('personalM3uInput').value.trim();
|
||||
if (!epg) { alert('URL EPG obligatoire'); return; }
|
||||
localStorage.setItem('gridtv-personal-epg', epg);
|
||||
localStorage.setItem('gridtv-personal-m3u', m3u);
|
||||
localStorage.setItem('gridtv-active-source', 'personal');
|
||||
currentEpgUrl = epg;
|
||||
currentM3uUrl = m3u;
|
||||
const sel = document.getElementById('sourceSelect');
|
||||
if (sel) sel.value = 'personal';
|
||||
closePersonalEpgModal(true);
|
||||
loadEPG(epg);
|
||||
if (m3u) loadM3U(m3u);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
// ── THÈMES ────────────────────────────────────────────────────────────────────
|
||||
function setTheme(theme) {
|
||||
document.getElementById('themeStylesheet').href = 'themes/' + theme + '.css';
|
||||
localStorage.setItem('gridtv-theme', theme);
|
||||
document.getElementById('themeSelect').value = theme;
|
||||
}
|
||||
|
||||
function initTheme() {
|
||||
const saved = localStorage.getItem('gridtv-theme') || 'default';
|
||||
setTheme(saved);
|
||||
}
|
||||
initTheme();
|
||||
|
||||
// ── LIVE UPDATES ──────────────────────────────────────────────────────────────
|
||||
function startLiveUpdates() {
|
||||
setInterval(() => { if (!isMobile()) positionNowLine(); }, 30000);
|
||||
setInterval(() => { if (channels.length) renderAll(); }, 60000);
|
||||
setInterval(() => loadEPG(DEFAULT_EPG_URL), 30*60*1000);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
// ── HELPERS ──────────────────────────────────────────────────────────────────
|
||||
function getNowPlaying(chId) {
|
||||
const now = new Date();
|
||||
const p = (programs[chId] || []).find(p => p.start <= now && p.stop > now);
|
||||
return p ? p.title : null;
|
||||
}
|
||||
|
||||
// ── TOOLTIP ───────────────────────────────────────────────────────────────────
|
||||
function showTooltip(e, p) {
|
||||
const ep = fmtEpisode(p.season, p.episode);
|
||||
document.getElementById('tt-title').textContent = p.title + (ep ? ' ' + ep : '');
|
||||
document.getElementById('tt-time').textContent = `${fmtTime(p.start)} — ${fmtTime(p.stop)} · ${Math.round((p.stop-p.start)/60000)} min`;
|
||||
document.getElementById('tt-desc').textContent = p.desc || '—';
|
||||
document.getElementById('tooltip').classList.add('visible');
|
||||
moveTooltip(e);
|
||||
}
|
||||
function moveTooltip(e) {
|
||||
const tt = document.getElementById('tooltip');
|
||||
const x=e.clientX+16, y=e.clientY+16;
|
||||
tt.style.left = (x+tt.offsetWidth >window.innerWidth ? x-tt.offsetWidth -32 : x)+'px';
|
||||
tt.style.top = (y+tt.offsetHeight>window.innerHeight ? y-tt.offsetHeight-32 : y)+'px';
|
||||
}
|
||||
function hideTooltip() { document.getElementById('tooltip').classList.remove('visible'); }
|
||||
|
||||
|
||||
|
||||
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
|
||||
let channels = [];
|
||||
let programs = {};
|
||||
let m3uStreams = {}; // slug normalisé → url stream
|
||||
let scrollListenerAdded = false; // sync scroll vertical chaînes
|
||||
|
||||
function pad(n) { return String(n).padStart(2,'0'); }
|
||||
|
||||
function copyUrl(type) {
|
||||
const url = type === 'epg' ? currentEpgUrl : currentM3uUrl;
|
||||
if (!url) return;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
const btns = document.querySelectorAll('.copy-btn');
|
||||
btns.forEach(b => { if (b.textContent.toLowerCase() === type) {
|
||||
b.textContent = '✓ copié';
|
||||
b.classList.add('copied');
|
||||
setTimeout(() => { b.textContent = type.toUpperCase(); b.classList.remove('copied'); }, 1800);
|
||||
}});
|
||||
}).catch(() => {
|
||||
prompt('Copiez cette URL :', url);
|
||||
});
|
||||
}
|
||||
function fmtTime(d) { return `${pad(d.getHours())}:${pad(d.getMinutes())}`; }
|
||||
function fmtTimeFull(d) { return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; }
|
||||
function isMobile() { return window.innerWidth <= 600; }
|
||||
|
||||
function parseXMLTVDate(str) {
|
||||
if (!str) return null;
|
||||
const m = str.match(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})\s*([+-]\d{4})?/);
|
||||
if (!m) return null;
|
||||
const offset = m[7] ? parseInt(m[7]) : 0;
|
||||
const offsetMs = (Math.floor(Math.abs(offset)/100)*60 + (Math.abs(offset)%100)) * 60000 * (offset<0?-1:1);
|
||||
return new Date(Date.UTC(+m[1],+m[2]-1,+m[3],+m[4],+m[5],+m[6]) - offsetMs);
|
||||
}
|
||||
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
document.getElementById('clock').textContent = fmtTimeFull(now);
|
||||
const days=['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'];
|
||||
const months=['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'];
|
||||
document.getElementById('dateLabel').textContent =
|
||||
`${days[now.getDay()]} ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
async function fetchXML(url) {
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
return new DOMParser().parseFromString(await res.text(), 'text/xml');
|
||||
}
|
||||
|
||||
async function loadEPG(url) {
|
||||
document.getElementById('loading').style.display = 'flex';
|
||||
document.getElementById('errorMsg').style.display = 'none';
|
||||
try {
|
||||
let doc;
|
||||
try { doc = await fetchXML(url); }
|
||||
catch(e) { doc = await fetchXML(CORS_PROXY + encodeURIComponent(url)); }
|
||||
parseAndRender(doc);
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
} catch(e) {
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
document.getElementById('errorMsg').style.display = 'flex';
|
||||
document.getElementById('errorDetail').textContent = `Erreur: ${e.message}`;
|
||||
document.getElementById('epgInput').value = url;
|
||||
}
|
||||
}
|
||||
|
||||
function loadFromInput() {
|
||||
const url = document.getElementById('epgInput').value.trim();
|
||||
if (url) loadEPG(url);
|
||||
}
|
||||
|
||||
function parseEpisode(p) {
|
||||
// Format xmltv_ns : "S.E.part" (0-indexed) ex: "0.2.0/1" = S01E03
|
||||
const ns = p.querySelector('episode-num[system="xmltv_ns"]')?.textContent;
|
||||
if (ns) {
|
||||
const parts = ns.split('.');
|
||||
const s = parts[0] !== undefined && parts[0].trim() !== '' ? parseInt(parts[0].trim()) + 1 : null;
|
||||
const ePart = parts[1] !== undefined ? parts[1].trim().split('/')[0] : '';
|
||||
const e = ePart !== '' ? parseInt(ePart) + 1 : null;
|
||||
if (s !== null || e !== null) return { season: s, episode: e };
|
||||
}
|
||||
// Format onscreen : "S01E03" ou "s1e3"
|
||||
const os = p.querySelector('episode-num[system="onscreen"]')?.textContent;
|
||||
if (os) {
|
||||
const m = os.match(/[Ss](\d+)[Ee](\d+)/);
|
||||
if (m) return { season: parseInt(m[1]), episode: parseInt(m[2]) };
|
||||
const m2 = os.match(/[Ee][Pp]?\s*(\d+)/i);
|
||||
if (m2) return { season: null, episode: parseInt(m2[1]) };
|
||||
}
|
||||
return { season: null, episode: null };
|
||||
}
|
||||
|
||||
function fmtEpisode(season, episode) {
|
||||
if (season !== null && episode !== null) return `S${String(season).padStart(2,'0')}E${String(episode).padStart(2,'0')}`;
|
||||
if (episode !== null) return `E${String(episode).padStart(2,'0')}`;
|
||||
return null;
|
||||
}
|
||||
|
||||
function parseAndRender(doc) {
|
||||
channels = []; programs = {};
|
||||
doc.querySelectorAll('channel').forEach(ch => {
|
||||
const id = ch.getAttribute('id');
|
||||
const name = ch.querySelector('display-name')?.textContent || id;
|
||||
const icon = ch.querySelector('icon')?.getAttribute('src') || null;
|
||||
const num = parseInt(name.match(/^(\d+)/)?.[1] ?? '9999');
|
||||
channels.push({ id, name, icon, num });
|
||||
programs[id] = [];
|
||||
});
|
||||
channels.sort((a,b) => a.num - b.num);
|
||||
|
||||
doc.querySelectorAll('programme').forEach(p => {
|
||||
const chId = p.getAttribute('channel');
|
||||
if (!programs[chId]) programs[chId] = [];
|
||||
const start = parseXMLTVDate(p.getAttribute('start'));
|
||||
const stop = parseXMLTVDate(p.getAttribute('stop'));
|
||||
const title = p.querySelector('title')?.textContent || '';
|
||||
const desc = p.querySelector('desc')?.textContent || '';
|
||||
const epInfo = parseEpisode(p);
|
||||
if (start && stop) programs[chId].push({ start, stop, title, desc, ...epInfo });
|
||||
});
|
||||
Object.keys(programs).forEach(id => programs[id].sort((a,b) => a.start - b.start));
|
||||
|
||||
renderAll();
|
||||
startLiveUpdates();
|
||||
}
|
||||
|
||||
function renderAll() {
|
||||
if (isMobile()) { renderMobile(); }
|
||||
else { renderGrid(); setTimeout(centerNow, 150); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user