@banou/media-player 0.8.11 → 0.8.12

package/dist/index.js

@@ -117,14 +117,26 @@ var ae = {
 			ready: !1
 		});
 		let u = (t, n) => {
-			let r = {
-				at: Date.now(),
+			let r = Date.now(), i = R(t), o = fe(t), s = a.playbackErrors, c = s[s.length - 1];
+			if (c && c.message === i && c.detail === o && c.recovered === n) {
+				let e = {
+					...c,
+					count: c.count + 1,
+					lastAt: r
+				};
+				a.setSourceState({ playbackErrors: [...s.slice(0, -1), e] });
+				return;
+			}
+			let l = {
+				at: r,
+				lastAt: r,
+				count: 1,
 				atMediaTime: Number.isFinite(e.currentTime) ? e.currentTime : void 0,
-				message: R(t),
-				detail: fe(t),
+				message: i,
+				detail: o,
 				recovered: n
 			};
-			a.setSourceState({ playbackErrors: [...a.playbackErrors, r] });
+			a.setSourceState({ playbackErrors: [...s, l] });
 		}, d = (e) => {
 			if (r) return;
 			let t = n(e);
@@ -1046,6 +1058,12 @@ ${X}
     .when {
       color: #bbb;
       ${V.bSmall.regular}
+
+      /* the one part of the line worth scanning for, so it is the one part at full brightness */
+      .count {
+        margin-left: 6px;
+        color: #fff;
+      }
     }
 
     .what {
@@ -1062,21 +1080,21 @@ ${X}
     }
   }
 }
-`, Me = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : K(Math.max(0, e)), Ne = (e) => e.map((e, t) => {
-	let n = Q(e.atMediaTime);
+`, Me = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : K(Math.max(0, e)), Ne = (e) => e.reduce((e, t) => e + t.count, 0), Pe = (e) => e.map((e, t) => {
+	let n = Q(e.atMediaTime), r = e.count > 1 ? `${new Date(e.at).toISOString()} to ${new Date(e.lastAt).toISOString()} ×${e.count}` : new Date(e.at).toISOString();
 	return [
-		`${t + 1}. ${new Date(e.at).toISOString()}${n ? ` (at ${n})` : ""}${e.recovered ? " [recovered]" : ""}`,
+		`${t + 1}. ${r}${n ? ` (at ${n})` : ""}${e.recovered ? " [recovered]" : ""}`,
 		e.message,
 		e.detail
 	].filter(Boolean).join("\n");
-}).join("\n\n"), Pe = () => {
+}).join("\n\n"), Fe = () => {
 	let e = L((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = Z(), [i, a] = m(!1);
 	if (e.length === 0) return null;
 	let o = () => {
-		navigator.clipboard?.writeText(Ne(e)).then(() => {
+		navigator.clipboard?.writeText(Pe(e)).then(() => {
 			a(!0), setTimeout(() => a(!1), 2e3);
 		}, (e) => console.warn("[media-player] could not copy the errors:", e));
-	}, s = `Playback errors (${e.length})`;
+	}, s = `Playback errors (${Ne(e)})`;
 	return /* @__PURE__ */ w("div", {
 		css: je,
 		ref: r,
@@ -1110,8 +1128,13 @@ ${X}
 						className: "when",
 						children: [
 							Me(e.at),
+							e.count > 1 ? ` to ${Me(e.lastAt)}` : "",
 							Q(e.atMediaTime) ? ` at ${Q(e.atMediaTime)}` : "",
-							e.recovered ? " recovered" : ""
+							e.recovered ? " recovered" : "",
+							e.count > 1 ? /* @__PURE__ */ C("span", {
+								className: "count",
+								children: `×${e.count}`
+							}) : null
 						]
 					}),
 					/* @__PURE__ */ C("span", {
@@ -1126,7 +1149,7 @@ ${X}
 			}, `${e.at}-${t}`))]
 		})]
 	});
-}, Fe = h`
+}, Ie = h`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -1179,7 +1202,7 @@ width: 100%;
     }
   }
 }
-`, Ie = () => {
+`, Le = () => {
 	let e = L(), t = L((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = J({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(l(t))
@@ -1196,7 +1219,7 @@ width: 100%;
 	}, [t]);
 	let m = c(s);
 	return /* @__PURE__ */ w("div", {
-		css: Fe,
+		css: Ie,
 		children: [/* @__PURE__ */ w("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ C("div", {
 			className: "playback-slider",
 			ref: n,
@@ -1214,7 +1237,7 @@ width: 100%;
 			})
 		})]
 	});
-}, Le = h`
+}, Re = h`
 /* Deliberately NOT a containing block. The menu anchors to the control bar instead, which is exactly
    as wide as the player box and can therefore be clamped to it. The outside-click check uses
    \`contains\` on the ref, which is DOM containment and needs no position, and the bar's other
@@ -1273,7 +1296,7 @@ ${X}
   }
 }
 
-`, Re = () => {
+`, ze = () => {
 	let e = L(), t = L((e) => e.playbackRate), n = L((e) => e.audioTracks), r = L((e) => e.selectedAudioTrack), i = L((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = Z({ onReset: () => o(0) }), p = (t) => {
 		e.setPlaybackRate(t), o(0);
 	}, h = (e) => {
@@ -1282,7 +1305,7 @@ ${X}
 		o(e);
 	};
 	return /* @__PURE__ */ w("div", {
-		css: Le,
+		css: Re,
 		ref: l,
 		children: [
 			/* @__PURE__ */ C(q, {
@@ -1321,7 +1344,7 @@ ${X}
 					}),
 					/* @__PURE__ */ C("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ C(Ie, {})
+						children: /* @__PURE__ */ C(Le, {})
 					}),
 					/* @__PURE__ */ w("div", {
 						className: "options no-hover",
@@ -1357,7 +1380,7 @@ ${X}
 			})
 		]
 	});
-}, ze = h`
+}, Be = h`
 /* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
    which is the width of the player box, so it can be clamped to it. */
 position: static;
@@ -1374,12 +1397,12 @@ position: static;
 }
 
 ${X}
-`, Be = () => {
+`, Ve = () => {
 	let e = L((e) => e.subtitleTracks), t = L((e) => e.selectedSubtitleTrack), n = L((e) => e.selectSubtitleTrack), r = L((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Z();
 	if (e.length === 0) return null;
 	let u = t !== void 0;
 	return /* @__PURE__ */ w("div", {
-		css: ze,
+		css: Be,
 		ref: o,
 		children: [/* @__PURE__ */ C(q, {
 			id: "subtitles",
@@ -1404,14 +1427,14 @@ ${X}
 			failed: c
 		})]
 	});
-}, Ve = {
+}, He = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
 	accent: "#6EA8FE",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, He = h`
+}, Ue = h`
   display: flex;
   align-items: center;
 
@@ -1454,7 +1477,7 @@ ${X}
     width: 10px;
     height: 10px;
   }
-`, Ue = ({ value: e, onChange: t }) => {
+`, We = ({ value: e, onChange: t }) => {
 	let n = L((e) => e.volume), r = L((e) => e.muted), i = p(null), a = p(null), { handlers: o } = J({
 		ref: a,
 		onChange: t
@@ -1474,7 +1497,7 @@ ${X}
 		id: "volume-slider",
 		text: /* @__PURE__ */ C("div", {
 			ref: i,
-			css: He,
+			css: Ue,
 			...o,
 			children: /* @__PURE__ */ C("div", {
 				ref: a,
@@ -1493,7 +1516,7 @@ ${X}
 			children: [l, "%"]
 		})
 	});
-}, We = h`
+}, Ge = h`
   position: relative;
   display: flex;
   align-items: center;
@@ -1556,10 +1579,10 @@ ${X}
     }
   }
 
-`, Ge = ({ ref: e }) => {
+`, Ke = ({ ref: e }) => {
 	let t = L(), n = L((e) => e.volume), r = L((e) => e.muted), i = f(() => G(n), [n]);
 	return /* @__PURE__ */ w("div", {
-		css: We,
+		css: Ge,
 		children: [/* @__PURE__ */ C(q, {
 			id: "sound",
 			text: /* @__PURE__ */ C("button", {
@@ -1579,7 +1602,7 @@ ${X}
 			className: "volume-slider-container",
 			children: /* @__PURE__ */ C("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ C(Ue, {
+				children: /* @__PURE__ */ C(We, {
 					value: r ? 0 : i,
 					onChange: (e) => {
 						t.setVolume(W(e));
@@ -1588,7 +1611,7 @@ ${X}
 			})
 		})]
 	});
-}, $ = .05, Ke = 5, qe = h`
+}, $ = .05, qe = 5, Je = h`
   display: flex;
   flex-direction: column;
   gap: calc(0.4 * var(--mp-unit));
@@ -1599,7 +1622,7 @@ ${X}
     opacity: 0.72;
     font-size: 0.9em;
   }
-`, Je = h`
+`, Ye = h`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -1664,7 +1687,7 @@ ${X}
        * drawn in the hover colour is invisible exactly when it is being looked for.
        */
       button[aria-pressed='true'] svg {
-        stroke: ${Ve.accent};
+        stroke: ${He.accent};
       }
 
       .play, .sound, .time, .errors, .subtitles, .settings, .picture-in-picture, .full-screen {
@@ -1699,7 +1722,7 @@ ${X}
         cursor: pointer;
 
         :hover {
-          background-color: ${Ve.hover};
+          background-color: ${He.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1737,7 +1760,7 @@ ${X}
       }
     }
   }
-`, Ye = () => {
+`, Xe = () => {
 	let e = L(), t = L((e) => e.paused), n = L((e) => e.currentTime), r = L((e) => e.duration), i = L((e) => e.fullscreen), a = L((e) => e.hideUI), o = L((e) => e.togglePictureInPicture), s = L((e) => e.pictureInPictureMode), c = L((e) => e.burnedInSubtitles), l = L((e) => e.subtitleTracks), [f, p] = m(null), h = s === "burn-in", g = l.length > 0, _ = r > 0 && n === r, v = u(({ direction: t, stepSize: n }) => {
 		let r = G(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
 		e.setVolume(W(a)), o && !e.muted && e.toggleMuted();
@@ -1761,8 +1784,8 @@ ${X}
 			});
 			else if (t.key === "ArrowRight") {
 				if (!e.duration) return;
-				e.seek(Math.min(e.currentTime + Ke, e.duration));
-			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - Ke, 0)) : r = !1;
+				e.seek(Math.min(e.currentTime + qe, e.duration));
+			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - qe, 0)) : r = !1;
 			r && t.preventDefault();
 		};
 		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
@@ -1779,7 +1802,7 @@ ${X}
 	return d(() => {
 		if (f) return f.addEventListener("wheel", y, { passive: !1 }), () => f.removeEventListener("wheel", y);
 	}, [f, y]), /* @__PURE__ */ w("div", {
-		css: Je,
+		css: Ye,
 		style: { ...a ? {
 			opacity: "0",
 			pointerEvents: "none"
@@ -1801,7 +1824,7 @@ ${X}
 						}),
 						toolTipText: /* @__PURE__ */ C("span", { children: _ ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ C(Ge, { ref: p }),
+					/* @__PURE__ */ C(Ke, { ref: p }),
 					/* @__PURE__ */ C("div", {
 						className: "time",
 						children: Se(n, r)
@@ -1810,9 +1833,9 @@ ${X}
 			}), /* @__PURE__ */ w("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ C(Pe, {}),
-					/* @__PURE__ */ C(Be, {}),
-					/* @__PURE__ */ C(Re, {}),
+					/* @__PURE__ */ C(Fe, {}),
+					/* @__PURE__ */ C(Ve, {}),
+					/* @__PURE__ */ C(ze, {}),
 					o ? /* @__PURE__ */ C(q, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
@@ -1829,7 +1852,7 @@ ${X}
 							})
 						}),
 						toolTipText: /* @__PURE__ */ w("span", {
-							css: qe,
+							css: Je,
 							children: [/* @__PURE__ */ C("span", {
 								className: "lead",
 								children: h ? g ? c ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture"
@@ -1856,7 +1879,7 @@ ${X}
 			})]
 		})]
 	});
-}, Xe = 9e3, Ze = h`
+}, Ze = 9e3, Qe = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -1910,7 +1933,7 @@ ${X}
     line-height: 1;
     color: #6EA8FE;
   }
-`, Qe = () => {
+`, $e = () => {
 	let e = L((e) => e.burnedInSubtitles), t = L((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
@@ -1918,10 +1941,10 @@ ${X}
 			return;
 		}
 		r(!0);
-		let n = setTimeout(() => r(!1), Xe);
+		let n = setTimeout(() => r(!1), Ze);
 		return () => clearTimeout(n);
 	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ C("div", {
-		css: Ze,
+		css: Qe,
 		className: n ? "show" : "",
 		role: "status",
 		children: /* @__PURE__ */ w("div", {
@@ -1942,7 +1965,7 @@ ${X}
 			})]
 		})
 	});
-}, $e = 3e3, et = h`
+}, et = 3e3, tt = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -1953,7 +1976,7 @@ ${X}
      hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events does
      not, and transitioning it holds the item on screen for the length of the fade. */
   transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
-`, tt = h`
+`, nt = h`
   position: relative;
   background-color: black;
   display: flex;
@@ -1985,20 +2008,20 @@ ${X}
   &.hide {
     cursor: none;
   }
-`, nt = (e, t = "") => s.toArray(e).flatMap((e, n) => {
+`, rt = (e, t = "") => s.toArray(e).flatMap((e, n) => {
 	let r = `${t}${l(e) && e.key != null ? e.key : n}`;
-	return l(e) && e.type === c ? nt(e.props.children, `${r}/`) : [{
+	return l(e) && e.type === c ? rt(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), rt = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
+}), it = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
 	let o = L(), s = L((e) => e.hideUI), c = L((e) => e.setHideUI), l = p(void 0), u = p("mouse");
 	d(() => () => clearTimeout(l.current), []);
 	let f = () => {
-		c(!1), clearTimeout(l.current), l.current = setTimeout(() => c(!0), $e);
+		c(!1), clearTimeout(l.current), l.current = setTimeout(() => c(!0), et);
 	};
 	return /* @__PURE__ */ w("div", {
-		css: tt,
+		css: nt,
 		ref: e,
 		onPointerMove: (e) => {
 			u.current = e.pointerType, e.pointerType === "mouse" && f();
@@ -2015,8 +2038,8 @@ ${X}
 		className: s ? "hide" : "",
 		children: [
 			/* @__PURE__ */ C(xe, { onCanvasRef: n }),
-			nt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
-				css: et,
+			rt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
+				css: tt,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -2024,8 +2047,8 @@ ${X}
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ C(Ye, {}),
-			/* @__PURE__ */ C(Qe, {}),
+			i === !1 ? null : /* @__PURE__ */ C(Xe, {}),
+			/* @__PURE__ */ C($e, {}),
 			/* @__PURE__ */ w("div", {
 				className: "video",
 				onClick: () => {
@@ -2042,7 +2065,7 @@ ${X}
 			})
 		]
 	});
-}, it = ({ options: e, children: t }) => {
+}, at = ({ options: e, children: t }) => {
 	let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: o, publicPath: s, libavWorkerUrl: c, read: l, thumbnailRead: u, thumbnailsEnabled: f } = r ?? {}, p = y(), h = v(), [g, _] = m(null), [b, x] = m(null), S = n?.media ?? g;
 	d(() => (p?.(S), () => p?.(null)), [S, p]), pe(g, b, r);
 	let w = z({
@@ -2103,7 +2126,7 @@ ${X}
 			selectedAudioTrack: M.selectedId ?? void 0,
 			selectAudioTrack: (e) => M.select(String(e))
 		});
-	}, [k, M]), /* @__PURE__ */ C(rt, {
+	}, [k, M]), /* @__PURE__ */ C(it, {
 		ref: h,
 		onVideoRef: n ? void 0 : _,
 		onCanvasRef: x,
@@ -2111,7 +2134,7 @@ ${X}
 		controls: e.controls,
 		children: t
 	});
-}, at = h`
+}, ot = h`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -2181,17 +2204,17 @@ ${X}
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, ot = (e) => /* @__PURE__ */ C("div", {
-	css: at,
-	children: /* @__PURE__ */ C(I.Provider, { children: /* @__PURE__ */ C(it, {
+`, st = (e) => /* @__PURE__ */ C("div", {
+	css: ot,
+	children: /* @__PURE__ */ C(I.Provider, { children: /* @__PURE__ */ C(at, {
 		options: e,
 		children: e.children
 	}) })
-}), st = (e) => !!e && typeof e == "object" && "at" in e, ct = (e) => !!e && typeof e == "object" && "selection" in e, lt = ({ blob: e, name: t }) => ({
+}), ct = (e) => !!e && typeof e == "object" && "at" in e, lt = (e) => !!e && typeof e == "object" && "selection" in e, ut = ({ blob: e, name: t }) => ({
 	length: e.size,
 	name: t ?? (e instanceof File ? e.name : void 0),
 	read: (t, n) => e.slice(t, t + n).arrayBuffer()
-}), ut = async (e, t) => {
+}), dt = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -2201,8 +2224,8 @@ ${X}
 	if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
 	if (!r && n.status !== 206) throw Error("The source does not support range requests");
 	return i;
-}, dt = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await ut(e, r);
+}, ft = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await dt(e, r);
 	return {
 		length: i,
 		name: n,
@@ -2215,9 +2238,9 @@ ${X}
 			return a.arrayBuffer();
 		}
 	};
-}, ft = async (e) => {
-	if ("blob" in e) return lt(e);
-	if ("url" in e) return dt(e);
+}, pt = async (e) => {
+	if ("blob" in e) return ut(e);
+	if ("url" in e) return ft(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -2226,4 +2249,4 @@ ${X}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { ot as MediaPlayer, ot as default, I as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, ft as inputToRemuxerInput, ct as isDelegatedTracks, st as isExternalThumbnails, F as sourceFeature, i as startPlayback, B as usePictureInPicture, L as usePlayer, z as useSeekThumbnails };
+export { st as MediaPlayer, st as default, I as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, pt as inputToRemuxerInput, lt as isDelegatedTracks, ct as isExternalThumbnails, F as sourceFeature, i as startPlayback, B as usePictureInPicture, L as usePlayer, z as useSeekThumbnails };

package/dist/react/components/errors.d.ts

@@ -1,4 +1,6 @@
 import type { PlaybackErrorEntry } from '../source-feature';
+/** How many failures there have been, which is not how many rows: a repeat folds into its row. */
+export declare const countErrors: (errors: PlaybackErrorEntry[]) => number;
 /** What lands on the clipboard: the same thing the panel shows, in the order it happened. */
 export declare const formatErrors: (errors: PlaybackErrorEntry[]) => string;
 /**

package/dist/react/source-feature.d.ts

@@ -26,9 +26,20 @@ export type TrackChoice = {
  * `cause` may be a `MediaError` that reads differently once the element has moved on.
  */
 export type PlaybackErrorEntry = {
-    /** Wall clock, so the report can be read next to a console log or a torrent's timeline. */
+    /** Wall clock of the FIRST of them, so the report can be read next to a console log. */
     at: number;
-    /** Seconds into the media, which is usually the first question asked of a playback failure. */
+    /** Wall clock of the most recent one. Equal to `at` until a repeat has folded into this row. */
+    lastAt: number;
+    /**
+     * How many times in a row this exact failure happened.
+     *
+     * A source that stays broken reports the same sentence every few seconds for as long as it stays
+     * broken, so consecutive identical failures fold into one row rather than filling the panel with a
+     * wall of one message. This is also what keeps the list from growing without end in that case,
+     * since there is no ceiling on how many failures are kept.
+     */
+    count: number;
+    /** Seconds into the media, at the first of them, which is usually the first question asked. */
     atMediaTime?: number;
     message: string;
     /** The `cause` chain, already unwound, one line per level. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.11",
+  "version": "0.8.12",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/react/components/errors.tsx

@@ -77,6 +77,12 @@ ${popoverStyle}
     .when {
       color: #bbb;
       ${fonts.bSmall.regular}
+
+      /* the one part of the line worth scanning for, so it is the one part at full brightness */
+      .count {
+        margin-left: 6px;
+        color: #fff;
+      }
     }
 
     .what {
@@ -101,12 +107,21 @@ const clock = (at: number) => new Date(at).toLocaleTimeString()
 const mediaTime = (seconds: number | undefined) =>
   seconds === undefined || !Number.isFinite(seconds) ? undefined : formatTime(Math.max(0, seconds))
 
+/** How many failures there have been, which is not how many rows: a repeat folds into its row. */
+export const countErrors = (errors: PlaybackErrorEntry[]) =>
+  errors.reduce((total, entry) => total + entry.count, 0)
+
 /** What lands on the clipboard: the same thing the panel shows, in the order it happened. */
 export const formatErrors = (errors: PlaybackErrorEntry[]) =>
   errors
     .map((entry, index) => {
       const at = mediaTime(entry.atMediaTime)
-      const head = `${index + 1}. ${new Date(entry.at).toISOString()}${at ? ` (at ${at})` : ''}${entry.recovered ? ' [recovered]' : ''}`
+      // A repeat carries the span it covers, so "40 times over two minutes" and "40 times in one
+      // second" are distinguishable in a report. Both happen, and they are different faults.
+      const when = entry.count > 1
+        ? `${new Date(entry.at).toISOString()} to ${new Date(entry.lastAt).toISOString()} ×${entry.count}`
+        : new Date(entry.at).toISOString()
+      const head = `${index + 1}. ${when}${at ? ` (at ${at})` : ''}${entry.recovered ? ' [recovered]' : ''}`
       return [head, entry.message, entry.detail].filter(Boolean).join('\n')
     })
     .join('\n\n')
@@ -142,7 +157,8 @@ export const ErrorsAction = () => {
     )
   }
 
-  const label = `Playback errors (${errors.length})`
+  // counted in failures rather than in rows, because a row that says ×40 is forty of them
+  const label = `Playback errors (${countErrors(errors)})`
 
   return (
     <div css={style} ref={containerRef}>
@@ -177,8 +193,11 @@ export const ErrorsAction = () => {
               <div className='entry no-hover' key={`${entry.at}-${index}`}>
                 <span className='when'>
                   {clock(entry.at)}
+                  {/* the span, so a row that is still growing is distinguishable from one that stopped */}
+                  {entry.count > 1 ? ` to ${clock(entry.lastAt)}` : ''}
                   {mediaTime(entry.atMediaTime) ? ` at ${mediaTime(entry.atMediaTime)}` : ''}
                   {entry.recovered ? ' recovered' : ''}
+                  {entry.count > 1 ? <span className='count'>{`×${entry.count}`}</span> : null}
                 </span>
                 <span className='what'>{entry.message}</span>
                 {entry.detail ? <span className='cause'>{entry.detail}</span> : null}

package/src/lib/react/hooks/use-playback.ts

@@ -158,14 +158,33 @@ export const usePlayback = (
      * `playbackError` null and would otherwise erase the only evidence that anything went wrong.
      */
     const record = (error: unknown, recovered: boolean) => {
+      const at = Date.now()
+      const message = messageOf(error)
+      const detail = causeChain(error)
+      const errors = player.playbackErrors
+      const last = errors[errors.length - 1]
+
+      // A source that stays broken repeats one sentence for as long as it stays broken, so a
+      // consecutive repeat folds into the row it repeats rather than adding another. Only
+      // CONSECUTIVE ones: an identical failure either side of a different one is a second episode,
+      // and collapsing the two would lose the order that makes a report readable.
+      if (last && last.message === message && last.detail === detail && last.recovered === recovered) {
+        const folded: PlaybackErrorEntry = { ...last, count: last.count + 1, lastAt: at }
+        player.setSourceState({ playbackErrors: [...errors.slice(0, -1), folded] })
+        return
+      }
+
       const entry: PlaybackErrorEntry = {
-        at: Date.now(),
+        at,
+        lastAt: at,
+        count: 1,
+        // where it STARTED, kept as the row grows, because that is the position worth reporting
         atMediaTime: Number.isFinite(video.currentTime) ? video.currentTime : undefined,
-        message: messageOf(error),
-        detail: causeChain(error),
+        message,
+        detail,
         recovered,
       }
-      player.setSourceState({ playbackErrors: [...player.playbackErrors, entry] })
+      player.setSourceState({ playbackErrors: [...errors, entry] })
     }
     const fail = (error: unknown) => {
       if (cancelled) return

package/src/lib/react/source-feature.ts

@@ -30,9 +30,20 @@ export type TrackChoice = {
  * `cause` may be a `MediaError` that reads differently once the element has moved on.
  */
 export type PlaybackErrorEntry = {
-  /** Wall clock, so the report can be read next to a console log or a torrent's timeline. */
+  /** Wall clock of the FIRST of them, so the report can be read next to a console log. */
   at: number
-  /** Seconds into the media, which is usually the first question asked of a playback failure. */
+  /** Wall clock of the most recent one. Equal to `at` until a repeat has folded into this row. */
+  lastAt: number
+  /**
+   * How many times in a row this exact failure happened.
+   *
+   * A source that stays broken reports the same sentence every few seconds for as long as it stays
+   * broken, so consecutive identical failures fold into one row rather than filling the panel with a
+   * wall of one message. This is also what keeps the list from growing without end in that case,
+   * since there is no ceiling on how many failures are kept.
+   */
+  count: number
+  /** Seconds into the media, at the first of them, which is usually the first question asked. */
   atMediaTime?: number
   message: string
   /** The `cause` chain, already unwound, one line per level. */