Add database connection helper and live now-playing page
- includes/db.php: getDB() returns a shared PDO connection to MariaDB - config/db_credentials.example.php: credentials template; the real db_credentials.php is gitignored and deployed separately via SFTP - live.php: page for active broadcasts, with the player on the left and a placeholder Recently Played table on the right Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Daniel MesserandClaude Opus 5.5 committed
1 parent
b0907f7e5b
commit
9a1e8a33a6
4 files changed
+212
No files matched your search
@@ -0,0 +1,161 @@
|
||||
<!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%;
|
||||
}
|
||||
</style>
|
||||
</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);
|
||||
});
|
||||
}
|
||||
// Fetch immediately and then every 15 seconds
|
||||
fetchNowPlaying();
|
||||
setInterval(fetchNowPlaying, 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</h2>
|
||||
</header>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Title</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
</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>
|
||||
</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>␍
|
||||
Reference in new issue
Block a user