radio-free-elsewhere/live.php

<?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
	Strata by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Live Now | Radio Free Elsewhere</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

		<meta name="description" content="Something different. Somewhere else.">

		<!-- Facebook Meta Tags -->
		<meta property="og:url" content="https://cyberpunklibrarian.nohost.me/rfe/live.php">
		<meta property="og:type" content="website">
		<meta property="og:title" content="Radio Free Elsewhere — Live Now">
		<meta property="og:description" content="Something different. Somewhere else.">
		<meta property="og:image" content="https://cyberpunklibrarian.nohost.me/rfe/images/rfe-social.jpg">

		<!-- Twitter Meta Tags -->
		<meta name="twitter:card" content="summary_large_image">
		<meta property="twitter:domain" content="cyberpunklibrarian.nohost.me">
		<meta property="twitter:url" content="https://cyberpunklibrarian.nohost.me/rfe/live.php">
		<meta name="twitter:title" content="Radio Free Elsewhere — Live Now">
		<meta name="twitter:description" content="Something different. Somewhere else.">
		<meta name="twitter:image" content="https://cyberpunklibrarian.nohost.me/rfe/images/rfe-social.jpg">
		
		<link rel="stylesheet" href="assets/css/main.css" />

		<style>
		        .player-wrapper {
		            width: 100%;
		            max-width: 400px;
		            margin: 0 auto;
		        }
		        #now-playing img {
		            margin: 0 auto;
		        }
		        .player-wrapper audio {
		            width: 100%;
		        }
		        #now-playing {
		            font-family: Arial, sans-serif;
		            font-size: .9em;
		            padding: 10px;
		            background-color: rgb(70, 73, 74, 0.6);
		            color: #97C9D3;
		            border-radius: 5px;
		            display: block;
		            text-align: center;
		            box-sizing: border-box;
		            width: 100%;
		        }
		        #recently-played td {
		            vertical-align: middle;
		        }
		        #recently-played time {
		            white-space: nowrap;
		        }
		        .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">

		<!-- Header -->
			<header id="header">
				<div class="inner">
					<a href="index.php" class="image avatar"><img src="images/avatar-rfe.jpg" alt="Radio Free Elsewhere logo" /></a>
					<h1><strong>Radio Free Elsewhere</strong><br>
					Something different<br>
					Somewhere else</h1>
					
					<hr>

					
					<div class="player-wrapper">
						<div id="now-playing">Loading current song...</div>
						<br>
						<audio controls src="https://radio.cyberpunklibrarian.nohost.me/rfe"></audio>
					</div>

					<script>
						function fetchNowPlaying() {
    						fetch('now_playing.php')
    						.then(response => response.arrayBuffer())
    						.then(buffer => {
        						const decoder = new TextDecoder('utf-8');
        						const data = decoder.decode(buffer);
        						document.getElementById('now-playing').innerHTML = data;
    						})
    						.catch(error => {
        						document.getElementById('now-playing').innerHTML = "Unable to load song data.";
        						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>
			</header>

		<!-- Main -->
			<div id="main">

				<!-- Recently Played -->
					<section id="one">
						<header class="major">
							<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>
										<th>Album</th>
									</tr>
								</thead>
								<tbody id="recently-played">
									<tr>
										<td colspan="5">Loading recently played tracks...</td>
									</tr>
								</tbody>
							</table>
						</div>
					</section>

			</div>

		<!-- Footer -->
			<footer id="footer">
				<div class="inner">
					<ul class="icons">
						<li><a href="https://masto.hackers.town/@cyberpunklibrarian" class="icon brands fa-mastodon"><span class="label">Mastodon</span></a></li>
						<li><a href="https://cyberpunklibrarian.nohost.me/gitea/Public/radio-free-elsewhere" class="icon brands fa-gitlab"><span class="label">Github</span></a></li>
					</ul>
					<ul class="copyright">
						<li>&copy; 2025 CC-By-NC-SA</li> 
						<li>Tanglewood Hill Studio</li>
						<li><a href="http://html5up.net">HTML5 UP</a></li>
					</ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.poptrox.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
			<script>
				if ('addEventListener' in window) {
					document.addEventListener('DOMContentLoaded', function() { document.body.className = document.body.className.replace(/\bis-preload\b/, ''); });
					document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
				}
			</script>

	</body>
</html>