From acdce0c9d5d8c96fa0d24f69bf9d1dd393e480d9 Mon Sep 17 00:00:00 2001
From: Vic Wong <vicwong@gmail.com>
Date: Wed, 25 Dec 2024 20:15:37 -0800
Subject: [PATCH] fix: improve browser warning message

---
 pikaraoke/templates/splash.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/pikaraoke/templates/splash.html b/pikaraoke/templates/splash.html
index 009b83a7..ce3ae1e0 100644
--- a/pikaraoke/templates/splash.html
+++ b/pikaraoke/templates/splash.html
@@ -274,9 +274,12 @@
     let dismissConfirmation = params.get("confirm");
 
     if (isFirefox || isSafari) {
-      confirm(
-        "This browser is not supported. You may experience streaming issues. Please use Chrome for best results."
-      );
+      let modalContents = document.getElementById("permissions-modal-content");
+      let warningMessage = document.createElement("p");
+      warningMessage.classList.add("notification", "is-warning");
+      warningMessage.innerHTML =
+        "This browser is not supported. You may experience streaming issues unless you enable full playback buffering. Please use Chrome for best results.";
+      modalContents.prepend(warningMessage);
     }
 
     if (dismissConfirmation === "false") {
@@ -356,7 +359,7 @@
 
 <div id="permissions-modal" class="modal is-active">
   <div class="modal-background"></div>
-  <div class="modal-content">
+  <div class="modal-content" id="permissions-modal-content">
     <p>
       {# MSG: Prompt for interaction in order to enable video autoplay. #} {%
       trans %}Due to limititations with browser permissions, you must interact