canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Sociowire Dev 2026-01-13 05:34:24 +00:00
parent 108f8b441a
commit a9a1d782c3
1 changed files with 14 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Map/markerManager.js
View File

@ -2466,11 +2466,12 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
// Weather city name for label // Weather city name for label
const weatherCity = isWeather ? (activePost?.city || (activePost?.title || '').split(':')[0].replace(/^[^\w\s]+/, '').trim()) : ''; 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 cameraThumbnail = isCamera ? (activePost?.thumbnail_url || activePost?.image_small || '') : '';
const showCameraMarker = isCamera && cameraThumbnail;
// Marqueur pin avec image en haut et pointe en bas // Marqueur pin avec image en haut et pointe en bas
root.innerHTML = isCamera ? ` root.innerHTML = showCameraMarker ? `
<div class="sw-camera-pin" style=" <div class="sw-camera-pin" style="
position: relative; position: relative;
width: 48px; width: 48px;
@ -2482,35 +2483,18 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
overflow: hidden; overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease; 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.parentElement.parentElement.style.display='none';" />
<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=" <div style="
position: absolute; position: absolute;
top: 2px; top: 3px;
left: 2px; right: 3px;
display: flex; width: 6px;
align-items: center; height: 6px;
gap: 2px; border-radius: 50%;
padding: 1px 4px; background: #ef4444;
border-radius: 3px; box-shadow: 0 0 4px rgba(239, 68, 68, 0.8);
background: rgba(239, 68, 68, 0.95); animation: pulse 1.5s infinite;
font-size: 7px; "></div>
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>
<div style=" <div style="
width: 0; width: 0;
@ -2521,7 +2505,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
margin-top: -1px; margin-top: -1px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
"></div> "></div>
` : ` ` : isCamera ? `` : `
<div class="sw-simple-marker ${isLive ? 'sw-live-marker' : ''} ${isWeather ? 'sw-weather-marker' : ''}" style=" <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%;'} ${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}; background: ${isWeather ? 'rgba(14, 165, 233, 0.75)' : color};