Function MediaLibrary

web/components/MediaLibrary.tsx:37–139

()

}

export function MediaLibrary() {
  const open = useStory((s) => s.mediaLibraryOpen)
  const toggle = useStory((s) => s.toggleMediaLibrary)
  const renderJobs = useStory((s) => s.renderJobs)
  const openStoryPlayer = useStory((s) => s.openStoryPlayer)
  const removeRenderJob = useStory((s) => s.removeRenderJob)

  if (!open) return null

  const completed = renderJobs.filter((j) => j.status === 'done' && j.url)
  const byBucket: Record<Bucket, RenderJob[]> = { reel: [], intro: [], audiobook: [] }
  for (const j of completed) byBucket[bucketOf(j)].push(j)
  // Newest first within each bucket — most recent render at the top.
  for (const k of ['reel', 'intro', 'audiobook'] as Bucket[]) {
    byBucket[k].sort((a, b) => b.startedAt - a.startedAt)
  }

  return (
    <div
      className="fixed right-6 bottom-[72px] z-40 flex max-h-[80vh] w-[420px] flex-col border backdrop-blur"
      style={{
        background: 'rgba(10, 13, 18, 0.97)',
        borderColor: 'var(--line)',
        boxShadow: '0 24px 64px rgba(0,0,0,0.6)',
      }}
    >
      <div
        className="sticky top-0 flex shrink-0 items-center justify-between gap-3 border-b border-[var(--line)] px-4 py-2.5"
        style={{ background: 'rgba(10, 13, 18, 0.98)' }}
      >
        <div className="flex items-center gap-2">
          <Film size={11} strokeWidth={1.8} style={{ color: '#4fc3f7' }} />
          <span className="font-display text-[12px] uppercase tracking-[0.32em]" style={{ color: '#4fc3f7' }}>
            Library
          </span>
        </div>
        <button
          onClick={toggle}
          aria-label="Close media library"
          className="transition-colors"
          style={{ color: INK_SOFT }}
          onMouseEnter={(e) => { e.currentTarget.style.color = INK_BRIGHT }}
          onMouseLeave={(e) => { e.currentTarget.style.color = INK_SOFT }}
        >
          <X size={14} strokeWidth={1.5} />
        </button>
      </div>

      {completed.length === 0 ? (
        <div className="flex-1 px-5 py-10 text-center">
          <Film size={20} strokeWidth={1.5} className="mx-auto mb-3" style={{ color: INK_SOFT }} />
          <div className="font-mono text-[10.5px] uppercase tracking-[0.24em]" style={{ color: INK_MED }}>
            no media yet
          </div>
          <div className="mt-2 text-[11px] leading-[1.55]" style={{ color: INK_SOFT }}>
            Click the Storybook button on any story beat — when the render
            finishes it lands here automatically.
          </div>