From 57f7747ccc1293a699fe455fd6232e2c671d7dde Mon Sep 17 00:00:00 2001
From: rachel-mp4 <rachel@moth11.net>
Date: Sat, 11 Oct 2025 16:17:57 -0400
Subject: [PATCH] just gonna try this and see what breaks

---
 package-lock.json                          |   6 +-
 src/lib/components/AutoGrowTextArea.svelte |   1 +
 src/lib/components/Transmitter.svelte      |  53 +++++--
 src/lib/wscontext.svelte.ts                | 174 ++++++++++++++++++++-
 4 files changed, 217 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 504c7ad..4478ac3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -558,9 +558,9 @@
 			"license": "(Apache-2.0 AND BSD-3-Clause)"
 		},
 		"node_modules/@rachel-mp4/lrcproto": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@rachel-mp4/lrcproto/-/lrcproto-1.0.4.tgz",
-			"integrity": "sha512-C5wtSj1oa8YhKb7U0v4YgNx4OMfrtJmhCDlZ0BMmCrBA93IX153pbjro8WtXDNfZXyyUgOLkjzd1VrsMgUA3KA==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@rachel-mp4/lrcproto/-/lrcproto-1.2.0.tgz",
+			"integrity": "sha512-DSbEf5wxS0ArjgYkh6ZVLqpB3qvGlGB8Co9AzDeK9fnYZIfwmVgSQemT/Um2e2Oaq/mioNAx8gph6T01wQz1dQ==",
 			"license": "MIT",
 			"dependencies": {
 				"typescript": "^3.9.10"
diff --git a/src/lib/components/AutoGrowTextArea.svelte b/src/lib/components/AutoGrowTextArea.svelte
index fa9fc90..0e85a87 100644
--- a/src/lib/components/AutoGrowTextArea.svelte
+++ b/src/lib/components/AutoGrowTextArea.svelte
@@ -230,6 +230,7 @@
         position: absolute;
         top: 0;
         left: 0;
+        max-height: 16rem;
     }
     .selected.emoji-result {
         background: var(--fg);
diff --git a/src/lib/components/Transmitter.svelte b/src/lib/components/Transmitter.svelte
index 8d10f7a..f760ca2 100644
--- a/src/lib/components/Transmitter.svelte
+++ b/src/lib/components/Transmitter.svelte
@@ -14,6 +14,8 @@
     let nick = $state(defaultNick ?? "wanderer");
     let innerWidth = $state(0);
     let isDesktop = $derived(innerWidth > 1000);
+    let imageURL: string | undefined = $state();
+    let imageAlt: string = $state("");
     $effect(() => {
         if (ctx) {
             ctx.setNick(nick);
@@ -75,19 +77,25 @@
     };
     const convertFileToImageItem = (blob: File) => {
         const blobUrl = URL.createObjectURL(blob);
-        const img = document.createElement("img");
-        img.src = blobUrl;
-        const image: Image = {
-            type: "image",
-            image: img,
-            id: 0,
-            active: false,
-            mine: false,
-            muted: false,
-            startedAt: Date.now(),
-        };
-        ctx.pushItem(image);
-        console.log("pushed image item!");
+        ctx.initImage(blob);
+        imageURL = blobUrl;
+    };
+    const cancelimagepost = () => {
+        if (imageURL) {
+            URL.revokeObjectURL(imageURL);
+        }
+        ctx.atpblob = undefined;
+        ctx.pubImage("");
+        imageAlt = "";
+        imageURL = undefined;
+    };
+    const uploadimage = () => {
+        ctx.pubImage(imageAlt);
+        if (imageURL) {
+            URL.revokeObjectURL(imageURL);
+        }
+        imageAlt = "";
+        imageURL = undefined;
     };
 </script>
 
@@ -136,6 +144,25 @@
         maxlength={65535}
         fs={isDesktop ? "2rem" : "1rem"}
     />
+    {#if imageURL !== undefined}
+        <div>
+            <img src={imageURL} alt={imageAlt} />
+            <AutoGrowInput
+                bind:value={imageAlt}
+                placeholder="alt text"
+                size={10}
+                bold={false}
+                fs={isDesktop ? "2rem" : "1rem"}
+            />
+            <button onclick={cancelimagepost}> cancel </button>
+            {#if ctx.atpblob}
+                confirm
+            {:else}
+                uploading...
+            {/if}
+            <button onclick={uploadimage}> confirm</button>
+        </div>
+    {/if}
 </div>
 
 <style>
diff --git a/src/lib/wscontext.svelte.ts b/src/lib/wscontext.svelte.ts
index 7082167..5315570 100644
--- a/src/lib/wscontext.svelte.ts
+++ b/src/lib/wscontext.svelte.ts
@@ -9,6 +9,24 @@ import * as lrc from '@rachel-mp4/lrcproto/gen/ts/lrc'
 // however long it takes for atproto to propogate, you can't submit your
 // message either.
 // so i want to make that side of things better
+type ATPBlob = {
+    $type: string
+    ref: string
+    mimeType: string
+    size: number
+}
+
+type ATPImage = {
+    $type: string
+    alt: string
+    aspectRatio?: ATPAspectRatio
+    blob?: ATPBlob
+}
+
+type ATPAspectRatio = {
+    width: number
+    height: number
+}
 
 export class WSContext {
     items: Array<Item> = $state(new Array())
@@ -25,15 +43,20 @@ export class WSContext {
 
     channelUri: string
     active: boolean = false
+    mediaactive: boolean = false
     nick: string = "wanderer"
     handle: string = ""
 
     myID: undefined | number
     myNonce: undefined | Uint8Array
     curMsg: string = $state("")
-
     mySignet: undefined | SignetView
 
+    myMediaID: undefined | number
+    myMediaNonce: undefined | Uint8Array
+    atpblob: ATPBlob | undefined
+    myMediaSignet: undefined | SignetView
+
     audio: HTMLAudioElement = new Audio('/notif.wav')
     shortaudio: HTMLAudioElement = new Audio('/shortnotif.wav')
 
@@ -162,6 +185,77 @@ export class WSContext {
         }
     }
 
+    pubImage = (alt: string) => {
+        if (this.atpblob) {
+            const image: ATPImage = { $type: "string", alt: alt, blob: this.atpblob }
+            const record = {
+                ...(this.mySignet && { signetURI: this.mySignet.uri }),
+                ...(this.channelUri && { channelURI: this.channelUri }),
+                ...(this.myID && { messageID: this.myID }),
+                ...(this.myNonce && { nonce: b64encodebytearray(this.myNonce) }),
+                image: image,
+                ...(this.nick && { nick: this.nick }),
+                ...(this.color && { color: this.color }),
+            }
+            const api = import.meta.env.VITE_API_URL
+            const recordstrungified = JSON.stringify(record)
+            const endpoint = `${api}/lrc/media`
+            fetch(endpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: recordstrungified,
+            }).then((response) => {
+                if (response.ok) {
+                    console.log(response)
+                } else {
+                    throw new Error(`HTTP ${response.status}`)
+                }
+            }).catch(() => {
+                setTimeout(() => {
+                    fetch(endpoint, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: recordstrungified,
+                    }).then((val) => console.log(val), (val) => console.log(val))
+                }, 2000)
+            })
+            const uri = "beep"
+            const contentAddress = `${api}/lrc/getImage?uri=${uri}`
+            if (this.mediaactive) {
+                pubImage(alt, contentAddress, this)
+            }
+        } else {
+            pubImage(alt, undefined, this)
+        }
+    }
+
+    initImage = (blob: File) => {
+        if (!this.mediaactive) {
+            initImage(this)
+            this.mediaactive = true
+            const api = import.meta.env.VITE_API_URL
+            const endpoint = `${api}/lrc/image`
+            const formData = new FormData()
+            formData.append("image", blob)
+            fetch(endpoint, {
+                method: "POST",
+                body: formData,
+            }).then((response) => {
+                if (response.ok) {
+                    response.json().then((atpblob) =>
+                        this.atpblob = atpblob)
+                } else {
+                    throw new Error(`HTTP ${response.status}`)
+                }
+            }).catch((err) => { console.log(err) })
+        }
+    }
+
+
     insert = (idx: number, s: string) => {
         if (!this.active) {
             initMessage(this)
@@ -234,6 +328,12 @@ export class WSContext {
         })
     }
 
+    mediapubItem = (id: number, alt: string | undefined, contentAddress: string | undefined) => {
+        this.items = this.items.map((item: Item) => {
+            return isImage(item) && item.id === id ? { ...item, active: false, alt: alt, contentAddress: contentAddress } : item
+        })
+    }
+
     insertMessage = (id: number, idx: number, s: string) => {
         this.ensureExistenceOfMessage(id)
         this.items = this.items.map((item: Item) => {
@@ -267,6 +367,9 @@ export class WSContext {
         if (signet.lrcId === this.myID) {
             this.mySignet = signet
         }
+        if (signet.lrcId === this.myMediaID) {
+            this.myMediaSignet = signet
+        }
         console.log("now we are signing")
         const arrayIdx = this.items.findIndex(item => item.id === signet.lrcId)
         if (arrayIdx !== -1) {
@@ -518,6 +621,35 @@ export const initMessage = (ctx: WSContext) => {
     ctx.ws?.send(byteArray)
 }
 
+export const initImage = (ctx: WSContext) => {
+    const evt: lrc.Event = {
+        msg: {
+            oneofKind: "mediainit",
+            mediainit: {
+                nick: ctx.nick,
+                color: ctx.color,
+                externalID: ctx.handle
+            }
+        }
+    }
+    const byteArray = lrc.Event.toBinary(evt)
+    ctx.ws?.send(byteArray)
+}
+
+export const pubImage = (alt: string | undefined, contentAddress: string | undefined, ctx: WSContext) => {
+    const evt: lrc.Event = {
+        msg: {
+            oneofKind: "mediapub",
+            mediapub: {
+                alt: alt,
+                contentAddress: contentAddress,
+            }
+        }
+    }
+    const byteArray = lrc.Event.toBinary(evt)
+    ctx.ws?.send(byteArray)
+}
+
 export const insertMessage = (idx: number, s: string, ctx: WSContext) => {
     if (ctx.shouldTransmit) {
         const evt: lrc.Event = {
@@ -712,6 +844,38 @@ function parseEvent(binary: MessageEvent<any>, ctx: WSContext): boolean {
             return true
         }
 
+        case "mediainit": {
+            const id = event.msg.mediainit.id ?? 0
+            if (id === 0) return false
+            const echoed = event.msg.mediainit.echoed ?? false
+            if (echoed) {
+                ctx.myMediaID = id
+                ctx.myMediaNonce = event.msg.mediainit.nonce
+                // return false
+            }
+            const nick = event.msg.mediainit.nick
+            const handle = event.msg.mediainit.externalID
+            const color = event.msg.mediainit.color
+            const active = true
+            const mine = echoed
+            const muted = false
+            const startedAt = Date.now()
+            const msg: Image = {
+                type: 'image',
+                id: id,
+                active: active,
+                mine: mine,
+                muted: muted,
+                ...(color && { color: color }),
+                ...(handle && { handle: handle }),
+                ...(nick && { nick: nick }),
+                startedAt: startedAt
+            }
+            ctx.pushItem(msg)
+            ctx.pushToLog(id, byteArray, "init")
+            return true
+        }
+
         case "pub": {
             const id = event.msg.pub.id ?? 0
             if (id === 0) return false
@@ -720,6 +884,14 @@ function parseEvent(binary: MessageEvent<any>, ctx: WSContext): boolean {
             return false
         }
 
+        case "mediapub": {
+            const id = event.msg.mediapub.id ?? 0
+            if (id === 0) return false
+            ctx.mediapubItem(id, event.msg.mediapub.alt, event.msg.mediapub.contentAddress)
+            ctx.pushToLog(id, byteArray, "pub")
+            return false
+        }
+
         case "insert": {
             const id = event.msg.insert.id ?? 0
             if (id === 0) return false
-- 
2.51.2