From 108f8b441a19a6399bfe73b5a06520ac82bd7af3 Mon Sep 17 00:00:00 2001
From: Sociowire Dev <dev@sociowire.com>
Date: Tue, 13 Jan 2026 05:31:07 +0000
Subject: [PATCH] feat: camera pins with thumbnail + LIVE badge (v0.0018)

- Camera markers show thumbnail preview from live stream
- Red LIVE badge with pulsing indicator
- Fallback to video icon if thumbnail unavailable
- Blue glow effect for camera pins

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/App.jsx                               |  2 +-
 src/api/client.js                         | 11 ++--
 src/components/Map/TemplateMarkerCard.jsx |  4 +-
 src/components/Map/markerManager.js       | 66 +++++++++++++++++++++--
 src/components/Map/templateSpecs.js       |  4 +-
 src/components/Map/usePostsEngine.js      | 27 +++++++++-
 src/components/Posts/PostCardTemplate.jsx |  2 +-
 src/styles/mapMarkers.css                 | 58 ++++++++++++--------
 8 files changed, 135 insertions(+), 39 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e94c94e..efe3cda 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -251,7 +251,7 @@ export default function App() {
       <footer className="sw-footer">
         <div className="sw-footer-inner">
           <div className="sw-footer-brand">SOCIOWIRE</div>
-          <div className="sw-footer-brand">© Sociowire v0.0017</div>
+          <div className="sw-footer-brand">© Sociowire v0.0018</div>
           <div id="sw-weather-debug" style={{color: '#0ea5e9', fontSize: '10px'}}></div>
           <nav className="sw-footer-nav" aria-label="Site">
             <a href="/">{t('nav.home')}</a>
diff --git a/src/api/client.js b/src/api/client.js
index a037857..b9ae33f 100644
--- a/src/api/client.js
+++ b/src/api/client.js
@@ -72,7 +72,7 @@ function cloneJson(value) {
   }
 }
 
-async function fetchJsonCached(url, { ttlMs = 0, headers = {}, credentials = "include" } = {}) {
+async function fetchJsonCached(url, { ttlMs = 0, headers = {}, credentials = "include", signal } = {}) {
   const key = cacheKeyFor(url, headers);
   if (ttlMs > 0 && key) {
     const hit = responseCache.get(key);
@@ -81,7 +81,7 @@ async function fetchJsonCached(url, { ttlMs = 0, headers = {}, credentials = "in
     }
   }
 
-  const res = await fetch(url, { credentials, headers });
+  const res = await fetch(url, { credentials, headers, signal });
   if (!res.ok) {
     const text = await res.text().catch(() => "");
     const err = new Error(text || `HTTP ${res.status}`);
@@ -349,7 +349,7 @@ export async function fetchPostById(postId) {
   const qs = new URLSearchParams();
   qs.set("id", String(postId));
   try {
-    const data = await fetchJsonCached(`${apiBase()}/post?${qs.toString()}`, { ttlMs: 15000 });
+    const data = await fetchJsonCached(`${apiBase()}/post?${qs.toString()}`, { ttlMs: 3000 });
     if (!data || typeof data !== "object") return null;
     const resolved = await resolveAssetRefsInPosts([data]);
     return resolved && resolved[0] ? resolved[0] : data;
@@ -455,7 +455,7 @@ export async function registerUser(payload) {
  * NEW: Fetch intelligent personalized feed with screen-aware prioritization
  * Uses backend /api/smart-feed endpoint (which proxies to reco-service)
  */
-export async function fetchSmartFeed(params = {}) {
+export async function fetchSmartFeed(params = {}, { signal } = {}) {
   const qs = new URLSearchParams();
 
   if (params.user_id) qs.set("user_id", String(params.user_id));
@@ -482,10 +482,11 @@ export async function fetchSmartFeed(params = {}) {
   const url = `${apiBase()}/smart-feed?${qs.toString()}`;
 
   try {
-    const data = await fetchJsonCached(url, { ttlMs: 10000 });
+    const data = await fetchJsonCached(url, { ttlMs: 10000, signal });
     const items = Array.isArray(data) ? data : data.results || data.items || [];
     return await resolveAssetRefsInPosts(items);
   } catch (err) {
+    if (err.name === "AbortError") return []; // silently ignore aborted requests
     console.warn("fetchSmartFeed error:", err);
     return [];
   }
diff --git a/src/components/Map/TemplateMarkerCard.jsx b/src/components/Map/TemplateMarkerCard.jsx
index 3f7fec5..7f7a988 100644
--- a/src/components/Map/TemplateMarkerCard.jsx
+++ b/src/components/Map/TemplateMarkerCard.jsx
@@ -19,8 +19,8 @@ export default function TemplateMarkerCard({
   const data = useMemo(() => {
     const rawImage =
       mode === "mini"
-        ? (post?.image_small || post?.image_medium || "")
-        : (post?.image_medium || post?.image_large || post?.image_small || post?.image || post?.media_url || "");
+        ? (post?.image_small || post?.image_medium || post?.thumbnail_url || "")
+        : (post?.image_medium || post?.image_large || post?.image_small || post?.image || post?.thumbnail_url || post?.media_url || "");
     return {
       headline: post?.title || "Untitled",
       source: post?.source || (post?.author ? `by ${post.author}` : "") || (post?.sub_category || ""),
diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index ecae6d3..926b6f2 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -2466,12 +2466,66 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
     // Weather city name for label
     const weatherCity = isWeather ? (activePost?.city || (activePost?.title || '').split(':')[0].replace(/^[^\w\s]+/, '').trim()) : '';
 
+    // Camera thumbnail URL
+    const cameraThumbnail = isCamera ? (activePost?.thumbnail_url || activePost?.image_small || '') : '';
+
     // Marqueur pin avec image en haut et pointe en bas
-    root.innerHTML = `
-        <div class="sw-simple-marker ${isCamera ? 'sw-camera-marker' : ''} ${isLive ? 'sw-live-marker' : ''} ${isWeather ? 'sw-weather-marker' : ''}" style="
+    root.innerHTML = isCamera ? `
+        <div class="sw-camera-pin" style="
+          position: relative;
+          width: 48px;
+          height: 36px;
+          border-radius: 6px;
+          background: #1a1a2e;
+          border: 2px solid rgba(56, 189, 248, 0.9);
+          box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 20px rgba(56, 189, 248, 0.3);
+          overflow: hidden;
+          transition: transform 0.2s ease, box-shadow 0.2s ease;
+        ">
+          ${cameraThumbnail ? `
+            <img src="${cameraThumbnail}" alt="" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
+            <div style="display:none;width:100%;height:100%;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(56, 189, 248, 0.9), rgba(59, 130, 246, 0.9));">
+              <i class="fa-solid fa-video" style="font-size:16px;color:#fff;"></i>
+            </div>
+          ` : `
+            <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(56, 189, 248, 0.9), rgba(59, 130, 246, 0.9));">
+              <i class="fa-solid fa-video" style="font-size:16px;color:#fff;"></i>
+            </div>
+          `}
+          <div style="
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            padding: 1px 4px;
+            border-radius: 3px;
+            background: rgba(239, 68, 68, 0.95);
+            font-size: 7px;
+            font-weight: 800;
+            color: #fff;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+          ">
+            <span style="width:4px;height:4px;border-radius:50%;background:#fff;animation:pulse 1.5s infinite;"></span>
+            LIVE
+          </div>
+        </div>
+        <div style="
+          width: 0;
+          height: 0;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top: 10px solid rgba(56, 189, 248, 0.9);
+          margin-top: -1px;
+          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+        "></div>
+    ` : `
+        <div class="sw-simple-marker ${isLive ? 'sw-live-marker' : ''} ${isWeather ? 'sw-weather-marker' : ''}" style="
           ${isWeather ? 'width: auto; height: auto; padding: 4px 8px; border-radius: 12px;' : 'width: 32px; height: 32px; border-radius: 50%;'}
           background: ${isWeather ? 'rgba(14, 165, 233, 0.75)' : color};
-          border: ${isWeather ? '1px solid rgba(255,255,255,0.4)' : isCamera ? '2px solid rgba(255,255,255,0.85)' : isLive ? '2px solid rgba(255,255,255,0.9)' : '2px solid white'};
+          border: ${isWeather ? '1px solid rgba(255,255,255,0.4)' : isLive ? '2px solid rgba(255,255,255,0.9)' : '2px solid white'};
           box-shadow: 0 2px 6px rgba(0,0,0,0.25);
           display: flex;
           align-items: center;
@@ -2483,7 +2537,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
           ${isWeather ? `
             <span style="font-size:12px;line-height:1;">${weatherEmoji}</span>
             <span style="font-size:11px;font-weight:600;color:#fff;">${weatherTemp}</span>
-          ` : isLive ? `<i class="fa-solid fa-broadcast-tower" style="font-size:14px;color:#fff;"></i>` : isCamera ? `<i class="fa-solid fa-video" style="font-size:14px;color:#fff;"></i>` : img ? `<img src="${img}" alt="" style="width:100%;height:100%;object-fit:cover;" />` : `
+          ` : isLive ? `<i class="fa-solid fa-broadcast-tower" style="font-size:14px;color:#fff;"></i>` : img ? `<img src="${img}" alt="" style="width:100%;height:100%;object-fit:cover;" />` : `
             <div style="
               width: 12px;
               height: 12px;
@@ -2503,6 +2557,10 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
           margin-top: -2px;
           z-index: 1;
         "></div>` : ''}
+    `;
+
+    // Add hover card for all marker types
+    root.innerHTML += `
       <div class="sw-simple-hover-card" style="
         position: absolute;
         bottom: 100%;
diff --git a/src/components/Map/templateSpecs.js b/src/components/Map/templateSpecs.js
index 0ac4eb9..5083cc0 100644
--- a/src/components/Map/templateSpecs.js
+++ b/src/components/Map/templateSpecs.js
@@ -296,8 +296,8 @@ export function adaptPostToTemplateData(post, opts = {}) {
   const size = (opts.size || "full").toString();
   const rawImage =
     size === "mini"
-      ? (post?.image_small || post?.image_medium || post?.image || post?.media_url || "")
-      : (post?.image_medium || post?.image_large || post?.image_small || post?.image || post?.media_url || "");
+      ? (post?.image_small || post?.image_medium || post?.image || post?.thumbnail_url || post?.media_url || "")
+      : (post?.image_medium || post?.image_large || post?.image_small || post?.image || post?.thumbnail_url || post?.media_url || "");
   const image = normalizeImageUrl(rawImage) || `/og/category?cat=${encodeURIComponent((post?.category || "NEWS").toString().toUpperCase())}&variant=mini`;
   const categoryIcon = getCategoryIcon(post);
   return { headline, source, summary, url, image, categoryIcon };
diff --git a/src/components/Map/usePostsEngine.js b/src/components/Map/usePostsEngine.js
index 20b2db1..87c0c83 100644
--- a/src/components/Map/usePostsEngine.js
+++ b/src/components/Map/usePostsEngine.js
@@ -407,6 +407,7 @@ export function usePostsEngine({
   const searchResultsRef = useRef(false);
   const replacePoolRef = useRef(false);
   const retryRef = useRef({ key: "", count: 0, ts: 0 });
+  const abortControllerRef = useRef(null);
   const [mapReady, setMapReady] = useState(false);
   const clusterModeRef = useRef(false);
 
@@ -1054,6 +1055,7 @@ export function usePostsEngine({
         mapObj.__swForceFetchAt = 0;
       }
 
+      let shouldClearPool = false;
       if (!forceFetch && last.center && last.filterKey === filterKey && last.timeHours === timeHours) {
         const [lastLng, lastLat] = last.center;
         const distKm = haversineKm(lastLat, lastLng, lat, lng);
@@ -1077,6 +1079,14 @@ export function usePostsEngine({
         const minMoveKm = Math.min(10, Math.max(2, radiusKm * 0.03));
 
         if (!radiusChanged && !boundsChanged && distKm < minMoveKm) return;
+
+        // Clear pool if moved significantly (>50% of radius or >100km)
+        if (distKm > Math.max(50, radiusKm * 0.5)) {
+          shouldClearPool = true;
+        }
+      } else if (forceFetch || last.filterKey !== filterKey) {
+        // Filter changed or force fetch - clear pool
+        shouldClearPool = true;
       }
 
       try {
@@ -1111,6 +1121,13 @@ export function usePostsEngine({
           else if (contentFilter === "event") contentTypeParam = "event";
         }
 
+        // Abort any previous in-flight request
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+        }
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+
         let newPosts = await fetchSmartFeed({
           lat,
           lon: lng,
@@ -1123,11 +1140,12 @@ export function usePostsEngine({
           category: catCode || undefined,
           sub_category: subCatParam || undefined,
           content_type: contentTypeParam || undefined,
-        });
+        }, { signal: controller.signal });
 
         if (cancelled || reqId !== requestSeqRef.current) return;
 
-        const existing = replacePoolRef.current ? [] : allPostsRef.current || [];
+        // Clear pool if moved to new area or filter changed
+        const existing = (replacePoolRef.current || shouldClearPool) ? [] : allPostsRef.current || [];
         const byId = new Map();
         for (const p of existing) {
           const normalized = normalizePostId(p);
@@ -1222,6 +1240,11 @@ export function usePostsEngine({
     }
     return () => {
       cancelled = true;
+      // Abort any in-flight request when deps change or unmount
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
       if (moveDebounceRef.current) {
         try { clearTimeout(moveDebounceRef.current); } catch {}
         moveDebounceRef.current = null;
diff --git a/src/components/Posts/PostCardTemplate.jsx b/src/components/Posts/PostCardTemplate.jsx
index da6771d..1b8043a 100644
--- a/src/components/Posts/PostCardTemplate.jsx
+++ b/src/components/Posts/PostCardTemplate.jsx
@@ -22,7 +22,7 @@ export default function PostCardTemplate({ post, theme = "blue", onOpen }) {
       source: post.author ? `by ${post.author}` : (post.sub_category || ""),
       summary: post.snippet || post.body || "",
       url: post.url || "",
-      image: post.image_medium || post.image_large || post.image_small || post.image || post.media_url || "",
+      image: post.image_medium || post.image_large || post.image_small || post.image || post.thumbnail_url || post.media_url || "",
     };
   }, [post]);
 
diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css
index 34476f3..8eb8496 100644
--- a/src/styles/mapMarkers.css
+++ b/src/styles/mapMarkers.css
@@ -1,3 +1,9 @@
+/* Camera LIVE indicator pulse animation */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
 .post-pin {
   position: relative;
   width: 0;
@@ -695,11 +701,10 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
 }
 
 .sw-truth-rail{
-  width: 22px;
-  min-width: 22px;
+  width: 32px;
+  min-width: 32px;
   height: 180px;
   min-height: 180px;
-  margin-left: -2px;
   margin-right: 10px;
   position: relative;
   z-index: 2;
@@ -707,6 +712,7 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
   flex-direction:column;
   align-items:center;
   justify-content:space-between;
+  gap: 4px;
   font-size: 9px;
   font-weight: 900;
   letter-spacing: .08em;
@@ -748,49 +754,57 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
   padding: 4px 6px;
   border-radius: 999px;
   box-shadow: 0 6px 12px rgba(0,0,0,0.35);
-  margin: 0 auto;
-  position: relative;
-  left: -6px;
   transition: opacity 0.2s ease-out;
 }
 
 .sw-truth-rail-btn{
-  width: 100%;
+  width: 28px;
+  height: 28px;
   border: 0;
-  background: rgba(56,189,248,0.16);
-  color:#e8f5ff;
-  font-size: 9px;
+  background: rgba(34,197,94,0.25);
+  color:#22c55e;
+  font-size: 16px;
   font-weight: 900;
-  letter-spacing: .06em;
-  text-transform: uppercase;
-  padding: 6px 2px;
-  border-radius: 10px;
+  padding: 0;
+  border-radius: 50%;
   cursor: pointer;
   text-align: center;
+  line-height: 28px;
   pointer-events: auto;
   touch-action: manipulation;
-  position: relative;
-  left: -8px;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.sw-truth-rail-btn:active{
+  transform: scale(0.92);
 }
 
 .sw-truth-rail-btn-down{
-  background: rgba(239,68,68,0.18);
+  background: rgba(239,68,68,0.25);
+  color: #ef4444;
 }
 
 .sw-truth-rail-btn.is-active{
-  background: rgba(34,197,94,0.35);
-  color: #eafff3;
+  background: rgba(34,197,94,0.5);
+  color: #fff;
+  box-shadow: 0 0 12px rgba(34,197,94,0.5);
 }
 
 .sw-truth-rail-btn-down.is-active{
-  background: rgba(239,68,68,0.35);
-  color: #ffecec;
+  background: rgba(239,68,68,0.5);
+  color: #fff;
+  box-shadow: 0 0 12px rgba(239,68,68,0.5);
 }
 
 .sw-truth-vote-disabled{
-  opacity: 0.7;
+  opacity: 0.5;
   pointer-events: none;
 }
+.sw-truth-vote-disabled .sw-truth-rail-btn{
+  pointer-events: none !important;
+  cursor: not-allowed;
+}
 
 .sw-modal-hero-row{
   display:flex;