feat: improve swipe gesture indicators

This commit is contained in:
NoCrypt 2024-08-08 13:46:14 +07:00
parent a53d6c46bf
commit 4b3b3291cf

View file

@ -24,7 +24,7 @@ export function swipeControls(node, props = { enabled: true, immersePlayer: () =
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
gap: 20px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
@ -37,8 +37,8 @@ export function swipeControls(node, props = { enabled: true, immersePlayer: () =
`;
indicators.innerHTML = `
<div class="indicator brightness">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" style="display:flex; justify-content:center; gap: 5px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<div class="indicator brightness" style="display:flex; justify-content:center; gap: 5px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
@ -51,8 +51,8 @@ export function swipeControls(node, props = { enabled: true, immersePlayer: () =
</svg>
<span class="brightness-value">100%</span>
</div>
<div class="indicator volume">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" style="display:flex; justify-content:center; gap: 5px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<div class="indicator volume" style="display:flex; justify-content:center; gap: 5px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>