Add recently played tracking with shows and broadcasts

- sql/schema.sql: shows, broadcasts and played_tracks tables, seeded
  with the five shows
- cli/poll_icecast.php: cron-run poller that records broadcasts and
  tracks every 15 seconds while streaming; tracks are cleared ten
  minutes after a broadcast ends
- cli/set_show.php: queue the next show, or assign one to the live
  broadcast
- recently_played.php: track history rows for live.php, with album art
  and album title linking to Last.fm
- live.php: recently played list, show name in heading, and per-show
  header background
- includes/icecast.php: Icecast parsing, album art and Last.fm helpers
  shared by now_playing.php and the poller
- includes/db.php: use UTC for the database session

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

live.php

@@ -1,3 +1,19 @@
+<?php
+require __DIR__ . '/includes/db.php';
+require __DIR__ . '/includes/broadcasts.php';
+
+// The page still renders with the default look if the database is unavailable
+$show = null;
+try {
+	$show = currentShow(getDB());
+} catch (Throwable $e) {
+}
+
+$background = '';
+if ($show && $show['background_image'] && is_file(__DIR__ . '/images/backgrounds/' . basename($show['background_image']))) {
+	$background = 'images/backgrounds/' . rawurlencode(basename($show['background_image']));
+}
+?>
 <!DOCTYPE HTML>
 <!--
 	RFE NEW SITE
@@ -54,7 +70,24 @@
 		            box-sizing: border-box;
 		            width: 100%;
 		        }
+		        .track-art {
+		            width: 64px;
+		        }
+		        .track-art img {
+		            display: block;
+		            width: 48px;
+		            height: 48px;
+		            object-fit: cover;
+		            border-radius: 4px;
+		        }
 		</style>
+<?php if ($background !== ''): ?>
+		<style>
+		        #header {
+		            background-image: url("assets/css/images/overlay.png"), url("<?= htmlspecialchars($background, ENT_QUOTES, 'UTF-8') ?>");
+		        }
+		</style>
+<?php endif; ?>
 	</head>
 
 	<body class="is-preload">
@@ -90,9 +123,24 @@
         						console.error('Error fetching song data:', error);
 							});
 						}
+						function fetchRecentlyPlayed() {
+    						fetch('recently_played.php')
+    						.then(response => response.arrayBuffer())
+    						.then(buffer => {
+        						const list = document.getElementById('recently-played');
+        						list.innerHTML = new TextDecoder('utf-8').decode(buffer);
+        						// Show play times in the listener's own time zone
+        						list.querySelectorAll('time[datetime]').forEach(el => {
+            						el.textContent = new Date(el.getAttribute('datetime')).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+        						});
+    						})
+    						.catch(error => console.error('Error fetching recently played:', error));
+						}
 					// Fetch immediately and then every 15 seconds
 					fetchNowPlaying();
+					fetchRecentlyPlayed();
 					setInterval(fetchNowPlaying, 15000);
+					setInterval(fetchRecentlyPlayed, 15000);
 					</script>
 				</div>
 				<p><span style = "color:white;">Add <a href="https://radio.cyberpunklibrarian.nohost.me/rfe">Radio Free Elsewhere</a> to VLC or your favourite audio streaming app.</span></p>
@@ -104,12 +152,13 @@
 				<!-- Recently Played -->
 					<section id="one">
 						<header class="major">
-							<h2>Recently Played</h2>
+							<h2>Recently Played<?php if ($show): ?> on <?= htmlspecialchars($show['name'], ENT_QUOTES, 'UTF-8') ?><?php endif; ?></h2>
 						</header>
 						<div class="table-wrapper">
 							<table>
 								<thead>
 									<tr>
+										<th></th>
 										<th>Time</th>
 										<th>Title</th>
 										<th>Artist</th>
@@ -117,9 +166,8 @@
 									</tr>
 								</thead>
 								<tbody id="recently-played">
-									<!-- Populated from the database once track history is in place -->
 									<tr>
-										<td colspan="4">Track history coming soon.</td>
+										<td colspan="5">Loading recently played tracks...</td>
 									</tr>
 								</tbody>
 							</table>