From 9bcbd72237f7ccb56f526d96b8f4a3caf1289bfb Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 1 Nov 2024 21:37:51 -0400
Subject: [PATCH] Fix fullscreen button updates, add "Play again?" option when
 video ends

---
 src/Controls/Controller.astro | 44 +++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/src/Controls/Controller.astro b/src/Controls/Controller.astro
index 32a2f8c..34aef98 100644
--- a/src/Controls/Controller.astro
+++ b/src/Controls/Controller.astro
@@ -34,6 +34,11 @@ var pause_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24p
 var PlayIcon = play_solid_default;
 var PauseIcon = pause_solid_default;
 
+var fullscreen_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M15 9L20 4M20 4V8M20 4H16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 15L4 20M4 20V16M4 20H8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+var exit_fullscreen_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M4 20L9 15M9 15V19M9 15H5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L15 9M15 9V5M15 9H19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+var FullscreenIcon = fullscreen_solid_default
+var ExitFullscreenIcon = exit_fullscreen_solid_default
+
 // Fullscreen
 function Fullscreen() {
   const Button_Fullscreen = document.getElementById("vc-fullscreen");
@@ -67,13 +72,16 @@ function Fullscreen() {
       document.querySelector('.video-container .video-controls').style.height = '100%'
       VideoContainer.requestFullscreen();
     }
+    Update_FullscreenButton()
   }
   Button_Fullscreen.onclick = Toggle_Fullscreen;
   function Update_FullscreenButton() {
     if (document.fullscreenElement) {
       Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)");
+      Button_Fullscreen.innerHTML = `${FullscreenIcon}`;
     } else {
       Button_Fullscreen.setAttribute("data-title", "Full screen (f)");
+      Button_Fullscreen.innerHTML = `${ExitFullscreenIcon}`;
     }
   }
   Player.addEventListener("dblclick", () => {
@@ -82,6 +90,17 @@ function Fullscreen() {
   });
 }
 
+
+function Update_PlayPauseButton() {
+    if (Player.paused) {
+      Button_PlayPause.setAttribute("data-title", "Play (K)");
+      Button_PlayPause.innerHTML = `${PlayIcon}`;
+    } else {
+      Button_PlayPause.setAttribute("data-title", "Pause (K)");
+      Button_PlayPause.innerHTML = `${PauseIcon}`;
+    }
+  }
+
 // Play/Pause
 function PlayPause() {
   const Button_PlayPause = document.querySelector(".video-controls #vc-playpause");
@@ -227,10 +246,35 @@ function KeyboardShortcuts(events) {
   document.addEventListener("keyup", keyboardShortcuts);
 }
 
+// If Media Ends, fade main controls and show a "Replay" button
+function PlayAgain() {
+  Player.onended = (event) => {
+    document.querySelector('.vc-start').style.opacity = '0'
+    document.querySelector('.vc-start').style.pointerEvents = 'none'
+    document.querySelector('.vc-center').style.opacity = '0'
+    document.querySelector('.vc-center').style.pointerEvents = 'none'
+    document.querySelector('#vc-playagain').style.display = 'inherit'
+  }
+  document.querySelector('#vc-playagain').onclick = PlayItAgain
+}
+
+function PlayItAgain() {
+    document.querySelector('.vc-start').style.opacity = '1'
+    document.querySelector('.vc-start').style.pointerEvents = 'all'
+    document.querySelector('.vc-center').style.opacity = '1'
+    document.querySelector('.vc-center').style.pointerEvents = 'all'
+    document.querySelector('#vc-playagain').style.display = 'none'
+
+    Player.pause();
+    Player.currentTime = '0';
+    Player.play();
+}
+
 // Init All Functions
 AutoToggleControls()
 Fullscreen()
 KeyboardShortcuts()
 PlayPause()
 SkipAround()
+PlayAgain()
 </script>
\ No newline at end of file