M7: Social Media

// v1: the feed as a paged list with ids, hydrated enough for first paint; the client keeps pages coherent and offers new content at the top
const feed = useInfiniteQuery({
  queryKey: ['feed', { tab }], queryFn: ({ pageParam, signal }) => api.feed.page({ cursor: pageParam, limit: 20 }, { signal }),
  initialPageParam: undefined, getNextPageParam: last => last.nextCursor ?? undefined,
  staleTime: 5 * 60_000,                 // this session's pages are a snapshot; new content is an offer, not a splice
})
const ids = useMemo(() => feed.data?.pages.flatMap(p => p.items.map(i => i.id)) ?? [], [feed.data])
// "N new posts": a cheap head check with the first page's top cursor, polled or pushed
const { data: newer } = useQuery({ queryKey: ['feed', 'newer', topCursor], queryFn: () => api.feed.countSince(topCursor), refetchInterval: 60_000, enabled: !!topCursor })
// on tap: feed.refetch({ refetchPage: (_, i) => i === 0 }) and scroll to top; or reset the query and let the first page reload
// each item: { id, author: { id, handle, avatar: { url, w, h } }, text, media: [{ url, w, h, kind, poster? }], counts, me: { liked, reposted } }
// the entity cache (v3) is fed from every page: upsert posts and users by id; the list keeps ids; rows read entities

// v2: one video plays: the most visible. a single controller over observer ratios; rows register and unregister
const ratios = new Map<HTMLVideoElement, number>()
const io = new IntersectionObserver(entries => {
  for (const e of entries) ratios.set(e.target as HTMLVideoElement, e.intersectionRatio)
  let best: HTMLVideoElement | null = null, bestR = 0.5                   // must be at least half visible to play
  for (const [v, r] of ratios) if (r > bestR) { best = v; bestR = r }
  for (const [v] of ratios) {
    if (v === best) { if (v.paused) v.play().catch(() => {}) }            // muted autoplay; play() may reject: ignore
    else if (!v.paused) v.pause()
  }
}, { threshold: [0, 0.25, 0.5, 0.75, 1] })
export function useFeedVideo(ref: RefObject<HTMLVideoElement>) {
  useEffect(() => {
    const v = ref.current; if (!v) return
    io.observe(v); ratios.set(v, 0)
    return () => { io.unobserve(v); ratios.delete(v); v.pause(); v.removeAttribute('src'); v.load() }   // release the decoder on unmount (iOS)
  }, [ref])
}
// posters from the payload; manifests prefetched for the next screen's videos on fast connections only (navigator.connection?.effectiveType === '4g' && !saveData)