Fix Fullscreen function and the ShowFullscreen option

This commit is contained in:
Korbs 2024-12-07 21:26:40 -05:00
parent 17b8a60284
commit 112fda8612
3 changed files with 12 additions and 11 deletions

View file

@ -13,7 +13,7 @@ const {
ShowBackAndForward, ShowBackAndForward,
ShowPlaybackRate, ShowPlaybackRate,
ShowPiP = true, ShowPiP = true,
ShowFullscreen = true, ShowFullscreen = true,
// OThers // OThers
Subtitles Subtitles

View file

@ -5,6 +5,8 @@ const {
ShowBackAndForward, ShowBackAndForward,
ShowFullscreen ShowFullscreen
} = Astro.props } = Astro.props
console.log('Controller: ' + ShowFullscreen)
--- ---
<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward, ShowFullscreen}}> <script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward, ShowFullscreen}}>
@ -61,10 +63,9 @@ function Buffering() {
// Fullscreen // Fullscreen
function Fullscreen() { function Fullscreen() {
console.log('Hey')
// Get Button // Get Button
if (ShowFullscreen === true) {
var Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen"); var Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
}
// Create and Call Functions // Create and Call Functions
function Toggle_Fullscreen() { function Toggle_Fullscreen() {
@ -84,19 +85,19 @@ function Fullscreen() {
EnterFullscreen(); EnterFullscreen();
VideoContainer.requestFullscreen() VideoContainer.requestFullscreen()
} }
if (ShowFullscreen === true) {Update_FullscreenButton()} Update_FullscreenButton()
} }
function EnterFullscreen() { function EnterFullscreen() {
VideoContainer.classList.add('zorn-fullscreen'); VideoContainer.classList.add('zorn-fullscreen');
if (ShowFullscreen === true) {Update_FullscreenButton()} Update_FullscreenButton()
} }
function ExitFullscreen() { function ExitFullscreen() {
VideoContainer.classList.remove('zorn-fullscreen'); VideoContainer.classList.remove('zorn-fullscreen');
if (ShowFullscreen === true) {Update_FullscreenButton()} Update_FullscreenButton()
} }
// Event Listener // Event Listener
if (ShowFullscreen === true) {Button_Fullscreen.onclick = Toggle_Fullscreen;} Button_Fullscreen.onclick = Toggle_Fullscreen;
function Update_FullscreenButton() { function Update_FullscreenButton() {
if (document.fullscreenElement) { if (document.fullscreenElement) {
Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)"); Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)");
@ -110,7 +111,7 @@ function Fullscreen() {
// Gesture // Gesture
Player.addEventListener("dblclick", () => { Player.addEventListener("dblclick", () => {
Toggle_Fullscreen() Toggle_Fullscreen()
if (ShowFullscreen === true) {Update_FullscreenButton()} Update_FullscreenButton()
}); });
// Keyboard Shortcut // Keyboard Shortcut
@ -352,7 +353,7 @@ function PlayAgain() {
// Init Functions // Init Functions
AutoToggleControls() AutoToggleControls()
Buffering() Buffering()
Fullscreen() if (ShowFullscreen === true) {Fullscreen()}
Gestures() Gestures()
KeyboardShortcuts() KeyboardShortcuts()
PlayPause() PlayPause()

View file

@ -17,7 +17,7 @@ const {
ShowBackAndForward, ShowBackAndForward,
ShowPlaybackRate, ShowPlaybackRate,
ShowPiP, ShowPiP,
ShowFullscreen, ShowFullscreen = true,
BigPlayButton = false, BigPlayButton = false,
YouTube = false, YouTube = false,
@ -106,7 +106,7 @@ import './Styles/Iconoir.css'
: :
null null
} }
<Controller PlayerName={PlayerName} BigPlayButton={BigPlayButton} ShowBackAndForward={ShowBackAndForward}/> <Controller PlayerName={PlayerName} BigPlayButton={BigPlayButton} ShowBackAndForward={ShowBackAndForward} ShowFullscreen={ShowFullscreen}/>
<Seek PlayerName={PlayerName}/> <Seek PlayerName={PlayerName}/>
</div> </div>