From e0b080d62637de182449e7e954c0028b4ba5a51a Mon Sep 17 00:00:00 2001
From: rachel-mp4 <rachel@moth11.net>
Date: Tue, 14 Oct 2025 13:36:01 -0400
Subject: [PATCH] add aspect ratio to frontend

---
 src/lib/components/Transmitter.svelte | 14 ++++++++++----
 src/lib/wscontext.svelte.ts           | 18 +++++++++++++++---
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Transmitter.svelte b/src/lib/components/Transmitter.svelte
index 7fe4050..61a4d58 100644
--- a/src/lib/components/Transmitter.svelte
+++ b/src/lib/components/Transmitter.svelte
@@ -2,7 +2,6 @@
     import AutoGrowInput from "$lib/components/AutoGrowInput.svelte";
     import { WSContext } from "$lib/wscontext.svelte";
     import { numToHex } from "$lib/colors";
-    import type { Image } from "$lib/types";
     import AutoGrowTextArea from "$lib/components/AutoGrowTextArea.svelte";
     import diff from "fast-diff";
     interface Props {
@@ -16,6 +15,13 @@
     let isDesktop = $derived(innerWidth > 1000);
     let imageURL: string | undefined = $state();
     let imageAlt: string = $state("");
+    let image: HTMLImageElement | undefined = $state();
+    let imageWidth: number | undefined;
+    let imageHeight: number | undefined;
+    $effect(() => {
+        imageWidth = image?.naturalWidth;
+        imageWidth = image?.naturalHeight;
+    });
     $effect(() => {
         if (ctx) {
             ctx.setNick(nick);
@@ -85,12 +91,12 @@
             URL.revokeObjectURL(imageURL);
         }
         ctx.atpblob = undefined;
-        ctx.pubImage("");
+        ctx.pubImage("", undefined, undefined);
         imageAlt = "";
         imageURL = undefined;
     };
     const uploadimage = () => {
-        ctx.pubImage(imageAlt);
+        ctx.pubImage(imageAlt, imageWidth, imageHeight);
         if (imageURL) {
             URL.revokeObjectURL(imageURL);
         }
@@ -146,7 +152,7 @@
     />
     {#if imageURL !== undefined}
         <div>
-            <img src={imageURL} alt={imageAlt} />
+            <img bind:this={image} src={imageURL} alt={imageAlt} />
             <AutoGrowInput
                 bind:value={imageAlt}
                 placeholder="alt text"
diff --git a/src/lib/wscontext.svelte.ts b/src/lib/wscontext.svelte.ts
index c5e632b..e6d6316 100644
--- a/src/lib/wscontext.svelte.ts
+++ b/src/lib/wscontext.svelte.ts
@@ -1,4 +1,4 @@
-import type { Item, Image, Message, LogItem, SignetView, MessageView, MediaView, ImageView } from "./types"
+import type { AspectRatio, Item, Image, Message, LogItem, SignetView, MessageView, MediaView, ImageView } from "./types"
 import { isMessage, isImage } from "./types"
 import * as lrc from '@rachel-mp4/lrcproto/gen/ts/lrc'
 
@@ -185,9 +185,21 @@ export class WSContext {
         }
     }
 
-    pubImage = (alt: string) => {
+    pubImage = (alt: string, width: number | undefined, height: number | undefined) => {
         if (this.atpblob) {
-            const image: ATPImage = { $type: "org.xcvr.lrc.image", alt: alt, blob: this.atpblob }
+            let aspectRatio: AspectRatio | undefined
+            if (width && height) {
+                aspectRatio = {
+                    width: width,
+                    height: height
+                }
+            }
+            const image: ATPImage = {
+                $type: "org.xcvr.lrc.image",
+                alt: alt,
+                blob: this.atpblob,
+                ...(aspectRatio && { aspectRatio: aspectRatio })
+            }
             const record = {
                 ...(this.mySignet && { signetURI: this.mySignet.uri }),
                 ...(this.channelUri && { channelURI: this.channelUri }),
-- 
2.51.2