proctolog 0.1.0

data/public/recording.js

@@ -0,0 +1,394 @@
+// The player: play and pause, one frame at a time, step by step, and a note
+// on the moment the film is paused at, with a rectangle drawn on the frame
+// when the owner drags one.
+//
+// A film keeps every frame for as long as it was on screen, so "one frame" is
+// the distance to the next time a frame is first shown. The server lists those
+// times; this reads them from the page.
+
+const EPS = 0.002;
+const FALLBACK_FRAME = 1 / 12;
+const DRAG = 4;
+
+const film = document.querySelector("[data-film]");
+const video = film.querySelector("video");
+const screen = film.querySelector("[data-screen]");
+const regions = film.querySelector("[data-regions]");
+const timeline = film.querySelector("[data-timeline]");
+const playhead = film.querySelector("[data-playhead]");
+const playButton = film.querySelector("[data-play]");
+const clockOutput = film.querySelector("[data-clock]");
+const whereOutput = film.querySelector("[data-where]");
+const dialog = document.querySelector("#note-dialog");
+const form = dialog.querySelector("form");
+const about = dialog.querySelector("[data-about]");
+
+const frames = JSON.parse(document.querySelector("#frames").textContent);
+const steps = [...film.querySelectorAll("[data-step]")].map((item) => ({
+	item,
+	name: item.dataset.name,
+	from: Number(item.dataset.from),
+}));
+const segments = [...film.querySelectorAll(".segments li")];
+const notes = [...film.querySelectorAll("[data-card]")].map((card) => ({
+	card,
+	id: card.dataset.card,
+	time: Number(card.dataset.time),
+	box: card.dataset.box ? card.dataset.box.split(",").map(Number) : null,
+}));
+
+const length = () =>
+	Number.isFinite(video.duration)
+		? video.duration
+		: Number(film.dataset.length);
+
+const clock = (seconds) => {
+	const whole = Math.floor(seconds);
+	const minutes = Math.floor(whole / 60);
+	return `${minutes}:${String(whole % 60).padStart(2, "0")}`;
+};
+
+// Where a time stands among the frames and the steps.
+
+const frameAt = (time) => {
+	let index = -1;
+	for (let at = 0; at < frames.length && frames[at] <= time + EPS; at++)
+		index = at;
+	return index;
+};
+
+const stepAt = (time) => {
+	let index = -1;
+	for (let at = 0; at < steps.length && steps[at].from <= time + EPS; at++)
+		index = at;
+	return index;
+};
+
+const seek = (time) => {
+	video.currentTime = Math.min(Math.max(time, 0), length());
+	render();
+};
+
+const frameBy = (direction) => {
+	video.pause();
+	if (!frames.length)
+		return seek(video.currentTime + direction * FALLBACK_FRAME);
+	const target = Math.min(
+		Math.max(frameAt(video.currentTime) + direction, 0),
+		frames.length - 1,
+	);
+	seek(frames[target] + EPS);
+};
+
+const stepBy = (direction) => {
+	const target = stepAt(video.currentTime) + direction;
+	if (target < 0) return seek(0);
+	if (target >= steps.length) return seek(length());
+	seek(steps[target].from);
+};
+
+// What the page says about where the film is.
+
+const light = (element) => {
+	clearTimeout(element.fadeOut);
+	element.classList.add("lit");
+	element.fadeOut = setTimeout(() => element.classList.remove("lit"), 1800);
+};
+
+const showRegions = () => {
+	const shown = frameAt(video.currentTime);
+	for (const old of regions.querySelectorAll(".region:not(.draft)"))
+		old.remove();
+	for (const note of notes) {
+		if (!note.box || frameAt(note.time) !== shown) continue;
+		const [left, top, width, height] = note.box.map((part) => `${part * 100}%`);
+		const region = regions.appendChild(document.createElement("span"));
+		region.className = "region";
+		region.dataset.kind = note.card.dataset.kind;
+		Object.assign(region.style, { left, top, width, height });
+	}
+};
+
+function render() {
+	const time = video.currentTime;
+	const step = stepAt(time);
+	const frame = frameAt(time);
+	playhead.style.left = `${(100 * time) / length()}%`;
+	clockOutput.textContent = `${clock(time)} / ${clock(length())}`;
+	playButton.textContent = video.paused ? "Play" : "Pause";
+	steps.forEach(({ item }, index) => {
+		if (index === step) item.setAttribute("aria-current", "step");
+		else item.removeAttribute("aria-current");
+	});
+	segments.forEach((segment, index) => {
+		segment.classList.toggle("here", index === step);
+	});
+	whereOutput.textContent = [
+		step >= 0
+			? `Step ${step + 1} of ${steps.length}: ${steps[step].name}`
+			: null,
+		frames.length ? `frame ${frame + 1} of ${frames.length}` : null,
+	]
+		.filter(Boolean)
+		.join(" · ");
+	showRegions();
+}
+
+// While it plays the playhead follows every painted frame, not the four
+// updates a second that timeupdate gives.
+let following = false;
+const follow = () => {
+	render();
+	following = !video.paused;
+	if (following) requestAnimationFrame(follow);
+};
+
+const toggle = () => (video.paused ? video.play() : video.pause());
+
+video.addEventListener("play", () => following || follow());
+for (const event of [
+	"pause",
+	"seeked",
+	"loadedmetadata",
+	"ended",
+	"timeupdate",
+])
+	video.addEventListener(event, render);
+
+// Pressing.
+
+playButton.addEventListener("click", toggle);
+film
+	.querySelector("[data-frame-back]")
+	.addEventListener("click", () => frameBy(-1));
+film
+	.querySelector("[data-frame-forward]")
+	.addEventListener("click", () => frameBy(1));
+film
+	.querySelector("[data-step-back]")
+	.addEventListener("click", () => stepBy(-1));
+film
+	.querySelector("[data-step-forward]")
+	.addEventListener("click", () => stepBy(1));
+film
+	.querySelector("[data-note-here]")
+	.addEventListener("click", () => compose(null));
+
+for (const { item, from } of steps)
+	item.querySelector("button").addEventListener("click", () => seek(from));
+
+// A still that could not be made leaves its step's name alone.
+for (const still of film.querySelectorAll("img[data-still]")) {
+	if (still.complete && !still.naturalWidth) still.remove();
+	else still.addEventListener("error", () => still.remove());
+}
+
+// Pins and cards go to their moment, and a note arrived at by its address too.
+
+const goTo = (note) => {
+	video.pause();
+	seek(note.time + EPS);
+	light(note.card);
+	for (const pin of film.querySelectorAll(`[data-pin="${note.id}"]`))
+		light(pin);
+	note.card.scrollIntoView({ block: "nearest" });
+};
+
+for (const note of notes) {
+	note.card.addEventListener("click", (event) => {
+		if (!event.target.closest("form")) goTo(note);
+	});
+}
+for (const pin of film.querySelectorAll("[data-pin]")) {
+	pin.addEventListener("click", (event) => {
+		event.stopPropagation();
+		goTo(notes.find((note) => note.id === pin.dataset.pin));
+	});
+}
+
+const arrive = () => {
+	const target =
+		location.hash && document.getElementById(location.hash.slice(1));
+	const note = notes.find((candidate) => candidate.card === target);
+	if (note) goTo(note);
+};
+if (video.readyState >= 1) arrive();
+else video.addEventListener("loadedmetadata", arrive, { once: true });
+addEventListener("hashchange", arrive);
+
+// The timeline: press or drag to go to a moment.
+
+const along = (event) => {
+	const box = timeline.getBoundingClientRect();
+	return ((event.clientX - box.left) / box.width) * length();
+};
+
+timeline.addEventListener("pointerdown", (event) => {
+	if (event.button !== 0 || event.target.closest(".pin")) return;
+	timeline.setPointerCapture(event.pointerId);
+	timeline.scrubbing = true;
+	seek(along(event));
+});
+timeline.addEventListener("pointermove", (event) => {
+	if (timeline.scrubbing) seek(along(event));
+});
+timeline.addEventListener("pointerup", () => {
+	timeline.scrubbing = false;
+});
+
+// The frame: a press plays or pauses, a drag marks a place and asks for a note.
+
+const fraction = (value) => Math.min(Math.max(value, 0), 1);
+const round = (value) => Math.round(value * 1e4) / 1e4;
+
+const pointOn = (event, frame) => ({
+	x: fraction((event.clientX - frame.left) / frame.width),
+	y: fraction((event.clientY - frame.top) / frame.height),
+});
+
+const boxBetween = (from, to) => [
+	Math.min(from.x, to.x),
+	Math.min(from.y, to.y),
+	Math.abs(to.x - from.x),
+	Math.abs(to.y - from.y),
+];
+
+let drag = null;
+
+const sketch = (box) => {
+	drag.shape ??= regions.appendChild(
+		Object.assign(document.createElement("span"), {
+			className: "region draft",
+		}),
+	);
+	const [left, top, width, height] = box.map((part) => `${part * 100}%`);
+	Object.assign(drag.shape.style, { left, top, width, height });
+};
+
+screen.addEventListener("pointerdown", (event) => {
+	if (event.button !== 0) return;
+	screen.setPointerCapture(event.pointerId);
+	const frame = screen.getBoundingClientRect();
+	drag = {
+		frame,
+		from: pointOn(event, frame),
+		start: event,
+		shape: null,
+		wasPlaying: !video.paused,
+	};
+	// A note is on one frame, so the frame holds still while it is marked.
+	video.pause();
+});
+
+screen.addEventListener("pointermove", (event) => {
+	if (!drag) return;
+	const moved = Math.hypot(
+		event.clientX - drag.start.clientX,
+		event.clientY - drag.start.clientY,
+	);
+	if (moved >= DRAG) sketch(boxBetween(drag.from, pointOn(event, drag.frame)));
+});
+
+screen.addEventListener("pointerup", (event) => {
+	if (!drag) return;
+	const { frame, from, start, wasPlaying } = drag;
+	const dragged =
+		Math.hypot(event.clientX - start.clientX, event.clientY - start.clientY) >=
+		DRAG;
+	if (!dragged) {
+		drag = null;
+		return wasPlaying || video.play();
+	}
+	const box = boxBetween(from, pointOn(event, frame));
+	sketch(box);
+	drag = null;
+	compose(box.map(round));
+});
+
+screen.addEventListener("pointercancel", () => {
+	drag?.shape?.remove();
+	drag = null;
+});
+
+// Writing a note: the film is paused, and the dialog says which moment it is.
+
+function compose(box) {
+	video.pause();
+	const time = video.currentTime;
+	const step = stepAt(time);
+	form.reset();
+	form.elements.time.value = time;
+	form.elements.box.value = box ? box.join(",") : "";
+	about.textContent = [
+		`At ${clock(time)}`,
+		step >= 0 ? `in the step "${steps[step].name}"` : null,
+		box ? "with a place marked on the frame" : null,
+	]
+		.filter(Boolean)
+		.join(", ");
+	dialog.showModal();
+}
+
+dialog.addEventListener("close", () => {
+	for (const draft of regions.querySelectorAll(".draft")) draft.remove();
+});
+
+form.addEventListener("keydown", (event) => {
+	if (event.key === "Enter" && (event.metaKey || event.ctrlKey))
+		form.requestSubmit();
+});
+
+// Filling the window moves the steps under the video. Remembered if the browser lets it.
+
+const fill = document.querySelector("[data-fill]");
+const wide = (on) => {
+	film.classList.toggle("wide", on);
+	fill.setAttribute("aria-pressed", String(on));
+	fill.textContent = on ? "Steps beside it" : "Fill the window";
+};
+fill.addEventListener("click", () => {
+	wide(!film.classList.contains("wide"));
+	try {
+		localStorage.setItem(
+			"proctolog:film:wide",
+			film.classList.contains("wide"),
+		);
+	} catch {
+		// Without storage it opens as the server lays it out.
+	}
+});
+try {
+	wide(localStorage.getItem("proctolog:film:wide") === "true");
+} catch {
+	wide(false);
+}
+
+// Keys. They are ignored while typing and while the dialog is open. Space is
+// left to a button that has the focus, which it presses.
+
+const keys = {
+	" ": toggle,
+	",": () => frameBy(-1),
+	".": () => frameBy(1),
+	"[": () => stepBy(-1),
+	"]": () => stepBy(1),
+	c: () => compose(null),
+};
+
+document.addEventListener("keydown", (event) => {
+	if (event.metaKey || event.ctrlKey || event.altKey || dialog.open) return;
+	if (!Object.hasOwn(keys, event.key)) return;
+	if (event.target.closest("input, textarea, select, [contenteditable]"))
+		return;
+	if (event.key === " " && event.target.closest("button, a, summary")) return;
+
+	event.preventDefault();
+	keys[event.key]();
+});
+
+// A button the mouse pressed gives the keys back to the page.
+film.addEventListener("click", (event) => {
+	if (event.detail > 0) event.target.closest("button")?.blur();
+});
+
+render();

data/public/release.js

@@ -0,0 +1,25 @@
+// A newer PRoctolog, as the desk last asked RubyGems: said once in each
+// browser for each version, in the toast every page uses, and kept among the
+// messages for m to show again.
+
+import { toast } from "./toast.js";
+
+const TOLD = "proctolog:told-of-release";
+const newer = document.querySelector('meta[name="proctolog-newer"]');
+
+const told = () => {
+	try {
+		return localStorage.getItem(TOLD);
+	} catch {
+		return null;
+	}
+};
+
+if (newer && told() !== newer.content) {
+	toast(newer.dataset.news);
+	try {
+		localStorage.setItem(TOLD, newer.content);
+	} catch {
+		// A browser that keeps nothing is told again on the next page.
+	}
+}

data/public/respond.css

@@ -0,0 +1,260 @@
+/* Notes where they stand: the kinds of a note, its card, what stands under a
+   box of "Decisions for the owner", and the small form a note is written in.
+   The pull request's page and the decisions page show all of these. */
+
+:root {
+	--change: var(--pin);
+	--question: var(--chalk);
+	--remark: #7d6a2a;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--remark: #d6c27a;
+	}
+}
+
+[data-kind="change"] {
+	--kind: var(--change);
+}
+
+[data-kind="question"] {
+	--kind: var(--question);
+}
+
+[data-kind="remark"] {
+	--kind: var(--remark);
+}
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+}
+
+.lit {
+	box-shadow: 0 0 0 4px
+		color-mix(in srgb, var(--kind, var(--chalk)) 45%, transparent);
+}
+
+.card {
+	transition: box-shadow 0.6s;
+}
+
+.cards {
+	display: grid;
+	gap: 0.6rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.card {
+	padding: 0.65rem 0.85rem 0.55rem;
+	border: 1px solid var(--rule);
+	border-left: 3px solid var(--kind, var(--quiet));
+	border-radius: 3px;
+	background: color-mix(in srgb, var(--rest) 50%, transparent);
+	cursor: pointer;
+}
+
+li.card p {
+	margin: 0;
+}
+
+.card .meta {
+	font-size: 0.72rem;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+.card .kind {
+	color: var(--kind, var(--quiet));
+}
+
+.card .state {
+	margin-left: 0.6rem;
+	color: var(--quiet);
+}
+
+.card .text {
+	margin: 0.3rem 0;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.card .words {
+	margin: 0.45rem 0 0;
+	padding-left: 0.7rem;
+	border-left: 2px solid var(--rule);
+	color: var(--quiet);
+	font: italic 0.9rem / 1.45 var(--serif);
+	overflow-wrap: anywhere;
+}
+
+.card .where,
+.card .reply {
+	margin-top: 0.4rem;
+	color: var(--quiet);
+	font-size: 0.85rem;
+	overflow-wrap: anywhere;
+}
+
+.card .moves {
+	display: flex;
+	gap: 0.9rem;
+	margin-top: 0.35rem;
+	font-size: 0.85rem;
+}
+
+.card[data-state="confirmed"],
+.card[data-state="withdrawn"] {
+	opacity: 0.7;
+}
+
+/* Under a box */
+
+.beneath {
+	max-width: 68ch;
+	font:
+		0.87rem / 1.45 ui-sans-serif,
+		system-ui,
+		sans-serif;
+}
+
+.beneath .status {
+	margin: 0.35rem 0 0;
+	color: var(--quiet);
+	font-size: 0.82rem;
+}
+
+.beneath .status .state {
+	color: var(--ink);
+	font-weight: 500;
+}
+
+.beneath .cards {
+	margin: 0.55rem 0 0;
+	padding: 0;
+}
+
+.beneath .card {
+	margin: 0;
+	cursor: default;
+}
+
+.actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 1.3rem;
+	margin-top: 0.5rem;
+}
+
+.actions form {
+	display: inline;
+	margin: 0;
+}
+
+/* The small form, in the flow of the page right under what it is about */
+
+.slot:empty {
+	display: none;
+}
+
+li.slot {
+	display: block;
+	list-style: none;
+}
+
+.slot td {
+	padding: 0;
+	border: 0;
+}
+
+.respond {
+	--kind: var(--change);
+	box-sizing: border-box;
+	max-width: 38rem;
+	margin: 0.5rem 0;
+	padding: 0.6rem 0.8rem 0.55rem;
+	border: 1px solid var(--rule);
+	border-left: 3px solid var(--kind);
+	border-radius: 3px;
+	background: var(--paper);
+	color: var(--ink);
+	font:
+		0.87rem / 1.45 ui-sans-serif,
+		system-ui,
+		sans-serif;
+}
+
+.respond:has([value="question"]:checked) {
+	--kind: var(--question);
+}
+
+.respond:has([value="remark"]:checked) {
+	--kind: var(--remark);
+}
+
+.respond .on {
+	display: -webkit-box;
+	margin: 0 0 0.45rem;
+	color: var(--quiet);
+	font:
+		italic 0.9rem / 1.4 ui-serif,
+		Georgia,
+		serif;
+	overflow: hidden;
+	overflow-wrap: anywhere;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+}
+
+.respond .on[hidden] {
+	display: none;
+}
+
+.respond .kinds {
+	display: flex;
+	gap: 1.2rem;
+	margin: 0 0 0.45rem;
+	padding: 0;
+	border: 0;
+}
+
+.respond textarea {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0.5rem 0.6rem;
+	border: 1px solid var(--rule);
+	border-radius: 3px;
+	background: var(--paper);
+	color: inherit;
+	font: inherit;
+	line-height: 1.5;
+	resize: vertical;
+}
+
+.respond textarea:focus-visible {
+	border-color: var(--chalk);
+	outline: 2px solid color-mix(in srgb, var(--chalk) 35%, transparent);
+}
+
+.respond .buttons {
+	display: flex;
+	gap: 1rem;
+	justify-content: flex-end;
+	align-items: baseline;
+	margin-top: 0.55rem;
+}
+
+.respond button.primary {
+	padding: 0.35rem 0.95rem;
+	border: 0;
+	border-radius: 4px;
+	background: var(--chalk);
+	color: var(--paper);
+	cursor: pointer;
+}