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 2026-10-29 06:20:07 -05:00
1 parent b0907f7e5b
commit 9a1e8a33a6
4 files changed
+212

No files matched your search

+3
View File
@@ -28,3 +28,6 @@ Temporary Items
# Don't commit the code-workspace files # Don't commit the code-workspace files
*.code-workspace *.code-workspace
# Database credentials — keep out of version control
config/db_credentials.php
+18
View File
@@ -0,0 +1,18 @@
<?php
// Database credentials template.
// Copy this file to db_credentials.php in the same directory and fill in real values.
// db_credentials.php is gitignored — never commit it. Upload it to the server via SFTP separately.
if (basename($_SERVER['SCRIPT_FILENAME'] ?? '') === basename(__FILE__)) {
http_response_code(403);
exit;
}
return [
'host' => 'localhost',
'port' => 3306,
'database' => '',
'username' => '',
'password' => '',
'charset' => 'utf8mb4',
];
+30
View File
@@ -0,0 +1,30 @@
<?php
// Shared database connection. Include this file and call getDB() to get a PDO handle.
if (basename($_SERVER['SCRIPT_FILENAME'] ?? '') === basename(__FILE__)) {
http_response_code(403);
exit;
}
function getDB(): PDO {
static $pdo = null;
if ($pdo !== null) return $pdo;
$credentialsFile = __DIR__ . '/../config/db_credentials.php';
if (!is_readable($credentialsFile)) {
throw new RuntimeException('Database credentials file is missing.');
}
$cfg = require $credentialsFile;
$dsn = sprintf(
'mysql:host=%s;port=%d;dbname=%s;charset=%s',
$cfg['host'], $cfg['port'], $cfg['database'], $cfg['charset']
);
$pdo = new PDO($dsn, $cfg['username'], $cfg['password'], [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
]);
return $pdo;
}
+161
View File
@@ -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>&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>␍