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

Fix auto hide controls function, fix onmousemove function to check video not the entire page

Browse source
This commit is contained in:
Korbs 2024-12-01 23:09:14 -05:00
parent a2c1f5d42d
commit 9bcf326987
2 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/Controls/Controller.astro
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_Controls2() { function Show_Controls() {VideoControls.classList.remove("zorn-controls-hide")}
document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.remove("hide"); VideoControls.addEventListener("mouseenter", Show_Controls);
} 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>

10
src/Styles/Index.scss
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;