Phase 2.1

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>