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>
29 lines
942 B
TypeScript
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).*)',
|
|
],
|
|
};
|
|
|