antisocial/src/render/post.ts

import { proxyUrlFor } from '../media/registry.ts';
import { anchorOf, type Media, type Post, type Segment } from '../types.ts';
import { html, raw, type Raw } from './html.ts';
import { badge, layout, originalUrlBlock } from './layout.ts';
import { linkify } from './text.ts';

function aspect(item: Media): string {
  return item.width && item.height ? `aspect-ratio: ${item.width} / ${item.height};` : '';
}

function renderItem(item: Media, index: number): Raw {
  const src = proxyUrlFor(item);

  if (item.kind === 'video') {
    const poster = item.poster ? proxyUrlFor(item.poster) : undefined;
    return html`<figure class="item item--video" data-index="${index}" style="${aspect(item)}">
      <video
        controls
        playsinline
        preload="metadata"
        ${poster ? html`poster="${poster}"` : ''}
      ><source src="${src}"></video>
      ${item.hls
        ? html`<figcaption class="item__note">Streaming format — plays natively in Safari.</figcaption>`
        : ''}
    </figure>`;
  }

  return html`<figure class="item item--image" data-index="${index}" style="${aspect(item)}">
    <img
      src="${src}"
      alt="${item.alt ?? ''}"
      loading="${index === 0 ? 'eager' : 'lazy'}"
      decoding="async"
    >
  </figure>`;
}

function renderMedia(media: Media[]): Raw {
  if (media.length === 0) return html``;

  const many = media.length > 1;
  return html`<section class="media" data-count="${media.length}">
    ${many
      ? html`<div class="media__bar">
          <span class="media__count"><span class="media__at">1</span> / ${media.length}</span>
          <div class="media__views" role="group" aria-label="Layout">
            <button type="button" class="media__view" data-view="swipe" aria-pressed="true">Swipe</button>
            <button type="button" class="media__view" data-view="grid" aria-pressed="false">Grid</button>
          </div>
        </div>`
      : ''}
    <div class="media__rail">${media.map((item, index) => renderItem(item, index))}</div>
  </section>`;
}

function renderText(segment: Segment, post: Post): Raw {
  if (!segment.text) return html``;
  return html`<div class="text">${linkify(segment.text, post.platform)}</div>`;
}

function renderWhen(postedAt: string | undefined): Raw {
  if (!postedAt) return html``;
  const date = new Date(postedAt);
  if (Number.isNaN(date.getTime())) return html``;
  return html`<time datetime="${date.toISOString()}">${date.toLocaleString('en-CA', {
    dateStyle: 'medium',
    timeStyle: 'short',
  })}</time>`;
}

/**
 * One post in the chain. When there is only one, the wrapper is invisible;
 * when there are several, each is separated and the one that was actually
 * linked is marked, since it may not be the first.
 */
function renderSegment(segment: Segment, post: Post, threaded: boolean): Raw {
  const above = post.textPosition === 'above';
  return html`<section class="segment" ${threaded && segment.isAnchor ? raw('data-anchor="true"') : ''}>
    ${threaded && segment.isAnchor
      ? html`<p class="segment__mark">the post you followed</p>`
      : ''}
    ${above ? renderText(segment, post) : ''}
    ${renderMedia(segment.media)}
    ${above ? '' : renderText(segment, post)}
  </section>`;
}

export function renderPost(post: Post): string {
  const avatar = post.author.avatar ? proxyUrlFor(post.author.avatar) : undefined;
  const threaded = post.segments.length > 1;
  const anchor = anchorOf(post);

  const body = html`<article class="post" data-platform="${post.platform}" ${
    threaded ? raw(`data-segments="${post.segments.length}"`) : ''
  }>
    <header class="post__head">
      ${badge(post.platform, post.platformLabel)}
      <div class="who">
        ${avatar ? html`<img class="who__avatar" src="${avatar}" alt="" loading="lazy">` : ''}
        <div class="who__names">
          ${post.author.displayName ? html`<span class="who__name">${post.author.displayName}</span>` : ''}
          <span class="who__handle">${post.author.handle}</span>
        </div>
      </div>
    </header>

    ${post.segments.map((segment) => renderSegment(segment, post, threaded))}

    <footer class="post__foot">
      ${renderWhen(anchor?.postedAt)}
      ${originalUrlBlock(post.originalUrl, post.platformLabel)}
    </footer>
  </article>`;

  const who = post.author.displayName ?? post.author.handle;
  return layout(`${who} on ${post.platformLabel}`, body);
}