@growth-labs/cms 0.1.0

package/src/ui/screens/MediaScreen.tsx

@@ -0,0 +1,357 @@
+// src/ui/screens/MediaScreen.tsx — Media library screen (P7).
+//
+// Media library. Renders the prototype MediaLibrary() grid
+// (proto_e630b6e6.jsx): a grid of media tiles (thumbnail + filename .mono +
+// type .type-tag), under a page-head/page-title "Media", backed entirely by
+// GET /admin/api/media/library?type=<image|video|podcast>.
+//
+// Uploads use the real R2-backed media routes:
+//   image   -> POST /admin/api/media/images
+//   podcast -> POST /admin/api/media/podcast
+//   video   -> /admin/api/media/videos/{init,part,complete}
+//
+// Honesty conventions:
+//   - loading            → "Loading media…"
+//   - fetch failure      → error string + Retry
+//   - items.length === 0 → honest empty state (no mock tiles / placeholder grid)
+//
+// NO mock media rows (the prototype's MEDIA fixture is not used). Thumbnails
+// render the real R2 url when present; non-image kinds and missing urls fall
+// back to a typed placeholder tile.
+//
+// Presentation: Broadsheet idiom — page-head/page-title/page-sub, the .seg
+// segmented kind filter, a .panel tile per asset with the filename in .mono and
+// the asset kind as a .type-tag. Only existing broadsheet.css classes are used;
+// the auto-fill tile grid uses inline `display: grid` exactly as the prototype.
+
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react'
+import { Icon, type IconName } from '../icons.js'
+import { type MediaUploadKind, type MediaUploadResult, uploadMediaAsset } from './media-upload.js'
+
+// ---------------------------------------------------------------------------
+// Kind filter — maps to the listLibrary `type` query param
+// ---------------------------------------------------------------------------
+
+type MediaKind = 'image' | 'video' | 'podcast'
+
+const KIND_FILTERS: Array<{ value: MediaKind; label: string; icon: IconName }> = [
+	{ value: 'image', label: 'Images', icon: 'image' },
+	{ value: 'video', label: 'Video', icon: 'video' },
+	{ value: 'podcast', label: 'Audio', icon: 'waveform' },
+]
+
+const KIND_LABEL: Record<MediaKind, string> = {
+	image: 'image',
+	video: 'video',
+	podcast: 'audio',
+}
+
+const KIND_ICON: Record<MediaKind, IconName> = {
+	image: 'image',
+	video: 'play',
+	podcast: 'waveform',
+}
+
+// ---------------------------------------------------------------------------
+// Data shapes — mirror routes/media.ts listLibrary() item projection
+// ---------------------------------------------------------------------------
+
+interface MediaItem {
+	id: string
+	provider: string
+	keyOrUid: string
+	url: string | null
+	createdAt: number | string | null
+	pinned: boolean
+	name: string
+}
+
+interface LibraryResponse {
+	provider: string
+	q: string
+	limit: number
+	items: MediaItem[]
+}
+
+// ---------------------------------------------------------------------------
+// Reducer
+// ---------------------------------------------------------------------------
+
+interface MediaState {
+	loading: boolean
+	error: string | null
+	items: MediaItem[] | null
+}
+
+type MediaAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; items: MediaItem[] }
+	| { type: 'fetch-error'; error: string }
+
+function init(): MediaState {
+	return { loading: true, error: null, items: null }
+}
+
+function reducer(state: MediaState, action: MediaAction): MediaState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, items: action.items }
+		case 'fetch-error':
+			return { loading: false, error: action.error, items: null }
+		default:
+			return state
+	}
+}
+
+// ---------------------------------------------------------------------------
+// MediaScreen
+// ---------------------------------------------------------------------------
+
+export function MediaScreen() {
+	const [kind, setKind] = useState<MediaKind>('image')
+	const [s, dispatch] = useReducer(reducer, undefined, init)
+	const fileInputRef = useRef<HTMLInputElement>(null)
+	const [uploading, setUploading] = useState(false)
+	const [uploadError, setUploadError] = useState<string | null>(null)
+	const [lastUpload, setLastUpload] = useState<MediaUploadResult | null>(null)
+
+	const fetchLibrary = useCallback(async (k: MediaKind) => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			const res = await fetch(`/admin/api/media/library?type=${k}`)
+			if (!res.ok) {
+				dispatch({ type: 'fetch-error', error: `${res.status} ${res.statusText}` })
+				return
+			}
+			const body = (await res.json()) as LibraryResponse
+			dispatch({ type: 'fetch-ok', items: Array.isArray(body.items) ? body.items : [] })
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	useEffect(() => {
+		void fetchLibrary(kind)
+	}, [fetchLibrary, kind])
+
+	const handleUploadClick = () => {
+		fileInputRef.current?.click()
+	}
+
+	const handleUploadFile = async (file: File | undefined) => {
+		if (!file) return
+		setUploading(true)
+		setUploadError(null)
+		setLastUpload(null)
+		try {
+			const result = await uploadMediaAsset({ kind: kind as MediaUploadKind, file })
+			setLastUpload(result)
+			await fetchLibrary(kind)
+		} catch (err) {
+			setUploadError(err instanceof Error ? err.message : String(err))
+		} finally {
+			setUploading(false)
+			if (fileInputRef.current) fileInputRef.current.value = ''
+		}
+	}
+
+	return (
+		<div className="page page-wide fade-in" style={{ maxWidth: 1340 }}>
+			<div className="page-head">
+				<div>
+					<h1 className="page-title">Media</h1>
+					<div className="page-sub">Browse images, video and audio in the library.</div>
+				</div>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+					<input
+						ref={fileInputRef}
+						type="file"
+						accept={uploadAccept(kind)}
+						style={{ display: 'none' }}
+						onChange={(e) => void handleUploadFile(e.currentTarget.files?.[0])}
+						aria-label={`Upload ${KIND_LABEL[kind]} media`}
+					/>
+					<button
+						type="button"
+						className="btn"
+						onClick={handleUploadClick}
+						disabled={uploading}
+						style={{ opacity: uploading ? 0.65 : 1 }}
+					>
+						<Icon name="upload" size={15} />
+						{uploading ? 'Uploading…' : 'Upload'}
+					</button>
+				</div>
+			</div>
+
+			<div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
+				<div className="seg">
+					{KIND_FILTERS.map((opt) => (
+						<button
+							key={opt.value}
+							type="button"
+							className={kind === opt.value ? 'on' : ''}
+							onClick={() => setKind(opt.value)}
+						>
+							<Icon name={opt.icon} size={14} />
+							{opt.label}
+						</button>
+					))}
+				</div>
+			</div>
+
+			{s.loading && <div style={{ color: 'var(--ink-muted)', fontSize: 14 }}>Loading media…</div>}
+
+			{uploadError && (
+				<div style={{ color: 'var(--red)', fontSize: 13, marginBottom: 12 }}>{uploadError}</div>
+			)}
+
+			{lastUpload && !uploadError && (
+				<div style={{ color: 'var(--ink-muted)', fontSize: 13, marginBottom: 12 }}>
+					Uploaded <span className="mono">{lastUpload.id}</span>
+				</div>
+			)}
+
+			{!s.loading && s.error && (
+				<div style={{ color: 'var(--red)', fontSize: 14, display: 'flex', alignItems: 'center' }}>
+					{s.error}
+					<button
+						type="button"
+						className="btn sm"
+						style={{ marginLeft: 12 }}
+						onClick={() => void fetchLibrary(kind)}
+					>
+						Retry
+					</button>
+				</div>
+			)}
+
+			{!s.loading && !s.error && s.items && <MediaGrid items={s.items} kind={kind} />}
+		</div>
+	)
+}
+
+function uploadAccept(kind: MediaKind): string {
+	if (kind === 'video') return 'video/*,.mp4,.mov,.webm'
+	if (kind === 'podcast') return 'audio/*,.mp3,.m4a,.wav,.aac'
+	return 'image/*'
+}
+
+// ---------------------------------------------------------------------------
+// MediaGrid — the prototype's auto-fill tile grid
+// ---------------------------------------------------------------------------
+
+function MediaGrid({ items, kind }: { items: MediaItem[]; kind: MediaKind }) {
+	if (items.length === 0) {
+		return <EmptyPanel icon="media" message={`No ${KIND_LABEL[kind]} media in the library yet.`} />
+	}
+
+	return (
+		<div
+			style={{
+				display: 'grid',
+				gridTemplateColumns: 'repeat(auto-fill, minmax(190px, 1fr))',
+				gap: 14,
+				alignItems: 'start',
+			}}
+		>
+			{items.map((m) => (
+				<MediaTile key={m.id} item={m} kind={kind} />
+			))}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// MediaTile — thumbnail + filename (.mono) + type (.type-tag)
+// ---------------------------------------------------------------------------
+
+function MediaTile({ item, kind }: { item: MediaItem; kind: MediaKind }) {
+	const isImage = kind === 'image'
+	const hasThumb = isImage && Boolean(item.url)
+
+	return (
+		<div className="panel" style={{ overflow: 'hidden' }}>
+			<div
+				style={{
+					aspectRatio: '4/3',
+					background: 'var(--panel-2)',
+					position: 'relative',
+					display: 'grid',
+					placeItems: 'center',
+					borderBottom: '1px solid var(--border)',
+				}}
+			>
+				{hasThumb ? (
+					<img
+						src={item.url ?? undefined}
+						alt={item.name}
+						loading="lazy"
+						style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+					/>
+				) : (
+					<Icon
+						name={KIND_ICON[kind]}
+						size={24}
+						style={{ color: 'var(--ink-faint)', opacity: 0.7 }}
+					/>
+				)}
+				{item.pinned && (
+					<span style={{ position: 'absolute', top: 8, left: 8, color: 'var(--ink-soft)' }}>
+						<Icon name="pin" size={14} />
+					</span>
+				)}
+			</div>
+			<div style={{ padding: '9px 11px' }}>
+				<div
+					className="mono"
+					style={{
+						fontSize: 12,
+						color: 'var(--ink)',
+						whiteSpace: 'nowrap',
+						overflow: 'hidden',
+						textOverflow: 'ellipsis',
+					}}
+					title={item.name}
+				>
+					{item.name}
+				</div>
+				<div style={{ marginTop: 6 }}>
+					<span className="type-tag">
+						<Icon name={KIND_ICON[kind]} size={12} />
+						{KIND_LABEL[kind]}
+					</span>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// EmptyPanel — honest empty state (shared idiom with the sibling screens)
+// ---------------------------------------------------------------------------
+
+function EmptyPanel({ icon, message }: { icon: IconName; message: string }) {
+	return (
+		<div
+			style={{
+				border: '1px solid var(--border)',
+				borderRadius: 'var(--radius)',
+				padding: '40px 20px',
+				textAlign: 'center',
+				fontSize: 13,
+				color: 'var(--ink-muted)',
+				background: 'var(--panel-2)',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				gap: 8,
+			}}
+		>
+			<Icon name={icon} size={24} style={{ color: 'var(--border)', opacity: 0.7 }} />
+			<span>{message}</span>
+		</div>
+	)
+}