peter
5de6be8fde
Video.status, Playlist.kind/source (+ PlaylistDetail), DownloadJob.job_kind
were bare `string`; type them as named unions verified against the backend
(VALID_STATES={new,watched,hidden}; kind user|watch_later; source local|
youtube; job_kind download|edit). VideoStatus then propagates through the
optimistic-override map, onState, and the VideoCard/VirtualFeed/PlayerModal
props — tsc now rejects a status typo (e.g. a stale "in_progress", which is a
derived filter, never a stored status) at every call site.
75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import type { Video, VideoStatus } from "../lib/api";
|
|
import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
|
|
import VideoCard from "./VideoCard";
|
|
import VirtualGrid from "./VirtualGrid";
|
|
|
|
// Estimated row heights before measurement; real heights are measured per-row so these only affect
|
|
// the very first paint and the scrollbar's initial guess. Taken from measuring each mode in the
|
|
// browser rather than guessed — a bad estimate makes the scrollbar jump as you scroll in.
|
|
// RE-MEASURE these when a mode's layout changes: they have gone stale twice already, most recently
|
|
// when the bare row became a single line and halved (82 -> 46). The card figures are the roughest
|
|
// of the set by nature — a card's height follows its column width (measured ~307 at 3 columns,
|
|
// ~301 at 4, taller still at 2), so no single constant is right for every window.
|
|
const ROW_EST: Record<FeedView, number> = {
|
|
cards: 340,
|
|
cardsSmall: 257,
|
|
rows: 115,
|
|
rowsCompact: 46,
|
|
tiles: 132,
|
|
};
|
|
|
|
export interface VirtualFeedProps {
|
|
items: Video[];
|
|
view: FeedView;
|
|
onState: (id: string, status: VideoStatus) => void;
|
|
onToggleSave: (id: string, saved: boolean) => void;
|
|
onResetState: (id: string) => void;
|
|
onOpen: (v: Video, startAt?: number | null) => void;
|
|
hasNextPage: boolean;
|
|
isFetchingNextPage: boolean;
|
|
fetchNextPage: () => void;
|
|
}
|
|
|
|
// The feed's videos on the shared VirtualGrid engine — this wrapper only maps a FeedView to the
|
|
// grid's layout spec and renders a VideoCard per item. All the virtualization mechanics (measure,
|
|
// chunk, place, infinite-scroll) live in VirtualGrid.
|
|
export default function VirtualFeed({
|
|
items,
|
|
view,
|
|
onState,
|
|
onToggleSave,
|
|
onResetState,
|
|
onOpen,
|
|
hasNextPage,
|
|
isFetchingNextPage,
|
|
fetchNextPage,
|
|
}: VirtualFeedProps) {
|
|
const { minCol, maxCol, thumb } = FEED_VIEW_SPEC[view];
|
|
return (
|
|
<VirtualGrid
|
|
items={items}
|
|
getKey={(v) => v.id}
|
|
minCol={minCol}
|
|
maxCol={maxCol}
|
|
rowEst={ROW_EST[view]}
|
|
hasNextPage={hasNextPage}
|
|
isFetchingNextPage={isFetchingNextPage}
|
|
fetchNextPage={fetchNextPage}
|
|
renderItem={(v, itemWidth) => (
|
|
<VideoCard
|
|
video={v}
|
|
view={view}
|
|
// Only the one-line row (thumb:false) reads its own width — it stands columns down as it
|
|
// narrows. Everything else takes a stable 0, so a resize (which changes itemWidth every
|
|
// frame) doesn't blow past VideoCard's memo for views that wouldn't do anything with it.
|
|
width={thumb ? 0 : itemWidth}
|
|
onState={onState}
|
|
onToggleSave={onToggleSave}
|
|
onResetState={onResetState}
|
|
onOpen={onOpen}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
}
|