From 09e2c95651b9a8e4b58b1a5d26bdbe0c3a65ea9c Mon Sep 17 00:00:00 2001
From: ekzyis <ekzyis@ekzy.is>
Date: Fri, 24 Jan 2025 23:31:55 +0100
Subject: [PATCH] Show stream url

---
 pages/overlay.templ | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)
diff --git a/pages/overlay.templ b/pages/overlay.templ
index 680b006..007f512 100644
--- a/pages/overlay.templ
+++ b/pages/overlay.templ
@@ -19,7 +19,7 @@ templ Overlay(lnurl string, lnaddr string) {
             <style id="zap-custom-css"></style>
         </head>
         <body>
-            <div id="controls" class="hidden grid grid-cols-2 fixed top-0 left-0 items-center gap-3 m-3">
+            <div id="controls" class="hidden grid grid-cols-[auto_auto] fixed top-0 left-0 items-center gap-3 m-3">
                 <label for="qr-scale-slider" class="text-black">QR code size:</label>
                 <input
                     type="range"
@@ -40,6 +40,8 @@ templ Overlay(lnurl string, lnaddr string) {
                     value="1.0"
                     class="w-32 accent-teal"
                 />
+                <label for="stream-url" class="text-black">Stream URL:</label>
+                <a id="stream-url" class="text-sky-600 hover:text-sky-900 underline">click me</a>
             </div>
             <div
                 id="zap-container"
@@ -143,6 +145,7 @@ templ Overlay(lnurl string, lnaddr string) {
                         clearTimeout(timeout);
                         localStorage.setItem(param, value);
                         onChange(target, value);
+                        updateStreamUrl();
                         timeout = setTimeout(() => {
                             const params = new URLSearchParams(window.location.search);
                             params.set(param, value);
@@ -207,6 +210,26 @@ templ Overlay(lnurl string, lnaddr string) {
                         }
                     `;
                 })
+
+                function updateStreamUrl() {
+                    const params = new URLSearchParams();
+                    const [qrX,qrY] = localStorage.getItem('qr-position')?.split(',').map(Number) ?? [0,0];
+                    params.set("qrX", qrX);
+                    params.set("qrY", qrY);
+                    const [zapX,zapY] = localStorage.getItem('zap-container-position')?.split(',').map(Number) ?? [0,0];
+                    params.set("zapX", zapX);
+                    params.set("zapY", zapY);
+                    const qrScale = localStorage.getItem('qrScale') ?? 1.0;
+                    params.set("qrScale", qrScale);
+                    const zapScale = localStorage.getItem('zapScale') ?? 1.0;
+                    params.set("zapScale", zapScale);
+                    const streamUrl = `${window.location.origin}${window.location.pathname}?${params.toString()}`
+                    const element = document.getElementById('stream-url');
+                    element.href = streamUrl;
+                    element.textContent = '/overlay?' + params.toString();
+                }
+
+                updateStreamUrl();
             </script>
         </body>
     </html>
