@crvouga/atlas 1.11.0 → 1.12.0

package/packages/visualizer/src/explorer/TestDetail.tsx

@@ -35,7 +35,7 @@ function LatestLink({ children }: { children: string }) {
   return (
     <Anchor
       renderRoot={(props) => (
-        <Link {...props} to="/" search={patched({ layer: undefined })} resetScroll={false} activeOptions={{ exact: true }} />
+        <Link {...props} to="/" search={patched({ layer: undefined, clip: undefined, clipAt: undefined })} resetScroll={false} activeOptions={{ exact: true }} />
       )}
     >
       {children}
@@ -168,7 +168,7 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
         <Anchor
           aria-label="Close the test"
           renderRoot={(props) => (
-            <Link {...props} to="/" search={patched({ test: undefined, layer: undefined })} resetScroll={false} activeOptions={{ exact: true }} />
+            <Link {...props} to="/" search={patched({ test: undefined, layer: undefined, clip: undefined, clipAt: undefined })} resetScroll={false} activeOptions={{ exact: true }} />
           )}
         >
           <IconX size={20} aria-hidden="true" />

package/packages/visualizer/src/explorer/playlist.tsx

@@ -15,6 +15,7 @@
 import { attachmentIdentity, isVideoAttachment, type CheckDetail } from '@crvouga/atlas/reports/evidence-detail';
 import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import { contentTypeOf } from '@crvouga/atlas/reports/media-types';
+import type { Attachment, Step } from '@crvouga/atlas/schema';
 import { Alert, Anchor, Badge, Box, Button, Code, Flex, Grid, Group, List, Modal, NativeSelect, Stack, Switch, Text, Title } from '@mantine/core';
 import { IconAlertTriangle, IconPlayerPlay, IconPlayerSkipBack, IconPlayerSkipForward } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
@@ -25,6 +26,7 @@ import { reportJson } from '../evidence/api';
 import { attachmentSource } from '../evidence/artifacts';
 import { everyAttachment } from '../evidence/artifact-tags';
 import { ScopeNotice } from '../evidence/evidence-scope';
+import { MomentBar, MomentPlayback, SeekStep, stepsOfRecording, useIsPlaying, useMomentVideo } from '../evidence/moments';
 import { duration, exactTime, plural, statusWord } from '../evidence/format';
 import { StatusMark } from '../evidence/marks';
 import { patched } from './navigate';
@@ -38,6 +40,8 @@ const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2] as const;
 /** Step names are shown with their Gherkin keyword when they have one. */
 const KEYWORDS = new Set(['given', 'when', 'then', 'and', 'but']);
 
+const NO_STEPS: readonly Step[] = [];
+
 /** Where the evidence of an entry's check is read from, or null when the entry names no layer that can be read. */
 export function entryDetailQuery(entry: PlaylistEntry) {
   if (entry.backend === null || !/^[0-9a-f]{64}$/.test(entry.layer)) return null;
@@ -66,20 +70,33 @@ function useEntryDetail(entry: PlaylistEntry, enabled: boolean) {
   });
 }
 
-/** The scenario in words: the steps the producer recorded, with the Gherkin keyword where it gave one. */
-function Scenario({ entry, detail }: { entry: PlaylistEntry; detail: CheckDetail | undefined }) {
-  const steps = detail?.check.steps ?? [];
+/** One step of the scenario: in words, with a control to show it in the recording and a mark while it is playing. */
+function ScenarioStep({ step }: { step: Step }) {
+  const playing = useIsPlaying(step);
+  return (
+    <List.Item aria-current={playing ? 'step' : undefined} data-playing={playing || undefined} {...(playing ? { bg: 'blue.0' } : {})}>
+      <Group gap="xs" wrap="wrap">
+        <Text span inherit>
+          {step.kind && KEYWORDS.has(step.kind.toLowerCase()) ? `${step.kind.charAt(0).toUpperCase()}${step.kind.slice(1).toLowerCase()} ` : ''}
+          {step.name}
+          {step.status && step.status !== 'passed' ? ` (${step.status})` : ''}
+        </Text>
+        {playing && <Badge variant="light">Playing now</Badge>}
+        <SeekStep step={step} />
+      </Group>
+    </List.Item>
+  );
+}
+
+/** The scenario in words: the steps the producer recorded for the recording shown, with the Gherkin keyword where it gave one. */
+function Scenario({ entry, detail, steps }: { entry: PlaylistEntry; detail: CheckDetail | undefined; steps: readonly Step[] }) {
   return (
     <Stack gap="xs" component="section" aria-label="Scenario">
       <Title order={3}>{entry.title}</Title>
       {steps.length > 0 && (
         <List type="ordered" spacing="xs" aria-label="Steps">
           {steps.map((step, index) => (
-            <List.Item key={`${step.id ?? step.name}:${index}`}>
-              {step.kind && KEYWORDS.has(step.kind.toLowerCase()) ? `${step.kind.charAt(0).toUpperCase()}${step.kind.slice(1).toLowerCase()} ` : ''}
-              {step.name}
-              {step.status && step.status !== 'passed' ? ` (${step.status})` : ''}
-            </List.Item>
+            <ScenarioStep key={`${step.id ?? step.name}:${index}`} step={step} />
           ))}
         </List>
       )}
@@ -94,6 +111,46 @@ function Scenario({ entry, detail }: { entry: PlaylistEntry; detail: CheckDetail
   );
 }
 
+/** The one `<video>`: joined to the steps beside it, with the player's own handlers kept. */
+function ClipVideo({
+  movie,
+  videoRef,
+  onLoadedMetadata,
+  onTimeUpdate,
+  children,
+  ...rest
+}: {
+  movie: Attachment;
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  onLoadedMetadata: () => void;
+  onTimeUpdate: () => void;
+  children: React.ReactNode;
+  [prop: string]: unknown;
+}) {
+  const moments = useMomentVideo(movie);
+  return (
+    <Box
+      component="video"
+      {...rest}
+      {...moments}
+      ref={(element: HTMLVideoElement | null) => {
+        (videoRef as { current: HTMLVideoElement | null }).current = element;
+        moments?.ref(element);
+      }}
+      onLoadedMetadata={(event: React.SyntheticEvent<HTMLVideoElement>) => {
+        moments?.onLoadedMetadata(event);
+        onLoadedMetadata();
+      }}
+      onTimeUpdate={(event: React.SyntheticEvent<HTMLVideoElement>) => {
+        moments?.onTimeUpdate(event);
+        onTimeUpdate();
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
 /** Who recorded the entry and what it carries, in one line each. */
 function Facts({ entry }: { entry: PlaylistEntry }) {
   return (
@@ -192,6 +249,9 @@ function Clip({
     [attachments]
   );
   const url = movie ? attachmentSource(movie, entry.layer).url : null;
+  // The steps are those of the check or the try that carries this recording, placed by this recording's own timing.
+  const placedIn = useMemo(() => (movie ? [movie] : []), [movie]);
+  const steps = useMemo(() => (detail.data ? stepsOfRecording(detail.data.check, movie ? attachmentIdentity(movie) : undefined) : NO_STEPS), [detail.data, movie]);
 
   useEffect(() => {
     if (video.current) video.current.playbackRate = speed;
@@ -254,10 +314,10 @@ function Clip({
       <Stack gap="xs">
         {focus && <FoundMoment focus={focus} seek={seek} />}
         <ScopeNotice scope={chosen?.scope} name={movie!.name} />
-        <Box
+        <ClipVideo
           key={attempt}
-          component="video"
-          ref={video}
+          movie={movie!}
+          videoRef={video}
           src={url}
           controls
           preload="metadata"
@@ -299,7 +359,7 @@ function Clip({
             const source = attachmentSource(caption, entry.layer).url;
             return source ? <track key={source} kind="captions" src={source} label={caption.description ?? caption.name} /> : null;
           })}
-        </Box>
+        </ClipVideo>
         {movie!.durationMs ? (
           <Text component="div" c="dimmed">
             Length of the recording: {duration(movie!.durationMs)}
@@ -348,15 +408,23 @@ function Clip({
     );
   }
   return (
-    <Stack gap="md" miw={0} aria-label={`Now showing ${entry.title}`} component="section" data-clip={entry.id}>
-      {body}
-      <Facts entry={entry} />
-      <Scenario entry={entry} detail={detail.data} />
-      <Text component="div" c="dimmed">
-        Illustrative recording of one run. Its length and speed are those of the recording, not production latency, and it does not approve the behavior for production.
-      </Text>
-      {developer}
-    </Stack>
+    <MomentPlayback
+      steps={steps}
+      attachments={placedIn}
+      layer={entry.layer}
+      linkSearch={{ test: entry.key, layer: entry.layer, tab: undefined, openRun: undefined, artifact: undefined }}
+    >
+      <Stack gap="md" miw={0} aria-label={`Now showing ${entry.title}`} component="section" data-clip={entry.id}>
+        {body}
+        <Facts entry={entry} />
+        <MomentBar />
+        <Scenario entry={entry} detail={detail.data} steps={steps} />
+        <Text component="div" c="dimmed">
+          Illustrative recording of one run. Its length and speed are those of the recording, not production latency, and it does not approve the behavior for production.
+        </Text>
+        {developer}
+      </Stack>
+    </MomentPlayback>
   );
 }
 

package/packages/visualizer/src/explorer/search.ts

@@ -2,7 +2,7 @@
  * @module Explorer address
  *
  * Everything the test explorer shows is in the address of the `/` route, so a link reproduces the view: the open test,
- * the words searched, the filters, the grouping, the order, the Runs tab with the run opened in it, the exact layer a test's detail is pinned to, and the one file of a run's layer its Artifacts select. Filters that
+ * the words searched, the filters, the grouping, the order, the Runs tab with the run opened in it, the exact layer a test's detail is pinned to, the recording and position of a shared moment in it (`clip`, `clipAt`), and the one file of a run's layer its Artifacts select. Filters that
  * take several values are comma-separated (`status=failed,flaky`); a comma or backslash inside a value is written `\,`
  * or `\\`, and the router encodes `#` and spaces. Anything unreadable is dropped, never an error.
  *
@@ -71,6 +71,10 @@ export const ExplorerSearchFields = {
   openRun: text,
   /** Pins the open test's detail to one exact layer (a run's record of it), instead of the latest combined evidence. With `openRun` and `artifact` it names the layer the file is in. */
   layer: text,
+  /** With `layer`: the exact recording (an `attachmentIdentity`) of that run a shared moment names. It selects that recording; it never selects another run. */
+  clip: text,
+  /** With `clip`: the position in that recording, in milliseconds. */
+  clipAt: z.coerce.number().nonnegative().optional().catch(undefined),
   /** Which current source (a layer id) of the open test the detail's outcome summary, media and failure describe, without pinning a run. Unknown or absent: the newest. */
   source: text,
   /** With `openRun` and `layer`: the one file of that layer (an `artifactRef`: `id:…`, `key:…` or `name:…`) the run's Artifacts select. */
@@ -120,6 +124,8 @@ export type ExplorerSearch = {
   readonly rev?: number;
   readonly openRun?: string;
   readonly layer?: string;
+  readonly clip?: string;
+  readonly clipAt?: number;
   readonly source?: string;
   readonly artifact?: string;
   readonly relEnv?: string;