From a9a1d782c3101c10bad42f441e2077d1d55dcb99 Mon Sep 17 00:00:00 2001
From: Sociowire Dev <dev@sociowire.com>
Date: Tue, 13 Jan 2026 05:34:24 +0000
Subject: [PATCH] fix: camera pins - small red dot, hide if no thumbnail

- Replace LIVE badge with small pulsing red dot (6px)
- Hide camera marker entirely if no thumbnail available
- Cleaner, less intrusive design

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/Map/markerManager.js | 44 +++++++++--------------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index 926b6f2..0052552 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -2466,11 +2466,12 @@ 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
+    // Camera thumbnail URL - only show camera marker if thumbnail available
     const cameraThumbnail = isCamera ? (activePost?.thumbnail_url || activePost?.image_small || '') : '';
+    const showCameraMarker = isCamera && cameraThumbnail;
 
     // Marqueur pin avec image en haut et pointe en bas
-    root.innerHTML = isCamera ? `
+    root.innerHTML = showCameraMarker ? `
         <div class="sw-camera-pin" style="
           position: relative;
           width: 48px;
@@ -2482,35 +2483,18 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
           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>
-          `}
+          <img src="${cameraThumbnail}" alt="" style="width:100%;height:100%;object-fit:cover;" onerror="this.parentElement.parentElement.style.display='none';" />
           <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>
+            top: 3px;
+            right: 3px;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #ef4444;
+            box-shadow: 0 0 4px rgba(239, 68, 68, 0.8);
+            animation: pulse 1.5s infinite;
+          "></div>
         </div>
         <div style="
           width: 0;
@@ -2521,7 +2505,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
           margin-top: -1px;
           filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
         "></div>
-    ` : `
+    ` : isCamera ? `` : `
         <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};