feat: make media inspection progressive

tests/browser/browser-helpers.ts

@@ -7,6 +7,7 @@ import { tmpdir } from 'node:os';
 import { dirname, extname, join, resolve, sep } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type { ConsoleMessage, Page, Request, Response } from '@playwright/test';
+import { expect } from '@playwright/test';
 
 export const REPOSITORY_ROOT = resolve(
   dirname(fileURLToPath(import.meta.url)),
@@ -19,6 +20,20 @@ export const GENERATED_FIXTURES = join(
 );
 export const PRIMARY_FIXTURE = join(GENERATED_FIXTURES, 'pattern-av.mp4');
 
+export async function inspectMediaDetails(
+  page: Page,
+  fileName: string
+): Promise<void> {
+  const card = page.locator('.media-card').filter({ hasText: fileName });
+  const inspect = page.getByRole('button', {
+    name: `Inspect details for ${fileName}`,
+  });
+  if ((await inspect.count()) > 0) await inspect.click();
+  await expect(card.locator('.phase--ready')).toBeVisible({
+    timeout: 120_000,
+  });
+}
+
 const NESTED_PREFIX = '/deep/nested/av/';
 const SECURITY_HEADERS = {
   'Cross-Origin-Embedder-Policy': 'require-corp',