156 lines
6.2 KiB
PHP
156 lines
6.2 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');
|
|
$showHistory = cfg('features.show_history');
|
|
$showListeners = cfg('features.show_listeners');
|
|
$rich = cfg('player.style') !== 'simple';
|
|
$hasStream = cfg('stream.url') !== '';
|
|
$waveActive = radio_waveform_active();
|
|
$waveTypes = cfg('waveform.types');
|
|
$showWavePicker = $waveActive && count($waveTypes) > 1;
|
|
$showArtRing = $waveActive && in_array('circular', $waveTypes, true) && $rich;
|
|
$liquidGlass = cfg('theme.liquid_glass');
|
|
$glassBtn = $liquidGlass ? ' glass-btn' : '';
|
|
$glassFx = $liquidGlass ? '<span class="glass-fx" aria-hidden="true"></span>' : '';
|
|
?>
|
|
<!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">
|
|
<div class="art-wrap">
|
|
<img id="art" class="album-art" src="<?= e($fallbackArt) ?>"
|
|
alt="Album art" title="<?= e(cfg('site.name')) ?>"/>
|
|
<?php if ($lyricsEnabled): ?>
|
|
<button id="lyrics-toggle" class="lyrics-toggle<?= $glassBtn ?>" type="button" hidden aria-pressed="false">🎶<?= $glassFx ?></button>
|
|
<div id="lyrics-sync" class="lyrics-sync" hidden>
|
|
<button type="button" data-adj="-0.5" aria-label="Lyrics earlier">−</button>
|
|
<span id="lyrics-offset">0.0s</span>
|
|
<button type="button" data-adj="0.5" aria-label="Lyrics later">+</button>
|
|
</div>
|
|
<div id="lyrics" class="lyrics" hidden>
|
|
<div id="lyrics-lines" class="lyrics-lines"></div>
|
|
<a id="lyrics-source" class="lyrics-source" href="" target="_blank" rel="noopener" hidden></a>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<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"<?= $waveActive ? ' crossorigin="anonymous"' : '' ?><?= $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 ($waveActive): ?>
|
|
<div class="waveform-wrap">
|
|
<canvas id="waveform" class="waveform" style="height:<?= (int) cfg('waveform.height') ?>px" hidden aria-hidden="true"></canvas>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($rich): ?>
|
|
<div class="controls">
|
|
<div class="playpause-wrap">
|
|
<button id="playpause" class="playpause<?= $glassBtn ?>" type="button" aria-label="Play"><span class="btn-icon"></span><?= $glassFx ?></button>
|
|
<?php if ($showArtRing): ?>
|
|
<canvas id="art-ring" class="art-ring" hidden aria-hidden="true"></canvas>
|
|
<?php endif; ?>
|
|
</div>
|
|
</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>
|
|
<!-- Hide volume control
|
|
<div class="vol-row">
|
|
<button id="mute" class="icon-btn" type="button" aria-label="Mute"><span class="btn-icon"></span></button>
|
|
<input type="range" id="volume" class="range volume" min="0" max="100" value="100" aria-label="Volume"/>
|
|
</div>
|
|
-->
|
|
<?php endif; ?>
|
|
|
|
</section>
|
|
</main>
|
|
|
|
<?php if ($showHistory || $showWavePicker): ?>
|
|
<div class="menu-wrap" id="menu-wrap">
|
|
<button id="menu-toggle" class="menu-toggle<?= $glassBtn ?>" type="button" aria-haspopup="true" aria-expanded="false" aria-label="Menu">☰<?= $glassFx ?></button>
|
|
<ul id="menu-list" class="menu-list" hidden>
|
|
<?php if ($showHistory): ?>
|
|
<li><button type="button" id="menu-history" class="menu-item">Song List</button></li>
|
|
<?php endif; ?>
|
|
<?php if ($showWavePicker): ?>
|
|
<li><button type="button" id="menu-waveform" class="menu-item">Waveform Styles</button></li>
|
|
<?php endif; ?>
|
|
</ul>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($showWavePicker): ?>
|
|
<div class="waveform-picker" id="waveform-picker" hidden>
|
|
<fieldset>
|
|
<legend>Below art</legend>
|
|
<?php
|
|
$stripLabels = ['none' => 'None', 'bars' => 'Bars', 'line' => 'Line', 'vu' => 'VU',
|
|
'spectrum' => 'Spectrum', 'spectrum-mirror' => 'Spectrum (mirror)', 'blob' => 'Blob'];
|
|
foreach ($stripLabels as $val => $label):
|
|
if ($val !== 'none' && !in_array($val, $waveTypes, true)) continue;
|
|
?>
|
|
<label><input type="radio" name="wave-strip" value="<?= e($val) ?>"/> <?= e($label) ?></label>
|
|
<?php endforeach; ?>
|
|
</fieldset>
|
|
<?php if ($showArtRing || in_array('glow', $waveTypes, true)): ?>
|
|
<fieldset>
|
|
<legend>On art</legend>
|
|
<?php if ($showArtRing): ?>
|
|
<label><input type="checkbox" id="wave-circular"/> Ring</label>
|
|
<?php endif; ?>
|
|
<?php if (in_array('glow', $waveTypes, true)): ?>
|
|
<label><input type="checkbox" id="wave-glow"/> Glow</label>
|
|
<?php endif; ?>
|
|
</fieldset>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($showHistory): ?>
|
|
<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>
|