Haystack/frontend/src/components/ImageViewer.tsx

53 lines
1.4 KiB
TypeScript

import { listen } from "@tauri-apps/api/event";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { type Component, createEffect } from "solid-js";
import { sendImage } from "../network";
type ImageViewerProps = {
onSendImage: (
processingImage: Awaited<ReturnType<typeof sendImage>>,
) => void;
};
// This probably shouldn't live here.
// The request should be made from rust but hey.
// We'll do that later
export const ImageViewer: Component<ImageViewerProps> = (props) => {
// const [latestImage, setLatestImage] = createSignal<string | null>(null);
let sentImage = "";
createEffect(async () => {
// Listen for PNG processing events
const unlisten = listen("png-processed", async (event) => {
const base64Data = event.payload as string;
if (base64Data === sentImage) {
return;
}
sentImage = base64Data;
const appWindow = getCurrentWindow();
appWindow.show();
appWindow.setFocus();
// setLatestImage(`data:image/png;base64,${base64Data}`);
const result = await sendImage("test-image.png", base64Data);
props.onSendImage(result);
console.log("DBG: ", result);
});
return () => {
unlisten.then((fn) => fn()); // Cleanup listener
};
});
return null;
};