Project Architecture

┌─────────────────────────────────────────────────────────┐
│                      FlowPick                           │
│                                                         │
│  ┌──────────────────┐    ┌──────────────────────────┐   │
│  │ Browser Extension │    │   Online Tool Website    │   │
│  │                  │    │                          │   │
│  │ · Network request │    │ · M3U8 Downloader       │   │
│  │   monitoring     │    │ · DASH Downloader       │   │
│  │ · Auto media      │    │ · Documentation System  │   │
│  │   detection      │    │ · Homepage              │   │
│  │ · Popup UI       │    │                          │   │
│  │ · Cross-origin    │    │                          │   │
│  │   request ability│    │                          │   │
│  └────────┬─────────┘    └────────────┬─────────────┘   │
│           │                           │                 │
│           └───────────┬───────────────┘                 │
│                       │                                 │
│           ┌───────────▼───────────────┐                 │
│           │     Core Download Engine   │                 │
│           │                           │                 │
│           │ · useStreamMerge.ts       │                 │
│           │ · useFFmpeg.ts            │                 │
│           │ · Segmented download &    │                 │
│           │   concurrency control     │                 │
│           │ · AES-128 decryption      │                 │
│           │ · Streaming file write    │                 │
│           │ · Format conversion       │                 │
│           └───────────────────────────┘                 │
└─────────────────────────────────────────────────────────┘

export interface StreamMergeOptions {
  segments: ArrayBuffer[] | AsyncGenerator<ArrayBuffer>
  totalSegments: number
  filename: string
  outputFormat?: 'mp4' | 'ts'
  onProgress?: (progress: StreamMergeProgress) => void
  signal?: AbortSignal
}

export interface StreamMergeProgress {
  phase: 'downloading' | 'merging'
  percent: number
  downloadedBytes: number
  totalBytes: number
  speed: string
  eta: string
}

export const useFFmpeg = () => {
  return {
    ffmpeg: Ref<FFmpegType | null>
    loaded: Ref<boolean>
    loading: Ref<boolean>
    error: Ref<string | null>
    load: () => Promise<void>
    mergeToMP4: (options: MergeOptions) => Promise<ArrayBuffer>
    mergeAudioVideo: (options: MergeAudioVideoOptions) => Promise<ArrayBuffer>
    mergeFmp4: (options: MergeFmp4Options) => Promise<ArrayBuffer>
  }
}

User inputs URL
    ↓
fetch M3U8 content
    ↓
m3u8-parser parsing
    ↓
┌─ Master Playlist? ──→ Show quality list → User selects
│
└─ Media Playlist? ──→ Extract segment list
    ↓
Check #EXT-X-KEY (encryption info)
    ↓
Download key file (if present)
    ↓
Concurrent segment download + decrypt
    ↓
Merge/remux
    ↓
Write to disk

User inputs URL
    ↓
fetch MPD content
    ↓
mpd-parser parsing
    ↓
Check ContentProtection (DRM)
    ↓
Extract AdaptationSet (video/audio)
    ↓
Show stream list → User selects
    ↓
Download initialization segments (if present)
    ↓
Concurrent media segment download + decrypt
    ↓
FMP4 reassembly / A/V merge
    ↓
Write to disk

content/zh-Hans/
├── 1.docs/                    # Main documentation
│   ├── 1.getting-started/     # Getting Started
│   ├── 2.features/            # Features
│   ├── 3.advanced/            # Advanced Guide
│   ├── 5.troubleshooting/     # Troubleshooting
│   └── 6.developer/           # Developer Documentation
├── 4.changelog/               # Changelog
└── 6.legal/                   # Legal Terms

┌─────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│ Get Manifest│ → │Parse Manifest│ → │Download Segments│ → │Merge & Write│
└─────────┘    └──────────┘    └──────────┘    └──────────┘
     │              │               │               │
     ▼              ▼               ▼               ▼
  fetch()      m3u8-parser    Worker Pool     useStreamMerge
                mpd-parser    AES-128 decrypt useFFmpeg
                              fetch() concurrent FSA/SS/Blob

Start writing
    │
    ▼
File System Access API available?
    │
    ├── Yes → Use FSA streaming write (optimal)
    │          · 16MB buffer
    │          · Supports any size
    │
    └── No → StreamSaver available?
                │
                ├── Yes → Use StreamSaver streaming write
                │          · Service Worker proxy
                │          · Supports large files
                │
                └── No → Estimate file size
                            │
                            ├── < 1.5GB → Blob mode
                            │             · Load all into memory
                            │             · Trigger browser download
                            │
                            └── > 1.5GB → Reject download
                                           · Prompt to switch browser

m3u8-downloader.vue ──────┐
                          ├──→ useStreamMerge.ts ──→ Web Crypto API
dash-downloader.vue ──────┤         │                    fetch API
                          │         ├──→ useFFmpeg.ts ──→ @ffmpeg/ffmpeg
Extension Popup ──────────┘         │                    @ffmpeg/util
                                    ├──→ File System Access API
                                    ├──→ StreamSaver.js
                                    └──→ Blob API

Documentation ──→ @nuxt/content ──→ Markdown Files
                └──→ @nuxt/ui ──→ Tailwind CSS

flowpick-extension/
├── manifest.json           # Manifest V3 configuration
├── background/
│   └── service-worker.js   # Service Worker (network monitoring)
├── popup/
│   ├── popup.html          # Popup window
│   ├── popup.js            # Popup window logic
│   └── popup.css           # Popup window styles
├── content/
│   └── content.js          # Content script (page injection)
└── assets/
    └── icons/              # Extension icons

Content Script ←→ Background Service Worker ←→ Popup UI
      │                      │                      │
  Page DOM access        Network request monitor  User interaction UI
  Media element detect   M3U8/MPD filtering      Download trigger & manage