Add click gestures and big present button
This commit is contained in:
parent
e52fd317f1
commit
819b2501e6
1 changed files with 49 additions and 2 deletions
|
@ -1,10 +1,11 @@
|
||||||
---
|
---
|
||||||
const {
|
const {
|
||||||
PlayerName
|
PlayerName,
|
||||||
|
BigPlayButton
|
||||||
} = Astro.props
|
} = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<script define:vars={{PlayerName}}>
|
<script define:vars={{PlayerName, BigPlayButton}}>
|
||||||
/**
|
/**
|
||||||
* @licstart The following is the entire license notice for the
|
* @licstart The following is the entire license notice for the
|
||||||
* JavaScript code in this page.
|
* JavaScript code in this page.
|
||||||
|
@ -34,6 +35,27 @@ var VideoContainer = document.querySelector('#zorn-player-' + PlayerName)
|
||||||
var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
|
var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
|
||||||
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
||||||
|
|
||||||
|
// Big Present Button
|
||||||
|
function BigPresentButton() {
|
||||||
|
if (BigPlayButton === true) {
|
||||||
|
VideoControls.style.opacity = '0'
|
||||||
|
VideoControls.style.pointerEvents = 'none'
|
||||||
|
} else {
|
||||||
|
null
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button_BigPresentButton = document.querySelector("#zorn-player-" + PlayerName + " .big-present-button")
|
||||||
|
Button_BigPresentButton.onclick = BigButtonClicked
|
||||||
|
|
||||||
|
function BigButtonClicked() {
|
||||||
|
Button_BigPresentButton.style.opacity = '0'
|
||||||
|
Button_BigPresentButton.style.pointerEvents = 'none'
|
||||||
|
VideoControls.style.opacity = '1'
|
||||||
|
VideoControls.style.pointerEvents = 'all'
|
||||||
|
Player.play()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Icons
|
// Icons
|
||||||
var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
|
var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
|
||||||
var pause_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
|
var pause_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
|
||||||
|
@ -138,6 +160,29 @@ function SkipAround() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Gestures (Click / Double-click)
|
||||||
|
function Gestures() {
|
||||||
|
var GestureCanvas = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gestures')
|
||||||
|
|
||||||
|
GestureCanvas.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
|
||||||
|
}
|
||||||
|
document.querySelector('#zorn-player-' + PlayerName + ' #vc-fullscreen').click()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// Hide Controls
|
// Hide Controls
|
||||||
function AutoToggleControls() {
|
function AutoToggleControls() {
|
||||||
function Hide_Controls2() {
|
function Hide_Controls2() {
|
||||||
|
@ -267,7 +312,9 @@ function PlayItAgain() {
|
||||||
|
|
||||||
// Init All Functions
|
// Init All Functions
|
||||||
AutoToggleControls()
|
AutoToggleControls()
|
||||||
|
BigPresentButton()
|
||||||
Fullscreen()
|
Fullscreen()
|
||||||
|
Gestures()
|
||||||
KeyboardShortcuts()
|
KeyboardShortcuts()
|
||||||
PlayPause()
|
PlayPause()
|
||||||
SkipAround()
|
SkipAround()
|
||||||
|
|
Loading…
Reference in a new issue