プロジェクトアーキテクチャ

┌─────────────────────────────────────────────────────────┐
│                      FlowPick                           │
│                                                         │
│  ┌──────────────────┐    ┌──────────────────────────┐   │
│  │   ブラウザ拡張機能 │    │     オンラインツールサイト   │   │
│  │                  │    │                          │   │
│  │ · ネットワークリクエスト監視 │    │ · M3U8 ダウンローダー      │   │
│  │ · メディア自動検知  │    │ · DASH ダウンローダー      │   │
│  │ · ポップアップ UI │    │ · ドキュメントシステム       │   │
│  │ · クロスオリジンリクエスト能力 │    │ · トップページ表示        │   │
│  └────────┬─────────┘    └────────────┬─────────────┘   │
│           │                           │                 │
│           └───────────┬───────────────┘                 │
│                       │                                 │
│           ┌───────────▼───────────────┐                 │
│           │      コアダウンロードエンジン │                 │
│           │                           │                 │
│           │ · useStreamMerge.ts       │                 │
│           │ · useFFmpeg.ts            │                 │
│           │ · セグメントダウンロードと並列制御 │               │
│           │ · AES-128 復号            │                 │
│           │ · ストリーミングファイル書き込み │               │
│           │ · フォーマット変換         │                 │
│           └───────────────────────────┘                 │
└─────────────────────────────────────────────────────────┘

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>
  }
}

ユーザー URL 入力
    ↓
fetch M3U8 コンテンツ
    ↓
m3u8-parser 解析
    ↓
┌─ Master Playlist? ──→ 画質リスト表示 → ユーザー選択
│
└─ Media Playlist? ──→ セグメントリスト抽出
    ↓
#EXT-X-KEY チェック（暗号化情報）
    ↓
キーファイルダウンロード（該当する場合）
    ↓
並列セグメントダウンロード + 復号
    ↓
結合/リマックス
    ↓
ディスクに書き込み

ユーザー URL 入力
    ↓
fetch MPD コンテンツ
    ↓
mpd-parser 解析
    ↓
ContentProtection チェック（DRM）
    ↓
AdaptationSet 抽出（動画/音声）
    ↓
ストリームリスト表示 → ユーザー選択
    ↓
初期化セグメントダウンロード（該当する場合）
    ↓
並列メディアセグメントダウンロード + 復号
    ↓
FMP4 再構成 / 音视频結合
    ↓
ディスクに書き込み

content/zh-Hans/
├── 1.docs/                    # ドキュメント本体
│   ├── 1.getting-started/     # クイックスタート
│   ├── 2.features/            # 機能特性
│   ├── 3.advanced/            # 高度なガイド
│   ├── 5.troubleshooting/     # トラブルシューティング
│   └── 6.developer/           # 開発者ドキュメント
├── 4.changelog/               # 更新ログ
└── 6.legal/                   # 法的条項

┌─────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│ プレイリスト取得 │ → │ プレイリスト解析 │ → │ セグメントダウンロード │ → │ 結合書き込み │
└─────────┘    └──────────┘    └──────────┘    └──────────┘
     │              │               │               │
     ▼              ▼               ▼               ▼
  fetch()      m3u8-parser    Worker Pool     useStreamMerge
                mpd-parser    AES-128 復号    useFFmpeg
                              fetch() 並列    FSA/SS/Blob

書き込み開始
    │
    ▼
File System Access API 利用可能？
    │
    ├── 是 → FSA ストリーミング書き込み使用（最適）
    │         · 16MB バッファ
    │         · 任意サイズ対応
    │
    └── 否 → StreamSaver 利用可能？
                │
                ├── 是 → StreamSaver ストリーミング書き込み使用
                │         · Service Worker プロキシ
                │         · 大容量ファイル対応
                │
                └── 否 → ファイルサイズ予測
                            │
                            ├── < 1.5GB → Blob モード
                            │              · 全部メモリにロード
                            │              · ブラウザダウンロードトリガー
                            │
                            └── > 1.5GB → ダウンロード拒否
                                           · ブラウザ切り替えを促す

m3u8-downloader.vue ──────┐
                          ├──→ useStreamMerge.ts ──→ Web Crypto API
dash-downloader.vue ──────┤         │                    fetch API
                          │         ├──→ useFFmpeg.ts ──→ @ffmpeg/ffmpeg
拡張機能ポップアップ ───────┘         │                    @ffmpeg/util
                                    ├──→ File System Access API
                                    ├──→ StreamSaver.js
                                    └──→ Blob API

ドキュメントシステム ──→ @nuxt/content ──→ Markdown ファイル
                      └──→ @nuxt/ui ──→ Tailwind CSS

flowpick-extension/
├── manifest.json           # Manifest V3 設定
├── background/
│   └── service-worker.js   # Service Worker（ネットワーク監視）
├── popup/
│   ├── popup.html          # ポップアップ
│   ├── popup.js            # ポップアップロジック
│   └── popup.css           # ポップアップスタイル
├── content/
│   └── content.js          # コンテントスクリプト（ページ注入）
└── assets/
    └── icons/              # 拡張機能アイコン

Content Script ←→ Background Service Worker ←→ Popup UI
      │                      │                      │
  ページ DOM アクセス     ネットワークリクエスト監視   ユーザーインタラクションインターフェース
  メディア要素検知        M3U8/MPD フィルタリング     ダウンロードトリガーと管理