diff --git a/app/public/assets/css/modal.css b/app/public/assets/css/modal.css index ea66143..b2cb5a1 100644 --- a/app/public/assets/css/modal.css +++ b/app/public/assets/css/modal.css @@ -83,3 +83,31 @@ font-size: .92rem; line-height: 1.4; } + +.programme-modal-header { + display: flex; + gap: 1rem; + align-items: center; + margin-bottom: 1rem; +} + +.programme-modal-logo { + width: 92px; + height: 58px; + object-fit: contain; + border: 1px solid var(--border); + border-radius: .7rem; + background: var(--panel-2); + padding: 4px; +} + +.programme-modal-channel { + display: flex; + flex-direction: column; + gap: .25rem; +} + +#modalChannel { + font-size: 1.05rem; + font-weight: 700; +} diff --git a/app/public/assets/css/timeline.css b/app/public/assets/css/timeline.css index fc66913..3e9fac9 100644 --- a/app/public/assets/css/timeline.css +++ b/app/public/assets/css/timeline.css @@ -190,8 +190,6 @@ border-color: var(--accent); } -cat >> app/public/assets/css/timeline.css <<'CSS' - .timeline-channel { flex-direction: column; justify-content: center; @@ -297,4 +295,7 @@ cat >> app/public/assets/css/timeline.css <<'CSS' font-size: 0.85rem; line-height: 1.35; } -CSS + +.live-badge[hidden] { + display: none !important; +} diff --git a/app/public/assets/js/modules/modal.js b/app/public/assets/js/modules/modal.js index be1e960..3cfa4b9 100644 --- a/app/public/assets/js/modules/modal.js +++ b/app/public/assets/js/modules/modal.js @@ -11,6 +11,8 @@ export function initProgrammeModal() { const category = document.getElementById("modalCategory"); const time = document.getElementById("modalTime"); const meta = document.getElementById("modalMeta"); + const logo = document.getElementById("modalLogo"); + const channel = document.getElementById("modalChannel"); const openModal = (programmeElement) => { const id = programmeElement.dataset.programmeId; @@ -30,6 +32,16 @@ export function initProgrammeModal() { description.textContent = programme.description || "Keine Beschreibung vorhanden."; category.textContent = programme.category || ""; + channel.textContent = + `Kanal ${programme.channel_number} · ${programme.channel}`; + + logo.src = `/assets/logos/${encodeURIComponent(programme.channel_id)}.svg`; + + logo.onerror = () => { + logo.onerror = null; + logo.src = "/assets/logos/default.svg"; + }; + const metaItems = []; if (metadata.season && metadata.episode) { @@ -61,7 +73,7 @@ export function initProgrammeModal() { meta.textContent = metaItems.join(" • "); meta.hidden = metaItems.length === 0; - time.textContent = `${programme.channel || ""} · ${programme.start || ""} – ${programme.stop || ""}`; + time.textContent = `${programme.start} – ${programme.stop}`; modal.hidden = false; document.body.classList.add("modal-open"); diff --git a/app/templates/day.php b/app/templates/day.php index 80ae5e0..9bf990e 100644 --- a/app/templates/day.php +++ b/app/templates/day.php @@ -45,12 +45,18 @@ foreach ($dayProgrammes as $channel) { foreach ($channel['programmes'] as $programme) { $programmeIndex[$programme['id']] = [ 'id' => $programme['id'], + 'channel_id' => $channel['channel_id'], 'channel' => $channel['channel_name'], + 'channel_number' => $channel['channel_number'], + 'favorite' => $channel['favorite'], 'title' => $programme['title'], 'subtitle' => $programme['subtitle'], 'description' => $programme['description'], 'category' => $programme['category'], 'metadata' => $programme['metadata'] ?? [], + 'year' => $programme['metadata']['year'] ?? '', + 'rating' => $programme['metadata']['age_rating'] ?? '', + 'country' => $programme['metadata']['country'] ?? '', 'start' => date('H:i', $programme['start']), 'stop' => date('H:i', $programme['stop']), ]; @@ -237,13 +243,27 @@ foreach ($dayProgrammes as $channel) {
- + -
-
-

-
-
-

+
+ + + +
+
+
+
+ +
+ +

+ +
+ +
+ +
+ +