89 lines
3.3 KiB
PHP
89 lines
3.3 KiB
PHP
<?php
|
|
/**
|
|
* index.php — main page.
|
|
* All content comes from config()/.env; markup below is station-agnostic.
|
|
*/
|
|
require_once __DIR__ . '/config.php';
|
|
|
|
$fallbackArt = cfg('artwork.fallback');
|
|
$lyricsEnabled = cfg('lyrics.enabled') && cfg('genius.token') !== '';
|
|
$showHistory = cfg('features.show_history');
|
|
$showListeners = cfg('features.show_listeners');
|
|
$rich = cfg('player.style') !== 'simple';
|
|
$hasStream = cfg('stream.url') !== '';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="<?= e(cfg('site.lang')) ?>" dir="ltr" prefix="og: http://ogp.me/ns#">
|
|
<head>
|
|
<?php require __DIR__ . '/partials/head.php'; ?>
|
|
</head>
|
|
<body>
|
|
<noscript><?php require __DIR__ . '/partials/noscript.php'; ?></noscript>
|
|
|
|
<main class="player-wrap">
|
|
<section class="player-card" id="card">
|
|
<img id="art" class="album-art" src="<?= e($fallbackArt) ?>"
|
|
alt="Album art" title="<?= e(cfg('site.name')) ?>"/>
|
|
|
|
<div class="track-meta">
|
|
<div class="track-name" id="track-name"><?= e(cfg('site.name')) ?></div>
|
|
<div class="track-artist" id="track-artist"><?= e(cfg('site.tagline')) ?></div>
|
|
<div class="track-album" id="track-album"></div>
|
|
</div>
|
|
|
|
<audio id="stream" preload="none"<?= $rich ? '' : ' controls' ?><?= cfg('player.autoplay') ? ' autoplay' : '' ?>>
|
|
<?php if ($hasStream): ?>
|
|
<source src="<?= e(cfg('stream.url')) ?>" type="<?= e(cfg('stream.type')) ?>"/>
|
|
<?php endif; ?>
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
|
|
<?php if ($rich): ?>
|
|
<div class="controls">
|
|
<button id="playpause" class="playpause" type="button" aria-label="Play"></button>
|
|
</div>
|
|
<div class="seek-row">
|
|
<span class="time" id="current-time">00:00</span>
|
|
<input type="range" id="seek" class="range seek" min="0" max="100" value="0" step="0.1" aria-label="Seek" disabled/>
|
|
<span class="time" id="total-duration">00:00</span>
|
|
<span class="live-badge" id="live-badge" hidden><span class="live-dot"></span><span class="live-text">LIVE</span></span>
|
|
</div>
|
|
<div class="vol-row">
|
|
<button id="mute" class="icon-btn" type="button" aria-label="Mute"></button>
|
|
<input type="range" id="volume" class="range volume" min="0" max="100" value="100" aria-label="Volume"/>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($lyricsEnabled): ?>
|
|
<button id="lyrics-toggle" class="btn-accent" type="button" hidden>Show lyrics</button>
|
|
<?php endif; ?>
|
|
</section>
|
|
|
|
<?php if ($lyricsEnabled): ?>
|
|
<div id="lyrics" class="lyrics" hidden></div>
|
|
<?php endif; ?>
|
|
</main>
|
|
|
|
<?php if ($showHistory): ?>
|
|
<button id="history-toggle" class="history-toggle" type="button">Song list</button>
|
|
<aside id="history" class="history">
|
|
<table class="history-table">
|
|
<thead><tr><th>Time</th><th>Artist</th><th>Title</th></tr></thead>
|
|
<tbody id="history-body"></tbody>
|
|
</table>
|
|
</aside>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($showListeners): ?>
|
|
<div id="listeners" class="listeners" aria-label="Current listeners"></div>
|
|
<?php endif; ?>
|
|
|
|
<canvas id="tint-canvas" width="1" height="1" hidden></canvas>
|
|
|
|
<script>
|
|
window.RADIO_CONFIG = <?= json_encode(radio_client_config(), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;
|
|
</script>
|
|
<script src="assets/js/player.js" defer></script>
|
|
</body>
|
|
</html>
|