Compare commits

...

2 commits

4 changed files with 25 additions and 26 deletions

View file

@ -1,11 +1,12 @@
--- ---
const { const {
PlayerName, PlayerName,
BigPlayButton BigPlayButton,
ShowBackAndForward
} = Astro.props } = Astro.props
--- ---
<script define:vars={{PlayerName, BigPlayButton}}> <script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward}}>
/** /**
* @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.
@ -228,35 +229,31 @@ function Gestures() {
// Hide Controls // Hide Controls
function AutoToggleControls() { function AutoToggleControls() {
function Hide_Controls2() { function Hide_Controls() {
if (Player.paused) { if (Player.paused) {return}
return; else {VideoControls.classList.add("zorn-controls-hide")}
} else {
document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.add("hide");
} }
} function Show_Controls() {VideoControls.classList.remove("zorn-controls-hide")}
function Show_Controls2() { VideoControls.addEventListener("mouseenter", Show_Controls);
document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.remove("hide"); VideoControls.addEventListener("mouseleave", Hide_Controls);
}
VideoControls.addEventListener("mouseenter", Show_Controls2);
VideoControls.addEventListener("mouseleave", Hide_Controls2);
var mouseTimer = null, cursorVisible = true; var mouseTimer = null, cursorVisible = true;
function Hide_Cursor() { function Hide_Cursor() {
mouseTimer = null; mouseTimer = null;
VideoContainer.style.cursor = "none"; VideoControls.style.cursor = "none";
cursorVisible = false; cursorVisible = false;
Hide_Controls2(); Hide_Controls();
} }
document.onmousemove = function () { VideoControls.onmousemove = function () {
if (mouseTimer) { if (mouseTimer) {
window.clearTimeout(mouseTimer); window.clearTimeout(mouseTimer);
Show_Controls2(); Show_Controls();
} }
if (!cursorVisible) { if (!cursorVisible) {
VideoContainer.style.cursor = "default"; VideoControls.style.cursor = "default";
cursorVisible = true; cursorVisible = true;
} }
mouseTimer = window.setTimeout(Hide_Cursor, 3200); mouseTimer = window.setTimeout(Hide_Cursor, 2400);
}; };
} }
@ -360,6 +357,6 @@ Fullscreen()
Gestures() Gestures()
KeyboardShortcuts() KeyboardShortcuts()
PlayPause() PlayPause()
SkipAround() if (ShowBackAndForward === true) {SkipAround()} else {null}
PlayAgain() PlayAgain()
</script> </script>

View file

@ -110,5 +110,5 @@ function Seek() {
initializeVideo() initializeVideo()
} }
Seek() setTimeout(() => {Seek()}, 1000) // Prevent invalid date error
</script> </script>

View file

@ -92,7 +92,7 @@ import './Styles/Iconoir.css'
: :
<Controls Subtitles={Subtitles} ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/> <Controls Subtitles={Subtitles} ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/>
} }
<Controller PlayerName={PlayerName} BigPlayButton={BigPlayButton}/> <Controller PlayerName={PlayerName} BigPlayButton={BigPlayButton} ShowBackAndForward={ShowBackAndForward}/>
<Seek PlayerName={PlayerName}/> <Seek PlayerName={PlayerName}/>
</div> </div>

View file

@ -227,9 +227,9 @@
} }
} }
.video-controls.hide { .zorn-controls-hide {
opacity: 0; opacity: 0 !important;
transition: 0.3s opacity; transition: 0.3s opacity !important;
} }
.big-present-button { .big-present-button {
@ -241,7 +241,9 @@
color: white; color: white;
border: none; border: none;
border-radius: 6rem; border-radius: 6rem;
background: rgba(0, 0, 0, 0.32); background: transparent;
backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
-webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;