hgfd
This commit is contained in:
@@ -416,6 +416,77 @@ class v0ck {
|
|||||||
if (e.cancelable) e.preventDefault();
|
if (e.cancelable) e.preventDefault();
|
||||||
}
|
}
|
||||||
}, { passive: false });
|
}, { passive: false });
|
||||||
|
|
||||||
|
// Desktop mouse volume gesture support (clicking and dragging vertically on the right half of the player)
|
||||||
|
let activeMouseGesture = false;
|
||||||
|
|
||||||
|
player.addEventListener('mousedown', e => {
|
||||||
|
if (e.button !== 0) return;
|
||||||
|
const path = e.path || (e.composedPath && e.composedPath());
|
||||||
|
const isControls = !!path.filter(f => f.classList?.contains('v0ck_player_controls')).length;
|
||||||
|
if (isControls) return;
|
||||||
|
|
||||||
|
const rect = player.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left;
|
||||||
|
isRightSide = x > rect.width / 2;
|
||||||
|
gestureType = 'none';
|
||||||
|
|
||||||
|
if (isRightSide) {
|
||||||
|
startX = e.clientX;
|
||||||
|
startY = e.clientY;
|
||||||
|
startVol = video.volume;
|
||||||
|
activeMouseGesture = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mousemove', e => {
|
||||||
|
if (!activeMouseGesture || gestureType === 'other') return;
|
||||||
|
|
||||||
|
const dx = Math.abs(e.clientX - startX);
|
||||||
|
const dy = Math.abs(e.clientY - startY);
|
||||||
|
|
||||||
|
if (gestureType === 'none') {
|
||||||
|
if (dy > dx && dy > 5) {
|
||||||
|
gestureType = 'volume';
|
||||||
|
clearTimeout(speedUpTimeout);
|
||||||
|
endSpeedUp();
|
||||||
|
} else if (dx > dy && dx > 5) {
|
||||||
|
gestureType = 'other';
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (gestureType === 'volume') {
|
||||||
|
clearTimeout(speedUpTimeout);
|
||||||
|
endSpeedUp();
|
||||||
|
ignoreNextClick = true;
|
||||||
|
|
||||||
|
const deltaY = startY - e.clientY; // swipe up is positive
|
||||||
|
const sensitivity = 200;
|
||||||
|
let newVol = startVol + (deltaY / sensitivity);
|
||||||
|
newVol = Math.max(0, Math.min(1, newVol));
|
||||||
|
|
||||||
|
video.volume = newVol;
|
||||||
|
volumeSlider.value = newVol;
|
||||||
|
_volume = newVol;
|
||||||
|
handleVolumeButton(newVol);
|
||||||
|
showHUD(newVol);
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mouseup', () => {
|
||||||
|
if (activeMouseGesture) {
|
||||||
|
activeMouseGesture = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
ignoreNextClick = false;
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
skipButtons.forEach(button => button.addEventListener('click', skip));
|
skipButtons.forEach(button => button.addEventListener('click', skip));
|
||||||
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
|
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
|
||||||
ranges.forEach(range => range.addEventListener('input', handleRangeUpdate));
|
ranges.forEach(range => range.addEventListener('input', handleRangeUpdate));
|
||||||
|
|||||||
@@ -107,6 +107,7 @@
|
|||||||
opacity: 0; pointer-events: none;
|
opacity: 0; pointer-events: none;
|
||||||
transform: translateY(-8px) scale(.96);
|
transform: translateY(-8px) scale(.96);
|
||||||
transition: opacity .2s, transform .2s;
|
transition: opacity .2s, transform .2s;
|
||||||
|
touch-action: none;
|
||||||
}
|
}
|
||||||
#volume-popup.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }
|
#volume-popup.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }
|
||||||
#volume-slider {
|
#volume-slider {
|
||||||
@@ -114,6 +115,7 @@
|
|||||||
writing-mode: vertical-lr; direction: rtl;
|
writing-mode: vertical-lr; direction: rtl;
|
||||||
width: 5px; height: 100px;
|
width: 5px; height: 100px;
|
||||||
background: rgba(255,255,255,.15); border-radius: 3px; outline: none; cursor: pointer;
|
background: rgba(255,255,255,.15); border-radius: 3px; outline: none; cursor: pointer;
|
||||||
|
touch-action: none;
|
||||||
}
|
}
|
||||||
#volume-slider::-webkit-slider-thumb {
|
#volume-slider::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none; appearance: none;
|
-webkit-appearance: none; appearance: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user