Skip to content

feat(#302): mp4ファイルのアップロード・ブラウザ内再生機能#305

Merged
Kewton merged 3 commits intodevelopfrom
feature/302-worktree
Feb 18, 2026
Merged

feat(#302): mp4ファイルのアップロード・ブラウザ内再生機能#305
Kewton merged 3 commits intodevelopfrom
feature/302-worktree

Conversation

@Kewton
Copy link
Owner

@Kewton Kewton commented Feb 18, 2026

Summary

  • mp4ファイルのアップロード機能を追加(15MB上限、magic bytes検証)
  • ブラウザ内動画再生(HTML5 <video> タグ、ローディングインジケーター付き)
  • page.tsx のローカル FileContent 型を models.ts から import に統一(DRY原則)

Closes #302

Changes

New Files

  • src/config/video-extensions.ts - 動画拡張子定義・バリデーション(image-extensions.tsパターン準拠)
  • src/components/worktree/VideoViewer.tsx - 動画再生コンポーネント(ローディング・エラーUI付き)
  • tests/unit/config/video-extensions.test.ts - ユニットテスト(33件)

Modified Files

  • src/config/uploadable-extensions.ts - mp4バリデータ追加(15MB、ftyp magic bytes)
  • src/types/models.ts - FileContentisVideo?: boolean 追加
  • src/app/api/worktrees/[id]/files/[...path]/route.ts - 動画ファイル判定・Base64返却・magic bytes検証
  • src/app/api/worktrees/[id]/upload/[...path]/route.ts - サイズ検証順序最適化(メモリ効率改善)
  • src/app/worktrees/[id]/files/[...path]/page.tsx - 型統一、VideoViewer/ImageViewer統合
  • src/components/worktree/FileViewer.tsx - 動画分岐追加、canCopyロジック修正
  • next.config.js - bodySizeLimit 16mb、CSP media-src追加
  • tests/unit/config/uploadable-extensions.test.ts - mp4テスト追加(10件)
  • tests/integration/api-file-operations.test.ts - 動画GETテスト追加(2件)

Test plan

  • npm run lint - エラー0件
  • npx tsc --noEmit - 型エラー0件
  • npm run test:unit - 既存テスト影響なし、新規45件パス
  • npm run build - ビルド成功
  • 15MB以下のmp4ファイルをUIからアップロードして再生確認
  • 15MB超過のmp4アップロードがエラーになることを確認
  • 偽装ファイル(拡張子.mp4だが非動画)がmagic bytes検証で拒否されることを確認

🤖 Generated with Claude Code

Kewton and others added 3 commits February 18, 2026 14:29
- Add video-extensions.ts config (isVideoExtension, getMimeTypeByVideoExtension, ftyp magic bytes)
- Add mp4 validator to uploadable-extensions.ts (15MB limit, ftyp magic bytes at offset 4)
- Add isVideo flag to FileContent interface in models.ts
- Add video file GET handling in files API route (Base64 data URI)
- Create VideoViewer component with loading indicator and HTML5 video controls
- Update FileViewer to render VideoViewer for video files, hide copy button
- Update FileViewerPage (page.tsx) to use shared FileContent type and video/image viewers
- Update CSP to include media-src 'self' data: for video playback
- Increase bodySizeLimit to 16mb for video upload support
- Optimize upload route: move file.size check before arrayBuffer() for memory efficiency
- Add 22 unit tests for video-extensions, 10 mp4 tests for uploadable-extensions
- Add 2 integration tests for video file GET API

Resolves #302

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…mage pattern

- Add validateVideoMagicBytes() and validateVideoContent() to video-extensions.ts
- Apply magic bytes validation to GET route for video files (closes security gap)
- Remove redundant <source> element from VideoViewer
- Expand video-extensions unit tests from 22 to 33 cases
- Update CLAUDE.md with new video-related modules

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Design policy document for mp4 upload feature
- Multi-stage issue review results (Stage 1-8)
- Multi-stage design review results (Stage 1-2)
- TDD implementation context and results
- Acceptance test results (9/9 passed)
- Refactoring results
- Progress report
- Work plan

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@Kewton Kewton merged commit 82e17d6 into develop Feb 18, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant