MinPluto/Zorn
MinPluto/Zorn
1
Fork 0
Code Issues Pull requests Activity

Add mobile gestures, for skipping around timeline

Browse source
This commit is contained in:
Korbs 2024-11-30 18:11:01 -05:00
parent 10b5890972
commit 769df09ee4
3 changed files with 76 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Controls.astro
View file

@ -18,7 +18,11 @@ import './Styles/Iconoir.css'
<div class="vc-top">
<p>{Title}</p>
</div>
<div id="vc-gestures"></div>
<div id="vc-gestures">
<span id="vc-gesture-left"></span>
<span id="vc-gesture-middle"></span>
<span id="vc-gesture-right"></span>
</div>
<div class="vc-bottom">
<button style="display: none" id="vc-playagain"><i class="iconoir-refresh"></i></button>
<div class="vc-start">

69
src/Controls/Controller.astro
View file

@ -162,25 +162,68 @@ function SkipAround() {
// Gestures (Click / Double-click)
function Gestures() {
var GestureCanvas = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gestures')
var GesturesCanvas = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gestures')
var GestureCanvas_Left = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gesture-left')
var GestureCanvas_Middle = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gesture-middle')
var GestureCanvas_Right = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gesture-right')
GestureCanvas.addEventListener("click", (event) => {
if(!event) {
event = true
setTimeout( function() { event = false; }, 300 )
return false
}
// Middle Gesture (Single: Play/Pause - Double: Fullscreen)
GestureCanvas_Middle.addEventListener("click", (event) => {
if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
document.querySelector('#zorn-player-' + PlayerName + ' #vc-playpause').click()
})
GestureCanvas.addEventListener("dblclick", (event) => {
if(!event) {
event = true
setTimeout( function() { event = false; }, 300 )
return false
}
GestureCanvas_Middle.addEventListener("dblclick", (event) => {
if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
document.querySelector('#zorn-player-' + PlayerName + ' #vc-fullscreen').click()
})
// For Left and Right Gesture - Skip Around
function Skip(value) {Player.currentTime += value}
// Only show Left and Right Gesture for touch screen end-users
if(window.matchMedia("(pointer: coarse)").matches) {
GesturesCanvas.style.gridTemplateColumns = 'auto auto auto'
GestureCanvas_Left.style.display = 'inherit'
GestureCanvas_Right.style.display = 'inherit'
}
// Left Gesture (Single: Play/Pause - Double: Skip)
GestureCanvas_Left.addEventListener("click", (event) => {
if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
document.querySelector('#zorn-player-' + PlayerName + ' #vc-playpause').click()
})
GestureCanvas_Left.addEventListener("dblclick", (event) => {
if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
Skip(-10);
GestureCanvas_Left.style.background = 'rgba(255,255,255,0.25)'
GestureCanvas_Left.style.boxShadow = '0px 0px 200px 100px #ffffff14'
setTimeout(() => {
GestureCanvas_Left.style.background = 'transparent'
GestureCanvas_Left.style.boxShadow = '0px 0px 0px 0px transparent'
}, 0o500);
})
// Right Gesture (Single: Play/Pause - Double: Skip)
GestureCanvas_Right.addEventListener("click", (event) => {
if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
document.querySelector('#zorn-player-' + PlayerName + ' #vc-playpause').click()
})
GestureCanvas_Right.addEventListener("dblclick", (event) => {
if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
Skip(10);
GestureCanvas_Right.style.background = 'rgba(255,255,255,0.25)'
GestureCanvas_Right.style.boxShadow = '0px 0px 200px 100px #ffffff14'
setTimeout(() => {
GestureCanvas_Right.style.background = 'transparent'
GestureCanvas_Right.style.boxShadow = '0px 0px 0px 0px transparent'
}, 0o500);
})
}
// Hide Controls

16
src/Styles/Index.scss
View file

@ -69,7 +69,21 @@
}
#vc-gestures {
height: 100%;
opacity: 0;
display: grid;
grid-template-columns: auto;
span {
background: transparent;
transition: 0.25s background, 0.25s box-shadow;
box-shadow: none;
&#vc-gesture-left {
border-radius: 12px 16rem 16rem 12px;
display: none;
}
&#vc-gesture-right {
border-radius: 16rem 12px 12px 16rem;
display: none;
}
}
}
.vc-bottom {
display: flex;