https://trains.fyi/_next/static/chunks/pages/sightings-18ab909b232e4b13.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9572],{2145:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>T});var a=t(37876),i=t(69609),n=t.n(i),r=t(60371),l=t(28168),o=t(89099),c=t(14232),d=t(75656);t(4402);var g=t(85392),u=t(74),h=t(93408),m=t(73865),p=t(59531),x=t(77604);let f=new Set(["left","right","up","down","approaching","receding"]),b=/^[a-f0-9]{12}$/,j=e=>r.A.get(e).then(e=>e.data),v=e=>{let s=e?.tracks||[];return s.length?[...s].sort((e,s)=>(s.best_confidence||0)-(e.best_confidence||0))[0]:null},y=e=>{let s=(e?.screen_direction||"").toLowerCase();return s?"stationary"===s?"stationary":f.has(s)?"moving":"unknown":"unknown"},w=e=>{let s=(e?.train_type||"").toLowerCase();return"freight"===s||"passenger"===s?s:"unknown"},k=({className:e="h-6 w-6"})=>(0,a.jsx)("svg",{viewBox:"0 0 24 24",className:e,"aria-hidden":"true",children:(0,a.jsx)("path",{fill:"currentColor",d:"M8 5v14l11-7z"})}),N=({className:e="h-3.5 w-3.5"})=>(0,a.jsx)("svg",{viewBox:"0 0 24 24",className:e,fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,a.jsx)("path",{d:"M3 9V4h5M21 9V4h-5M3 15v5h5M21 15v5h-5"})}),_=({className:e="h-5 w-5"})=>(0,a.jsx)("svg",{viewBox:"0 0 24 24",className:e,fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,a.jsx)("path",{d:"M6 6l12 12M6 18L18 6"})}),C=({className:e="h-3.5 w-3.5"})=>

1(0,a.jsx)("svg",{viewBox:"0 0 24 24",className:e,fill:"currentColor","aria-hidden":"true",children:(0,a.jsx)("path",{d:"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"})}),E=({className:e=""})=>(0,a.jsx)("div",{className:`sightings-shimmer ${e}`}),L=()=>(0,a.jsx)("article",{className:"overflow-hidden rounded-xl bg-white ring-1 ring-gray-200",children:(0,a.jsxs)("div",{className:"grid grid-cols-12 gap-3 p-3 sm:gap-4 sm:p-4",children:[(0,a.jsx)("div",{className:"col-span-12 sm:col-span-5",children:(0,a.jsx)(E,{className:"aspect-video w-full rounded-md"})}),(0,a.jsxs)("div",{className:"col-span-12 flex flex-col justify-center gap-2.5 sm:col-span-7",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(E,{className:"h-1.5 w-1.5 rounded-full"}),(0,a.jsx)(E,{className:"h-2.5 w-20 rounded"})]}),(0,a.jsx)(E,{className:"h-4 w-11/12 rounded"}),(0,a.jsx)(E,{className:"h-4 w-2/3 rounded"}),(0,a.jsxs)("div",{className:"flex items-center gap-1.5 pt-0.5",children:[(0,a.jsx)(E,{className:"h-3 w-3 rounded-full"}),(0,a.jsx)(E,{className:"h-3 w-32 rounded"})]})]})]})}),M=({t:e})=>(0,a.jsx)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-white/55 backdrop-blur-[2px]",children:(0,a.jsxs)("div",{className:"flex items-center gap-2.5 rounded-full bg-white/95 px-3.5 py-2 shadow-md ring-1 ring-gray-200",children:[(0,a.jsxs)("span",{className:"relative inline-flex h-4 w-4 items-center justify-center",children:[(0,a.jsx)("span",{className:"absolute inset-0 animate-ping rounded-full bg-blue-700/30"}),(0,a.jsx)("span",{className:"relative inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-200 border-t-blue-700"})]}),(0,a.jsx)("span",{className:"text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-700",children:e("sightingsMapLoading")})]})}),P=({gifUrl:e,posterUrl:s,videoUrl:t,alt:i,onActivate:n})=>{let r=e||s,l=!!t&&"function"==typeof n;return(0,a.jsxs)("div",{className:"group relative aspect-video w-full overflow-hidden rounded-md bg-black ring-1 ring-gray-200",children:[(0,a.jsxs)("button",{type:"button",onClick:e=>{e.stopPropagation(),l&&n()},className:"absolute inset-0 block h-full w-full","aria-label":l?"Open clip":i,children:[r?(0,a.jsx)("img",{src:r,alt:i,loading:"lazy",className:"h-full w-full object-cover"}):(0,a.jsx)("div",{className:"h-full w-full bg-gray-800"}),l&&(0,a.jsx)("span",{className:"absolute inset-0 flex items-center justify-center opacity-0 transition group-hover:opacity-100",children:(0,a.jsx)("span",{className:"inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/95 text-blue-900 shadow-lg ring-1 ring-black/10",children:(0,a.jsx)(k,{})})})]}),l&&(0,a.jsx)("span",{"aria-hidden":"true",className:"pointer-events-none absolute right-1.5 top-1.5 inline-flex items-center justify-center rounded-md bg-black/55 p-1.5 text-white opacity-0 backdrop-blur transition group-hover:opacity-100",title:"Open in dialog",children:(0,a.jsx)(N,{})})]})},z=({videoUrl:e,posterUrl:s,alt:t,status:i,onClose:n,t:r})=>{let l,[o,d]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{let e=e=>{"Escape"===e.key&&n()};document.addEventListener("keydown",e);let s=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",e),document.body.style.overflow=s}},[n]),l="loading"===i?(0,a.jsxs)("div",{className:"flex flex-col items-center gap-3 rounded-md bg-gray-900 px-8 py-10 text-center text-sm text-gray-200",children:[(0,a.jsx)("span",{className:"inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-white","aria-hidden":"true"}),(0,a.jsx)("span",{children:r("sightingsClipLoading")})]}):"expired"===i?(0,a.jsxs)("div",{className:"flex max-w-md flex-col items-center gap-3 rounded-md bg-gray-900 px-8 py-10 text-center text-sm text-gray-200",children:[(0,a.jsx)("span",{className:"text-base font-semibold text-white",children:r("sightingsClipExpiredTitle")}),(0,a.jsx)("span",{className:"text-gray-300",children:r("sightingsClipExpiredDesc")}),(0,a.jsx)("button",{type:"button",onClick:e=>{e.stopPropagation(),n()},className:"mt-2 inline-flex items-center justify-center rounded-md bg-white/10 px-4 py-2 text-white backdrop-blur hover:bg-white/20",children:r("sightingsClipViewRecent")})]}):"pending"===i?(0,a.jsxs)("div",{className:"flex max-w-md flex-col items-center gap-3 rounded-md bg-gray-900 px-8 py-10 text-center text-sm text-gray-200",children:[(0,a.jsx)("span",{className:"inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-white","aria-hidden":"true"}),(0,a.jsx)("span",{children:r("sightingsClipRendering")})]}):!o&&e?(0,a.jsx)("video",{src:e,poster:s,autoPlay:!0,controls:!0,playsInl

1ine:!0,onClick:e=>e.stopPropagation(),onError:()=>d(!0),className:"max-h-[90vh] max-w-[95vw] rounded-md bg-black shadow-2xl",children:t}):(0,a.jsxs)("div",{className:"flex flex-col items-center gap-3 rounded-md bg-gray-900 px-6 py-8 text-center text-sm text-gray-200",children:[(0,a.jsx)("span",{children:r("sightingsClipPlayError")}),e&&(0,a.jsx)("a",{href:e,target:"_blank",rel:"noopener noreferrer",className:"underline",onClick:e=>e.stopPropagation(),children:r("sightingsClipOpenTab")})]}),(0,a.jsxs)("div",{onClick:e=>{e.target===e.currentTarget&&n(),e.stopPropagation()},className:"fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 sm:p-6",role:"dialog","aria-modal":"true","aria-label":"Detection clip",children:[(0,a.jsx)("button",{type:"button",onClick:e=>{e.stopPropagation(),n()},"aria-label":r("sightingsClipOpenLabel"),className:"absolute right-3 top-3 inline-flex items-center justify-center rounded-md bg-white/10 p-2 text-white backdrop-blur hover:bg-white/20 sm:right-4 sm:top-4",children:(0,a.jsx)(_,{})}),l]})},A=({detection:e,selected:s,onActivate:t,registerRef:i,t:n})=>{let r,l,o,c,d,g,u=v(e),h=y(u),m=e.estimated_speed_kmh,p=e.timestamp,f=e.file_urls?.gif,b=e.file_urls?.frame,j=e.file_urls?.video||e.file_urls?.clip,k=(r=y(u),l=w(u),o="moving"===r,c="stationary"===r,d="freight"===l,g="passenger"===l,n(o&&d?"sightingsHeadlineMovingFreight":o&&g?"sightingsHeadlineMovingPassenger":o?"sightingsHeadlineMovingTrain":c&&d?"sightingsHeadlineStatFreight":c&&g?"sightingsHeadlineStatPassenger":c?"sightingsHeadlineStatTrain":d?"sightingsHeadlineFreight":g?"sightingsHeadlinePassenger":"sightingsHeadlineTrain")),N=e.camera_name||`Camera ${e.source_id}`,_=w(u),E="function"==typeof t,L="moving"===h&&"number"==typeof m&&m>0?` \xb7 ~${Math.round(m)} km/h`:"";return(0,a.jsxs)("article",{ref:i,onClick:E?t:void 0,className:`group relative overflow-hidden rounded-xl bg-white ring-1 transition-all duration-200 ${E?"cursor-pointer":""} ${s?"ring-2 ring-blue-700 shadow-lg shadow-blue-900/10":"ring-gray-200 hover:ring-gray-300 hover:shadow-md"}`,"aria-current":s?"true":void 0,children:[(0,a.jsx)("span",{"aria-hidden":"true",className:`absolute left-0 top-0 h-full w-1 transition-colors ${s?"bg-blue-700":"bg-transparent"}`}),(0,a.jsxs)("div",{className:"grid grid-cols-12 gap-3 p-3 sm:gap-4 sm:p-4",children:[(0,a.jsx)("div",{className:"col-span-12 sm:col-span-5",children:(0,a.jsx)(P,{gifUrl:f,posterUrl:b,videoUrl:j,alt:`${N} clip`,onActivate:E?t:void 0})}),(0,a.jsxs)("div",{className:"col-span-12 flex flex-col justify-center sm:col-span-7",children:[(0,a.jsxs)("p",{className:"text-[11px] font-medium uppercase tracking-[0.16em] text-gray-500",children:[(0,a.jsx)("span",{className:`inline-block h-1.5 w-1.5 rounded-full align-middle ${"freight"===_?"bg-amber-500":"passenger"===_?"bg-sky-500":"bg-gray-400"}`}),(0,a.jsx)("span",{className:"ml-1.5 align-middle",children:(0,x.ak)(p)})]}),(0,a.jsx)("h3",{className:"mt-1.5 text-[15px] font-semibold leading-snug text-gray-900 sm:text-base",children:n("sightingsHeadlineDetected").replace("{headline}",k).replace("{speed}",L)}),(0,a.jsxs)("p",{className:"mt-1.5 inline-flex items-center gap-1 text-xs text-gray-600",children:[(0,a.jsx)(C,{className:"h-3 w-3 flex-shrink-0 text-gray-400"}),(0,a.jsx)("span",{className:"truncate",children:N})]})]})]})]})},S=e=>{let s=document.createElement("div");return s.className="sightings-marker",s.innerHTML=`
2    <div class="sightings-marker__inner">
3      <span class="sightings-marker__pulse" aria-hidden="true"></span>
4      <span class="sightings-marker__dot">
5        <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M4 16.5l1.6 1.6L8.5 15h7l2.9 3.1L20 16.5 16 12V6c0-2.2-1.8-4-4-4S8 3.8 8 6v6l-4 4.5zM10 6c0-1.1.9-2 2-2s2 .9 2 2v6h-4V6z"/></svg>
6      </span>
7      ${e>1?`<span class="sightings-marker__count">${e}</span>`:""}
8    </div>
9  `,s},F=({cameraGroups:e,selectedDetection:s,onSelectCamera:t})=>{let i=(0,c.useRef)(null),n=(0,c.useRef)(null),r=(0,c.useRef)(new Map),[o,d]=(0,c.useState)(!1),g=(0,c.useRef)(e),u=(0,c.useRef)(t);return(0,c.useEffect)(()=>{g.current=e},[e]),(0,c.useEffect)(()=>{u.current=t},[t]),(0,c.useEffect)(()=>

9{if(n.current||!i.current)return;let e=new l.A.Map({container:i.current,style:(0,p.pI)(),center:[-73.6,45.5],zoom:10,attributionControl:{compact:!0}});return e.addControl(new l.A.NavigationControl({visualizePitch:!1,showCompass:!1}),"top-right"),e.on("load",()=>d(!0)),n.current=e,()=>{e.remove(),n.current=null}},[]),(0,c.useEffect)(()=>{if(!o||!n.current)return;let s=n.current,t=r.current,a=new Set;for(let[n,r]of(e.forEach(e=>{a.add(e.source_id);let n=t.get(e.source_id);if(n){if(n.marker.setLngLat([e.lng,e.lat]),n.count!==e.count){let a=S(e.count);i(a,e.source_id),n.marker.remove();let r=new l.A.Marker({element:a}).setLngLat([e.lng,e.lat]).addTo(s);t.set(e.source_id,{marker:r,element:a,count:e.count})}return}let r=S(e.count);i(r,e.source_id);let o=new l.A.Marker({element:r}).setLngLat([e.lng,e.lat]).addTo(s);t.set(e.source_id,{marker:o,element:r,count:e.count})}),t))a.has(n)||(r.marker.remove(),t.delete(n));function i(e,s){e.addEventListener("click",e=>{e.stopPropagation(),u.current?.(s)})}if(e.length>0){let t=new l.A.LngLatBounds;e.forEach(e=>t.extend([e.lng,e.lat]));try{t.isEmpty()||s.fitBounds(t,{padding:60,maxZoom:12,duration:0,animate:!1})}catch{}}},[e,o]),(0,c.useEffect)(()=>{if(!o||!n.current)return;let e=n.current,t=s?.source_id||null;r.current.forEach((e,s)=>{s===t?e.element.classList.add("sightings-marker--selected"):e.element.classList.remove("sightings-marker--selected")}),s&&Number.isFinite(s.latitude)&&Number.isFinite(s.longitude)&&e.flyTo({center:[s.longitude,s.latitude],zoom:Math.max(e.getZoom(),13.5),speed:1.4,curve:1.6,essential:!0})},[s,o]),(0,a.jsx)("div",{ref:i,className:"h-full w-full"})},$=({active:e,onClick:s,children:t})=>(0,a.jsx)("button",{type:"button",onClick:s,className:`inline-flex items-center rounded-full px-3 py-1.5 text-sm font-medium ring-1 transition ${e?"bg-blue-800 text-white ring-blue-800 hover:bg-blue-900":"bg-white text-gray-700 ring-gray-300 hover:bg-gray-50"}`,"aria-pressed":e,children:t}),R={moving:!1,stationary:!1,freight:!1,passenger:!1};function T(){let e=(0,o.useRouter)(),{t:s}=(0,m.B)(),[t,i]=(0,c.useState)(R),[r,l]=(0,c.useState)(null),[p,x]=(0,c.useState)("idle"),f=(0,c.useRef)(new Map),k=(0,c.useMemo)(()=>{let s=e.query.id,t=Array.isArray(s)?s[0]:s;return"string"==typeof t&&b.test(t)?t:null},[e.query.id]),N=(0,c.useCallback)(s=>{let t=s&&b.test(s)?{pathname:"/sightings",query:{id:s}}:{pathname:"/sightings"};e.push(t,void 0,{shallow:!0,scroll:!1})},[e]);(0,c.useEffect)(()=>{window.gtag&&window.gtag("event","page_view",{page_title:"Sightings | trains.fyi",page_location:window.location.href,page_path:"/sightings/"})},[]);let{data:_,error:C,isLoading:E,isValidating:P}=(0,d.Ay)("/api/sightings?limit=300",j,{refreshInterval:6e4,revalidateOnFocus:!1,dedupingInterval:3e4,keepPreviousData:!0}),S=(0,c.useMemo)(()=>{let e=_?.detections||[],s=Date.now()-216e5;return e.filter(e=>{let t=new Date(e.timestamp).getTime();return Number.isFinite(t)&&t>=s&&Number.isFinite(e.latitude)&&Number.isFinite(e.longitude)})},[_]),T=t.moving||t.stationary,H=t.freight||t.passenger,B=(0,c.useMemo)(()=>T||H?S.filter(e=>{let s=v(e),a=y(s),i=w(s),n=!T||t.moving&&"moving"===a||t.stationary&&"stationary"===a,r=!H||t.freight&&"freight"===i||t.passenger&&"passenger"===i;return n&&r}):S,[S,t,T,H]),D=(0,c.useMemo)(()=>{let e=new Map;return B.forEach(s=>{let t=s.source_id,a=e.get(t);a?a.count+=1:e.set(t,{source_id:s.source_id,camera_name:s.camera_name,lat:s.latitude,lng:s.longitude,count:1})}),Array.from(e.values())},[B]),I=(0,c.useMemo)(()=>{if(!k)return null;let e=S.find(e=>e.id===k);return e||(r&&r.id===k?r:null)},[k,S,r]);(0,c.useEffect)(()=>{if(!k){x("idle"),l(null);return}if(S.find(e=>e.id===k))return void x("ready");if(r&&r.id===k)return;let e=!1;return x("loading"),l(null),fetch(`/api/sightings/${encodeURIComponent(k)}`).then(async s=>{e||(404===s.status?x("expired"):s.ok?(l(await s.json()),x("ready")):x("expired"))}).catch(()=>{e||x("expired")}),()=>{e=!0}},[k,S,r]),(0,c.useEffect)(()=>{if(!k)return;let e=f.current.get(k);e&&"function"==typeof e.scrollIntoView&&e.scrollIntoView({behavior:"smooth",block:"center"})},[k,B.length]);let O=(0,c.useCallback)(e=>{let s=B.find(s=>s.source_id===e);s&&s.id&&N(s.id)},[B,N]),V=(0,c.useCallback)((e,s)=>{e&&(s?f.current.set(e,s):f.current.delete(e))},[]),U=(0,c.useMemo)(()=>k?"loading"===p?"loading":"expired"===p?"expired":I?I.file_urls?.video||I.file_urls?.clip||"pending"!==I.processing_state?void 0:"pending":null:null,[k,p,I]),W=e=>i(s=>({...s,[e]:!s[e]})),q=T||H;return(0,a.jsxs)("div",{className:"jsx-a36e60ac72ad8e1c min-h-screen bg-[#f6f5f0]",children:[(0,a.jsx)(h.A,{title:"Sightings | trains.fyi",description:"Recent train sightings detected by trains.fyi cameras.",noIndex:!0}),(0,a.jsx)(u.A,{}),(0,a.jsxs)("main",{className:"jsx-a36e60ac72ad8e1c mx-auto max-w-[1400px] px-4 pb-12 pt-6 sm:px-6 lg:px-8",children:[(0,a.jsxs)("header",{className:"jsx-a36e60ac72ad8e1c mb-5 flex flex-wrap items-end justify-between gap-3",children:[(0,a.jsxs)("div",{className:"jsx-a36e60ac72ad8e1c",children:[(0,a.jsx)("p",{className:"jsx-a36e60ac72ad8e1c text-[11px] font-semibold uppercase tracking-[0.22em] text-blue-800/80",children:s("sightingsPageLive")}),(0,a.jsxs)("h1",{className:"jsx-a36e60ac72ad8e1c mt-1 flex flex-wrap items-center gap-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl",children:[s("footerSightings"),(0,a.jsx)("span",{title:"This feature is still in development",className:"jsx-a36e60ac72ad8e1c inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-800 ring-1 ring-amber-300",children:s("freightAlpha")})]}),(0,a.jsx)("p",{className:"jsx-a36e60ac72ad8e1c mt-1.5 text-sm text-gray-600",children:s("sightingsPageDesc").replace("{hours}",6)})]}),(0,a.jsxs)("div",{className:"jsx-a36e60ac72ad8e1c flex items-center gap-2 text-xs text-gray-500",children:[(0,a.jsx)("span",{className:`jsx-a36e60ac72ad8e1c inline-block h-2 w-2 rounded-full ${P?"animate-pulse bg-blue-600":"bg-emerald-500"}`}),(0,a.jsxs)("span",{className:"jsx-a36e60ac72ad8e1c tabular-nums",children:[1===B.length?s("sightingsPageCountSingular").replace("{n}",B.length):s("sightingsPageCountPlural").replace("{n}",B.length),P&&(0,a.jsx)("span",{className:"jsx-a36e60ac72ad8e1c ml-1 text-gray-400",children:s("sightingsPageRefreshing")})]})]})]}),(0,a.jsxs)("div",{className:"jsx-a36e60ac72ad8e1c grid grid-cols-12 gap-5 lg:gap-6",children:[(0,a.jsxs)("section",{className:"jsx-a36e60ac72ad8e1c col-span-12 lg:col-span-5 xl:col-span-5",children:[(0,a.jsx)("div",{className:"jsx-a36e60ac72ad8e1c 

9sticky top-2 z-10 mb-4 rounded-xl border border-gray-200 bg-white/85 p-2.5 shadow-sm backdrop-blur",children:(0,a.jsxs)("div",{className:"jsx-a36e60ac72ad8e1c flex flex-wrap items-center gap-1.5",children:[(0,a.jsx)($,{active:t.moving,onClick:()=>W("moving"),children:s("sightingsFilterMoving")}),(0,a.jsx)($,{active:t.stationary,onClick:()=>W("stationary"),children:s("sightingsFilterStationary")}),(0,a.jsx)("span",{"aria-hidden":"true",className:"jsx-a36e60ac72ad8e1c mx-1 h-5 w-px bg-gray-300"}),(0,a.jsx)($,{active:t.freight,onClick:()=>W("freight"),children:s("sightingsFilterFreight")}),(0,a.jsx)($,{active:t.passenger,onClick:()=>W("passenger"),children:s("sightingsFilterPassenger")}),q&&(0,a.jsx)("button",{type:"button",onClick:()=>i(R),className:"jsx-a36e60ac72ad8e1c ml-auto text-xs font-medium text-gray-500 underline-offset-2 hover:text-gray-800 hover:underline",children:s("sightingsFilterClear")})]})}),C&&(0,a.jsx)("div",{className:"jsx-a36e60ac72ad8e1c rounded-xl bg-red-50 p-4 text-sm text-red-800 ring-1 ring-red-200",children:s("sightingsLoadError")}),!C&&E&&0===S.length&&(0,a.jsxs)("div",{"aria-busy":"true","aria-live":"polite",className:"jsx-a36e60ac72ad8e1c space-y-3",children:[(0,a.jsx)("span",{className:"jsx-a36e60ac72ad8e1c sr-only",children:s("sightingsLoadingLabel")}),Array.from({length:4}).map((e,s)=>(0,a.jsx)(L,{},s))]}),!C&&!E&&0===B.length&&(0,a.jsx)("div",{className:"jsx-a36e60ac72ad8e1c rounded-xl border border-dashed border-gray-300 bg-white p-8 text-center",children:(0,a.jsx)("p",{className:"jsx-a36e60ac72ad8e1c text-sm text-gray-600",children:0===S.length?s("sightingsEmptyWindow").replace("{hours}",6):s("sightingsEmptyFilter")})}),B.length>0&&(0,a.jsx)("div",{className:"jsx-a36e60ac72ad8e1c space-y-3",children:B.map(e=>{let t=e.id||`${e.source_id}::${e.timestamp}`,i=e.id?()=>N(e.id):void 0;return(0,a.jsx)(A,{detection:e,selected:!!e.id&&e.id===k,onActivate:i,registerRef:s=>V(e.id,s),t:s},t)})})]}),(0,a.jsx)("aside",{className:"jsx-a36e60ac72ad8e1c col-span-12 lg:col-span-7 xl:col-span-7",children:(0,a.jsxs)("div",{className:"jsx-a36e60ac72ad8e1c sticky top-2 h-[420px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm lg:h-[calc(100vh-6rem)]",children:[(0,a.jsx)(F,{cameraGroups:D,selectedDetection:I,onSelectCamera:O}),!C&&E&&!_&&(0,a.jsx)(M,{t:s}),(0,a.jsxs)("div",{className:"jsx-a36e60ac72ad8e1c pointer-events-none absolute left-3 top-3 z-10 inline-flex items-center gap-1.5 rounded-full bg-white/90 px-2.5 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-700 shadow ring-1 ring-gray-200 backdrop-blur",children:[(0,a.jsx)("span",{className:"jsx-a36e60ac72ad8e1c inline-block h-1.5 w-1.5 rounded-full bg-blue-700"}),1===D.length?s("sightingsCameraSingular").replace("{n}",D.length):s("sightingsCameraPlural").replace("{n}",D.length)]})]})})]})]}),(0,a.jsx)(g.A,{}),k&&null!==U&&(0,a.jsx)(z,{videoUrl:I?.file_urls?.video||I?.file_urls?.clip,posterUrl:I?.file_urls?.frame,alt:I?.camera_name||"Detection clip",status:U,onClose:()=>N(null),t:s}),(0,a.jsx)(n(),{id:"a36e60ac72ad8e1c",children:".sightings-shimmer{background-color:#eef0f3;background-image:linear-gradient(90deg,rgba(238,240,243,0)0%,rgba(255,255,255,.85)50%,rgba(238,240,243,0)100%);background-size:200%100%;background-repeat:no-repeat;background-position:200%0;animation:sightings-shimmer 1.4s ease-in-out infinite}@keyframes sightings-shimmer{0%{background-position:200%0}100%{background-position:-200%0}}@media(prefers-reduced-motion:reduce){.sightings-shimmer{animation:none}}.sightings-marker{width:30px;height:30px;cursor:pointer}.sightings-marker__inner{position:relative;width:100%;height:100%}.sightings-marker__dot{position:absolute;inset:0;border-radius:9999px;background:#1e40af;color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(15,23,42,.35),0 0 0 3px#fff;transition:background 180ms ease,box-shadow 180ms ease,transform 180ms cubic-bezier(.4,0,.2,1);will-change:transform}.sightings-marker:hover .sightings-marker__dot{background:#1d4ed8;box-shadow:0 4px 10px rgba(15,23,42,.45),0 0 0 3px#fff;transform:translatey(-2px)}.sightings-marker__count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9999px;background:#f59e0b;color:#1f2937;font-size:10px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px#fff;z-index:2}.sightings-marker__pulse{position:absolute;inset:0;border-radius:9999px;background:rgba(30,64,175,.45);opacity:0;pointer-events:none;transform-origin:center}.sightings-marker--selected{z-index:10}.sightings-marker--selected .sightings-marker__dot{background:#b45309;box-shadow:0 4px 12px rgba(180,83,9,.5),0 0 0 3px#fff;transform:scale(1.2)}.sightings-marker--selected:hover .sightings-marker__dot{transform:scale(1.2)translatey(-2px)}.sightings-marker--selected .sightings-marker__pulse{background:rgba(245,158,11,.5);opacity:1;animation:sightings-marker-pulse 1.6s ease-out infinite}@keyframes sightings-marker-pulse{0%{transform:scale(.7);opacity:.7}80%{transform:scale(2.6);opacity:0}

9100%{transform:scale(2.6);opacity:0}}"})]})}},4402:()=>{},22204:(e,s,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/sightings",function(){return t(2145)}])},77808:(e,s,t)=>{"use strict";t.d(s,{A:()=>i});var a=t(14232);let i=a.forwardRef(function({title:e,titleId:s,...t},i){return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:i,"aria-labelledby":s},t),e?a.createElement("title",{id:s},e):null,a.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"}))})}},e=>{e.O(0,[6701,3368,3927,2325,1808,3990,8447,5392,8710,636,6593,8792],()=>e(e.s=22204)),_N_E=e.O()}]);