diff --git a/src/components/sections/MapSection.tsx b/src/components/sections/MapSection.tsx index 864b254..db047fe 100644 --- a/src/components/sections/MapSection.tsx +++ b/src/components/sections/MapSection.tsx @@ -13,6 +13,8 @@ import { t, tPlain } from '@/lib/i18n' import type { SectionDTO, GeoPointDTO } from '@/lib/api/types' import { trackEvent } from '@/lib/stats' import { getGeoPointLatLng } from '@/lib/geo' +import NarratorAvatar from '@/components/ui/NarratorAvatar' +import { useAudioResource } from '@/hooks/useAudioResource' import './map/map.css' const LeafletMap = dynamic(() => import('./map/LeafletMap'), { @@ -29,6 +31,7 @@ interface Props { slug: string configId: string languages: string[] + apiKey: string } type Mode = 'map' | 'list' @@ -39,7 +42,7 @@ const DOCK_WIDTH = 340 const DETAIL_WIDTH = 320 const PANEL_TOP = 60 -export default function MapSection({ section, configId, languages }: Props) { +export default function MapSection({ section, configId, languages, apiKey }: Props) { const { language, setAvailableLanguages, instanceId } = useVisitor() const back = useBack() @@ -322,6 +325,7 @@ export default function MapSection({ section, configId, languages }: Props) { {/* Detail sheet (POI) */} {selected && ( a.language === language)?.value ?? point.audioIds?.[0]?.value, + apiKey, + ) return ( <> @@ -476,6 +485,15 @@ function PointDetail({ className="overflow-y-auto px-5 py-4 flex flex-col gap-4" style={isCard ? { flex: 1, minHeight: 0 } : { maxHeight: 'calc(80vh - 180px)' }} > + {audio.url && ( +
+ {audio.narratorName && ( + + )} +
+ )} + {t(point.description, language) && (