Add rate limiting, security headers, fix CORS for production

2026-02-19 16:37:47 +00:00
parent a85fa0d211
commit c6b8fb752a
3449 changed files with 926916 additions and 4142 deletions
@@ -0,0 +1,58 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+import { Radio } from 'lucide-react';
+
+interface Props {
+  hlsUrl?: string;
+  thumbnailUrl?: string;
+}
+
+export default function VideoPlayer({ hlsUrl, thumbnailUrl }: Props) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!hlsUrl || !videoRef.current) return;
+    const video = videoRef.current;
+
+    if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = hlsUrl;
+      return;
+    }
+
+    import('hls.js').then(({ default: Hls }) => {
+      if (Hls.isSupported()) {
+        const hls = new Hls();
+        hls.loadSource(hlsUrl);
+        hls.attachMedia(video);
+        return () => hls.destroy();
+      }
+    });
+  }, [hlsUrl]);
+
+  if (!hlsUrl) {
+    return (
+      <div className="relative aspect-video bg-black/40 rounded-2xl border border-white/5 flex flex-col items-center justify-center gap-4 text-stone-500">
+        <Radio size={48} className="text-stone-600" />
+        <p className="text-sm font-medium">Stream offline — no source available</p>
+        {thumbnailUrl && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={thumbnailUrl} alt="Stream thumbnail" className="absolute inset-0 w-full h-full object-cover rounded-2xl opacity-20" />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative aspect-video rounded-2xl overflow-hidden bg-black shadow-2xl shadow-black/60">
+      <video
+        ref={videoRef}
+        controls
+        autoPlay
+        muted
+        playsInline
+        className="w-full h-full"
+        poster={thumbnailUrl}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,86 @@
+import React from 'react';
+import { notFound } from 'next/navigation';
+import { MapPin, Users, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { api, Campaign } from '@/lib/api';
+import VideoPlayer from './VideoPlayer';
+import DonationCard from '../../components/DonationCard';
+
+export default async function StreamDetailPage({ params }: { params: { id: string } }) {
+  let stream;
+  let campaigns: Campaign[] = [];
+  try {
+    [stream, campaigns] = await Promise.all([
+      api.getStream(params.id),
+      api.getCampaigns(),
+    ]);
+  } catch {
+    notFound();
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-6 py-10 space-y-8">
+      {/* Back */}
+      <Link href="/streams" className="inline-flex items-center gap-2 text-stone-400 hover:text-white text-sm font-medium transition-colors">
+        <ArrowLeft size={16} /> Back to all cameras
+      </Link>
+
+      {/* Status bar */}
+      <div className="flex flex-wrap items-center gap-4">
+        <span className={`flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase ${
+          stream.status === 'live' ? 'bg-red-500/20 text-red-400' : 'bg-stone-700/40 text-stone-400'
+        }`}>
+          {stream.status === 'live' && <span className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />}
+          {stream.status === 'live' ? 'Live' : 'Offline'}
+        </span>
+        {stream.location && (
+          <span className="flex items-center gap-1.5 text-stone-400 text-sm">
+            <MapPin size={14} /> {stream.location}
+          </span>
+        )}
+        {stream.viewerCount > 0 && (
+          <span className="flex items-center gap-1.5 text-stone-400 text-sm">
+            <Users size={14} /> {stream.viewerCount.toLocaleString()} watching
+          </span>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+        {/* Main video + info */}
+        <div className="xl:col-span-2 space-y-6">
+          <VideoPlayer hlsUrl={stream.hlsUrl} thumbnailUrl={stream.thumbnailUrl} />
+          <div className="space-y-3">
+            <h1 className="text-3xl font-black text-white">{stream.name}</h1>
+            {stream.description && (
+              <p className="text-stone-400 leading-relaxed">{stream.description}</p>
+            )}
+          </div>
+
+          {/* Wildlife facts panel */}
+          <div className="bg-surfaceGreen border border-white/5 rounded-2xl p-6 space-y-4">
+            <h3 className="font-bold text-gold text-sm uppercase tracking-widest">Burrowing Owl Facts</h3>
+            <ul className="space-y-3 text-sm text-stone-300 leading-relaxed">
+              <li className="flex gap-3"><span className="text-teal font-bold shrink-0">•</span>Burrowing owls are the official city bird of Cape Coral, FL.</li>
+              <li className="flex gap-3"><span className="text-teal font-bold shrink-0">•</span>Unlike most owls, they are active during the day and nest underground.</li>
+              <li className="flex gap-3"><span className="text-teal font-bold shrink-0">•</span>They are a Species of Special Concern in Florida — development threatens their habitat.</li>
+              <li className="flex gap-3"><span className="text-teal font-bold shrink-0">•</span>CCFW monitors over 2,000 active burrow sites across Cape Coral.</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Sidebar: Donate */}
+        <div className="space-y-6">
+          <div className="bg-surfaceGreen border border-white/5 rounded-2xl p-6 space-y-4">
+            <h3 className="font-bold text-white">Support the Cameras</h3>
+            <p className="text-stone-400 text-sm leading-relaxed">
+              These cameras run 24/7 thanks to donations from wildlife lovers like you.
+            </p>
+          </div>
+          {campaigns.slice(0, 1).map((c) => (
+            <DonationCard key={c.id} campaign={c} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}