Fix Fullscreen function and the ShowFullscreen option
This commit is contained in:
parent
17b8a60284
commit
112fda8612
|
@ -13,7 +13,7 @@ const {
|
||||||
ShowBackAndForward,
|
ShowBackAndForward,
|
||||||
ShowPlaybackRate,
|
ShowPlaybackRate,
|
||||||
ShowPiP = true,
|
ShowPiP = true,
|
||||||
ShowFullscreen = true,
|
ShowFullscreen = true,
|
||||||
|
|
||||||
// OThers
|
// OThers
|
||||||
Subtitles
|
Subtitles
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue