Images and media

import {
  SeedImage,
  useEnsureLocalImage,
  useResolvedMediaRef,
  SeedMediaImage,
  SeedMediaVideo,
  SeedMediaAudio,
  SeedMediaFile,
  SeedHtml,
  attachArweaveLoadFailover,
  SeedJson,
  formatSeedJson,
  useNormalizedFeedItemFields,
} from '@seedprotocol/react'

type SeedImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
  imageProperty: IItemProperty<any>
  width?: number
  height?: number
  filename?: string
  ensure?: boolean
}

import { SeedImage, useItemProperty } from '@seedprotocol/react'

function PostCover({ seedLocalId }: { seedLocalId: string }) {
  const { property } = useItemProperty({ seedLocalId, propertyName: 'cover' })
  if (!property) return null

  return (
    <SeedImage
      imageProperty={property}
      width={760}
      alt="Cover image"
      style={{ width: 760, maxWidth: '100%' }}
    />
  )
}

function useEnsureLocalImage(params: {
  imageProperty: IItemProperty<any>
  filename?: string
  width?: number
  enabled?: boolean
}): {
  status: 'idle' | 'loading' | 'ready' | 'unsupported' | 'failed' | 'missing-id'
  gatewayHref: string | undefined
  gatewayHrefs: string[]
  onGatewayError: () => void
  result: EnsureImageLocalResult | null
}

import type { IItemProperty } from '@seedprotocol/sdk'
import { SeedImage, useEnsureLocalImage, useItemProperty } from '@seedprotocol/react'

function Cover({ seedLocalId }: { seedLocalId: string }) {
  const { property } = useItemProperty({ seedLocalId, propertyName: 'cover' })
  // The hook needs a property; while there's none, `enabled: false` keeps it idle.
  const imageProperty = property as IItemProperty<any>
  const { status, gatewayHref, onGatewayError } = useEnsureLocalImage({
    imageProperty,
    width: 1024,
    enabled: !!property,
  })

  if (property && status === 'ready') {
    return <SeedImage imageProperty={imageProperty} width={1024} ensure={false} alt="Cover" />
  }
  if (gatewayHref) {
    return <img src={gatewayHref} onError={onGatewayError} alt="Cover (loading from Arweave)" />
  }
  return <p>{status === 'failed' ? 'Image unavailable' : 'Loading image…'}</p>
}

function useResolvedMediaRef(params: {
  value: string | undefined | null
  enabled?: boolean
  treatAs?: 'arweaveTx' | 'seedUid' | 'url'
}): {
  href: string | undefined
  status: 'idle' | 'loading' | 'ready' | 'empty' | 'unresolved' | 'error'
  source: 'direct' | 'gateway' | 'localBlob' | undefined
  error: Error | null
  result: ResolveMediaRefResult | null
  refetch: () => void
}

import { useResolvedMediaRef } from '@seedprotocol/react'

function EnclosureLink({ value }: { value: string }) {
  const { href, status } = useResolvedMediaRef({ value })
  if (status === 'loading') return <span>…</span>
  if (!href) return <span>Media unavailable</span>
  return <a href={href}>Open media</a>
}

type SeedMediaImageProps = Omit<ImgProps, 'src'> & MediaProps<ImgProps & { src: string }>
type SeedMediaVideoProps = Omit<VideoProps, 'src'> & MediaProps<VideoProps & { src: string }>
type SeedMediaAudioProps = Omit<AudioProps, 'src'> & MediaProps<AudioProps & { src: string }>
type SeedMediaFileProps = Omit<AnchorProps, 'href'> &
  MediaProps<AnchorProps & { href: string }> & { download?: string | boolean }

type MediaProps<P> = {
  value: string | undefined | null
  enabled?: boolean
  treatAs?: 'arweaveTx' | 'seedUid' | 'url'
  render?: (props: P) => React.ReactNode
}

import { SeedMediaAudio, SeedMediaFile, SeedMediaImage, SeedMediaVideo } from '@seedprotocol/react'

function Enclosures({ image, video, audio, pdf }: Record<'image' | 'video' | 'audio' | 'pdf', string>) {
  return (
    <>
      <SeedMediaImage value={image} alt="Episode artwork" width={320} />
      <SeedMediaVideo value={video} preload="metadata" />
      <SeedMediaAudio value={audio} />
      <SeedMediaFile value={pdf} download>
        Download transcript
      </SeedMediaFile>
    </>
  )
}

type SeedHtmlProps = Omit<DivProps, 'dangerouslySetInnerHTML' | 'children'> & {
  html: string | null | undefined
  sanitize: (raw: string) => string
  render?: (props: { html: string }) => React.ReactNode
}

import DOMPurify from 'dompurify'
import { SeedHtml, useItemProperty } from '@seedprotocol/react'

const sanitize = (raw: string) => DOMPurify.sanitize(raw)

function PostBody({ seedLocalId }: { seedLocalId: string }) {
  const { property } = useItemProperty({ seedLocalId, propertyName: 'body' })
  const html = property?.value != null ? String(property.value) : undefined

  return <SeedHtml className="prose" html={html} sanitize={sanitize} />
}

function attachArweaveLoadFailover(container: HTMLElement): () => void

import { useEffect, useRef } from 'react'
import DOMPurify from 'dompurify'
import { SeedHtml, attachArweaveLoadFailover } from '@seedprotocol/react'

const sanitize = (raw: string) => DOMPurify.sanitize(raw)

function ArticleBody({ html }: { html: string }) {
  const ref = useRef<HTMLElement>(null)
  useEffect(() => (ref.current ? attachArweaveLoadFailover(ref.current) : undefined), [])
  return <article ref={ref} dangerouslySetInnerHTML={{ __html: html }} />
}

export function Article({ html }: { html: string | undefined }) {
  return <SeedHtml html={html} sanitize={sanitize} render={(props) => <ArticleBody html={props.html} />} />
}

type SeedJsonProps = Omit<PreProps, 'children' | 'dangerouslySetInnerHTML'> & {
  value: unknown
  format?: (value: unknown) => string
  formatOptions?: FormatSeedJsonOptions
  render?: (props: { text: string }) => React.ReactNode
}

import { SeedJson, useItemProperty } from '@seedprotocol/react'

function MetadataView({ seedLocalId }: { seedLocalId: string }) {
  const { property } = useItemProperty({ seedLocalId, propertyName: 'metadata' })
  return <SeedJson value={property?.value} formatOptions={{ maxDepth: 4 }} />
}

function formatSeedJson(
  value: unknown,
  options?: { maxDepth?: number; maxStringLength?: number; space?: string | number },
): string

function useNormalizedFeedItemFields(
  item: Record<string, unknown> | null | undefined,
  manifest: FeedFieldManifest,
): Record<string, NormalizedFeedFieldValue | undefined>

type FeedFieldManifest = Record<string, {
  role: 'image' | 'audio' | 'video' | 'file' | 'html' | 'text'
  treatAs?: 'arweaveTx' | 'seedUid' | 'url'
}>

type NormalizedFeedFieldValue =
  | { role: 'image' | 'audio' | 'video' | 'file'; raw: string; classification: MediaRefClassification }
  | { role: 'html'; raw: string }
  | { role: 'text'; raw: string }

import DOMPurify from 'dompurify'
import type { FeedFieldManifest } from '@seedprotocol/sdk'
import { SeedHtml, SeedMediaImage, useNormalizedFeedItemFields } from '@seedprotocol/react'

const sanitize = (raw: string) => DOMPurify.sanitize(raw)

const manifest: FeedFieldManifest = {
  featureImage: { role: 'image' },
  html: { role: 'html' },
  title: { role: 'text' },
}

function FeedEntry({ entry }: { entry: Record<string, unknown> }) {
  const fields = useNormalizedFeedItemFields(entry, manifest)

  return (
    <article>
      <h2>{fields.title?.raw}</h2>
      <SeedMediaImage value={fields.featureImage?.raw} alt="" />
      <SeedHtml html={fields.html?.raw} sanitize={sanitize} />
    </article>
  )
}