# joao-salomao/replaybr-extended architecture

> Architecture diagram of the GitHub repository joao-salomao/replaybr-extended, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/joao-salomao/replaybr-extended
- Repository: https://github.com/joao-salomao/replaybr-extended

## Overview

ReplayBR Extended is a Chrome extension for finding replays by court, date, and hour, then producing one downloadable MP4 per selected play, with two cameras side by side when available. The UI loads court options and replay listings, lets users select plays, and invokes the rendering pipeline; completed clips can be downloaded individually or together as a ZIP. The graph includes documented single-camera and camera-order behavior. Some UI wiring and the court-list extraction details are unsampled, so those relationships are shown only where the excerpts or README support them.

Main entry points: [`src/ui/app.ts`](https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/app.ts) (Replay UI), [`src/render.ts`](https://github.com/joao-salomao/replaybr-extended/blob/main/src/render.ts) (Render coordinator), [`src/fieldsExtract.ts`](https://github.com/joao-salomao/replaybr-extended/blob/main/src/fieldsExtract.ts) (Site court loader), [`src/background.ts`](https://github.com/joao-salomao/replaybr-extended/blob/main/src/background.ts) (Tab launcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Extension interface"]
  node_background["Tab launcher<br/>[background.ts]"]
  node_app["Replay UI<br/>[app.ts]"]
  node_select["Court selector<br/>[select.ts]"]
  node_filter["Option filtering<br/>[filter.ts]"]
end

subgraph group_discovery["Replay discovery"]
  node_date["Local date<br/>[dates.ts]"]
  node_fields["Court catalog<br/>[fields.ts]"]
  node_fieldextract["Site court loader<br/>[fieldsExtract.ts]"]
  node_api["Replay API client<br/>[api.ts]"]
end

subgraph group_media["Clip processing"]
  node_render["Render coordinator<br/>[render.ts]"]
  node_mp4["MP4 dimensions<br/>[mp4.ts]"]
  node_encoder["Side-by-side encoder<br/>[encoder.ts]"]
  node_ffmpegloader["FFmpeg loader<br/>[loadFfmpeg.ts]"]
end

subgraph group_delivery["Downloads and packaging"]
  node_download["Camera downloads<br/>[download.ts]"]
  node_zip["ZIP builder<br/>[zip.ts]"]
end

node_user(("Extension user"))
node_replaybr(("ReplayBR site and API"))
node_ffmpeg["FFmpeg WASM"]

node_user -->|"opens extension"| node_background
node_background -->|"opens tab"| node_app
node_user -->|"selects plays"| node_app
node_app -->|"uses selector"| node_select
node_select -->|"filters options"| node_filter
node_app -->|"sets date"| node_date
node_app -->|"loads courts"| node_fieldextract
node_fieldextract -->|"falls back to"| node_fields
node_fieldextract -->|"reads court map"| node_replaybr
node_app -->|"resolves court"| node_fields
node_app -->|"requests replays"| node_api
node_api -->|"fetches listings"| node_replaybr
node_app -->|"renders selection"| node_render
node_render -->|"downloads cameras"| node_download
node_download -->|"fetches camera files"| node_replaybr
node_render -->|"probes dimensions"| node_mp4
node_render -->|"encodes clips"| node_encoder
node_app -->|"loads encoder"| node_ffmpegloader
node_ffmpegloader -->|"loads WASM core"| node_ffmpeg
node_app -->|"builds archive"| node_zip
node_app -->|"offers clip downloads"| node_user
node_app -->|"offers ZIP download"| node_user

click node_background "https://github.com/joao-salomao/replaybr-extended/blob/main/src/background.ts"
click node_app "https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/app.ts"
click node_select "https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/select.ts"
click node_filter "https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/filter.ts"
click node_date "https://github.com/joao-salomao/replaybr-extended/blob/main/src/dates.ts"
click node_fields "https://github.com/joao-salomao/replaybr-extended/blob/main/src/fields.ts"
click node_fieldextract "https://github.com/joao-salomao/replaybr-extended/blob/main/src/fieldsExtract.ts"
click node_api "https://github.com/joao-salomao/replaybr-extended/blob/main/src/api.ts"
click node_download "https://github.com/joao-salomao/replaybr-extended/blob/main/src/download.ts"
click node_render "https://github.com/joao-salomao/replaybr-extended/blob/main/src/render.ts"
click node_mp4 "https://github.com/joao-salomao/replaybr-extended/blob/main/src/mp4.ts"
click node_encoder "https://github.com/joao-salomao/replaybr-extended/blob/main/src/encoder.ts"
click node_ffmpegloader "https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/loadFfmpeg.ts"
click node_zip "https://github.com/joao-salomao/replaybr-extended/blob/main/src/zip.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_background,node_app,node_select,node_filter,node_user toneBlue
class node_date,node_fields,node_fieldextract,node_api toneAmber
class node_render,node_mp4,node_encoder,node_ffmpegloader,node_replaybr toneMint
class node_download,node_zip toneRose
class node_ffmpeg toneIndigo
```

## Components

### Extension interface

- [Tab launcher](https://github.com/joao-salomao/replaybr-extended/blob/main/src/background.ts): `src/background.ts`
- [Replay UI](https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/app.ts): `src/ui/app.ts`
- [Court selector](https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/select.ts): `src/ui/select.ts`
- [Option filtering](https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/filter.ts): `src/ui/filter.ts`

### Replay discovery

- [Local date](https://github.com/joao-salomao/replaybr-extended/blob/main/src/dates.ts): `src/dates.ts`
- [Court catalog](https://github.com/joao-salomao/replaybr-extended/blob/main/src/fields.ts): `src/fields.ts`
- [Site court loader](https://github.com/joao-salomao/replaybr-extended/blob/main/src/fieldsExtract.ts): `src/fieldsExtract.ts`
- [Replay API client](https://github.com/joao-salomao/replaybr-extended/blob/main/src/api.ts): `src/api.ts`

### Clip processing

- [Render coordinator](https://github.com/joao-salomao/replaybr-extended/blob/main/src/render.ts): `src/render.ts`
- [MP4 dimensions](https://github.com/joao-salomao/replaybr-extended/blob/main/src/mp4.ts): `src/mp4.ts`
- [Side-by-side encoder](https://github.com/joao-salomao/replaybr-extended/blob/main/src/encoder.ts): `src/encoder.ts`
- [FFmpeg loader](https://github.com/joao-salomao/replaybr-extended/blob/main/src/ui/loadFfmpeg.ts): `src/ui/loadFfmpeg.ts`

### Downloads and packaging

- [Camera downloads](https://github.com/joao-salomao/replaybr-extended/blob/main/src/download.ts): `src/download.ts`
- [ZIP builder](https://github.com/joao-salomao/replaybr-extended/blob/main/src/zip.ts): `src/zip.ts`

### Other components

- **Extension user**
- **ReplayBR site and API**
- **FFmpeg WASM**

## Connections

- Extension user → Tab launcher: opens extension (evidence: `README.md`)
- Tab launcher → Replay UI: opens tab (evidence: `README.md`)
- Extension user → Replay UI: selects plays (evidence: `README.md`)
- Replay UI → Court selector: uses selector (evidence: `src/ui/app.ts`)
- Court selector → Option filtering: filters options (evidence: `src/ui/select.ts`)
- Replay UI → Local date: sets date (evidence: `src/ui/app.ts`)
- Replay UI → Site court loader: loads courts (evidence: `src/ui/app.ts`)
- Site court loader → Court catalog: falls back to (evidence: `README.md`)
- Site court loader → ReplayBR site and API: reads court map (evidence: `README.md`)
- Replay UI → Court catalog: resolves court (evidence: `src/ui/app.ts`)
- Replay UI → Replay API client: requests replays (evidence: `src/ui/app.ts`)
- Replay API client → ReplayBR site and API: fetches listings (evidence: `src/api.ts`)
- Replay UI → Render coordinator: renders selection (evidence: `src/ui/app.ts`)
- Render coordinator → Camera downloads: downloads cameras (evidence: `src/render.ts`)
- Camera downloads → ReplayBR site and API: fetches camera files (evidence: `README.md`)
- Render coordinator → MP4 dimensions: probes dimensions (evidence: `src/render.ts`)
- Render coordinator → Side-by-side encoder: encodes clips (evidence: `src/render.ts`)
- Replay UI → FFmpeg loader: loads encoder (evidence: `src/ui/app.ts`)
- FFmpeg loader → FFmpeg WASM: loads WASM core (evidence: `src/ui/loadFfmpeg.ts`)
- Replay UI → ZIP builder: builds archive (evidence: `src/ui/app.ts`)
- Replay UI → Extension user: offers clip downloads (evidence: `README.md`)
- Replay UI → Extension user: offers ZIP download (evidence: `README.md`)