Add buffering indicator

src/Controls/Controller.astro

@@ -2,11 +2,12 @@
 const {
   PlayerName,
   BigPlayButton,
-  ShowBackAndForward
+  ShowBackAndForward,
+  ShowFullscreen
 } = Astro.props
 ---
 
-<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward}}>
+<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward, ShowFullscreen}}>
 /**
  * @licstart  The following is the entire license notice for the 
  *  JavaScript code in this page.
@@ -47,10 +48,23 @@ var exit_fullscreen_solid_default = '<svg width="24px" height="24px" stroke-widt
 var FullscreenIcon = fullscreen_solid_default
 var ExitFullscreenIcon = exit_fullscreen_solid_default
 
+// Buffering
+function Buffering() {
+  var BufferingIndicator = document.querySelector('#zorn-player-' + PlayerName + ' #vc-buffering')
+  Player.onwaiting = (event) => {
+    BufferingIndicator.style.opacity = '1'
+  }
+  Player.onplaying = (event) => {
+    BufferingIndicator.style.opacity = '0'
+  }
+}
+
 // Fullscreen
 function Fullscreen() {
   // Get Button
-  const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
+  if (ShowFullscreen === true) {
+    var Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
+  }
 
   // Create and Call Functions
   function Toggle_Fullscreen() {
@@ -70,19 +84,19 @@ function Fullscreen() {
       EnterFullscreen();
       VideoContainer.requestFullscreen()
     }
-    Update_FullscreenButton()
+    if (ShowFullscreen === true) {Update_FullscreenButton()}
   }
   function EnterFullscreen() {
     VideoContainer.classList.add('zorn-fullscreen');
-    Update_FullscreenButton();
+    if (ShowFullscreen === true) {Update_FullscreenButton()}
   }
   function ExitFullscreen() {
     VideoContainer.classList.remove('zorn-fullscreen');
-    Update_FullscreenButton();
+    if (ShowFullscreen === true) {Update_FullscreenButton()}
   }
 
   // Event Listener
-  Button_Fullscreen.onclick = Toggle_Fullscreen;
+  if (ShowFullscreen === true) {Button_Fullscreen.onclick = Toggle_Fullscreen;}
   function Update_FullscreenButton() {
     if (document.fullscreenElement) {
       Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)");
@@ -96,7 +110,7 @@ function Fullscreen() {
   // Gesture
   Player.addEventListener("dblclick", () => {
     Toggle_Fullscreen()
-    Update_FullscreenButton()
+    if (ShowFullscreen === true) {Update_FullscreenButton()}
   });
 
   // Keyboard Shortcut
@@ -337,6 +351,7 @@ function PlayAgain() {
 
 // Init Functions
 AutoToggleControls()
+Buffering()
 Fullscreen()
 Gestures()
 KeyboardShortcuts()