imeta parsing, kind 20 support

Author: mmalmi

src/shared/components/embed/media/ImageComponent.tsx

@@ -2,6 +2,7 @@ import {calculateDimensions, generateBlurhashUrl} from "./mediaUtils"
 import {useState, MouseEvent, useMemo, memo} from "react"
 import ProxyImg from "../../ProxyImg"
 import classNames from "classnames"
+import {parseImetaTag} from "@/shared/utils/imetaUtils"
 
 interface ImageComponentProps {
   match: string
@@ -20,14 +21,15 @@ const ImageComponent = ({
 }: ImageComponentProps) => {
   const [hasError, setHasError] = useState(false)
 
-  // Extract dimensions from imeta tag if available
-  const dimensions = imeta?.find((tag) => tag.startsWith("dim "))?.split(" ")[1]
-  const [originalWidth, originalHeight] = dimensions
-    ? dimensions.split("x").map(Number)
-    : [null, null]
+  // Parse imeta data
+  const imetaData = useMemo(() => {
+    if (!imeta) return undefined
+    return parseImetaTag(imeta)
+  }, [imeta])
 
-  // Extract blurhash from imeta tag if available
-  const blurhash = imeta?.find((tag) => tag.startsWith("blurhash "))?.split(" ")[1]
+  const originalWidth = imetaData?.width || null
+  const originalHeight = imetaData?.height || null
+  const blurhash = imetaData?.blurhash
 
   const calculatedDimensions = calculateDimensions(
     originalWidth,
@@ -49,7 +51,7 @@ const ImageComponent = ({
   return (
     <div
       className={classNames("flex justify-center items-center my-2", {
-        "h-[600px]": limitHeight || !dimensions,
+        "h-[600px]": limitHeight || !originalWidth || !originalHeight,
       })}
     >
       {hasError ? (
@@ -72,8 +74,9 @@ const ImageComponent = ({
             onClick={onClick}
             className={classNames("my-2 max-w-full cursor-pointer object-contain", {
               "blur-md": blur,
-              "h-full max-h-[600px]": limitHeight || !dimensions,
-              "max-h-[90vh] lg:max-h-[600px]": !limitHeight && dimensions,
+              "h-full max-h-[600px]": limitHeight || !originalWidth || !originalHeight,
+              "max-h-[90vh] lg:max-h-[600px]":
+                !limitHeight && originalWidth && originalHeight,
             })}
             style={{
               ...calculatedDimensions,

src/shared/components/embed/media/SmallThumbnailComponent.tsx

@@ -6,6 +6,7 @@ import classNames from "classnames"
 import {EmbedEvent} from "../index"
 import {generateBlurhashUrl, calculateDimensions, getAllEventMedia} from "./mediaUtils"
 import MediaModal from "../../media/MediaModal"
+import {getImetaDataForUrl} from "@/shared/utils/imetaUtils"
 
 interface SmallThumbnailComponentProps {
   match: string
@@ -22,30 +23,22 @@ function SmallThumbnailComponent({match, event}: SmallThumbnailComponentProps) {
   const [error, setError] = useState(false)
   const [showModal, setShowModal] = useState(false)
 
-  // Extract imeta tag for this URL
-  const imetaTag = useMemo(() => {
-    if (!event?.tags) return undefined
-    return event.tags.find(
-      (tag) => tag[0] === "imeta" && tag[1] && tag[1].includes(match)
-    )
-  }, [event?.tags, match])
+  // Extract imeta data for this URL using utility
+  const imetaData = useMemo(() => {
+    if (!event) return undefined
+    return getImetaDataForUrl(event, match)
+  }, [event, match])
 
-  // Extract dimensions from imeta tag if available
-  const dimensions = imetaTag?.find((tag) => tag.startsWith("dim "))?.split(" ")[1]
-  const [originalWidth, originalHeight] = dimensions
-    ? dimensions.split("x").map(Number)
-    : [null, null]
-
-  // Extract blurhash from imeta tag if available
-  const blurhash = imetaTag?.find((tag) => tag.startsWith("blurhash "))?.split(" ")[1]
+  const originalWidth = imetaData?.width || null
+  const originalHeight = imetaData?.height || null
+  const blurhash = imetaData?.blurhash
 
   // Extract alt text from imeta name field and truncate it
   const altText = useMemo(() => {
-    const namePart = imetaTag?.find((tag) => tag.startsWith("name "))
-    if (!namePart) return "thumbnail"
-    const name = namePart.substring(5) // Remove "name " prefix
+    const name = imetaData?.name || imetaData?.alt
+    if (!name) return "thumbnail"
     return name.length > 30 ? name.substring(0, 30) + "..." : name
-  }, [imetaTag])
+  }, [imetaData])
 
   // Generate blurhash URL for placeholder (use original dimensions for better aspect ratio)
   const blurhashDimensions =

src/shared/components/embed/media/VideoComponent.tsx

@@ -4,6 +4,7 @@ import {generateProxyUrl} from "../../../utils/imgproxy"
 import {useSettingsStore} from "@/stores/settings"
 import classNames from "classnames"
 import {EmbedEvent} from "../index"
+import {parseImetaTag} from "@/shared/utils/imetaUtils"
 
 interface HlsVideoComponentProps {
   match: string
@@ -33,14 +34,15 @@ function HlsVideoComponent({
         event?.tags.some((t) => t[0] === "content-warning"))
   )
 
-  // Extract dimensions from imeta tag if available
-  const dimensions = imeta?.find((tag) => tag.startsWith("dim "))?.split(" ")[1]
-  const [originalWidth, originalHeight] = dimensions
-    ? dimensions.split("x").map(Number)
-    : [null, null]
+  // Parse imeta data
+  const imetaData = useMemo(() => {
+    if (!imeta) return undefined
+    return parseImetaTag(imeta)
+  }, [imeta])
 
-  // Extract blurhash from imeta tag if available
-  const blurhash = imeta?.find((tag) => tag.startsWith("blurhash "))?.split(" ")[1]
+  const originalWidth = imetaData?.width || null
+  const originalHeight = imetaData?.height || null
+  const blurhash = imetaData?.blurhash
 
   const calculatedDimensions = calculateDimensions(
     originalWidth,
@@ -110,7 +112,7 @@ function HlsVideoComponent({
   return (
     <div
       className={classNames("relative w-full justify-center flex object-contain my-2", {
-        "h-[600px]": limitHeight || !dimensions,
+        "h-[600px]": limitHeight || !originalWidth || !originalHeight,
       })}
     >
       <video
@@ -128,8 +130,8 @@ function HlsVideoComponent({
         ref={videoRef}
         className={classNames("max-w-full object-contain", {
           "blur-xl": blur,
-          "h-full max-h-[600px]": limitHeight || !dimensions,
-          "max-h-[90vh] lg:h-[600px]": !limitHeight && dimensions,
+          "h-full max-h-[600px]": limitHeight || !originalWidth || !originalHeight,
+          "max-h-[90vh] lg:h-[600px]": !limitHeight && originalWidth && originalHeight,
         })}
         style={{
           ...calculatedDimensions,

src/shared/components/event/FeedItem/FeedItemContent.tsx

@@ -10,11 +10,13 @@ import {
   KIND_LONG_FORM_CONTENT,
   KIND_CLASSIFIED,
   KIND_CHANNEL_CREATE,
+  KIND_PICTURE_FIRST,
 } from "@/utils/constants"
 import Zapraiser from "../Zapraiser.tsx"
 import Highlight from "../Highlight.tsx"
 import TextNote from "../TextNote.tsx"
 import LongForm from "../LongForm.tsx"
+import PictureFirst from "../PictureFirst.tsx"
 import {memo} from "react"
 
 type ContentProps = {
@@ -60,6 +62,8 @@ const FeedItemContent = ({event, referredEvent, standalone, truncate}: ContentPr
     )
   } else if (event.kind === KIND_CHANNEL_CREATE) {
     return <ChannelCreation event={event} />
+  } else if (event.kind === KIND_PICTURE_FIRST) {
+    return <PictureFirst event={event} truncate={truncate} standalone={standalone} />
   } else {
     return <TextNote event={event} truncate={truncate} />
   }

src/shared/components/event/PictureFirst.tsx

@@ -0,0 +1,42 @@
+import {NDKEvent} from "@nostr-dev-kit/ndk"
+import {memo} from "react"
+import Carousel from "../embed/media/Carousel"
+import HyperText from "../HyperText"
+import {extractImetaImages} from "@/shared/utils/imetaUtils"
+
+interface PictureFirstProps {
+  event: NDKEvent
+  truncate?: number
+  standalone?: boolean
+}
+
+const PictureFirst = ({event, truncate = 0, standalone}: PictureFirstProps) => {
+  // Extract images from imeta tags
+  const images = extractImetaImages(event)
+
+  // Get title from title tag if present
+  const title = event.tagValue("title")
+
+  return (
+    <div className="w-full">
+      {/* Show images first as carousel if multiple, single if one */}
+      {images.length > 0 && <Carousel media={images} event={event} />}
+
+      {/* Show title if present */}
+      {title && (
+        <div className="px-4 mb-2">
+          <h3 className="text-lg font-semibold">{title}</h3>
+        </div>
+      )}
+
+      {/* Show content if present */}
+      {event.content && (
+        <HyperText event={event} truncate={truncate} expandable={!standalone}>
+          {event.content}
+        </HyperText>
+      )}
+    </div>
+  )
+}
+
+export default memo(PictureFirst)

src/shared/components/feed/FeedEditor.tsx

@@ -250,7 +250,7 @@ function FeedEditor({
         <span className="text-sm text-base-content/70 min-w-[7rem] pt-2">
           Event Kinds
         </span>
-        <div className="flex-1">
+        <div className="flex-1 overflow-hidden">
           <EventKindsSelector
             selectedKinds={localConfig.filter?.kinds || []}
             onKindsChange={(kinds) => {

src/shared/components/feed/ImageGridItem.tsx

@@ -14,6 +14,8 @@ import ProxyImg from "../ProxyImg"
 import Icon from "../Icons/Icon"
 import {LRUCache} from "typescript-lru-cache"
 import {ndk} from "@/utils/ndk"
+import {KIND_PICTURE_FIRST} from "@/utils/constants"
+import {extractImetaImages} from "@/shared/utils/imetaUtils"
 
 interface ImageGridItemProps {
   event: NDKEvent | {id: string}
@@ -149,10 +151,17 @@ const ImageGridItem = memo(function ImageGridItem({
   const videoMatch = event?.content.match(VIDEO_REGEX)?.[0]
 
   const urls = useMemo(() => {
+    // For kind 20 events, extract images from imeta tags
+    if (event?.kind === KIND_PICTURE_FIRST) {
+      const images = extractImetaImages(event)
+      return images.map((img) => img.url)
+    }
+
+    // For other events, extract from content
     return imageMatch
       ? imageMatch.trim().split(/\s+/)
       : videoMatch?.trim().split(/\s+/) || []
-  }, [imageMatch, videoMatch])
+  }, [imageMatch, videoMatch, event?.kind, event?.tags])
 
   // Use smaller sizes for better mobile performance
   const isMobile = window.innerWidth <= 767
@@ -226,7 +235,13 @@ const ImageGridItem = memo(function ImageGridItem({
     return <div className="aspect-square bg-neutral-300 animate-pulse" />
   }
 
-  if (event.kind !== 30402 && !hasImageOrVideo(event.content)) {
+  // Always show kind 20 (picture-first) and kind 30402 (market listings)
+  // For other kinds, check if content has media
+  if (
+    event.kind !== KIND_PICTURE_FIRST &&
+    event.kind !== 30402 &&
+    !hasImageOrVideo(event.content)
+  ) {
     return null
   }
 
@@ -240,7 +255,11 @@ const ImageGridItem = memo(function ImageGridItem({
   }
 
   return urls.map((url, i) => {
-    const isVideo = !imageMatch
+    // For kind 20 events, all media are images (not videos)
+    // For other events, check if it's a video URL
+    const isVideo =
+      event?.kind !== KIND_PICTURE_FIRST &&
+      (videoMatch?.includes(url) || (!imageMatch && videoMatch))
     const hasError = loadErrors[i]
 
     const shouldBlur =

src/shared/components/feed/notificationsSubscription.ts

@@ -8,6 +8,14 @@ import {useNotificationsStore} from "@/stores/notifications"
 import debounce from "lodash/debounce"
 import {ndk} from "@/utils/ndk"
 import {NDKEvent, NDKSubscription} from "@nostr-dev-kit/ndk"
+import {
+  KIND_REACTION,
+  KIND_REPOST,
+  KIND_TEXT_NOTE,
+  KIND_ZAP_RECEIPT,
+  KIND_HIGHLIGHT,
+  KIND_PICTURE_FIRST,
+} from "@/utils/constants"
 
 let sub: NDKSubscription | undefined
 
@@ -17,11 +25,12 @@ export const startNotificationsSubscription = debounce((myPubKey?: string) => {
   sub?.stop()
 
   const kinds: number[] = [
-    7, // reactions
-    6, // reposts
-    1, // replies
-    9735, // zap receipts
-    9802, // highlights
+    KIND_REACTION,
+    KIND_REPOST,
+    KIND_TEXT_NOTE, // replies
+    KIND_ZAP_RECEIPT,
+    KIND_HIGHLIGHT,
+    KIND_PICTURE_FIRST, // when tagged
   ]
 
   const filters = {
@@ -38,7 +47,7 @@ export const startNotificationsSubscription = debounce((myPubKey?: string) => {
   const hideEventsByUnknownUsers = settings.content?.hideEventsByUnknownUsers
 
   sub.on("event", async (event: NDKEvent) => {
-    if (event.kind !== 9735) {
+    if (event.kind !== KIND_ZAP_RECEIPT) {
       // allow zap notifs from self & unknown users
       if (event.pubkey === myPubKey) return
       if (hideEventsByUnknownUsers && socialGraph().getFollowDistance(event.pubkey) > 5)
@@ -65,24 +74,27 @@ export const startNotificationsSubscription = debounce((myPubKey?: string) => {
           content: event.content,
           tags: event.tags,
         } as IrisNotification)
-      const user = event.kind === 9735 ? getZappingUser(event) : event.pubkey
+      const user = event.kind === KIND_ZAP_RECEIPT ? getZappingUser(event) : event.pubkey
       if (!user) {
         console.warn("no user for event", event)
         return
       }
       const existing = notification.users.get(user)
       if (!existing || existing.time < event.created_at) {
         let content: string | undefined = undefined
-        if (event.kind === 1) {
+        if (event.kind === KIND_TEXT_NOTE) {
           // Text note (reply) content
           content = event.content
-        } else if (event.kind === 7) {
+        } else if (event.kind === KIND_REACTION) {
           // Reaction content (emoji)
           content = event.content
-        } else if (event.kind === 9735) {
+        } else if (event.kind === KIND_ZAP_RECEIPT) {
           // Zap receipt - extract zap amount
           const zapAmount = await getZapAmount(event)
           content = zapAmount > 0 ? zapAmount.toString() : undefined
+        } else if (event.kind === KIND_PICTURE_FIRST) {
+          // Picture-first post content
+          content = event.content
         }
 
         notification.users.set(user, {
@@ -93,9 +105,12 @@ export const startNotificationsSubscription = debounce((myPubKey?: string) => {
       if (event.created_at > notification.time) {
         notification.time = event.created_at
         // Update notification content with the latest reply/reaction
-        if (event.kind === 1 && event.content) {
+        if (event.kind === KIND_TEXT_NOTE && event.content) {
           // For text notes (replies), update the notification content to show the latest reply
           notification.content = event.content
+        } else if (event.kind === KIND_PICTURE_FIRST && event.content) {
+          // For picture-first posts, update the notification content
+          notification.content = event.content
         }
       }
 

src/shared/components/ui/EventKindsSelector.tsx

@@ -50,8 +50,8 @@ function EventKindsSelector({
   }
 
   return (
-    <div className={`flex flex-col gap-2 ${className}`}>
-      <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-2 flex-1">
+    <div className={`flex flex-col gap-2 w-full ${className}`}>
+      <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-2 w-full">
         {/* Custom event kind input */}
         {showCustomInput ? (
           <div className="flex items-center gap-1 flex-shrink-0">
@@ -128,6 +128,9 @@ function EventKindsSelector({
             </button>
           )
         })}
+
+        {/* Spacer to ensure last item is fully visible */}
+        <div className="min-w-[1rem] flex-shrink-0" />
       </div>
     </div>
   )