{reading && newest ? (
diff --git a/app/features/scanner/components/ScanWorkers.module.css b/app/features/scanner/components/ScanWorkers.module.css
new file mode 100644
index 000000000..1fc4d149d
--- /dev/null
+++ b/app/features/scanner/components/ScanWorkers.module.css
@@ -0,0 +1,162 @@
+.scanWorkers {
+ display: flex;
+ flex-direction: column;
+ gap: var(--s-3);
+}
+
+.headerRow {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--s-2) var(--s-3);
+}
+
+.progressText {
+ font-size: var(--font-2xs);
+ color: var(--color-text-high);
+ font-variant-numeric: tabular-nums;
+}
+
+.headerEnd {
+ margin-inline-start: auto;
+ font-size: var(--font-2xs);
+ color: var(--color-text-high);
+}
+
+.progress {
+ width: 100%;
+ height: 8px;
+ accent-color: var(--color-fg-accent);
+}
+
+.laneGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: var(--s-3);
+}
+
+.lane {
+ display: flex;
+ flex-direction: column;
+ gap: var(--s-1);
+}
+
+.laneScreen {
+ position: relative;
+ border-radius: var(--radius-box);
+ outline: 2px solid var(--color-bg-high);
+ overflow: hidden;
+}
+
+.canvas {
+ display: block;
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ background: #000;
+}
+
+.laneDone .canvas {
+ opacity: 0.35;
+ filter: grayscale(1);
+}
+
+.laneChip,
+.modeChip {
+ position: absolute;
+ top: var(--s-1-5);
+ padding: var(--s-0-5) var(--s-2);
+ border-radius: var(--radius-full);
+ background: rgb(0 0 0 / 0.6);
+ color: #fff;
+ font-size: var(--font-2xs);
+ font-weight: var(--weight-bold);
+}
+
+.laneChip {
+ left: var(--s-1-5);
+}
+
+.modeChip {
+ right: var(--s-1-5);
+ display: inline-flex;
+ align-items: center;
+ gap: var(--s-1);
+ color: rgb(255 255 255 / 0.7);
+
+ &::before {
+ content: "";
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: currentColor;
+ }
+
+ &:has(svg)::before {
+ display: none;
+ }
+}
+
+.modeActive {
+ color: var(--color-chart-kill);
+
+ &::before {
+ animation: pulse 1s ease-in-out infinite;
+ }
+}
+
+.laneFooter {
+ position: absolute;
+ inset: auto 0 0;
+ display: flex;
+ flex-direction: column;
+ gap: var(--s-1);
+ padding: var(--s-4) var(--s-2) var(--s-1-5);
+ background: linear-gradient(transparent, rgb(0 0 0 / 0.75));
+}
+
+.laneClock {
+ color: #fff;
+ font-size: var(--font-md);
+ font-weight: var(--weight-bold);
+ font-variant-numeric: tabular-nums;
+}
+
+.laneBar {
+ height: 4px;
+ border-radius: var(--radius-full);
+ background: rgb(255 255 255 / 0.2);
+ overflow: hidden;
+}
+
+.laneBarFill {
+ height: 100%;
+ background: var(--color-fg-accent);
+ transition: width 0.25s linear;
+}
+
+.laneMeta {
+ display: flex;
+ justify-content: space-between;
+ font-size: var(--font-2xs);
+ color: var(--color-text-high);
+ font-variant-numeric: tabular-nums;
+}
+
+.laneGames {
+ color: var(--color-text);
+ font-weight: var(--weight-bold);
+}
+
+@keyframes pulse {
+ 50% {
+ opacity: 0.3;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .modeActive::before,
+ .laneBarFill {
+ animation: none;
+ transition: none;
+ }
+}
diff --git a/app/features/scanner/components/ScanWorkers.tsx b/app/features/scanner/components/ScanWorkers.tsx
new file mode 100644
index 000000000..928286eb3
--- /dev/null
+++ b/app/features/scanner/components/ScanWorkers.tsx
@@ -0,0 +1,137 @@
+/**
+ * A running VoD scan: the overall progress, then one tile per worker showing
+ * the frames of its slice of the file, whether it is reading gameplay or
+ * skimming past dead air, and how many games it has found.
+ */
+import clsx from "clsx";
+import { Check } from "lucide-react";
+import { formatPosition } from "../core/format";
+import { buildScannerMatches } from "../core/match-builder";
+import styles from "./ScanWorkers.module.css";
+import { StatusPill } from "./SessionHeader";
+import type { ScanEvent } from "./session-data";
+import {
+ setVodLaneCanvas,
+ useVodScanProgress,
+ type VodScanLane,
+} from "./vod-scan";
+
+export function ScanWorkers({
+ events,
+ headerEnd,
+ children,
+}: {
+ events: ScanEvent[];
+ headerEnd: React.ReactNode;
+ children?: React.ReactNode;
+}) {
+ const gameStarts = buildScannerMatches(events).flatMap(({ match }) =>
+ match.startsAt === null ? [] : [match.startsAt],
+ );
+
+ return (
+
+
+
Scanning
+
+
{headerEnd}
+
+
+ {children}
+
+ );
+}
+
+function ProgressText() {
+ const { progress } = useVodScanProgress();
+ return (
+
+ {progress
+ ? `${Math.round((progress.t / Math.max(1, progress.duration)) * 100)}% · ${formatPosition(progress.t)} / ${formatPosition(progress.duration)}${progress.rate > 0 ? ` · ${progress.rate.toFixed(1)}× realtime` : ""}`
+ : "opening the file…"}
+
+ );
+}
+
+function Lanes({ gameStarts }: { gameStarts: number[] }) {
+ const { progress } = useVodScanProgress();
+
+ return (
+ <>
+
+
+ {progress?.lanes.map((lane, i) => (
+ t >= lane.tStart && t < lane.tEnd).length
+ }
+ />
+ ))}
+
+
+ );
+}
+
+function LaneTile({
+ index,
+ lane,
+ games,
+}: {
+ index: number;
+ lane: VodScanLane;
+ games: number;
+}) {
+ const laneProgress =
+ (lane.t - lane.tStart) / Math.max(1, lane.tEnd - lane.tStart);
+
+ return (
+
+
+
+
+
+ {formatPosition(lane.tStart)} – {formatPosition(lane.tEnd)}
+
+
+ {games} {games === 1 ? "game" : "games"}
+
+
+
+ );
+}
diff --git a/app/features/scanner/components/VodView.module.css b/app/features/scanner/components/VodView.module.css
index cf164994f..ec584aac1 100644
--- a/app/features/scanner/components/VodView.module.css
+++ b/app/features/scanner/components/VodView.module.css
@@ -9,56 +9,6 @@
color: var(--color-text-high);
}
-.scanning {
- display: flex;
- flex-direction: column;
- gap: var(--s-3);
-}
-
-/* the bar's column is fixed by the grid, so the numbers changing width beside it never resize it */
-.progressRow {
- display: grid;
- grid-template-columns: auto minmax(0, 1fr);
- align-items: center;
- gap: var(--s-1) var(--s-3);
-}
-
-.progress {
- width: 100%;
- height: 8px;
- accent-color: var(--color-fg-accent);
-}
-
-.progressText {
- grid-column: 2;
- font-size: var(--font-2xs);
- color: var(--color-text-high);
- font-variant-numeric: tabular-nums;
-}
-
-.previewRow {
- display: grid;
- grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
- gap: var(--s-4);
- align-items: start;
-}
-
-.preview {
- width: 100%;
- aspect-ratio: 16 / 9;
- background: #000;
- border-radius: var(--radius-box);
- border: var(--border-width) solid var(--color-bg-high);
-}
-
-.previewNotes {
- display: flex;
- flex-direction: column;
- gap: var(--s-1);
- font-size: var(--font-2xs);
- color: var(--color-text-high);
-}
-
.afterScan {
display: flex;
flex-wrap: wrap;
@@ -132,9 +82,3 @@
}
}
}
-
-@container scanner (width < 600px) {
- .previewRow {
- grid-template-columns: minmax(0, 1fr);
- }
-}
diff --git a/app/features/scanner/components/VodView.tsx b/app/features/scanner/components/VodView.tsx
index 6590bd793..1896ddcc0 100644
--- a/app/features/scanner/components/VodView.tsx
+++ b/app/features/scanner/components/VodView.tsx
@@ -17,7 +17,7 @@ import {
useSearchParamsTyped,
} from "~/modules/search-params/hooks";
import type { ScanTelemetry } from "../core/detectors/telemetry";
-import { formatPosition, formatTime } from "../core/format";
+import { formatTime } from "../core/format";
import { scannerSearchParams } from "../scanner-search-params";
import { deleteVodClips } from "../store/clips";
import {
@@ -30,7 +30,8 @@ import {
import { refreshClips, useClips } from "./clips-feed";
import { ExportMenu } from "./ExportMenu";
import { NotFound } from "./NotFound";
-import { SessionHeader, StatusPill } from "./SessionHeader";
+import { ScanWorkers } from "./ScanWorkers";
+import { SessionHeader } from "./SessionHeader";
import { type SessionInfo, SessionView } from "./SessionView";
import { matchContaining } from "./sendou-ingest";
import { sendouUpload } from "./sendou-upload";
@@ -40,7 +41,6 @@ import { sendVod } from "./upload";
import { useDebug } from "./use-debug";
import styles from "./VodView.module.css";
import {
- setVodPreviewCanvas,
startVodScan,
uploadVodScan,
useVodScan,
@@ -99,18 +99,14 @@ function ScanVodView({ name }: { name: string }) {
{scan.clipsWork?.state === "cutting"
@@ -130,26 +126,6 @@ function ScanVodView({ name }: { name: string }) {
);
}
-function ScanProgressRow() {
- const { progress } = useVodScanProgress();
-
- return (
-
-
Scanning
-
-
- {progress
- ? `${Math.round((progress.t / Math.max(1, progress.duration)) * 100)}% · ${formatPosition(progress.t)} / ${formatPosition(progress.duration)}${progress.rate > 0 ? ` · ${progress.rate.toFixed(1)}× realtime` : ""}`
- : "opening the file…"}
-
-
- );
-}
-
function ScanTelemetryPanel() {
const { telemetry } = useVodScanProgress();
return telemetry ?
: null;
diff --git a/app/features/scanner/components/vod-scan.ts b/app/features/scanner/components/vod-scan.ts
index 5fbc17816..b32f0dc99 100644
--- a/app/features/scanner/components/vod-scan.ts
+++ b/app/features/scanner/components/vod-scan.ts
@@ -72,11 +72,24 @@ export type ClipsWork =
| { state: "cutting"; done: number; total: number }
| { state: "done"; saved: number; error: string | null };
+export type VodScanMode = "active" | "skim";
+
+/** One worker's slice of the file. */
+export interface VodScanLane {
+ tStart: number;
+ tEnd: number;
+ /** seconds of video the lane has reached */
+ t: number;
+ mode: VodScanMode;
+ done: boolean;
+}
+
export interface VodScanProgress {
t: number;
duration: number;
/** scan speed as a multiple of realtime */
rate: number;
+ lanes: VodScanLane[];
}
export interface VodScanSnapshot {
@@ -114,7 +127,7 @@ let snapshot = IDLE;
const listeners = new Set<() => void>();
let progressSnapshot = IDLE_PROGRESS;
const progressListeners = new Set<() => void>();
-let previewCanvas: HTMLCanvasElement | null = null;
+const laneCanvases = new Map
();
/** lossless PNGs of the frames the detectors analyzed this scan, until saved */
let frames = new WeakMap();
let abortRef = { aborted: false };
@@ -162,9 +175,13 @@ function setProgress(patch: Partial): void {
for (const listener of progressListeners) listener();
}
-/** The view showing the scan hands over its canvas for the frame preview. */
-export function setVodPreviewCanvas(canvas: HTMLCanvasElement | null): void {
- previewCanvas = canvas;
+/** The view showing the scan hands over a canvas per lane (worker slice) for its frame preview. */
+export function setVodLaneCanvas(
+ lane: number,
+ canvas: HTMLCanvasElement | null,
+): void {
+ if (canvas) laneCanvases.set(lane, canvas);
+ else laneCanvases.delete(lane);
}
/** The frame an event of this scan was read from: in memory while scanning, the store once saved. */
@@ -227,8 +244,8 @@ export async function startVodScan(
const updateProgress = (patch: Partial) => {
if (own === generation) setProgress(patch);
};
- const preview = (frame: ImageBitmap | VideoFrame) => {
- if (own === generation) drawPreview(frame);
+ const preview = (frame: ImageBitmap | VideoFrame, lane: number) => {
+ if (own === generation) drawPreview(laneCanvases.get(lane), frame);
};
set({
...IDLE,
@@ -325,6 +342,7 @@ export async function startVodScan(
tStart: i * span,
tEnd: i === clients.length - 1 ? duration : (i + 1) * span,
t: i * span,
+ mode: "active" as VodScanMode,
done: false,
telemetry: null as ScanTelemetry | null,
}));
@@ -336,9 +354,9 @@ export async function startVodScan(
return parts.length > 0 ? mergeScanTelemetry(parts) : null;
};
let lastUiUpdate = Number.NEGATIVE_INFINITY;
- const pushUiUpdate = () => {
+ const pushUiUpdate = ({ force }: { force: boolean }) => {
const now = performance.now();
- if (now - lastUiUpdate < UI_UPDATE_INTERVAL_MS) return;
+ if (!force && now - lastUiUpdate < UI_UPDATE_INTERVAL_MS) return;
lastUiUpdate = now;
const covered = R.sumBy(
chunks,
@@ -350,6 +368,13 @@ export async function startVodScan(
t: covered,
duration,
rate: elapsed > 0 ? covered / elapsed : 0,
+ lanes: chunks.map((c) => ({
+ tStart: c.tStart,
+ tEnd: c.tEnd,
+ t: Math.min(c.t, c.tEnd),
+ mode: c.mode,
+ done: c.done,
+ })),
},
telemetry: mergedTelemetry(),
});
@@ -361,15 +386,13 @@ export async function startVodScan(
{ file, chunkIndex, tStart: chunk.tStart, tEnd: chunk.tEnd },
(chunkProgress) => {
chunk.t = chunkProgress.t;
+ chunk.mode = chunkProgress.mode;
chunk.telemetry = chunkProgress.telemetry;
if (chunkProgress.preview) {
- // show one chunk at a time: the earliest still running
- if (chunks.find((c) => !c.done) === chunk) {
- preview(chunkProgress.preview);
- }
+ preview(chunkProgress.preview, chunkIndex);
chunkProgress.preview.close();
}
- pushUiUpdate();
+ pushUiUpdate({ force: false });
},
)
.then(
@@ -377,6 +400,7 @@ export async function startVodScan(
chunk.done = true;
chunk.t = chunk.tEnd;
chunk.telemetry = chunkTelemetry;
+ pushUiUpdate({ force: true });
},
(error) => {
chunk.done = true;
@@ -415,13 +439,22 @@ export async function startVodScan(
lastUiUpdate = now;
// the preview draw must precede analyze — transferring the
// frame to the worker detaches it
- preview(frame);
+ preview(frame, 0);
const elapsed = (now - started) / 1000;
updateProgress({
progress: {
t,
duration: vod.duration,
rate: elapsed > 0 ? t / elapsed : 0,
+ lanes: [
+ {
+ tStart: 0,
+ tEnd: vod.duration,
+ t,
+ mode: seek.doneInfo?.calm ? "skim" : "active",
+ done: false,
+ },
+ ],
},
telemetry: seek.doneInfo?.telemetry ?? null,
});
@@ -450,7 +483,14 @@ export async function startVodScan(
await Promise.all(thumbnailWork);
events = withoutInvalidObjectives(events);
update({ events });
- updateProgress({ progress: { t: duration, duration, rate: 0 } });
+ updateProgress({
+ progress: {
+ t: duration,
+ duration,
+ rate: 0,
+ lanes: progressSnapshot.progress?.lanes ?? [],
+ },
+ });
await saveVod(
{
name: file.name,
@@ -569,8 +609,10 @@ function sameEvent(a: ScanEvent, b: DetectedEvent): boolean {
return a === b || (a.type === b.type && a.t === b.t && a.data === b.data);
}
-function drawPreview(frame: ImageBitmap | VideoFrame): void {
- const canvas = previewCanvas;
+function drawPreview(
+ canvas: HTMLCanvasElement | null | undefined,
+ frame: ImageBitmap | VideoFrame,
+): void {
if (!canvas) return;
const width = "displayWidth" in frame ? frame.displayWidth : frame.width;
const height = "displayHeight" in frame ? frame.displayHeight : frame.height;