Added "Click to umute" option for settings page

.utilities/settings-page-builder/index.html

@@ -25,12 +25,15 @@
     <div id="contentArea">
 
         <!-- Settings Panel -->
-        <div id="settingsPanel">            
+        <div id="settingsPanel">
         </div>
 
         <!-- Widget Preview Panel -->
-        <iframe id="widgetPreview">
-        </iframe>
+        <div id="widget-preview-wrapper">
+            <label id="unmute-label">Click to unmute...</label>
+            <iframe id="widgetPreview">
+            </iframe>
+        </div>
     </div>
 
     <!-- Load Settings Popup -->

.utilities/settings-page-builder/script.js

@@ -3,6 +3,7 @@ const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const settingsJson = urlParams.get("settingsJson") || "";
 const widgetURL = urlParams.get("widgetURL") || "";
+const showUnmuteIndicator = GetBooleanParam("showUnmuteIndicator", false);
 
 // Page elements
 const widgetUrlInputWrapper = document.getElementById('widgetUrlInputWrapper');
@@ -13,6 +14,10 @@ const widgetPreview = document.getElementById('widgetPreview');
 const loadURLBox = document.getElementById('loadUrlBox');
 const cancelSettingsButton = document.getElementById('cancelSettingsButton');
 const loadSettingsBox = document.getElementById('loadSettingsWrapper');
+const unmuteLabel = document.getElementById('unmute-label');
+
+if (showUnmuteIndicator)
+	unmuteLabel.style.display = 'inline';
 
 
 
@@ -137,7 +142,7 @@ fetch(settingsJson)
 						inputElement.textContent = setting.label;
 
 						inputElement.addEventListener('click', () => {
-                            widgetPreview.contentWindow[setting.callFunction]();
+							widgetPreview.contentWindow[setting.callFunction]();
 
 							const defaultBackgroundColor = "#2e2e2e";
 							const defaultTextColor = "white";
@@ -342,4 +347,58 @@ function OpenMembershipPage() {
 function OpenLoadSettingsPopup() {
 	loadSettingsBox.style.visibility = 'visible';
 	loadSettingsBox.style.opacity = 1;
-}
+}
+
+
+
+//////////////////////
+// HELPER FUNCTIONS //
+//////////////////////
+
+function GetBooleanParam(paramName, defaultValue) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramValue = urlParams.get(paramName);
+
+	if (paramValue === null) {
+		return defaultValue; // Parameter not found
+	}
+
+	const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
+
+	if (lowercaseValue === 'true') {
+		return true;
+	} else if (lowercaseValue === 'false') {
+		return false;
+	} else {
+		return paramValue; // Return original string if not 'true' or 'false'
+	}
+}
+
+function GetIntParam(paramName, defaultValue) {
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramValue = urlParams.get(paramName);
+
+	if (paramValue === null) {
+		return defaultValue; // or undefined, or a default value, depending on your needs
+	}
+
+	console.log(paramValue);
+
+	const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
+
+	if (isNaN(intValue)) {
+		return null; // or handle the error in another way, e.g., throw an error
+	}
+
+	return intValue;
+}
+
+
+// Handle first window interaction
+window.addEventListener('message', (event) => {
+	if (event.origin === new URL(widgetPreview.src).origin && event.data === 'iframe-interacted') {
+		iframeHasBeenInteractedWith = true;
+		console.log('Iframe has been interacted with!');
+		unmuteLabel.style.display = 'none';
+	}
+});

.utilities/settings-page-builder/style.css

@@ -36,7 +36,7 @@ body {
     /* Prevent overall page scroll */
 }
 
-#header > button {
+#header>button {
     width: auto;
     /* Allow buttons to size based on content */
     flex-shrink: 0;
@@ -78,10 +78,28 @@ body {
     /* Color of the scroll thumb on hover */
 }
 
-#widgetPreview {
+#widget-preview-wrapper {
     flex-grow: 1;
     overflow: hidden;
+    position: relative;
+}
+
+#widgetPreview {
     border: transparent;
+    width: 100%;
+    height: 100%;
+}
+
+#unmute-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    font-size: 3em;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.7);
+    display: none;
 }
 
 #widgetUrlInputWrapper {
@@ -335,7 +353,7 @@ button:hover {
     max-width: 1000px;
     width: calc(100% - 75px);
     border-radius: 1em;
-    border: 1px rgba(255, 255, 255, 0.24) solid ;
+    border: 1px rgba(255, 255, 255, 0.24) solid;
     padding: 1em;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
     background: #181818af;