peter
ccd5f3739a
S3 wires the shelf's editor. The gesture is the E10 right-click menu, so the decision "this is comfort media" can be made where the thing is — the feed, a Plex grid, a channel row, a playlist — rather than only on the page that lists the shelf. One shared piece, `components/comfortPin.tsx`: the five pin-kind constructors, the shelf query, and ONE `ActionMenuItem` that switches Pin/Unpin honestly (and says "not known yet" with a disabled row until the shelf has answered, since a confident "Pin" over something already pinned is exactly the quiet lie the house rules forbid). Surfaces that already have a row menu compose the item in (`Playlists`, `PlaylistsRail`); the rest mount `ComfortPinMenu`. Two structural notes: - The feed's menu lives in `VirtualFeed`, not in `Feed` — that is the list, and it is also what gives the channel page the gesture for free, since it renders `<Feed channelScoped>` all the way down. - Cards take `menuProps` as a FUNCTION of the row, not the built props object. `triggerProps` is stable across renders while its return value is not, and a fresh object prop would blow past `VideoCard`'s memo for every card in the virtualized feed on every parent render. `DataTable` and `ChannelLayoutGrid` grow a generic `rowProps` so a channel row answers the same gesture in both of the manager's layouts; the table stays domain-free and never learns what a menu is. On Home the shelf tile's menu is the whole editor: four move rows (front / left / right / end, reusing the playlist menu's ordering idiom) plus the unpin, over menu rows rather than drag & drop — dragging inside a horizontal, scrolling Carousel fights the scroll, and menu rows are keyboard-reachable for free. The reorder is optimistic on the cached payload and re-asks the server on failure rather than showing an order that was never accepted. The exhausted shelf tile (a pinned channel with nothing unwatched left) is `aria-disabled`, not `disabled`: measured in Chromium, a disabled button still receives contextmenu and pointerdown, but it loses focus — and with it Shift+F10, the only keyboard route to the menu it most needs. Verified end to end in the browser against the live account: all five pin kinds, the reorder (persisted across a reload), the unpin, and the honest Unpin label on a resume tile that is already on the shelf.
87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
import type { Video, VideoStatus } from "../lib/api";
|
|
import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
|
|
import VideoCard from "./VideoCard";
|
|
import { VideoPinMenu } from "./ComfortPinMenu";
|
|
import { useContextMenu } from "./ui/useContextMenu";
|
|
import VirtualGrid from "./ui/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, colMaxWidth, maxCols, thumb } = FEED_VIEW_SPEC[view];
|
|
// The comfort-shelf pin (E24 S3) lives HERE rather than in each of the feed's callers: this is the
|
|
// list, and `useContextMenu`'s contract is one menu per list. Mounting it at this level is also
|
|
// what gives the channel page the gesture for free — it renders `<Feed channelScoped>`, so it is
|
|
// the same component all the way down.
|
|
const pinMenu = useContextMenu<Video>();
|
|
return (
|
|
<>
|
|
<VirtualGrid
|
|
items={items}
|
|
getKey={(v) => v.id}
|
|
minCol={minCol}
|
|
colMaxWidth={colMaxWidth}
|
|
maxCols={maxCols}
|
|
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}
|
|
menuProps={pinMenu.triggerProps}
|
|
/>
|
|
)}
|
|
/>
|
|
<VideoPinMenu menu={pinMenu} />
|
|
</>
|
|
);
|
|
}
|