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

Compare commits

base: ekzyis:8c0b2622822e2896236af766041bb3dc90dfcd7d
Branches Tags
ekzyis:develop
ekzyis:test-sse
...
compare: ekzyis:191fd5659b440b38767c721572fa3a2fd33ec651
Branches Tags
ekzyis:test-sse
ekzyis:develop

13 Commits
8c0b262282 ... 191fd5659b

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
ekzyis
c851a8f344 Add more sizes 2025-01-24 23:03:50 +01:00
ekzyis
aff49782cf Add slider for zap message size 2025-01-24 23:03:37 +01:00
ekzyis
3b6933e16a Add slider for QR code size 2025-01-24 21:08:04 +01:00
ekzyis
24cc41c7d7 Draggable zap container 2025-01-24 20:04:15 +01:00
ekzyis
7268c8061f Remove redundant style property 2025-01-24 19:30:30 +01:00
ekzyis
aacfa870ba Restyle zap alert 2025-01-03 22:08:50 +01:00
ekzyis
909a36d76f Support reading position from query params 2025-01-03 21:39:07 +01:00
ekzyis
05bc6514d6 Allow QR code to be dragged 2025-01-03 21:03:28 +01:00
ekzyis
0393817939 Also show lightning address 2025-01-03 20:36:30 +01:00
5 changed files with 239 additions and 15 deletions
Show Stats Expand all files Collapse all files

8
components/zap.templ
View File

@ -8,13 +8,13 @@ import (
templ Zap(inv *lightning.Invoice) {
<div class="bg-[#212529] w-fit zap-animate-in border border-[#212529] m-3 rounded-lg" id={ inv.PaymentHash }>
<div class="flex flex-row gap-3 items-center">
<svg width="32" height="32" viewBox="0 0 200 307" fill="#fada5e" xmlns="http://www.w3.org/2000/svg" class="ps-3">
<div class="flex flex-row gap-3 py-1 items-center">
<svg width="32" height="32" viewBox="0 0 200 307" fill="#fada5e" xmlns="http://www.w3.org/2000/svg" class="zap-svg ps-3">
<path d="M56 0L107.606 131H90.2129H89L1.52588e-05 131L177 307L106.979 165H121H160H200L56 0Z"/>
</svg>
<div class="flex flex-col pe-3 py-1">
<div class="text-lg text-[#f0f0f0]">{ inv.Description }</div>
<div class="text-sm text-slate-300">{ fmt.Sprintf("%.8s / %s", inv.PaymentHash, humanize(inv.Msats)) }</div>
<div class="zap-description text-[#f0f0f0]">{ inv.Description }</div>
<div class="zap-amount text-slate-300">{ fmt.Sprintf("%s", humanize(inv.Msats)) }</div>
</div>
</div>
</div>

211
pages/overlay.templ
View File

@ -3,7 +3,7 @@ package pages
import "github.com/skip2/go-qrcode"
import "encoding/base64"
templ Overlay(lnurl string) {
templ Overlay(lnurl string, lnaddr string) {
<html>
<head>
<meta charset="UTF-8">
@ -16,10 +16,57 @@ templ Overlay(lnurl string) {
if GetEnv(ctx) == "development" {
<script src={ GetBaseUrl(ctx) + "/js/livereload.js" }></script>
}
<style id="zap-custom-css"></style>
</head>
<body>
<div hx-ext="sse" sse-connect="/overlay/sse" sse-swap="zap" hx-swap="beforeend" class="fixed bottom-0 right-0" />
<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"
id="qr-scale-slider"
min="0.5"
max="5"
step="0.1"
value="1.0"
class="w-32 accent-teal"
/>
<label for="zap-scale-slider" class="text-black">Zap message size:</label>
<input
type="range"
id="zap-scale-slider"
min="1"
max="10"
step="1"
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"
hx-ext="sse"
sse-connect="/overlay/sse"
sse-swap="zap"
hx-swap="beforeend"
class="fixed bottom-0 right-0 cursor-move"
draggable="true"
>
<div id="zap-template" class="hidden items-center justify-center text-center border border-dashed border-[#212529] m-0 p-3 w-fit">
zap messages will show up here
</div>
</div>
<div id="qr" class="bg-white fixed bottom-0 left-0 text-center p-3 cursor-move" draggable="true">
<div id="qr-scaler">
<div class="p-2">
<div class="font-bold">{ lnaddr }</div>
<img src={ "data:image/jpeg;base64," + qrEncode(lnurl) }/>
</div>
<div class="italic">zap us a message!</div>
</div>
</div>
<script>
// zap messages disappear after a minute
document.body.addEventListener('htmx:sseMessage', function (e) {
setTimeout(() => {
const div = document.getElementById(e.detail.lastEventId)
@ -27,11 +74,163 @@ templ Overlay(lnurl string) {
div.addEventListener('animationend', div.remove)
}, 60_000)
})
function enableDrag(elementId, xParam, yParam) {
const element = document.getElementById(elementId);
const localStorageKey = `${elementId}-position`
const urlParams = new URLSearchParams(window.location.search);
let queryX = parseInt(urlParams.get(xParam));
let queryY = parseInt(urlParams.get(yParam));
const [localX,localY] = localStorage.getItem(localStorageKey)?.split(',').map(Number) ?? [0,0];
let currentX = !isNaN(queryX) ? queryX : localX;
let currentY = !isNaN(queryY) ? queryY : localY;
element.style.transform = `translate(${currentX}px, ${currentY}px)`;
let startX = 0;
let startY = 0;
element.addEventListener("dragstart", (e) => {
console.log("dragstart", e)
startX = e.clientX - currentX;
startY = e.clientY - currentY;
e.dataTransfer.setData("text/plain", `${currentX},${currentY}`);
});
element.addEventListener("drag", (e) => {
if (e.clientX && e.clientY) {
currentX = e.clientX - startX;
currentY = e.clientY - startY;
element.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
});
element.addEventListener("dragend", (e) => {
currentX = e.clientX - startX;
currentY = e.clientY - startY;
element.style.transform = `translate(${currentX}px, ${currentY}px)`;
localStorage.setItem(localStorageKey, `${currentX},${currentY}`);
const params = new URLSearchParams(window.location.search);
params.set(xParam, currentX);
params.set(yParam, currentY);
window.location.search = params.toString();
});
}
enableDrag("qr", "qrX", "qrY")
enableDrag("zap-container", "zapX", "zapY")
// hide 'zap messages will show up here' if query param given
function showControls() {
document.querySelector('#zap-template').style.display = "flex";
document.querySelector('#controls').style.display = "grid";
}
const params = new URLSearchParams(window.location.search)
if (!params.has("stream", 1) && (!params.has("config") || params.has("config", 1))) {
showControls()
}
function enableSlider(sliderId, elementId, param, onChange) {
const slider = document.getElementById(sliderId);
const target = document.getElementById(elementId);
const initialValue = localStorage.getItem(param) ?? 1.0;
slider.value = initialValue;
onChange(target, initialValue);
let timeout
slider.oninput = function (e) {
const value = e.target.value
clearTimeout(timeout);
localStorage.setItem(param, value);
onChange(target, value);
updateStreamUrl();
timeout = setTimeout(() => {
const params = new URLSearchParams(window.location.search);
params.set(param, value);
window.location.search = params.toString();
}, 1_000);
}
}
enableSlider('qr-scale-slider', 'qr-scaler', 'qrScale', (element, value) => {
element.style.transform = `scaleX(${value}) scaleY(${value})`;
})
enableSlider('zap-scale-slider', 'zap-custom-css', 'zapScale', (element, value) => {
// https://tailwindcss.com/docs/font-size
const description = {
1.0: 'font-size: 18px', // text-lg
2.0: 'font-size: 20px', // text-xl
3.0: 'font-size: 24px', // text-2xl
4.0: 'font-size: 30px', // text-3xl
5.0: 'font-size: 36px', // text-4xl
6.0: 'font-size: 48px', // text-5xl
7.0: 'font-size: 60px', // text-6xl
8.0: 'font-size: 72px', // text-7xl
9.0: 'font-size: 96px', // text-8xl
10.0: 'font-size: 120px', // text-9xl
}
const amount = {
1.0: 'font-size: 14px', // text-sm
2.0: 'font-size: 16px', // text-base
3.0: 'font-size: 18px', // text-lg
4.0: 'font-size: 20px', // text-xl
5.0: 'font-size: 24px', // text-2xl
6.0: 'font-size: 30px', // text-3xl
7.0: 'font-size: 36px', // text-4xl
8.0: 'font-size: 48px', // text-5xl
9.0: 'font-size: 60px', // text-6xl
10.0: 'font-size: 72px', // text-7xl
}
const svg = {
1.0: 'width: 32px; height: 32px',
2.0: 'width: 40px; height: 40px',
3.0: 'width: 48px; height: 48px',
4.0: 'width: 56px; height: 56px',
5.0: 'width: 64px; height: 64px',
6.0: 'width: 72px; height: 72px',
7.0: 'width: 80px; height: 80px',
8.0: 'width: 88px; height: 88px',
9.0: 'width: 96px; height: 96px',
10.0: 'width: 104px; height: 104px',
}
element.textContent = `
#zap-template {
${description[value]}
}
.zap-description {
${description[value]}
}
.zap-amount {
${amount[value]}
}
.zap-svg {
${svg[value]}
}
`;
})
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>
<div class="bg-white fixed bottom-0 left-0 text-center p-3">
<img src={ "data:image/jpeg;base64," + qrEncode(lnurl) }/>
<div>scan to zap message</div>
</div>
</body>
</html>
}

4
pages/render.go
View File

@ -27,9 +27,9 @@ func GetEnv(ctx context.Context) string {
return "development"
}
func OverlayHandler(lnurl string) echo.HandlerFunc {
func OverlayHandler(lnurl string, lnaddr string) echo.HandlerFunc {
return func(c echo.Context) error {
return render(c, http.StatusOK, Overlay(lnurl))
return render(c, http.StatusOK, Overlay(lnurl, lnaddr))
}
}

8
server/server.go
View File

@ -27,6 +27,11 @@ func NewServer() *Server {
CustomTimeFormat: "2006-01-02 15:04:05.00000-0700",
}))
u, err := url.Parse(env.PublicUrl)
if err != nil {
log.Fatal(err)
}
webhookPath := "/overlay/webhook"
webhookUrl, err := url.JoinPath(env.PublicUrl, webhookPath)
if err != nil {
@ -46,7 +51,8 @@ func NewServer() *Server {
s.Static("/", "public/")
s.GET("/overlay", pages.OverlayHandler(
lnurl.Encode(fmt.Sprintf("%s/.well-known/lnurlp/%s", env.PublicUrl, "SNL")),
lnurl.Encode(fmt.Sprintf("%s/.well-known/lnurlp/%s", env.PublicUrl, "snl")),
fmt.Sprintf("%s@%s", "snl", u.Host),
))
s.GET("/overlay/sse", sseHandler(p.IncomingPayments()))

23
server/sse.go
View File

@ -53,6 +53,11 @@ func sseHandler(invSrc chan *lightning.Invoice) echo.HandlerFunc {
ticker := time.NewTicker(1 * time.Second)
defer ticker.Stop()
i := 0
ticker2 := time.NewTicker(1 * time.Second)
defer ticker2.Stop()
for {
select {
case <-c.Request().Context().Done():
@ -66,11 +71,19 @@ func sseHandler(invSrc chan *lightning.Invoice) echo.HandlerFunc {
if err := event.MarshalTo(w); err != nil {
return err
}
case inv := <-invSrc:
case <-ticker2.C:
buf := templ.GetBuffer()
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
}
@ -85,6 +98,12 @@ func sseHandler(invSrc chan *lightning.Invoice) echo.HandlerFunc {
if err := event.MarshalTo(w); err != nil {
return err
}
i += 1
if i > 10 {
ticker2.Stop()
}
}
w.Flush()
}