feat: make media inspection progressive

tests/unit/components/media-bin.test.tsx

@@ -0,0 +1,93 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { ImportedMediaAsset } from '../../../src/app/application-state';
+import { MediaBin } from '../../../src/components/MediaBin';
+
+afterEach(cleanup);
+
+describe('MediaBin', () => {
+  it('shows browser metadata and offers optional detailed inspection', async () => {
+    const user = userEvent.setup();
+    const onInspect = vi.fn();
+    const file = new File(['video'], 'lecture.mp4', { type: 'video/mp4' });
+    const asset: ImportedMediaAsset = {
+      id: 'lecture',
+      file,
+      objectUrl: 'blob:lecture',
+      phase: 'idle',
+      browserMetadata: {
+        source: 'browser',
+        file: {
+          name: file.name,
+          sizeBytes: file.size,
+          declaredMimeType: file.type,
+          inferredMimeType: file.type,
+          lastModified: file.lastModified,
+        },
+        kind: 'video',
+        durationSeconds: 2_622.48,
+        width: 640,
+        height: 480,
+        hasVideo: true,
+      },
+    };
+
+    render(
+      <MediaBin
+        assets={[asset]}
+        selectedId={asset.id}
+        onSelect={vi.fn()}
+        onInspect={onInspect}
+        onRemove={vi.fn()}
+      />
+    );
+
+    expect(screen.getByText(/43:42\.48/u)).toBeVisible();
+    expect(screen.getByText('Ready to play · Details on demand')).toBeVisible();
+    expect(screen.getByText('lecture.mp4').closest('button')).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    );
+    await user.click(
+      screen.getByRole('button', {
+        name: 'Inspect details for lecture.mp4',
+      })
+    );
+    expect(onInspect).toHaveBeenCalledWith(asset.id);
+  });
+
+  it('keeps a source ready to play after detailed inspection fails', () => {
+    const file = new File(['video'], 'lecture.mp4', { type: 'video/mp4' });
+    const asset: ImportedMediaAsset = {
+      id: 'lecture',
+      file,
+      objectUrl: 'blob:lecture',
+      phase: 'error',
+      error: 'Media inspection exceeded its safety limit.',
+    };
+
+    render(
+      <MediaBin
+        assets={[asset]}
+        onSelect={vi.fn()}
+        onInspect={vi.fn()}
+        onRemove={vi.fn()}
+      />
+    );
+
+    expect(screen.getByText('File ready · Details unavailable')).toBeVisible();
+    expect(
+      screen.getByRole('button', {
+        name: 'Retry detailed inspection for lecture.mp4',
+      })
+    ).toBeEnabled();
+    expect(
+      screen.getByRole('button', {
+        name: 'Retry detailed inspection for lecture.mp4',
+      })
+    ).toHaveAccessibleDescription(
+      'Media inspection exceeded its safety limit.'
+    );
+  });
+});