stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.2

package/src/components/Chat/hooks/useNetworkConnectionState.ts

@@ -6,18 +6,16 @@ import { useStateStore } from '../../../hooks/useStateStore';
 const identity = (state: NetworkConnectionState) => state;
 
 /**
- * The **device's** network status, as reported by the NetInfo listener `<Chat>` registers on
- * `client.networkConnection`.
+ * The device's network status, as reported by the NetInfo listener `<Chat>` registers on
+ * `client.networkConnection`. Unlike {@link useWSConnectionState}, it is not affected by the socket
+ * dying on a working network.
  *
- * Not the same fact as {@link useWSConnectionState}: a socket dies on a working network, and a device
- * drops while the socket has not noticed yet. Use this for "you're offline"; use the WebSocket hook
- * for "Reconnecting…".
- *
- * `isOnline` has **three** states. `undefined` means *unknown* — nobody has reported yet. A guard must
- * therefore test `isOnline === false`; `!isOnline` is also true when the answer is unknown, which
- * would claim "offline" on the very first render and on any host where no listener is installed.
+ * `isOnline` is `undefined` until a status is reported, so test `isOnline === false`: `!isOnline`
+ * would also read as offline on the first render and where no listener is installed.
  *
  * Must be used under `<Chat>`.
+ *
+ * @returns The network connection state, or `undefined` when the client has no network store.
  */
 export const useNetworkConnectionState = () => {
   const { client } = useChatContext();
@@ -25,9 +23,12 @@ export const useNetworkConnectionState = () => {
 };
 
 /**
- * {@link useNetworkConnectionState} narrowed to what a component actually reads, so it re-renders only
- * when that changes. The selector must return a flat object or tuple — it is shallow-compared on its
- * own keys, and must be declared at module scope to stay referentially stable.
+ * {@link useNetworkConnectionState} narrowed by `selector`, so the component re-renders only when
+ * the selected values change. The selector must return a flat object or tuple (shallow-compared)
+ * and be declared at module scope to stay referentially stable.
+ *
+ * @param selector Picks the values to subscribe to.
+ * @returns The selected values, or `undefined` when the client has no network store.
  */
 export const useNetworkConnectionStateSelector = <
   O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,

package/src/components/Chat/hooks/usePendingUploadsDefault.ts

@@ -3,23 +3,23 @@ import { useEffect } from 'react';
 import type { StreamChat } from 'stream-chat';
 
 /**
- * Supplies the SDK's default for `messageComposer.attachments.pendingUploadsEnabled` — whether a
- * message can be sent while its attachments are still uploading — and nothing more.
+ * Turns on `messageComposer.attachments.pendingUploadsEnabled` (sending while attachments are still
+ * uploading) when offline support is enabled, since offline support needs the local message to keep
+ * its pending attachments. Without offline support nothing is written and the `stream-chat`
+ * default (`false`) applies.
  *
- * Offline support depends on the local message keeping its pending attachments, which is exactly
- * what this switch does, so enabling `enableOfflineSupport` turns it on. With offline support off
- * nothing is written and `stream-chat`'s own default (`false`) applies.
- *
- * Written only when the integrator has not registered a value. Set it on the client to take the
- * decision yourself — ideally before handing the client to `<Chat>`, so this never writes at all:
+ * Nothing is written when a value is already registered. Set it on the client, ideally before
+ * handing the client to `<Chat>`, to choose yourself:
  *
  * ```ts
  * client.config.set({ messageComposer: { attachments: { pendingUploadsEnabled: false } } });
  * ```
  *
- * Once written, the value is never taken back: the hook cannot tell its own write from an
- * integrator's later write of the same value, so a later `enableOfflineSupport={false}` leaves
- * pending uploads on rather than risk overwriting a value the integrator chose.
+ * The value is never reverted: the hook cannot tell its own write from an integrator's later write
+ * of the same value, so a later `enableOfflineSupport={false}` leaves pending uploads on.
+ *
+ * @param client The client whose message composer configuration is written.
+ * @param enableOfflineSupport Whether offline support is enabled.
  */
 export const usePendingUploadsDefault = (client: StreamChat, enableOfflineSupport: boolean) => {
   useEffect(() => {
@@ -37,7 +37,6 @@ export const usePendingUploadsDefault = (client: StreamChat, enableOfflineSuppor
       attachments: { pendingUploadsEnabled: true },
     });
 
-    // Deliberately no teardown, for the same reason as the network reporter in
-    // `useConnectionLifecycle`: the configuration lives as long as the client, which outlives `<Chat>`.
+    // No teardown: the configuration lives as long as the client, which outlives `<Chat>`.
   }, [client, enableOfflineSupport]);
 };

package/src/components/Chat/hooks/useWSConnectionState.ts

@@ -16,27 +16,16 @@ const displayDelaySelector = (config: WSConnectionConfig) => ({
 const networkSelector = (state: NetworkConnectionState) => ({ isOnline: state.isOnline });
 
 /**
- * This client's WebSocket status.
+ * The client's WebSocket status. Unlike {@link useNetworkConnectionState}, which reports the device
+ * network, a socket can drop on a good network and the network can drop before the socket notices.
  *
- * Not the same fact as {@link useNetworkConnectionState}, and the difference is the point: a socket
- * dies on a perfectly good network (a server close, an expired token, a health-check timeout), and a
- * device drops while the socket has not noticed yet. Use this for "Reconnecting…"; use the network
- * hook for "you're offline".
- *
- * `isHealthy` is always a boolean — a socket always has a state — so `!isHealthy` is safe, unlike the
- * network store's `isOnline`, which is `undefined` until something reports.
- *
- * Reads the store rather than reacting to an event, so it is correct on mount rather than only after
- * the first transition, and so it reports the paths that were always silent
- * (`client.closeConnection()`, the mobile backgrounding path, dispatches nothing).
- *
- * This is the **raw** status, and it has a trap: `isHealthy` is `false` from construction, so it
- * reads the same before the first connect as it does after a drop. Those need opposite UI — one is
- * "connecting", the other is "we lost it" — and only `lastHealthyAt === null` tells them apart.
- * Anything user-visible wants {@link useSettledWSConnectionHealth}, which handles that and the flap
- * debounce; reach for this one only when you genuinely want the unfiltered store.
+ * This is the raw status: `isHealthy` is `false` from construction, so it reads the same before the
+ * first connect as after a drop, and only `lastHealthyAt === null` tells them apart. Prefer
+ * {@link useSettledWSConnectionHealth} for UI.
  *
  * Must be used under `<Chat>`.
+ *
+ * @returns The WebSocket connection state, or `undefined` when the client has no connection store.
  */
 export const useWSConnectionState = () => {
   const { client } = useChatContext();
@@ -44,9 +33,12 @@ export const useWSConnectionState = () => {
 };
 
 /**
- * {@link useWSConnectionState} narrowed to what a component actually reads, so it re-renders only
- * when that changes. The selector must return a flat object or tuple — it is shallow-compared on its
- * own keys, and must be declared at module scope to stay referentially stable.
+ * {@link useWSConnectionState} narrowed by `selector`, so the component re-renders only when the
+ * selected values change. The selector must return a flat object or tuple (shallow-compared) and be
+ * declared at module scope to stay referentially stable.
+ *
+ * @param selector Picks the values to subscribe to.
+ * @returns The selected values, or `undefined` when the client has no connection store.
  */
 export const useWSConnectionStateSelector = <
   O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
@@ -58,33 +50,24 @@ export const useWSConnectionStateSelector = <
 };
 
 /**
- * `isHealthy`, but a drop has to last before it is believed. What UI should render.
- *
- * Recovery is reported immediately and only the drop is held back, because the two are not
- * symmetric: showing "Reconnecting…" a moment late costs nothing, leaving it up a moment too long
- * makes a working app look broken.
+ * `isHealthy` with drops debounced, so brief reconnects do not flash a banner. Recovery is reported
+ * immediately; a drop only reads as unhealthy once it has lasted the client's
+ * `wsConnection.offlineNotificationDisplayDelayMs` (0 disables the delay).
  *
- * Most drops resolve in well under a second — a backgrounded socket, a handover between cells, a
- * server closing an idle connection — and a banner that rendered all of them would flash constantly.
- * The client used to hold this back itself, debouncing its offline event by a fixed five seconds;
- * that timer outlived the socket that armed it, so it was removed in favour of the value living
- * here, where whoever draws the banner owns it. The length is
- * `client.config.set({ client: { wsConnection: { offlineNotificationDisplayDelayMs } } })`; zero
- * holds nothing back.
- *
- * A socket that is already down when this mounts reads as down straight away — there is no flap to
- * wait out. A socket that has never been up is a different case: that is a first connect, not a
- * drop, so it reads as healthy until the delay says otherwise.
+ * A socket that has been up and is down on mount reads as down at once. One that has never been up
+ * is a first connect, not a drop, so it reads as healthy until the delay elapses or the network is
+ * known to be down.
  *
  * Must be used under `<Chat>`.
+ *
+ * @returns Whether the connection counts as healthy.
  */
 export const useSettledWSConnectionHealth = () => {
   const { client } = useChatContext();
   const status = useStateStore(client?.wsConnection?.state, healthSelector);
   const isHealthy = !!status?.isHealthy;
   const hasBeenHealthy = !!status?.lastHealthyAt;
-  // `=== false` is the device telling us it has no network, which is a different thing from
-  // `undefined`, meaning nobody has reported yet.
+  // `undefined` means no network status has been reported yet, which is not offline.
   const networkIsDown =
     useStateStore(client?.networkConnection?.state, networkSelector)?.isOnline === false;
   const delay =
@@ -94,9 +77,7 @@ export const useSettledWSConnectionHealth = () => {
   const [settled, setSettled] = useState(() => isHealthy || (!hasBeenHealthy && !networkIsDown));
 
   useEffect(() => {
-    // Up is immediate, and clearing any pending down with it: a socket that came back before the
-    // timer fired must never announce the drop it already recovered from — the exact bug that
-    // retiring the client-side timer was meant to end.
+    // Recovery is immediate and cancels a pending drop, so a recovered socket never reports one.
     if (isHealthy) {
       setSettled(true);
       return;

package/src/components/ImageGallery/ImageGallery.tsx

@@ -81,10 +81,8 @@ type ImageGalleryWithContextProps = Pick<
   };
 
 /**
- * Number of slides mounted on each side of the current one. Kept one wider
- * than AnimatedGalleryImage's +-3 load window so an edge slide is already
- * mounted (as the empty placeholder) before it ever needs to load its
- * image - paging never reveals an unmounted slot.
+ * Number of slides mounted on each side of the current one. One more than the image load window in
+ * `AnimatedGalleryImage`, so an edge slide is already mounted as a placeholder before it loads.
  */
 const PAGER_WINDOW_RADIUS = 4;
 
@@ -104,18 +102,12 @@ type GalleryPagerProps = {
 };
 
 /**
- * Windowed pager body. Subscribes to `currentIndex` itself (rather than the
- * parent doing so) so a page change rerenders only this small slide list and
- * never the parent - keeping the gesture objects/`GestureDetector` stable.
+ * The windowed slide list. It subscribes to `currentIndex` itself, so a page change re-renders only
+ * this list and not the parent, which keeps the gesture objects stable.
  *
- * Only the slides within +-{@link PAGER_WINDOW_RADIUS} of the current index are
- * mounted; a single leading spacer occupies the flex width of all preceding
- * slides so the rendered ones keep their exact natural positions. The slide
- * transforms in `useAnimatedGalleryStyle` are a pure function of each slide's
- * `index` and that natural flex position, so windowing the mount leaves every
- * slide pixelidentical while dropping the mounted component/view count to O(window)
- * instead of it being O(N). This way, less React fibers are reconciled and less
- * shadow nodes are rendered as well.
+ * Only slides within {@link PAGER_WINDOW_RADIUS} of the current index are mounted. A leading spacer
+ * takes the width of the skipped slides, so the mounted ones keep the natural positions that the
+ * transforms in `useAnimatedGalleryStyle` depend on.
  */
 const GalleryPager = (props: GalleryPagerProps) => {
   const { fullWindowHeight, fullWindowWidth, offsetScale, scale, slide, translateX, translateY } =
@@ -209,10 +201,7 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
   const halfScreenHeight = fullWindowHeight / 2;
   const quarterScreenHeight = fullWindowHeight / 4;
 
-  /**
-   * Fade animation for screen, it is always rendered with pointerEvents
-   * set to none for fast opening
-   */
+  // Vertical offset of the whole screen: starts below the viewport and animates to 0.
   const screenTranslateY = useSharedValue(fullWindowHeight);
   const showScreen = useCallback(() => {
     'worklet';
@@ -222,20 +211,13 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     });
   }, [screenTranslateY]);
 
-  /**
-   * Run the fade animation on visible change
-   */
   useEffect(() => {
     dismissKeyboard();
     showScreen();
   }, [showScreen]);
 
-  /**
-   * Image height for the currently selected asset. SharedValue so worklet
-   * consumers (gesture math, header/footer opacity) read it directly on the
-   * UI thread so updating it doesn't trigger a parent rerender. The hook
-   * owns the value and updates it via a store subscription.
-   */
+  // Height of the current image. A SharedValue so worklets read it on the UI thread and updating
+  // it does not re-render this component.
   const currentImageHeight = useCurrentImageHeight({
     assets,
     fullWindowHeight,
@@ -243,14 +225,9 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     imageGalleryStateStore,
   });
 
-  /**
-   * Header visible value for animating in out
-   */
+  // Header and footer visibility: 1 shown, 0 hidden, animated between.
   const headerFooterVisible = useSharedValue(1);
 
-  /**
-   * Shared values for movement
-   */
   const translateX = useSharedValue(0);
   const translateY = useSharedValue(0);
   const offsetScale = useSharedValue(1);
@@ -284,12 +261,8 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     translationX,
   });
 
-  /**
-   * If the header is visible we scale down the opacity of it as the
-   * image is swiped downward. Reads currentImageHeight from a SharedValue so
-   * the worklet doesn't need to be re-registered when the image dimensions
-   * change between slides.
-   */
+  // Fades the header and footer as the image is dragged down. The height is read from a SharedValue
+  // so the worklet is not re-registered when the image dimensions change between slides.
   const headerFooterOpacity = useDerivedValue(() => {
     const imageHeight = currentImageHeight.value;
     return imageHeight * scale.value < fullWindowHeight && translateY.value > 0
@@ -302,9 +275,7 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
         : 1;
   }, []);
 
-  /**
-   * This transition and scaleX reverse lets use scroll right
-   */
+  // Offsets the pager horizontally to the current slide.
   const pagerStyle = useAnimatedStyle<ImageStyle>(
     () => ({
       transform: [
@@ -317,9 +288,7 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     [],
   );
 
-  /**
-   * Simple background color animation on Y movement
-   */
+  // Background that fades as the image is dragged down.
   const containerBackground = useAnimatedStyle<ViewStyle>(
     () => ({
       backgroundColor: backgroundColor || semantics.backgroundCoreApp,
@@ -328,10 +297,7 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     [headerFooterOpacity],
   );
 
-  /**
-   * Show screen style as component is always rendered we hide it
-   * down and up and set opacity to 0 for good measure
-   */
+  // Slides the screen in from below the viewport.
   const showScreenStyle = useAnimatedStyle<ViewStyle>(
     () => ({
       transform: [
@@ -343,16 +309,10 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     [],
   );
 
-  /**
-   * Functions toclose BottomSheetModal with image grid
-   */
   const closeGridView = () => {
     setIsGridViewVisible(false);
   };
 
-  /**
-   * Function to open BottomSheetModal with image grid
-   */
   const openGridView = () => {
     setIsGridViewVisible(true);
   };
@@ -364,11 +324,8 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
       const handle = imageGalleryStateStore.requesterNode;
       if (handle == null) return;
       imageGalleryStateStore.requesterNode = null;
-      // Because of the fact that iOS and Android handle supressing
-      // the content underneath differently, we have to wait a frame
-      // before iOS is allowed to attempt to refocus (it takes a frame
-      // for the native a11y tree to become aware that it no longer has
-      // an accessibilityViewIsModal sibling).
+      // iOS must wait a frame before refocusing: the native a11y tree takes a frame to notice that
+      // the `accessibilityViewIsModal` sibling is gone. Android refocuses immediately.
       if (Platform.OS === 'android') {
         AccessibilityInfo.setAccessibilityFocus(handle);
       } else {
@@ -458,7 +415,12 @@ export const ImageGallery = (props: ImageGalleryProps) => {
 };
 
 /**
- * Clamping worklet to clamp the scaling
+ * Clamps a value between two bounds. Runs as a worklet.
+ *
+ * @param value The value to clamp.
+ * @param lowerBound The minimum result.
+ * @param upperBound The maximum result.
+ * @returns The clamped value.
  */
 export const clamp = (value: number, lowerBound: number, upperBound: number) => {
   'worklet';

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -115,6 +115,32 @@ describe('ImageGallery', () => {
     });
   });
 
+  it('renders a labelled placeholder for a video outside the playback window', async () => {
+    render(
+      <ImageGalleryComponent
+        message={generateMessage({
+          // Index 2 is inside the pager window but outside the video window (`shouldRender < 2`).
+          attachments: [
+            generateImageAttachment(),
+            generateImageAttachment(),
+            generateVideoAttachment({ type: 'video' }),
+          ],
+        })}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.queryAllByLabelText('Image Gallery Video Placeholder', {
+          includeHiddenElements: true,
+        }),
+      ).toHaveLength(1);
+    });
+    expect(
+      screen.queryAllByLabelText('Image Gallery Video', { includeHiddenElements: true }),
+    ).toHaveLength(0);
+  });
+
   it('keeps the pager in ltr coordinates when rtl is enabled', async () => {
     setRTL(true);
 

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -75,23 +75,17 @@ export const AnimatedGalleryImage = React.memo(
       translateY,
     });
 
-    /**
-     * An empty view is rendered for images not close to the currently
-     * selected in order to maintain spacing while reducing the image
-     * load on memory.
-     */
+    // Slides far from the current one render an empty view that keeps the spacing and holds no
+    // image.
     if (!shouldRender) {
       return <View style={[style, { transform: [{ scale: oneEighth }] }]} />;
     }
 
     if (isSvg) {
-      // The outer Animated.View is sized at 8× screen so raster images stay
-      // crisp under pinch zoom (see useAnimatedGalleryStyle). rn-svg on
-      // Android rasterizes the SVG to a bitmap at its layout size and an
-      // 8x screen bitmap exceeds RecordingCanvas's per draw byte limit. The
-      // inner SvgAwareImage is sized at 1x screen with a counter scale of 8 so
-      // the bitmap stays small while the composed visible scale (1/8 × 8 === 1)
-      // is unchanged.
+      // The outer view is 8x screen so raster images stay crisp under pinch zoom (see
+      // `useAnimatedGalleryStyle`). On Android, rn-svg rasterizes at layout size and an 8x screen
+      // bitmap exceeds RecordingCanvas's per-draw byte limit, so the inner `SvgAwareImage` is 1x
+      // screen with a counter scale of 8, which leaves the visible scale unchanged.
       return (
         <Animated.View
           accessibilityLabel={accessibilityLabel}

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -125,27 +125,22 @@ const AnimatedGalleryVideoComponent = (props: AnimatedGalleryVideoType) => {
 
   const onPlayBackStatusUpdate = (playbackStatus: PlaybackStatus) => {
     if (!playbackStatus.isLoaded) {
-      // Update your UI for the unloaded state
       setOpacity(1);
       if (playbackStatus.error) {
         console.error(`Encountered a fatal error during playback: ${playbackStatus.error}`);
       }
     } else {
-      // Update your UI for the loaded state
       setOpacity(0);
       videoPlayer.duration = playbackStatus.durationMillis;
       if (playbackStatus.isPlaying) {
-        // Update your UI for the playing state
         videoPlayer.progress = playbackStatus.positionMillis / playbackStatus.durationMillis;
       }
 
       if (playbackStatus.isBuffering) {
-        // Update your UI for the buffering state
         setOpacity(1);
       }
 
       if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
-        // The player has just finished playing and will stop. Maybe you want to play something else?
         videoPlayer.stop();
       }
     }
@@ -161,15 +156,11 @@ const AnimatedGalleryVideoComponent = (props: AnimatedGalleryVideoType) => {
     translateY,
   });
 
-  /**
-   * An empty view is rendered for images not close to the currently
-   * selected in order to maintain spacing while reducing the image
-   * load on memory.
-   */
+  // Slides far from the current one render an empty view that keeps the spacing and holds no video.
   if (!shouldRender) {
     return (
       <View
-        accessibilityLabel='Empty View Image Gallery'
+        accessibilityLabel='Image Gallery Video Placeholder'
         style={[style, { transform: [{ scale: oneEighth }] }]}
       />
     );

package/src/components/ImageGallery/components/ImageGalleryA11yProbe.tsx

@@ -17,15 +17,12 @@ type Props = {
 };
 
 /**
- * Accessibility-enabled variant of the gallery's background fade view. Wires
- * the "X of N" announcement and the VoiceOver/TalkBack increment/decrement
- * actions. Subscribes locally to currentIndex + assets so the parent
- * ImageGallery doesn't need that subscription itself — only this small sibling
- * re-renders to refresh the accessibilityValue text on each swipe.
+ * Accessible variant of the gallery's background view. It announces "X of N" and handles the
+ * VoiceOver/TalkBack increment and decrement actions. It subscribes to `currentIndex` and `assets`
+ * itself, so a swipe re-renders only this view and not `ImageGallery`.
  *
- * Caller is responsible for gating this on whether accessibility is enabled.
- * When disabled, the parent renders a plain Animated.View with the same
- * background style and no a11y attributes.
+ * The caller renders it only when accessibility is enabled; otherwise the parent renders a plain
+ * `Animated.View` with the same background style.
  */
 export const ImageGalleryA11yProbe = ({ containerBackground }: Props) => {
   const { imageGalleryStateStore } = useImageGalleryContext();

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -17,17 +17,15 @@ import { FileTypes } from '../../../types/types';
 import { Button } from '../../ui/Button/Button';
 import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
 
-// Never called - it exists only so `ReturnType` below can name the animated component's type.
-// Spelling it as `ReturnType<typeof Animated.createAnimatedComponent<typeof SafeAreaView>>`
-// directly resolves against the wrong overload (the `FlatList` one).
+// Never called: it only lets `ReturnType` below name the animated component's type, because
+// spelling out `Animated.createAnimatedComponent<typeof SafeAreaView>` picks the wrong overload.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in type position only
 const createAnimatedSafeAreaViewType = () => Animated.createAnimatedComponent(SafeAreaView);
 
 /**
  * `createAnimatedComponent` is guarded because a stripped-down Reanimated mock may not provide it.
- * The result is asserted back to the animated component type on purpose: written as a bare ternary
- * this types as the *union* of the animated and the plain component, so its `style` prop becomes
- * their intersection - which from React Native 0.87 no longer accepts an animated style.
+ * The cast keeps the animated component type: a bare ternary types as the union with the plain
+ * component, whose `style` prop then rejects animated styles (React Native 0.87 and later).
  */
 const ReanimatedSafeAreaView = (
   Animated.createAnimatedComponent ? Animated.createAnimatedComponent(SafeAreaView) : SafeAreaView
@@ -88,8 +86,7 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) =>
       const extension = asset.mime_type?.split('/')[1] || 'jpg';
       const shouldDownload = asset.uri && asset.uri.includes('http');
       let localFile;
-      // If the file is already uploaded to a CDN, create a local reference to
-      // it first; otherwise just use the local file
+      // Remote files are saved locally first; local files are shared as they are.
       if (shouldDownload) {
         setSavingInProgress(true);
         localFile = await NativeHandlers.saveFile({
@@ -103,9 +100,9 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) =>
         localFile = asset.uri;
       }
 
-      // `image/jpeg` is added for the case where the mime_type isn't available for a file/image
+      // Falls back to `image/jpeg` when the asset has no `mime_type`.
       await NativeHandlers.shareImage({ type: asset.mime_type || 'image/jpeg', url: localFile });
-      // Only delete the file if a local reference has been created beforehand
+      // Only the downloaded copy is deleted.
       if (shouldDownload) {
         await NativeHandlers.deleteFile({ uri: localFile });
       }
@@ -169,7 +166,7 @@ type ShareButtonProps = {
 const ShareButton = ({ share, savingInProgress }: ShareButtonProps) => {
   const styles = useStyles();
   const { icons } = useComponentsContext();
-  // If the shareImage, saveFile or deleteFile is null, we don't want to render the share button
+  // Hidden when the native share or file system handlers are not registered.
   if (!isShareImageAvailable() || !isFileSystemAvailable()) {
     return null;
   }

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -20,15 +20,14 @@ import { primitives } from '../../../theme';
 import { Button } from '../../ui/Button/Button';
 import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
 
-// Never called - it exists only so `ReturnType` below can name the animated component's type.
+// Never called: it only lets `ReturnType` below name the animated component's type.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in type position only
 const createAnimatedSafeAreaViewType = () => Animated.createAnimatedComponent(SafeAreaView);
 
 /**
- * A frame-aware wrapper, matching `ImageGalleryFooter`. `SafeAreaView` compares the window inset
- * against its own measured frame, so a nested instance contributes nothing once an ancestor has
- * already narrowed the subtree - unlike `useSafeAreaInsets`, which is window-global and would
- * double-pad this header inside `ChannelDetailsModal`, which insets its own root.
+ * Animated `SafeAreaView`, as in `ImageGalleryFooter`. It compares the window inset against its own
+ * frame, so a nested instance adds no padding when an ancestor has already inset the subtree.
+ * `useSafeAreaInsets` is window-global and would double-pad inside `ChannelDetailsModal`.
  *
  * `createAnimatedComponent` is guarded because a stripped-down Reanimated mock may not provide it.
  */

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -38,9 +38,9 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
 
   const videoDuration = getDurationLabelFromDuration(duration);
 
-  const progressValueInSeconds = progress * duration;
+  const progressValueInMilliseconds = progress * duration;
 
-  const progressDuration = getDurationLabelFromDuration(progressValueInSeconds);
+  const progressDuration = getDurationLabelFromDuration(progressValueInMilliseconds);
 
   const { icons } = useComponentsContext();
   const {
@@ -71,12 +71,10 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
     await videoPlayer.changePlaybackRate();
   };
 
-  // Remember whether playback was ongoing so it can be resumed once the user
-  // finishes scrubbing.
+  // Whether playback was ongoing, so it resumes when scrubbing ends.
   const wasPlayingBeforeSeek = useRef(false);
 
-  // Pause while scrubbing so the incoming progress updates don't fight the
-  // user's finger on the seek bar.
+  // Pauses while scrubbing so progress updates do not fight the seek bar.
   const handleStartDrag = useStableCallback(() => {
     wasPlayingBeforeSeek.current = videoPlayer.isPlaying;
     videoPlayer.pause();
@@ -117,7 +115,6 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
           onStartDrag={handleStartDrag}
           progress={progress}
           testID={'progress-control'}
-          width={180}
         />
       </View>
 

package/src/components/ImageGallery/components/__tests__/ImageGalleryVideoControl.test.tsx

@@ -104,4 +104,13 @@ describe('ImageGalleryVideoControl', () => {
     expect(seekSpy).toHaveBeenCalledWith(0.5 * DURATION);
     expect(playSpy).not.toHaveBeenCalled();
   });
+
+  it('labels the progress from the duration in milliseconds', () => {
+    const { videoPlayer } = setup();
+    act(() => {
+      videoPlayer.progress = 0.5;
+    });
+
+    expect(screen.getByText('0:05')).toBeTruthy();
+  });
 });