peter
4aaaaa7860
The code cited its plan instead of saying why: `E28 review J4`, `(R6 S3b)`, `S1 justified…`,
`deep-review round 5`. That plan lives in the private ops repo, so for every reader of this one the
citation was noise, and a sentence whose subject was the plan step ("round 2 showed…") hid its
lesson behind an id. Each one is gone and the "why" kept: a bare citation is deleted, a sentence
carrying a lesson is reworded around it ("a later attempt showed…").
Measured (`scripts/audit_metrics.py`, product code): 652 lines in 270 files carried an epic code by
the definition the next commit holds (507 / 241 by the old, two-digit-only one) -> 0. Across all
code, tests, scripts and configs: ~1100 epic-code lines plus ~320 sprint/round ids.
Behaviour unchanged, checked mechanically: every changed .py file has the same AST once docstrings
are blanked; css/sh/toml/yml/json files are identical once comments are stripped; the only
non-comment changes in TS/JS are test titles, one description string in a contract table, and five
ESLint messages, whose text is all the gates snapshot diff holds. Not touched: Markdown (docs and
the changelog keep their history), Alembic migrations, TV episode notation (`S2 · E5`), DESIGN.md
ids (`C1`, `B4`, `S3h`), tracker ids (`SEC-16`, `DX-17`).
One stale claim fixed on the way: test_hls_reaper's docstring said the player checkpoints "every
10 s whether or not it is playing", which plex/stream.py calls wrong; it now says what the code does.
61 lines
2.7 KiB
TypeScript
61 lines
2.7 KiB
TypeScript
import { useEffect, useRef, useState, type RefObject } from "react";
|
||
import { CONTENT_ID } from "./landmarks";
|
||
|
||
// A tall page header that folds to one row once the page's content scrolls (the owner's pick for the
|
||
// channel page: the banner and the identity block took ~40% of a 133% screen before the first video).
|
||
//
|
||
// The header is FIXED (it sits in the shell's toolbar band, outside the scroller), so folding it makes the
|
||
// scroller taller, which shortens how far the content can scroll. Two rules keep that from flickering:
|
||
// - fold only when the page can still scroll past the fold point once the header has given its height
|
||
// back (`room - saving > FOLD_AT`): a page barely taller than the window would otherwise fold, lose its
|
||
// scroll, land at the top, unfold, and so on, with every wheel tick;
|
||
// - unfold only at the very top, not at the fold point: between the two the header keeps whatever it was.
|
||
export const FOLD_AT = 32;
|
||
|
||
interface ScrollPosition {
|
||
// The scroller's scrollTop.
|
||
top: number;
|
||
// How far it can scroll at all: scrollHeight − clientHeight.
|
||
room: number;
|
||
}
|
||
|
||
// `saving` = the height the header gives back when it folds (measured while it is unfolded).
|
||
export function nextFolded(
|
||
folded: boolean,
|
||
{ top, room }: ScrollPosition,
|
||
saving: number,
|
||
): boolean {
|
||
if (folded) return top > 0;
|
||
return top > FOLD_AT && room - saving > FOLD_AT;
|
||
}
|
||
|
||
// Whether the header is folded, following the page's one scroller (PageScroller's <main>). `foldable` is
|
||
// the part of the header that folds away; its height, read while it is shown, is the `saving` above.
|
||
export function useScrollFold(foldable: RefObject<HTMLElement | null>): boolean {
|
||
const [folded, setFolded] = useState(false);
|
||
const saving = useRef(0);
|
||
useEffect(() => {
|
||
const update = (el: HTMLElement) => {
|
||
if (foldable.current) saving.current = foldable.current.offsetHeight;
|
||
setFolded((was) =>
|
||
nextFolded(
|
||
was,
|
||
{ top: el.scrollTop, room: el.scrollHeight - el.clientHeight },
|
||
saving.current,
|
||
),
|
||
);
|
||
};
|
||
// Scroll events do not bubble but they do capture, so one document listener sees the scroller even
|
||
// when it mounts after this page (as BackToTop does). A Back that restores the position scrolls it too.
|
||
const onScroll = (e: Event) => {
|
||
const el = e.target;
|
||
if (el instanceof HTMLElement && el.id === CONTENT_ID) update(el);
|
||
};
|
||
document.addEventListener("scroll", onScroll, { passive: true, capture: true });
|
||
const main = document.getElementById(CONTENT_ID);
|
||
if (main) update(main);
|
||
return () => document.removeEventListener("scroll", onScroll, { capture: true });
|
||
}, [foldable]);
|
||
return folded;
|
||
}
|