509 lines
16 KiB
HTML
509 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multi-Matrix Audio Player</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.player-container {
|
|
background: rgba(255, 255, 255, 0.98);
|
|
border-radius: 24px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
padding: 3rem 2.5rem;
|
|
max-width: 420px;
|
|
width: 100%;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.player-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.player-title {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 1rem;
|
|
background: rgba(102, 126, 234, 0.1);
|
|
border-radius: 20px;
|
|
font-size: 0.875rem;
|
|
color: #667eea;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #10b981;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-dot.inactive {
|
|
background: #ef4444;
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.main-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
margin: 2.5rem 0;
|
|
}
|
|
|
|
.control-btn {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.control-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
|
}
|
|
|
|
.control-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.play-btn {
|
|
width: 72px;
|
|
height: 72px;
|
|
font-size: 1.5rem;
|
|
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
|
|
}
|
|
|
|
.secondary-controls {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 2rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.secondary-btn {
|
|
padding: 0.6rem 1.25rem;
|
|
border: 2px solid #667eea;
|
|
background: white;
|
|
color: #667eea;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.secondary-btn:hover {
|
|
background: #667eea;
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.secondary-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.volume-section {
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.volume-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.875rem;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.volume-value {
|
|
color: #667eea;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.volume-slider {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
|
|
outline: none;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.volume-slider:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.volume-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
|
|
border: 2px solid #667eea;
|
|
}
|
|
|
|
.volume-slider::-moz-range-thumb {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
|
|
border: 2px solid #667eea;
|
|
}
|
|
|
|
.loop-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.25rem;
|
|
background: rgba(102, 126, 234, 0.05);
|
|
border-radius: 12px;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.loop-label {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: relative;
|
|
width: 52px;
|
|
height: 28px;
|
|
background: #cbd5e1;
|
|
border-radius: 14px;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.toggle-switch.active {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 22px;
|
|
height: 22px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.3s ease;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.toggle-switch.active .toggle-slider {
|
|
transform: translateX(24px);
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.player-container {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.player-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.control-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.play-btn {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="player-container">
|
|
<div class="player-header">
|
|
<h1 class="player-title">Multi-Matrix Audio</h1>
|
|
<div class="status-badge">
|
|
<span class="status-dot" id="statusDot"></span>
|
|
<span id="statusText">Connecting...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-controls">
|
|
<button class="control-btn" onclick="sendAction('previous')" title="Previous">
|
|
<span class="icon">⏮</span>
|
|
</button>
|
|
<button class="control-btn play-btn" id="playBtn" onclick="togglePlayPause()" title="Play/Pause">
|
|
<span class="icon" id="playIcon">▶</span>
|
|
</button>
|
|
<button class="control-btn" onclick="sendAction('next')" title="Next">
|
|
<span class="icon">⏭</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="secondary-controls">
|
|
<button class="secondary-btn" onclick="sendAction('stop')">⏹ Stop</button>
|
|
<button class="secondary-btn" onclick="sendAction('resume')">▶ Resume</button>
|
|
</div>
|
|
|
|
<div class="volume-section">
|
|
<div class="volume-header">
|
|
<span>🔊 Volume</span>
|
|
<span class="volume-value" id="volumeDisplay">15</span>
|
|
</div>
|
|
<input type="range"
|
|
class="volume-slider"
|
|
id="volumeSlider"
|
|
min="0"
|
|
max="30"
|
|
value="15"
|
|
oninput="updateVolumeDisplay(this.value)"
|
|
onchange="setVolume(this.value)">
|
|
</div>
|
|
|
|
<div class="loop-toggle">
|
|
<div class="loop-label">
|
|
<span>🔁 Loop Mode</span>
|
|
</div>
|
|
<div class="toggle-switch" id="loopToggle" onclick="toggleLoop()">
|
|
<div class="toggle-slider"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let isPlaying = false;
|
|
let loopEnabled = false;
|
|
|
|
async function fetchStatus() {
|
|
try {
|
|
const response = await fetch('/api/audio/status');
|
|
if (!response.ok) {
|
|
throw new Error('Status request failed');
|
|
}
|
|
const status = await response.json();
|
|
updateUIStatus(status);
|
|
} catch (error) {
|
|
document.getElementById('statusText').textContent = 'Error';
|
|
document.getElementById('statusDot').className = 'status-dot inactive';
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
function updateUIStatus(status) {
|
|
const statusDot = document.getElementById('statusDot');
|
|
const statusText = document.getElementById('statusText');
|
|
|
|
if (status.ready) {
|
|
statusDot.className = 'status-dot';
|
|
statusText.textContent = 'Ready';
|
|
} else {
|
|
statusDot.className = 'status-dot inactive';
|
|
statusText.textContent = 'Not Ready';
|
|
}
|
|
|
|
if ('volume' in status) {
|
|
document.getElementById('volumeSlider').value = status.volume;
|
|
document.getElementById('volumeDisplay').textContent = status.volume;
|
|
}
|
|
|
|
if ('loop' in status) {
|
|
loopEnabled = status.loop;
|
|
const loopToggle = document.getElementById('loopToggle');
|
|
if (loopEnabled) {
|
|
loopToggle.classList.add('active');
|
|
} else {
|
|
loopToggle.classList.remove('active');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function sendAction(action, params = {}) {
|
|
try {
|
|
const formData = new URLSearchParams({ action, ...params });
|
|
const response = await fetch('/api/audio', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: formData
|
|
});
|
|
const result = await response.json();
|
|
updateUIStatus(result);
|
|
|
|
if (action === 'play' || action === 'resume') {
|
|
isPlaying = true;
|
|
updatePlayButton();
|
|
} else if (action === 'pause' || action === 'stop') {
|
|
isPlaying = false;
|
|
updatePlayButton();
|
|
}
|
|
|
|
if (!result.success) {
|
|
alert(result.message || 'Action failed');
|
|
}
|
|
} catch (error) {
|
|
alert('Request failed: ' + error.message);
|
|
}
|
|
}
|
|
|
|
function togglePlayPause() {
|
|
if (isPlaying) {
|
|
sendAction('pause');
|
|
} else {
|
|
sendAction('play');
|
|
}
|
|
}
|
|
|
|
function updatePlayButton() {
|
|
const playIcon = document.getElementById('playIcon');
|
|
playIcon.textContent = isPlaying ? '⏸' : '▶';
|
|
}
|
|
|
|
function updateVolumeDisplay(value) {
|
|
document.getElementById('volumeDisplay').textContent = value;
|
|
}
|
|
|
|
function setVolume(value) {
|
|
sendAction('volume', { volume: value });
|
|
}
|
|
|
|
function toggleLoop() {
|
|
loopEnabled = !loopEnabled;
|
|
const loopToggle = document.getElementById('loopToggle');
|
|
if (loopEnabled) {
|
|
loopToggle.classList.add('active');
|
|
} else {
|
|
loopToggle.classList.remove('active');
|
|
}
|
|
sendAction('loop', { loop: loopEnabled });
|
|
}
|
|
|
|
fetchStatus();
|
|
setInterval(fetchStatus, 5000);
|
|
|
|
function setupWebSocket() {
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const ws = new WebSocket(protocol + '//' + window.location.host + '/ws');
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const payload = JSON.parse(event.data);
|
|
if (payload.event === 'audio/player' && payload.payload) {
|
|
const data = JSON.parse(payload.payload);
|
|
|
|
// Skip debug messages
|
|
if (data.action === 'pot_debug') {
|
|
return;
|
|
}
|
|
|
|
if ('volume' in data) {
|
|
document.getElementById('volumeSlider').value = data.volume;
|
|
document.getElementById('volumeDisplay').textContent = data.volume;
|
|
}
|
|
|
|
if ('loop' in data) {
|
|
loopEnabled = data.loop;
|
|
const loopToggle = document.getElementById('loopToggle');
|
|
if (loopEnabled) {
|
|
loopToggle.classList.add('active');
|
|
} else {
|
|
loopToggle.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
if (data.action) {
|
|
const statusText = document.getElementById('statusText');
|
|
const statusDot = document.getElementById('statusDot');
|
|
|
|
if (data.action === 'play' || data.action === 'resume' || data.action === 'next' || data.action === 'previous') {
|
|
statusText.textContent = 'Playing';
|
|
statusDot.className = 'status-dot';
|
|
isPlaying = true;
|
|
updatePlayButton();
|
|
} else if (data.action === 'pause') {
|
|
statusText.textContent = 'Paused';
|
|
statusDot.className = 'status-dot';
|
|
isPlaying = false;
|
|
updatePlayButton();
|
|
} else if (data.action === 'stop') {
|
|
statusText.textContent = 'Stopped';
|
|
statusDot.className = 'status-dot inactive';
|
|
isPlaying = false;
|
|
updatePlayButton();
|
|
} else if (data.action === 'ready') {
|
|
statusText.textContent = 'Ready';
|
|
statusDot.className = 'status-dot';
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('WebSocket parse error', err);
|
|
}
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
setTimeout(setupWebSocket, 3000);
|
|
};
|
|
}
|
|
|
|
setupWebSocket();
|
|
</script>
|
|
</body>
|
|
</html>
|