114 lines
4.3 KiB
TypeScript
114 lines
4.3 KiB
TypeScript
// AutoEQSL drives automatic eQSL sending. The backend decides eligibility on
|
|
// log (auto-send on, recipient e-mail known, default template, not already
|
|
// sent) and emits "qsl:autosend"; this component does the part Go can't —
|
|
// render the card off-screen, rasterize it to JPEG and hand it back to
|
|
// SendEQSL. Jobs are processed one at a time. Mounted once, near the app root.
|
|
|
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { EventsOn } from '../../../wailsjs/runtime/runtime';
|
|
import { RenderEQSL, SendEQSL } from '../../../wailsjs/go/main/App';
|
|
import type { RenderModel } from './qslTypes';
|
|
import { loadCardAssets, type CardAssets } from './qslAssets';
|
|
import { CardPreview } from './CardPreview';
|
|
import { rasterizeCard } from './rasterize';
|
|
|
|
interface Job {
|
|
qsoId: number;
|
|
templateId: number;
|
|
callsign: string;
|
|
}
|
|
|
|
interface Props {
|
|
onSent?: (callsign: string) => void;
|
|
onError?: (message: string) => void;
|
|
}
|
|
|
|
export function AutoEQSL({ onSent, onError }: Props) {
|
|
const queue = useRef<Job[]>([]);
|
|
const busy = useRef(false);
|
|
const [current, setCurrent] = useState<{ job: Job; model: RenderModel; assets: CardAssets } | null>(null);
|
|
const svgEl = useRef<SVGSVGElement | null>(null);
|
|
const sentForRef = useRef<number | null>(null); // qsoId we've already fired SendEQSL for
|
|
|
|
// Keep the callbacks in refs so they never change the effects' identity — a
|
|
// toast/grid re-render from onSent must NOT re-run the send effect (that
|
|
// re-sent the same eQSL many times in a row).
|
|
const onSentRef = useRef(onSent);
|
|
const onErrorRef = useRef(onError);
|
|
useEffect(() => { onSentRef.current = onSent; onErrorRef.current = onError; });
|
|
|
|
// Pull the next job, fetch its render model + assets, then mount it (the
|
|
// effect below rasterizes once the DOM has it).
|
|
const pump = useCallback(async () => {
|
|
if (busy.current) return;
|
|
const job = queue.current.shift();
|
|
if (!job) return;
|
|
busy.current = true;
|
|
try {
|
|
const model = JSON.parse(await RenderEQSL(job.qsoId, job.templateId)) as RenderModel;
|
|
const assets = await loadCardAssets(model.template, job.templateId);
|
|
setCurrent({ job, model, assets });
|
|
} catch (e) {
|
|
onErrorRef.current?.(`Auto eQSL: ${e}`);
|
|
busy.current = false;
|
|
void pump();
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const off = EventsOn('qsl:autosend', (p: { qsoId: number; templateId: number; callsign: string }) => {
|
|
// Dedupe: ignore a repeat event for a QSO we're already handling/handled.
|
|
if (sentForRef.current === p.qsoId || queue.current.some((j) => j.qsoId === p.qsoId)) return;
|
|
queue.current.push({ qsoId: p.qsoId, templateId: p.templateId, callsign: p.callsign });
|
|
void pump();
|
|
});
|
|
return () => off();
|
|
}, [pump]);
|
|
|
|
// Once a job is mounted off-screen, wait for fonts + paint, rasterize, send.
|
|
// Sends exactly once per job (guarded by sentForRef), independent of renders.
|
|
useEffect(() => {
|
|
if (!current) return;
|
|
if (sentForRef.current === current.job.qsoId) return; // already sent this one
|
|
let cancelled = false;
|
|
void (async () => {
|
|
try {
|
|
await document.fonts.ready;
|
|
await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r(null))));
|
|
if (cancelled || !svgEl.current) return;
|
|
sentForRef.current = current.job.qsoId;
|
|
const card = current.model.template.card;
|
|
const jpeg = await rasterizeCard(svgEl.current, card.w, card.h, 'image/jpeg');
|
|
await SendEQSL(current.job.qsoId, current.job.templateId, jpeg);
|
|
onSentRef.current?.(current.job.callsign);
|
|
} catch (e) {
|
|
onErrorRef.current?.(`Auto eQSL: ${e}`);
|
|
} finally {
|
|
if (!cancelled) {
|
|
setCurrent(null);
|
|
busy.current = false;
|
|
void pump();
|
|
}
|
|
}
|
|
})();
|
|
return () => { cancelled = true; };
|
|
}, [current, pump]);
|
|
|
|
if (!current) return null;
|
|
// Off-screen at full card resolution so the rasterized output matches the
|
|
// editor preview exactly.
|
|
return (
|
|
<div
|
|
aria-hidden
|
|
style={{ position: 'fixed', left: -100000, top: 0, opacity: 0, pointerEvents: 'none' }}
|
|
>
|
|
<CardPreview
|
|
model={current.model}
|
|
assets={current.assets}
|
|
width={current.model.template.card.w}
|
|
svgRef={(el) => { svgEl.current = el; }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|