feat(mobile): circle-clip avatar viewer + banner viewer on profile cover photo (#14445)

Follow-ups to #14444.

## 1. Avatar viewer keeps the circle

The avatar on the profile screen is a circle, so the full-screen viewer
should match — not a letterboxed square on black. `AvatarViewer` now
renders the image inside a fixed square wrapper with `borderRadius: size
/ 2` + `overflow: 'hidden'` and `resizeMode='cover'`, sized to
`min(windowWidth, windowHeight) - 48 px` so it doesn't touch the screen
edges on landscape phones.

## 2. Banner viewer on the profile cover photo

Tapping the cover photo at the top of the profile screen now opens a
parallel full-screen viewer for the banner. Uses `WidthSizes.SIZE_2000`
(the largest cached cover-photo size — the header uses `SIZE_640`) and
`resizeMode='contain'` to preserve the cover photo's native aspect ratio
on the black backdrop. No circular clip.

## Refactor: shared `FullscreenImageViewer`

Rather than duplicate the modal/gesture/close-button machinery between
Avatar and Banner viewers, the chrome is factored into a new
**`FullscreenImageViewer`** that owns:

- `<Modal transparent animationType='fade' statusBarTranslucent>` +
`light-content` StatusBar
- Pan gesture via `react-native-gesture-handler` — Reanimated shared
values follow the finger in any direction, dismiss thresholds at **120
px** distance or **800 px/s** velocity, **200 ms** `withTiming`
spring-back, translation reset on each open
- X close button at `insets.top + 8 px` with `hitSlop`, accessible
label/role
- Black `#000` backdrop

`AvatarViewer` and `BannerViewer` are now thin wrappers that supply the
image content as `children` and a `closeAccessibilityLabel`. Same
dismiss UX in both.

## ProfileCoverPhoto tap wiring

The existing `<CoverPhoto>` is wrapped in a `<Pressable>` that flips
local `isViewerOpen` state. The artist-badge overlay (which has no own
`onPress`) sits absolute on top and stays visually unchanged — taps in
the badge corner still hit the Pressable underneath.

```diff
+ <Pressable onPress={handleOpenViewer} accessibilityRole='imagebutton' …>
    <CoverPhoto userId={user_id}>
      <AnimatedBlurView … />
      {isArtist ? <Animated.View style={styles.darkOverlay} /> : null}
    </CoverPhoto>
+ </Pressable>
  {isArtist ? <Animated.View style={[styles.artistBadge, badgeStyle]}>…</Animated.View> : null}
+ <BannerViewer userId={user_id} isOpen={isViewerOpen} onClose={handleCloseViewer} />
```

## Files

| File | Change |
|---|---|
| `packages/mobile/src/screens/profile-screen/FullscreenImageViewer.tsx`
| **new** — shared chrome |
| `packages/mobile/src/screens/profile-screen/AvatarViewer.tsx` |
refactored — circle clip child of FullscreenImageViewer |
| `packages/mobile/src/screens/profile-screen/BannerViewer.tsx` |
**new** — `SIZE_2000`, `resizeMode='contain'`, child of
FullscreenImageViewer |
| `packages/mobile/src/screens/profile-screen/ProfileCoverPhoto.tsx` |
Pressable wrap + BannerViewer mount |

Net diff: **+288 / −144**.

## Verification

- [x] `tsc --noEmit` clean in `packages/mobile`
- [ ] Manual: tap an avatar → fades in, image rendered as a circle on
black backdrop.
- [ ] Manual: tap the cover photo → fades in, image rendered with
`contain` aspect ratio.
- [ ] Manual: short drag on either viewer → springs back.
- [ ] Manual: longer drag or flick in any of the four directions →
dismisses.
- [ ] Manual: tap the X in the top-right → dismisses.
- [ ] Manual: tap the artist badge (where present) → still navigates to
`CoinDetailsScreen` without opening the avatar viewer.
- [ ] Manual: cover-photo parallax/blur on scroll still works the same
once the Pressable is in place.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dylanjeffers

packages/mobile/src/screens/profile-screen/AvatarViewer.tsx

@@ -1,58 +1,17 @@
-import { useCallback, useEffect } from 'react'
-
 import type { ID } from '@audius/common/models'
 import { SquareSizes } from '@audius/common/models'
-import {
-  Image,
-  Modal,
-  StatusBar,
-  StyleSheet,
-  TouchableOpacity,
-  useWindowDimensions
-} from 'react-native'
-import { Gesture, GestureDetector } from 'react-native-gesture-handler'
-import Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming
-} from 'react-native-reanimated'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Image, StyleSheet, useWindowDimensions, View } from 'react-native'
 
-import { IconClose } from '@audius/harmony-native'
 import { useProfilePicture } from 'app/components/image/UserImage'
 
-// Distance (px) the user has to drag in any direction before the viewer
-// dismisses on release. Velocity above the threshold also dismisses to
-// allow a quick flick.
-const DISMISS_DISTANCE_THRESHOLD = 120
-const DISMISS_VELOCITY_THRESHOLD = 800
-const SPRING_BACK_DURATION_MS = 200
+import { FullscreenImageViewer } from './FullscreenImageViewer'
+
+const CIRCLE_PADDING = 24
 
 const styles = StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    backgroundColor: '#000',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  imageWrapper: {
-    width: '100%',
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   image: {
     width: '100%',
     height: '100%'
-  },
-  closeButton: {
-    position: 'absolute',
-    right: 16,
-    width: 44,
-    height: 44,
-    justifyContent: 'center',
-    alignItems: 'center'
   }
 })
 
@@ -63,14 +22,13 @@ type AvatarViewerProps = {
 }
 
 /**
- * Full-screen avatar viewer for the profile screen. Shows the user's profile
- * picture at the largest cached size on a black backdrop with an X button in
- * the top-right. Any swipe gesture (up, down, left, or right) past a small
- * distance / velocity threshold dismisses it; smaller drags spring back.
+ * Full-screen viewer for the profile-screen avatar. The image is clipped to
+ * a circle so the on-tile shape carries through to the viewer; the
+ * surrounding backdrop, fade, swipe-to-dismiss, and close button live in
+ * the shared {@link FullscreenImageViewer}.
  */
 export const AvatarViewer = ({ userId, isOpen, onClose }: AvatarViewerProps) => {
-  const insets = useSafeAreaInsets()
-  const { width: windowWidth } = useWindowDimensions()
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
 
   // Use the largest cached size the image API serves so the full-screen
   // render isn't a blurry upscale of the 150-px tile shown in the header.
@@ -79,92 +37,31 @@ export const AvatarViewer = ({ userId, isOpen, onClose }: AvatarViewerProps) =>
     size: SquareSizes.SIZE_1000_BY_1000
   })
 
-  const translationX = useSharedValue(0)
-  const translationY = useSharedValue(0)
-
-  // Reset the translation any time the viewer opens — without this a partial
-  // drag from a previous open lingers and the next open starts off-center.
-  useEffect(() => {
-    if (isOpen) {
-      translationX.value = 0
-      translationY.value = 0
-    }
-  }, [isOpen, translationX, translationY])
-
-  const dismiss = useCallback(() => {
-    onClose()
-  }, [onClose])
-
-  const panGesture = Gesture.Pan()
-    .onUpdate((e) => {
-      'worklet'
-      translationX.value = e.translationX
-      translationY.value = e.translationY
-    })
-    .onEnd((e) => {
-      'worklet'
-      const distance = Math.sqrt(
-        e.translationX * e.translationX + e.translationY * e.translationY
-      )
-      const speed = Math.sqrt(
-        e.velocityX * e.velocityX + e.velocityY * e.velocityY
-      )
-      if (
-        distance > DISMISS_DISTANCE_THRESHOLD ||
-        speed > DISMISS_VELOCITY_THRESHOLD
-      ) {
-        runOnJS(dismiss)()
-      } else {
-        translationX.value = withTiming(0, {
-          duration: SPRING_BACK_DURATION_MS
-        })
-        translationY.value = withTiming(0, {
-          duration: SPRING_BACK_DURATION_MS
-        })
-      }
-    })
-
-  const animatedImageStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: translationX.value },
-      { translateY: translationY.value }
-    ]
-  }))
+  // Circle fits the smaller of the two window dimensions (after a little
+  // padding so it doesn't touch the edges on landscape phones).
+  const circleSize = Math.min(windowWidth, windowHeight) - CIRCLE_PADDING * 2
 
   return (
-    <Modal
-      visible={isOpen}
-      transparent
-      animationType='fade'
-      statusBarTranslucent
-      onRequestClose={onClose}
+    <FullscreenImageViewer
+      isOpen={isOpen}
+      onClose={onClose}
+      closeAccessibilityLabel='Close avatar viewer'
     >
-      <StatusBar
-        barStyle='light-content'
-        backgroundColor='#000'
-        translucent={false}
-      />
-      <GestureDetector gesture={panGesture}>
-        <Animated.View style={styles.backdrop}>
-          <Animated.View style={[styles.imageWrapper, animatedImageStyle]}>
-            <Image
-              source={source}
-              style={[styles.image, { maxWidth: windowWidth }]}
-              resizeMode='contain'
-              accessibilityIgnoresInvertColors
-            />
-          </Animated.View>
-          <TouchableOpacity
-            onPress={onClose}
-            accessibilityLabel='Close avatar viewer'
-            accessibilityRole='button'
-            hitSlop={{ top: 12, right: 12, bottom: 12, left: 12 }}
-            style={[styles.closeButton, { top: insets.top + 8 }]}
-          >
-            <IconClose color='staticWhite' size='l' />
-          </TouchableOpacity>
-        </Animated.View>
-      </GestureDetector>
-    </Modal>
+      <View
+        style={{
+          width: circleSize,
+          height: circleSize,
+          borderRadius: circleSize / 2,
+          overflow: 'hidden'
+        }}
+      >
+        <Image
+          source={source}
+          style={styles.image}
+          resizeMode='cover'
+          accessibilityIgnoresInvertColors
+        />
+      </View>
+    </FullscreenImageViewer>
   )
 }

packages/mobile/src/screens/profile-screen/BannerViewer.tsx

@@ -0,0 +1,52 @@
+import type { ID } from '@audius/common/models'
+import { WidthSizes } from '@audius/common/models'
+import { Image, StyleSheet, useWindowDimensions } from 'react-native'
+
+import { useCoverPhoto } from 'app/components/image/CoverPhoto'
+
+import { FullscreenImageViewer } from './FullscreenImageViewer'
+
+const styles = StyleSheet.create({
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+})
+
+type BannerViewerProps = {
+  userId: ID | undefined
+  isOpen: boolean
+  onClose: () => void
+}
+
+/**
+ * Full-screen viewer for the profile-screen cover photo / banner. Renders
+ * the image at the largest cached size with `resizeMode="contain"` so the
+ * cover-photo aspect ratio is preserved (no crop, letterboxed on the black
+ * backdrop). Modal + swipe-to-dismiss + close button come from the shared
+ * {@link FullscreenImageViewer}.
+ */
+export const BannerViewer = ({ userId, isOpen, onClose }: BannerViewerProps) => {
+  const { width: windowWidth } = useWindowDimensions()
+
+  // Largest cached cover-photo size. Header uses SIZE_640.
+  const { source } = useCoverPhoto({
+    userId,
+    size: WidthSizes.SIZE_2000
+  })
+
+  return (
+    <FullscreenImageViewer
+      isOpen={isOpen}
+      onClose={onClose}
+      closeAccessibilityLabel='Close banner viewer'
+    >
+      <Image
+        source={source}
+        style={[styles.image, { maxWidth: windowWidth }]}
+        resizeMode='contain'
+        accessibilityIgnoresInvertColors
+      />
+    </FullscreenImageViewer>
+  )
+}