biohazard-vfx-website/src/middleware.ts
Nicholai a06b2607c7 feat(video): add custom reel player with local mp4 support
Replaced Frame.io link with embedded local video player for the studio reel.

## Changes
- Created ReelPlayer component with custom HTML5 video controls
  - Play/pause, volume, fullscreen, progress bar with scrubbing
  - Loading and error states with user-friendly messages
  - Dark theme styling with orange (#ff4d00) accents and sharp corners
  - Responsive design for mobile/tablet/desktop

- Integrated ReelPlayer into Temp-Placeholder (Work section)
  - Replaced external Frame.io link with local /reel.mp4
  - Maintains minimal aesthetic with proper animations

- Fixed middleware whitelist issue
  - Added /reel.mp4 to middleware allowlist (src/middleware.ts:8)
  - Prevents 307 redirect that was causing "text/html" Content-Type error

- Added video file headers to next.config.ts
  - Ensures proper video/mp4 MIME type for all .mp4 files

- Updated CLAUDE.md documentation
  - Added critical warning about middleware whitelist in "Common pitfalls"
  - Added rule #9 to "Agents operating rules" for public/ file additions
  - Future-proofs against this issue happening again

## Technical Details
- Video: 146MB, H.264 codec, 4K resolution (3840x2160)
- Player handles large file buffering gracefully
- ReadyState check prevents loading overlay persistence
- All controls accessible and keyboard-friendly

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-23 03:05:27 -06:00

29 lines
942 B
TypeScript

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
// Allow only the home page and Next.js internal routes
if (pathname === '/' || pathname.startsWith('/_next') || pathname.startsWith('/favicon.') || pathname === '/OLIVER.jpeg' || pathname === '/OLIVER_depth.jpeg' || pathname === '/no_pigeons_zone.gif' || pathname === '/reel.mp4') {
return NextResponse.next();
}
// Redirect all other routes to home
return NextResponse.redirect(new URL('/', request.url));
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
*/
'/((?!api|_next/static|_next/image|favicon.ico).*)',
],
};