fix(screenshot-stream.ts): capture initial state & handle when no scr…

…eenshots available

Also updates react-trrack-example to match

apps/react-trrack-example/src/app/App.tsx

@@ -34,7 +34,11 @@ function App() {
  return (
  <Box sx={{ height: '100vh', width: '100vw' }}>
  <Navbar t={trrackManager} />
- <Button onClick={() => downloadScreenshot(ss.getNth(0), 'screenshot')}>
+ <Button
+ onClick={() =>
+ ss.getNth(0) ? downloadScreenshot(ss.getNth(0)!, 'screenshot') : null
+ }
+ >
  Download Latest Screenshot
  </Button>
  <Button

packages/core/src/provenance/screenshot-stream.ts

@@ -95,6 +95,9 @@ export function intitializeScreenshotStream(
  // I honestly don't know how we'd get here
  throw new Error('Unable to start recording; no stream available');
  }
+
+ // We should capture initial state
+ capture();
  }
 
  /**
@@ -169,7 +172,11 @@ export function intitializeScreenshotStream(
  * @param n - The index of the screenshot to retrieve. 0 is the most recent.
  * @returns The nth screenshot.
  */
- function getNth(n: number): ImageData {
+ function getNth(n: number): ImageData | null {
+ if (screenshots.length === 0) {
+ return null;
+ }
+
  if (n < 0 || n >= screenshots.length) {
  throw new Error(`Screenshot index out of bounds: ${n}`);
  }

packages/core/src/provenance/types.ts

@@ -27,7 +27,7 @@ export interface ScreenshotStream {
  capture(): ImageData;
  delayCapture(timeout: number): void;
  stop(): void;
- getNth(n: number): ImageData;
+ getNth(n: number): ImageData | null;
  count(): number;
  getAll(): ImageData[];
  isRecording(): boolean;