Phase 2.1

app/public/assets/js/live-day.js

@@ -0,0 +1,32 @@
+function dayNowMinute() {
+  const now = new Date();
+  return now.getHours() * 60 + now.getMinutes() + now.getSeconds() / 60;
+}
+
+function dayUpdateNowLine() {
+  document.querySelectorAll('[data-live-now-line]').forEach(line => {
+    line.style.left = `calc(${dayNowMinute()} * var(--minute-width))`;
+  });
+}
+
+function dayUpdateProgrammeStates() {
+  const now = Math.floor(Date.now() / 1000);
+
+  document.querySelectorAll('[data-live-programme]').forEach(programme => {
+    const start = Number(programme.dataset.liveStart);
+    const stop = Number(programme.dataset.liveStop);
+
+    programme.classList.toggle('is-current', now >= start && now < stop);
+    programme.classList.toggle('is-past', now >= stop);
+  });
+}
+
+function dayTick() {
+  dayUpdateNowLine();
+  dayUpdateProgrammeStates();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  dayTick();
+  setInterval(dayTick, 1000);
+});

app/templates/day.php

@@ -143,6 +143,7 @@ foreach ($dayProgrammes as $channel) {
             <?php if ($isToday): ?>
                 <div
                     class="timeline-now-line"
+                    data-live-now-line
                     style="left: calc(<?= (int)$nowMinute ?> * var(--minute-width));">
                 </div>
             <?php endif; ?>
@@ -151,6 +152,9 @@ foreach ($dayProgrammes as $channel) {
                 <div
                   class="timeline-programme <?= $programme['is_current'] ? 'is-current' : '' ?> <?= $programme['is_past'] ? 'is-past' : '' ?>"
                   data-programme-id="<?= htmlspecialchars($programme['id']) ?>"
+                  data-live-programme
+                  data-live-start="<?= (int)$programme['start'] ?>"
+                  data-live-stop="<?= (int)$programme['stop'] ?>"
                 style="
                   --start: <?= (int)$programme['start_minute'] ?>;
                   --duration: <?= (int)$programme['duration_minutes'] ?>;
@@ -189,7 +193,11 @@ foreach ($dayProgrammes as $channel) {
       </div>
 
       <?php foreach ($channel['programmes'] as $programme): ?>
-        <article class="day-programme <?= $programme['is_current'] ? 'is-current' : '' ?> <?= $programme['is_past'] ? 'is-past' : '' ?>">
+        <article
+          class="day-programme <?= $programme['is_current'] ? 'is-current' : '' ?> <?= $programme['is_past'] ? 'is-past' : '' ?>"
+          data-live-programme
+          data-live-start="<?= (int)$programme['start'] ?>"
+          data-live-stop="<?= (int)$programme['stop'] ?>">
           <div class="day-time">
             <span><?= date('H:i', $programme['start']) ?></span>
             <span><?= date('H:i', $programme['stop']) ?></span>

app/templates/layout.php

@@ -22,6 +22,7 @@
 <script type="module" src="/assets/js/app.js"></script>
 <script src="/assets/js/live.js"></script>
 <script src="/assets/js/live-now.js"></script>
+<script src="/assets/js/live-day.js"></script>
 
 </body>
 </html>