From 93b253ae7ff831f992fcd01365c0b3253eaece8f Mon Sep 17 00:00:00 2001
From: rachel-mp4 <rachel@moth11.net>
Date: Tue, 14 Oct 2025 12:23:59 -0400
Subject: [PATCH] i hope this works

---
 src/lib/components/ImageTransmission.svelte | 231 ++++++++++++++++++++
 src/lib/components/Receiever.svelte         |  11 +-
 src/lib/types.ts                            |  24 +-
 src/lib/wscontext.svelte.ts                 |  86 +++++++-
 4 files changed, 337 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/ImageTransmission.svelte

diff --git a/src/lib/components/ImageTransmission.svelte b/src/lib/components/ImageTransmission.svelte
new file mode 100644
index 0000000..4ffb650
--- /dev/null
+++ b/src/lib/components/ImageTransmission.svelte
@@ -0,0 +1,231 @@
+<script lang="ts">
+    import type { Image } from "$lib/types";
+    import { computePosition, flip, shift, offset } from "@floating-ui/dom";
+    import { hexToContrast, hexToTransparent, numToHex } from "$lib/colors";
+    import { smartAbsoluteTimestamp, dumbAbsoluteTimestamp } from "$lib/utils";
+    import ProfileCard from "./ProfileCard.svelte";
+    interface Props {
+        image: Image;
+        margin: number;
+        onmute?: (id: number) => void;
+        onunmute?: (id: number) => void;
+        fs?: string;
+    }
+    let { image, margin, onmute, onunmute, fs }: Props = $props();
+    let color: string = numToHex(image.color ?? 16777215);
+    let cpartial: string = hexToTransparent(color);
+    let contrast: string = hexToContrast(color);
+    let partial: string = hexToTransparent(contrast);
+    let triggerEl: HTMLElement | undefined = $state();
+    let profileEl: HTMLElement | undefined = $state();
+    let showProfile = $state(false);
+    async function updatePosition() {
+        if (triggerEl && profileEl) {
+            const { x, y } = await computePosition(triggerEl, profileEl, {
+                middleware: [offset(0), flip(), shift()],
+            });
+            Object.assign(profileEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        }
+    }
+    $effect(() => {
+        if (showProfile) {
+            updatePosition();
+        }
+    });
+    let pinned = $state(false);
+</script>
+
+{#if image.muted === false}
+    <div
+        style:--theme={color}
+        style:--themep={cpartial}
+        style:--tcontrast={contrast}
+        style:--tpartial={partial}
+        style:--margin={margin + "rem"}
+        style:--size={fs ?? "1rem"}
+        class="{image.active ? 'active' : ''} 
+    {image.profileView ? 'signed' : ''} 
+    {pinned ? 'pinned' : ''} 
+    {image.nick ? '' : 'late'} 
+    transmission"
+    >
+        <div class="header">
+            <span class="nick">{image.nick ?? "???"}</span
+            >{#if image.handle}{#if !image.profileView}<span class="handle"
+                        >@{image.handle}</span
+                    >{:else}<div
+                        role="button"
+                        tabindex="0"
+                        class="handle-container"
+                        onmouseenter={() => (showProfile = true)}
+                        onmouseleave={() => (showProfile = false)}
+                    >
+                        <a
+                            bind:this={triggerEl}
+                            class="handle"
+                            href={`/p/${image.handle}`}>@{image.handle}</a
+                        >
+                        {#if showProfile}
+                            <div
+                                class="profile-container"
+                                bind:this={profileEl}
+                            >
+                                <ProfileCard profile={image.profileView} />
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
+                <span
+                    class="time clickable"
+                    title={dumbAbsoluteTimestamp(image.startedAt)}
+                >
+                    {smartAbsoluteTimestamp(image.startedAt)}
+                </span>
+                <button
+                    class="clickable"
+                    onclick={() => {
+                        pinned = !pinned;
+                    }}
+                >
+                    {pinned ? "unpin" : "pin"}
+                </button>
+                {#if image.mine !== true}
+                    <button
+                        class="mute clickable"
+                        onclick={() => {
+                            image.muted = true;
+                            onmute?.(image.id);
+                        }}
+                    >
+                        mute
+                    </button>
+                {/if}
+            {/if}
+        </div>
+        {#if image.src || image.msrc}
+            <img src={image.msrc ? image.msrc : image.src} alt={image.alt} />
+        {/if}
+    </div>
+{:else}
+    muted.
+    <button
+        class="unmute"
+        onclick={() => {
+            image.muted = false;
+            onunmute?.(image.id);
+        }}
+    >
+        unmute
+    </button>
+{/if}
+
+<style>
+    .active {
+        position: relative;
+        background-color: var(--themep);
+        color: var(--tcontrast);
+    }
+    .active::before {
+        position: absolute;
+        content: "";
+        inset: 0;
+        z-index: -1;
+        background-color: var(--theme);
+    }
+    .transmission:not(:hover) .clickable {
+        display: none;
+    }
+    .active .clickable {
+        color: var(--tpartial);
+    }
+    .clickable {
+        color: var(--fl);
+        cursor: pointer;
+    }
+    .clickable:hover {
+        color: var(--fg);
+    }
+    .active .clickable:hover {
+        color: var(--contrast);
+    }
+    .pinned {
+        order: 1;
+    }
+
+    .header {
+        font-weight: 700;
+    }
+    .active .handle {
+        color: var(--tpartial);
+    }
+    .active.signed .handle {
+        color: var(--tcontrast);
+    }
+    .active a {
+        color: var(--tcontrast);
+    }
+    .signed .handle {
+        color: var(--fg);
+    }
+    .handle {
+        color: var(--fl);
+        position: relative;
+    }
+
+    .nick {
+        white-space: pre-wrap;
+    }
+
+    .handle::after {
+        content: "";
+        color: var(--fg);
+        background: var(--bg);
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: calc(55% - calc(var(--size) / 8));
+        bottom: calc(45% - calc(var(--size) / 8));
+        transform: scaleX(0);
+        transform-origin: center left;
+        transition: transform 0.17s 3s;
+    }
+
+    .transmission:not(.signed):not(.active) .handle::after {
+        transform: scaleX(1);
+    }
+    .transmission:not(.signed):not(.active) .handle:hover::after {
+        content: "i couldn't find a record :c";
+    }
+
+    .transmission {
+        padding-bottom: 1rem;
+        margin-top: var(--margin);
+        font-size: var(--size);
+    }
+
+    .transmission:not(.active) .header {
+        color: var(--theme);
+    }
+    .profile-container {
+        position: absolute;
+        z-index: 1;
+    }
+    .handle-container {
+        display: inline-block;
+        color: var(--fg);
+    }
+    button {
+        font-size: var(--size);
+        background-color: transparent;
+        border: none;
+        color: var(--fg);
+        padding: 0;
+        cursor: pointer;
+    }
+    button:hover {
+        font-weight: 700;
+    }
+</style>
diff --git a/src/lib/components/Receiever.svelte b/src/lib/components/Receiever.svelte
index de43411..cb75914 100644
--- a/src/lib/components/Receiever.svelte
+++ b/src/lib/components/Receiever.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Transmission from "$lib/components/Transmission.svelte";
+  import ImageTransmission from "$lib/components/ImageTransmission.svelte";
   import type { Message, Image, Item } from "$lib/types";
   import { isMessage, isImage } from "$lib/types";
   import type { Action } from "svelte/action";
@@ -43,8 +44,14 @@
         {onunmute}
         fs={isDesktop ? `${res}rem` : "1rem"}
       />
-    {:else if isImage(item) && item.image !== undefined}
-      <img src={item.image.src} alt="beep" />
+    {:else if isImage(item)}
+      <ImageTransmission
+        image={item}
+        margin={0}
+        {onmute}
+        {onunmute}
+        fs={isDesktop ? `${res}rem` : "1rem"}
+      />
     {/if}
   {/each}
 </div>
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6525a24..f2529ad 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -39,9 +39,20 @@ type BaseItem = {
     nick?: string
     startedAt: number
 }
+
+export type AspectRatio = {
+    width: number
+    height: number
+}
+
 export type Image = BaseItem & {
     type: 'image'
-    image?: HTMLImageElement
+    alt?: string
+    malt?: string
+    src?: string
+    msrc?: string
+    aspectRatio?: AspectRatio
+    maspectRatio?: AspectRatio
 }
 
 export type Message = BaseItem & {
@@ -88,16 +99,23 @@ export type MessageView = {
     postedAt: string
 }
 
-export type ImageView = {
+export type MediaView = {
     $type?: string
     uri: string
     author: ProfileView
-    imageUri: string
+    imageView?: ImageView
     nick?: string
     color?: number
     signetURI: string
 }
 
+export type ImageView = {
+    $type?: string
+    alt: string
+    src?: string
+    aspectRatio?: AspectRatio
+}
+
 export type SignedMessageView = {
     $type?: string
     uri: string
diff --git a/src/lib/wscontext.svelte.ts b/src/lib/wscontext.svelte.ts
index 45503d4..2ff3647 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, ImageView } from "./types"
+import type { 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'
 
@@ -32,7 +32,7 @@ export class WSContext {
     items: Array<Item> = $state(new Array())
     orphanedSignets: Map<string, SignetView> = new Map()
     orphanedMessages: Map<string, MessageView> = new Map()
-    orphanedImages: Map<string, ImageView> = new Map()
+    orphanedMedias: Map<string, MediaView> = new Map()
     log: Array<LogItem> = $state(new Array())
     topic: string = $state("")
     connected: boolean = $state(false)
@@ -88,7 +88,7 @@ export class WSContext {
         connectTo(url, this)
         this.items = []
         this.orphanedMessages = new Map()
-        this.orphanedImages = new Map()
+        this.orphanedMedias = new Map()
         this.orphanedSignets = new Map()
         this.mySignet = undefined
         this.myID = undefined
@@ -102,7 +102,7 @@ export class WSContext {
         this.ls = null
         this.items = []
         this.orphanedMessages = new Map()
-        this.orphanedImages = new Map()
+        this.orphanedMedias = new Map()
         this.orphanedSignets = new Map()
         this.mySignet = undefined
         this.myID = undefined
@@ -331,7 +331,7 @@ 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
+            return isImage(item) && item.id === id ? { ...item, active: false, alt: alt, src: contentAddress } : item
         })
     }
 
@@ -393,17 +393,17 @@ export class WSContext {
                 this.orphanedMessages.delete(signet.uri)
                 return
             }
-            const oi = this.orphanedImages.get(signet.uri)
+            const oi = this.orphanedMedias.get(signet.uri)
             if (oi !== undefined) {
                 console.log("comse orphan logic 2")
-                const image = makeImageFromSignetAndImageViews(oi, signet)
+                const image = makeImageFromSignetAndImageMediaViews(oi, signet)
                 const idx = this.items.findIndex(item => item.id > signet.lrcId)
                 if (idx === -1) {
                     this.items.push(image)
                 } else {
                     this.items = [...this.items.slice(0, idx), image, ...this.items.slice(idx)]
                 }
-                this.orphanedImages.delete(signet.uri)
+                this.orphanedMedias.delete(signet.uri)
                 return
             }
             this.orphanedSignets.set(signet.uri, signet)
@@ -440,6 +440,36 @@ export class WSContext {
         }
     }
 
+    verifyImageMediaView = (media: MediaView) => {
+        console.log("now we are verifying!")
+        console.log(media.signetURI)
+        const arrayIdx = this.items.findIndex(item => item.signetView?.uri === media.signetURI && item.signetView?.authorHandle === media.author.handle)
+        if (arrayIdx !== -1) {
+            console.log("found appropriate message c:")
+            this.items = this.items.map((item: Item) => {
+                return item.signetView?.uri === media.signetURI && isMessage(item) ?
+                    { ...makeImageFromSignetAndImageMediaViews(media, item.signetView), body: item.body, mine: item.mine } : item
+            })
+        }
+        else {
+            console.log("couldn't find appropriate message :c")
+            const os = this.orphanedSignets.get(media.signetURI)
+            if (os !== undefined) {
+                console.log("some orphan logic")
+                const m = makeImageFromSignetAndImageMediaViews(media, os)
+                const idx = this.items.findIndex(item => item.id > os.lrcId)
+                if (idx === -1) {
+                    this.items.push(m)
+                } else {
+                    this.items = [...this.items.slice(0, idx), m, ...this.items.slice(idx)]
+                }
+                this.orphanedSignets.delete(os.uri)
+            } else {
+                this.orphanedMedias.set(media.signetURI, media)
+            }
+        }
+    }
+
     pushToLog = (id: number, ba: Uint8Array, type: string) => {
         const bstring = Array.from(ba).map(byte => byte.toString(16).padStart(2, "0")).join('')
         const time = Date.now()
@@ -471,7 +501,7 @@ const makeMessageFromSignetAndMessageViews = (m: MessageView, s: SignetView): Me
     }
 }
 
-const makeImageFromSignetAndImageViews = (i: ImageView, s: SignetView): Image => {
+const makeImageFromSignetAndImageMediaViews = (i: MediaView, s: SignetView): Image => {
     return {
         type: 'image',
         uri: i.uri,
@@ -479,7 +509,9 @@ const makeImageFromSignetAndImageViews = (i: ImageView, s: SignetView): Image =>
         active: false,
         mine: false,
         muted: false,
-        //image: fetch(i.imageUri)
+        malt: i.imageView?.alt,
+        ...(i.imageView?.src && { msrc: i.imageView.src }),
+        ...(i.imageView?.aspectRatio && { maspectRatio: i.imageView.aspectRatio }),
         ...(i.nick && { nick: i.nick }),
         ...(i.color && { color: i.color }),
         handle: i.author.handle,
@@ -604,6 +636,40 @@ const parseLexStreamEvent = (event: MessageEvent<any>, ctx: WSContext) => {
             })
             return
         }
+        case "org.xcvr.lrc.defs#mediaView": {
+            console.log("parsing media!!!")
+            const uri = lex.uri
+            const author = {
+                did: lex.author.did,
+                handle: lex.author.handle,
+                ...(lex.author.displayName && { displayName: lex.author.displayName }),
+                ...(lex.author.status && { status: lex.author.status }),
+                ...(lex.author.color && { color: lex.author.color }),
+                ...(lex.author.avatar && { avatar: lex.author.avatar }),
+            }
+            var imageView: ImageView | undefined
+            if (lex.imageView) {
+                imageView = {
+                    alt: lex.imageView.alt,
+                    ...(lex.imageView.src && { src: lex.imageView.src }),
+                    ...(lex.imageView.aspectRatio && { aspectRatio: lex.imageView.aspectRatio }),
+                }
+            }
+            const nick = lex.nick
+            const color = lex.color
+            const signetURI = lex.signetURI
+            const postedAt = lex.postedAt
+            ctx.verifyImageMediaView({
+                uri: uri,
+                author: author,
+                ...(imageView && { imageView: imageView }),
+                ...(nick && { nick: nick }),
+                ...(color && { color: color }),
+                ...(signetURI && { signetURI: signetURI }),
+                ...(postedAt && { postedAt: postedAt }),
+            })
+            return
+        }
     }
 }
 
-- 
2.51.2