diff --git a/components/AvalancheProblemCard.tsx b/components/AvalancheProblemCard.tsx index 599b12f1..2870798b 100644 --- a/components/AvalancheProblemCard.tsx +++ b/components/AvalancheProblemCard.tsx @@ -76,7 +76,9 @@ export const AvalancheProblemCard: React.FunctionComponent {problem.discussion && } - {problem.media && cardWidth > 0 && } + {problem.media && cardWidth > 0 && ( + + )} ); }; diff --git a/components/content/carousel/MediaCarousel.tsx b/components/content/carousel/MediaCarousel.tsx index 52382dc0..3e44cabd 100644 --- a/components/content/carousel/MediaCarousel.tsx +++ b/components/content/carousel/MediaCarousel.tsx @@ -21,14 +21,16 @@ export interface MediaCarouselProps extends ViewProps { thumbnailHeight: number; thumbnailAspectRatio?: number; mediaItems: MediaItem[]; - displayCaptions?: boolean; + displayCaptionsWithThumbnails?: boolean; } +// The default for displayCaptionsWithThumbnails is set to false as it's only used for AvalancheProblemCard. +// There will be a new component that handles this. That work is being tracked in issue 1066 export const MediaCarousel: React.FunctionComponent> = ({ thumbnailHeight, thumbnailAspectRatio = 1.3, mediaItems, - displayCaptions = true, + displayCaptionsWithThumbnails = false, ...props }) => { const thumbnailWidth = thumbnailAspectRatio * thumbnailHeight; @@ -50,7 +52,7 @@ export const MediaCarousel: React.FunctionComponent diff --git a/components/content/carousel/ThumbnailList.tsx b/components/content/carousel/ThumbnailList.tsx index 46b3817d..32152617 100644 --- a/components/content/carousel/ThumbnailList.tsx +++ b/components/content/carousel/ThumbnailList.tsx @@ -1,5 +1,6 @@ import {NetworkImage, NetworkImageProps, NetworkImageState} from 'components/content/carousel/NetworkImage'; -import {View} from 'components/core'; +import {VStack, View} from 'components/core'; +import {HTML, HTMLRendererConfig} from 'components/text/HTML'; import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'; import {FlatList, FlatListProps} from 'react-native'; import {ImageMediaItem, MediaItem, MediaType, VideoMediaItem} from 'types/nationalAvalancheCenter'; @@ -70,6 +71,7 @@ export const ThumbnailList: React.FC> = ({ imageWidth, space = 16, mediaItems, + displayCaptions, imageStyle, resizeMode, onPress = () => undefined, @@ -93,7 +95,7 @@ export const ThumbnailList: React.FC> = ({ const renderItem = useCallback( ({item, index}: {item: ThumbnailListItem; index: number}) => ( - + > = ({ onStateChange={onStateCallback} onPress={onPress} /> - + {displayCaptions && item.caption && ( + + + + + + )} + ), - [imageWidth, imageHeight, imageStyle, resizeMode, onPress, onStateCallback], + [imageWidth, imageHeight, imageStyle, resizeMode, displayCaptions, onPress, onStateCallback], ); const ItemSeparatorComponent = useCallback(() => , [space]); diff --git a/components/forecast/AvalancheTab.tsx b/components/forecast/AvalancheTab.tsx index 79882448..6f2c3407 100644 --- a/components/forecast/AvalancheTab.tsx +++ b/components/forecast/AvalancheTab.tsx @@ -243,7 +243,7 @@ export const AvalancheTab: React.FunctionComponent<{ )} {forecast.media && forecast.media.length > 0 && ( Media} noDivider> - + )} diff --git a/components/forecast/SynopsisTab.tsx b/components/forecast/SynopsisTab.tsx index 6f9fa09f..7b4a70ac 100644 --- a/components/forecast/SynopsisTab.tsx +++ b/components/forecast/SynopsisTab.tsx @@ -97,7 +97,7 @@ export const SynopsisTab: React.FunctionComponent<{ {synopsis.hazard_discussion && ( {synopsis.bottom_line}}> - {synopsis.media && } + {synopsis.media && } )} diff --git a/components/observations/ObservationDetailView.tsx b/components/observations/ObservationDetailView.tsx index 570199e4..2f5c2961 100644 --- a/components/observations/ObservationDetailView.tsx +++ b/components/observations/ObservationDetailView.tsx @@ -343,7 +343,7 @@ export const ObservationCard: React.FunctionComponent<{ {(observation.media ?? []).length > 0 && ( Media}> - + )} {((observation.avalanches && observation.avalanches.length > 0) || observation.avalanches_summary) && ( @@ -380,7 +380,7 @@ export const ObservationCard: React.FunctionComponent<{ {item.media && ( Media - + )} @@ -396,7 +396,7 @@ export const ObservationCard: React.FunctionComponent<{ {observation.advanced_fields.snowpack_summary && } {observation.advanced_fields.snowpack_media && ( - + )} {observation.advanced_fields.snowpack && <>{/* we don't know what fields could be in this thing ... */}}