This commit is contained in:
2026-05-31 12:25:35 +02:00
parent db6344d055
commit c4a571a714

View File

@@ -65,7 +65,11 @@ const tpl_player = (svg, size) => `<div class="v0ck_player_controls">
</svg> </svg>
</div> </div>
<div class="v0ck_hud v0ck_hidden"> <div class="v0ck_hud v0ck_hidden">
<svg><use class="v0ck_hud_icon" href="${svg}#volume_full"></use></svg> <svg>
<use class="v0ck_hud_icon v0ck_hud_volume_full" href="${svg}#volume_full"></use>
<use class="v0ck_hud_icon v0ck_hud_volume_mid v0ck_hidden" href="${svg}#volume_mid"></use>
<use class="v0ck_hud_icon v0ck_hud_volume_mute v0ck_hidden" href="${svg}#volume_mute"></use>
</svg>
<div class="v0ck_hud_bar_container"> <div class="v0ck_hud_bar_container">
<div class="v0ck_hud_bar"></div> <div class="v0ck_hud_bar"></div>
</div> </div>
@@ -349,14 +353,21 @@ class v0ck {
hud.classList.remove('v0ck_hidden'); hud.classList.remove('v0ck_hidden');
hudBar.style.width = `${vol * 100}%`; hudBar.style.width = `${vol * 100}%`;
// Update HUD icon based on volume // Update HUD icon based on volume by toggling hidden class
let icon = 'volume_full'; const hudSymbols = hud.querySelectorAll('.v0ck_hud_icon');
if (vol === 0) icon = 'volume_mute'; hudSymbols.forEach(s => s.classList.add('v0ck_hidden'));
else if (vol <= 0.5) icon = 'volume_mid';
const baseSvg = '/s/img/v0ck.svg'; let targetClass = 'v0ck_hud_volume_full';
hudIcon.setAttribute('href', `${baseSvg}#${icon}`); if (vol === 0) {
hudIcon.setAttribute('xlink:href', `${baseSvg}#${icon}`); targetClass = 'v0ck_hud_volume_mute';
} else if (vol <= 0.5) {
targetClass = 'v0ck_hud_volume_mid';
}
const activeSymbol = [...hudSymbols].find(s => s.classList.contains(targetClass));
if (activeSymbol) {
activeSymbol.classList.remove('v0ck_hidden');
}
clearTimeout(hudTimer); clearTimeout(hudTimer);
hudTimer = setTimeout(() => hud.classList.add('v0ck_hidden'), 1000); hudTimer = setTimeout(() => hud.classList.add('v0ck_hidden'), 1000);