209 lines
7.3 KiB
PHP
209 lines
7.3 KiB
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%;
|
|
}
|
|
.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>© 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>
|