diff --git a/src/analytics/metrics/types.ts b/src/analytics/metrics/types.ts index 21cca1e5d4..cdc7ac552c 100644 --- a/src/analytics/metrics/types.ts +++ b/src/analytics/metrics/types.ts @@ -1046,12 +1046,12 @@ export type Events = { // Gallery carousel events 'post:gallery:swipe': { - fromIndex: number - toIndex: number + fromImage: number + toImage: number totalImages: number } 'post:gallery:openLightbox': { - imageIndex: number + fromImage: number totalImages: number } 'post:gallery:impression': { diff --git a/src/components/images/Gallery/index.tsx b/src/components/images/Gallery/index.tsx index 0c0a1842cd..284383e9ec 100644 --- a/src/components/images/Gallery/index.tsx +++ b/src/components/images/Gallery/index.tsx @@ -17,6 +17,7 @@ import {Image} from 'expo-image' import {type AppBskyEmbedImages} from '@atproto/api' import {utils} from '@bsky.app/alf' import {Trans, useLingui} from '@lingui/react/macro' +import debounce from 'lodash.debounce' import {type Dimensions} from '#/lib/media/types' import {mergeRefs} from '#/lib/merge-refs' @@ -93,6 +94,7 @@ export function Gallery({ onPressIn, viewContext, }: GalleryProps) { + // images = images.concat(images) const ax = useAnalytics() const {screenReaderEnabled} = useA11y() const largeAltBadge = useLargeAltBadgeEnabled() @@ -147,15 +149,23 @@ export function Gallery({ const thumbDimsRef = useRef>(new Map()) const currentIndexRef = useRef(0) + const emitSwipeMetric = useMemo( + () => + debounce((fromIndex: number, toIndex: number) => { + ax.metric('post:gallery:swipe', { + fromImage: fromIndex + 1, // convert to 1-based index for easier analysis + toImage: toIndex + 1, // convert to 1-based index for easier analysis + totalImages: images.length, + }) + }, 200), + [ax, images.length], + ) + const setCurrentIndex = (index: number) => { const prev = currentIndexRef.current if (prev !== index) { currentIndexRef.current = index - ax.metric('post:gallery:swipe', { - fromIndex: prev, - toIndex: index, - totalImages: images.length, - }) + emitSwipeMetric(prev, index) } } @@ -193,7 +203,7 @@ export function Gallery({ {images.map((image, index) => ( item.thumb} + keyExtractor={(item, index) => item.thumb + index} renderItem={({item, index}) => { return ( { ax.metric('post:gallery:openLightbox', { - imageIndex: index, + fromImage: index + 1, // convert to 1-based index for easier analysis totalImages: images.length, }) const refs: AnimatedRef[] = []