ekzyis
/
zaply
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ekzyis:develop
Branches Tags
ekzyis:develop
ekzyis:test-sse
..
compare: ekzyis:test-sse
Branches Tags
ekzyis:test-sse
ekzyis:develop

4 Commits
develop ... test-sse

Author SHA1 Message Date
ekzyis 191fd5659b Test SSE 2025-01-24 23:42:27 +01:00
ekzyis 85bbeda9ae Show controls by default 2025-01-24 23:35:51 +01:00
ekzyis 09e2c95651 Show stream url 2025-01-24 23:31:55 +01:00
ekzyis 707b17efe3 Rename help param to config 2025-01-24 23:09:46 +01:00
2 changed files with 48 additions and 6 deletions
Show Stats Expand all files Collapse all files

31
pages/overlay.templ
View File

@ -19,7 +19,7 @@ templ Overlay(lnurl string, lnaddr string) {
<style id="zap-custom-css"></style> <style id="zap-custom-css"></style>
</head> </head>
<body> <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> <label for="qr-scale-slider" class="text-black">QR code size:</label>
<input <input
type="range" type="range"
@ -40,6 +40,8 @@ templ Overlay(lnurl string, lnaddr string) {
value="1.0" value="1.0"
class="w-32 accent-teal" 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>
<div <div
id="zap-container" id="zap-container"
@ -120,14 +122,14 @@ templ Overlay(lnurl string, lnaddr string) {
enableDrag("zap-container", "zapX", "zapY") enableDrag("zap-container", "zapX", "zapY")
// hide 'zap messages will show up here' if query param given // hide 'zap messages will show up here' if query param given
function showHelpers() { function showControls() {
document.querySelector('#zap-template').style.display = "flex"; document.querySelector('#zap-template').style.display = "flex";
document.querySelector('#controls').style.display = "grid"; document.querySelector('#controls').style.display = "grid";
} }
const params = new URLSearchParams(window.location.search) const params = new URLSearchParams(window.location.search)
if (params.has("help", 1)) { if (!params.has("stream", 1) && (!params.has("config") || params.has("config", 1))) {
showHelpers() showControls()
} }
function enableSlider(sliderId, elementId, param, onChange) { function enableSlider(sliderId, elementId, param, onChange) {
@ -143,6 +145,7 @@ templ Overlay(lnurl string, lnaddr string) {
clearTimeout(timeout); clearTimeout(timeout);
localStorage.setItem(param, value); localStorage.setItem(param, value);
onChange(target, value); onChange(target, value);
updateStreamUrl();
timeout = setTimeout(() => { timeout = setTimeout(() => {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
params.set(param, value); params.set(param, value);
@ -207,6 +210,26 @@ templ Overlay(lnurl string, lnaddr string) {
} }
`; `;
}) })
function updateStreamUrl() {
const params = new URLSearchParams({ stream: 1 });
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> </script>
</body> </body>
</html> </html>

23
server/sse.go
View File

@ -53,6 +53,11 @@ func sseHandler(invSrc chan *lightning.Invoice) echo.HandlerFunc {
ticker := time.NewTicker(1 * time.Second) ticker := time.NewTicker(1 * time.Second)
defer ticker.Stop() defer ticker.Stop()
i := 0
ticker2 := time.NewTicker(1 * time.Second)
defer ticker2.Stop()
for { for {
select { select {
case <-c.Request().Context().Done(): case <-c.Request().Context().Done():
@ -66,11 +71,19 @@ func sseHandler(invSrc chan *lightning.Invoice) echo.HandlerFunc {
if err := event.MarshalTo(w); err != nil { if err := event.MarshalTo(w); err != nil {
return err return err
} }
case inv := <-invSrc: case <-ticker2.C:
buf := templ.GetBuffer() buf := templ.GetBuffer()
defer templ.ReleaseBuffer(buf) defer templ.ReleaseBuffer(buf)
if err := components.Zap(inv).Render(c.Request().Context(), buf); err != nil { inv := lightning.Invoice{
PaymentHash: fmt.Sprintf("test-%d", i),
Description: "test",
Msats: 1000,
CreatedAt: time.Now(),
ConfirmedAt: time.Now(),
}
if err := components.Zap(&inv).Render(c.Request().Context(), buf); err != nil {
return err return err
} }
@ -85,6 +98,12 @@ func sseHandler(invSrc chan *lightning.Invoice) echo.HandlerFunc {
if err := event.MarshalTo(w); err != nil { if err := event.MarshalTo(w); err != nil {
return err return err
} }
i += 1
if i > 10 {
ticker2.Stop()
}
} }
w.Flush() w.Flush()
} }