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

Compare commits

base: MinPluto:989a45e6ae4db4c6ad9f41b6e4b6362e1ad38dbf
Branches Tags
MinPluto:main
..
compare: MinPluto:b6e57156db374ab1273d59aa263dd4828c36aee4
Branches Tags
MinPluto:main

No commits in common. "989a45e6ae4db4c6ad9f41b6e4b6362e1ad38dbf" and "b6e57156db374ab1273d59aa263dd4828c36aee4" have entirely different histories.
989a45e6ae ... b6e57156db

3 changed files with 43 additions and 62 deletions
Show stats Expand all files Collapse all files

71
src/Controls/Controller.astro
View file

@ -70,39 +70,39 @@ var ExitFullscreenIcon = exit_fullscreen_solid_default
// Fullscreen
function Fullscreen() {
// Get Fullscreen Button
const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
// Create and Call Functions
function Toggle_Fullscreen() {
if (document.fullscreenElement) {
ExitFullscreen();
document.exitFullscreen()
}
else if (document.webkitFullscreenElement) {
ExitFullscreen();
document.webkitExitFullscreen()
}
else if (VideoContainer.webkitRequestFullscreen) {
EnterFullscreen();
VideoContainer.webkitRequestFullscreen()
}
else {
EnterFullscreen();
VideoContainer.requestFullscreen()
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0'
document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
Player.style.borderRadius = '12px'
VideoControls.style.bottom = '4px'
VideoControls.style.height = 'calc(100% - 28px)'
document.exitFullscreen();
} else if (document.webkitFullscreenElement) {
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0'
document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
Player.style.borderRadius = '12px'
VideoControls.style.bottom = '4px'
VideoControls.style.height = 'calc(100% - 28px)'
document.webkitExitFullscreen();
} else if (VideoContainer.webkitRequestFullscreen) {
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1'
document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
Player.style.borderRadius = '0'
VideoControls.style.bottom = '0px'
VideoControls.style.height = '100%'
VideoContainer.webkitRequestFullscreen();
} else {
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1'
document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
Player.style.borderRadius = '0'
VideoControls.style.bottom = '0px'
VideoControls.style.height = '100%'
VideoContainer.requestFullscreen();
}
Update_FullscreenButton()
}
function EnterFullscreen() {
VideoContainer.classList.add('zorn-fullscreen');
Update_FullscreenButton();
}
function ExitFullscreen() {
VideoContainer.classList.remove('zorn-fullscreen');
Update_FullscreenButton();
}
// Button Event Listener
Button_Fullscreen.onclick = Toggle_Fullscreen;
function Update_FullscreenButton() {
if (document.fullscreenElement) {
@ -113,17 +113,10 @@ function Fullscreen() {
Button_Fullscreen.innerHTML = `${ExitFullscreenIcon}`;
}
}
// Gesture
Player.addEventListener("dblclick", () => {
Toggle_Fullscreen()
Update_FullscreenButton()
});
// Keyboard Shortcuts
var FullscreenHotkey = 'f'
function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}}
document.addEventListener("keyup", FullscreenKS);
}
// Play/Pause
@ -314,6 +307,16 @@ function KeyboardShortcuts(events) {
} else {
volume.value = volume.dataset.volume;
}
} else if (key === Fullscreen_KeyboardShortcut) {
if (document.fullscreenElement) {
document.exitFullscreen();
} else if (document.webkitFullscreenElement) {
document.webkitExitFullscreen();
} else if (VideoContainer.webkitRequestFullscreen) {
VideoContainer.webkitRequestFullscreen();
} else {
VideoContainer.requestFullscreen();
}
} else if (key === SkipBack_KeyboardShortcut) {
Player.currentTime += -10;
} else if (key === SkipForth_KeyboardShortcut) {

5
src/Player.astro
View file

File diff suppressed because one or more lines are too long

29
src/Styles/Index.scss
View file

@ -37,15 +37,15 @@
.video-controls {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);
position: absolute;
top: 0px;
bottom: 4px;
left: 0px;
width: calc(100% - 24px);
height: calc(100% - 28px);
padding: 12px;
z-index: 4;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 28px);
transition: 0.3s opacity;
button {
color: white;
@ -62,19 +62,10 @@
}
}
.vc-top {
margin-top: 12px;
pointer-events: none;
opacity: 0;
transition: 0.3s opacity;
p {
color: white;
backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
-webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
width: max-content;
padding: 6px 12px;
border-radius: 4px;
margin: 0px;
font-size: 24px;
}
}
#vc-gestures {
height: 100%;
@ -241,18 +232,6 @@
transition: 0.3s opacity !important;
}
.zorn-fullscreen {
.video-controls, video {
border-radius: 0 !important;
}
.video-controls {
height: calc(100% - 24px);
.vc-top {
opacity: 1 !important;
}
}
}
.big-present-button {
position: absolute;
top: 50%;