fix: sửa lỗi hiển thị thumbnail khi chia sẻ trên facebook
This commit is contained in:
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+8
-8
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<title>Travel Planner</title>
|
||||
<script type="module" crossorigin src="/assets/index-DvhesUei.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-CtrQmjY1.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-i0kJVU1C.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -400,12 +400,20 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
|
||||
<span>{likeCount}</span>
|
||||
</button>
|
||||
|
||||
<img
|
||||
src={photo.imageUrl}
|
||||
alt="Public Map Upload"
|
||||
className="w-full h-auto max-h-[85vh] object-contain cursor-zoom-in md:h-full md:max-h-none"
|
||||
onClick={() => setIsFullscreen(true)}
|
||||
/>
|
||||
<a
|
||||
href={`${window.location.origin}/api/v1/public-photos/${photo.id}/share`}
|
||||
className="w-full h-auto max-h-[85vh] object-contain cursor-zoom-in md:h-full md:max-h-none flex items-center justify-center"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setIsFullscreen(true);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={photo.imageUrl}
|
||||
alt="Public Map Upload"
|
||||
className="w-full h-auto max-h-[85vh] object-contain md:h-full md:max-h-none"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Info & Timeline overlay inside photo panel */}
|
||||
|
||||
@@ -253,11 +253,41 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
|
||||
() => console.log("Không thể lấy vị trí người dùng")
|
||||
);
|
||||
} else {
|
||||
// Cập nhật store để đồng bộ với vị trí khởi tạo từ cache
|
||||
setMapCenter(initialViewState.center);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const photoId = params.get('photoId');
|
||||
if (photoId && publicPhotos.length > 0) {
|
||||
const foundPhoto = publicPhotos.find((p) => p.id === photoId);
|
||||
if (foundPhoto) {
|
||||
const lat = foundPhoto.metadata?.lat;
|
||||
const lng = foundPhoto.metadata?.lng;
|
||||
if (typeof lat === 'number' && typeof lng === 'number') {
|
||||
const group = publicPhotos.filter((p) => {
|
||||
const pLat = p.metadata?.lat;
|
||||
const pLng = p.metadata?.lng;
|
||||
return typeof pLat === 'number' && typeof pLng === 'number' &&
|
||||
Math.abs(pLat - lat) < 0.00001 &&
|
||||
Math.abs(pLng - lng) < 0.00001;
|
||||
});
|
||||
group.sort((a, b) => {
|
||||
const likesA = a.metadata?.likedUserIds?.length || 0;
|
||||
const likesB = b.metadata?.likedUserIds?.length || 0;
|
||||
return likesB - likesA;
|
||||
});
|
||||
setSelectedPhoto(foundPhoto);
|
||||
setSelectedPhotoGroup(group);
|
||||
} else {
|
||||
setSelectedPhoto(foundPhoto);
|
||||
setSelectedPhotoGroup([foundPhoto]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [publicPhotos]);
|
||||
|
||||
return (
|
||||
<div className="h-dvh w-full relative overflow-hidden">
|
||||
{/* Top Bar Container - Chứa tất cả các nút điều hướng phía trên */}
|
||||
@@ -507,12 +537,15 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
|
||||
click: () => {
|
||||
setSelectedPhoto(latestPhoto);
|
||||
setSelectedPhotoGroup(photoGroup);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
params.set('photoId', latestPhoto.id);
|
||||
window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
|
||||
}
|
||||
}}
|
||||
icon={L.divIcon({
|
||||
className: 'custom-photo-bubble',
|
||||
html: `
|
||||
<div class="relative group">
|
||||
<a href="${window.location.origin}/api/v1/public-photos/${latestPhoto.id}/share" onclick="event.preventDefault();" class="relative group block">
|
||||
<div class="w-12 h-12 rounded-full border-4 border-emerald-500 shadow-lg overflow-hidden transition-transform group-hover:scale-110">
|
||||
<img src="${latestPhoto.imageUrl}" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
@@ -524,7 +557,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
|
||||
${photoGroup.length}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</a>
|
||||
`,
|
||||
iconSize: [48, 48],
|
||||
iconAnchor: [24, 24]
|
||||
@@ -588,10 +621,22 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
|
||||
onClose={() => {
|
||||
setSelectedPhoto(null);
|
||||
setSelectedPhotoGroup([]);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.has('photoId')) {
|
||||
params.delete('photoId');
|
||||
const newSearch = params.toString();
|
||||
const newUrl = `${window.location.pathname}${newSearch ? `?${newSearch}` : ''}`;
|
||||
window.history.replaceState({}, '', newUrl);
|
||||
}
|
||||
}}
|
||||
photo={selectedPhoto}
|
||||
photoGroup={selectedPhotoGroup}
|
||||
onSelectPhoto={(photo) => setSelectedPhoto(photo)}
|
||||
onSelectPhoto={(photo) => {
|
||||
setSelectedPhoto(photo);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
params.set('photoId', photo.id);
|
||||
window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
|
||||
}}
|
||||
onLoginSuccess={onLoginSuccess}
|
||||
onUpdatePhoto={(updatedPhoto) => {
|
||||
setPublicPhotos((prev) =>
|
||||
|
||||
Reference in New Issue
Block a user