87 lines
3.9 KiB
TypeScript
87 lines
3.9 KiB
TypeScript
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>
|
|
);
|
|
}
|