moth11.net
frontend for xcvr appview
add aspect ratio to frontend
+10
-4
src/lib/components/Transmitter.svelte
+10
-4
src/lib/components/Transmitter.svelte
···
2
2
import AutoGrowInput from "$lib/components/AutoGrowInput.svelte";
3
3
import { WSContext } from "$lib/wscontext.svelte";
4
4
import { numToHex } from "$lib/colors";
5
-
import type { Image } from "$lib/types";
6
5
import AutoGrowTextArea from "$lib/components/AutoGrowTextArea.svelte";
7
6
import diff from "fast-diff";
8
7
interface Props {
···
16
15
let isDesktop = $derived(innerWidth > 1000);
17
16
let imageURL: string | undefined = $state();
18
17
let imageAlt: string = $state("");
18
+
let image: HTMLImageElement | undefined = $state();
19
+
let imageWidth: number | undefined;
20
+
let imageHeight: number | undefined;
21
+
$effect(() => {
22
+
imageWidth = image?.naturalWidth;
23
+
imageWidth = image?.naturalHeight;
24
+
});
19
25
$effect(() => {
20
26
if (ctx) {
21
27
ctx.setNick(nick);
···
85
91
URL.revokeObjectURL(imageURL);
86
92
}
87
93
ctx.atpblob = undefined;
88
-
ctx.pubImage("");
94
+
ctx.pubImage("", undefined, undefined);
89
95
imageAlt = "";
90
96
imageURL = undefined;
91
97
};
92
98
const uploadimage = () => {
93
-
ctx.pubImage(imageAlt);
99
+
ctx.pubImage(imageAlt, imageWidth, imageHeight);
94
100
if (imageURL) {
95
101
URL.revokeObjectURL(imageURL);
96
102
}
···
146
152
/>
147
153
{#if imageURL !== undefined}
148
154
<div>
149
-
<img src={imageURL} alt={imageAlt} />
155
+
<img bind:this={image} src={imageURL} alt={imageAlt} />
150
156
<AutoGrowInput
151
157
bind:value={imageAlt}
152
158
placeholder="alt text"
+15
-3
src/lib/wscontext.svelte.ts
+15
-3
src/lib/wscontext.svelte.ts
···
1
-
import type { Item, Image, Message, LogItem, SignetView, MessageView, MediaView, ImageView } from "./types"
1
+
import type { AspectRatio, Item, Image, Message, LogItem, SignetView, MessageView, MediaView, ImageView } from "./types"
2
2
import { isMessage, isImage } from "./types"
3
3
import * as lrc from '@rachel-mp4/lrcproto/gen/ts/lrc'
4
4
···
185
185
}
186
186
}
187
187
188
-
pubImage = (alt: string) => {
188
+
pubImage = (alt: string, width: number | undefined, height: number | undefined) => {
189
189
if (this.atpblob) {
190
-
const image: ATPImage = { $type: "org.xcvr.lrc.image", alt: alt, blob: this.atpblob }
190
+
let aspectRatio: AspectRatio | undefined
191
+
if (width && height) {
192
+
aspectRatio = {
193
+
width: width,
194
+
height: height
195
+
}
196
+
}
197
+
const image: ATPImage = {
198
+
$type: "org.xcvr.lrc.image",
199
+
alt: alt,
200
+
blob: this.atpblob,
201
+
...(aspectRatio && { aspectRatio: aspectRatio })
202
+
}
191
203
const record = {
192
204
...(this.mySignet && { signetURI: this.mySignet.uri }),
193
205
...(this.channelUri && { channelURI: this.channelUri }),