mrwnslz/diora-web
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Fix volume slider, add 0-255 number input
All checks were successful
Build and push Docker image / build (push) Successful in 11s
Details
Test / test (push) Successful in 13s
Details

Browse source
This commit is contained in:
marwin 2026-03-16 21:07:12 +01:00
parent 3761b13649
commit 35d979a06a
3 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
static/css/app.css
View file

@ -984,3 +984,17 @@ body.dnd-mode .timer-display {
align-items: center;
gap: 8px;
}
.volume-num {
width: 44px;
background: var(--surface, #1e1e2e);
border: 1px solid var(--border, #333);
border-radius: 4px;
color: var(--fg, #fff);
font-size: 0.8rem;
padding: 2px 4px;
text-align: center;
}
.volume-num::-webkit-inner-spin-button,
.volume-num::-webkit-outer-spin-button { opacity: 0.4; }

31
static/js/app.js
View file

@ -56,7 +56,7 @@ function playStation(url, name, stationId) {
audio.src = url;
const volSlider = document.getElementById('volume');
if (volSlider) audio.volume = volSlider.value / 100;
if (volSlider) audio.volume = volSlider.value / 255;
audio.play().catch(() => {
// Browser may block autoplay; the user needs to interact first
console.warn('Audio play blocked by browser policy.');
@ -181,10 +181,28 @@ function escapeAttr(s) {
// Volume
// ---------------------------------------------------------------------------
document.getElementById('volume').addEventListener('input', function () {
audio.volume = this.value / 100;
localStorage.setItem('diora_volume', this.value);
});
function setVolume(val) {
val = Math.max(0, Math.min(255, Math.round(val)));
audio.volume = val / 255;
localStorage.setItem('diora_volume', val);
const slider = $('volume');
const numInput = $('volume-num');
if (slider) slider.value = val;
if (numInput) numInput.value = val;
}
const volSliderEl = document.getElementById('volume');
if (volSliderEl) {
['input', 'change', 'mousemove', 'touchmove'].forEach(evt =>
volSliderEl.addEventListener(evt, function () { setVolume(this.value); })
);
}
const volNumEl = document.getElementById('volume-num');
if (volNumEl) {
volNumEl.addEventListener('change', function () { setVolume(this.value); });
volNumEl.addEventListener('input', function () { setVolume(this.value); });
}
// ---------------------------------------------------------------------------
// SSE metadata
@ -1045,8 +1063,7 @@ function toggleContrast() {
if (volSlider) {
const saved = localStorage.getItem('diora_volume');
const vol = saved !== null ? parseInt(saved, 10) : parseInt(volSlider.value, 10);
volSlider.value = vol;
audio.volume = vol / 100;
setVolume(vol);
}
// Load recommendations on page load

3
templates/radio/player.html
View file

@ -13,7 +13,8 @@
<button class="btn btn-play" id="play-stop-btn" onclick="togglePlayStop()" style="display:none;">&#9654; Play</button>
<label class="volume-label">
<span>vol</span>
<input type="range" id="volume" min="0" max="100" value="80" class="volume-slider">
<input type="range" id="volume" min="0" max="255" value="204" class="volume-slider">
<input type="number" id="volume-num" min="0" max="255" value="204" class="volume-num">
</label>
<button class="btn btn-save" id="save-station-btn" style="display:none;" onclick="saveCurrentStation()">&#9733; Save</button>
<button class="btn-icon" id="dnd-btn" onclick="toggleDND()" title="Focus mode (hides UI, press Esc to exit)">⊙</button>