diff --git a/src/Controls/Controller.astro b/src/Controls/Controller.astro
index 577b982..a3719c6 100644
--- a/src/Controls/Controller.astro
+++ b/src/Controls/Controller.astro
@@ -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
diff --git a/src/Styles/Index.scss b/src/Styles/Index.scss
index 16d289c..d33206e 100644
--- a/src/Styles/Index.scss
+++ b/src/Styles/Index.scss
@@ -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;