fix: refine the android video recording handler

khushal87 · khushal87 · commit 8f8d17b94216 · 2025-01-06T13:01:43.000+05:30
diff --git a/package/expo-package/src/optionalDependencies/takePhoto.ts b/package/expo-package/src/optionalDependencies/takePhoto.ts
@@ -43,14 +43,13 @@ export const takePhoto = ImagePicker
 
         if (permissionGranted) {
           const imagePickerSuccessResult = await ImagePicker.launchCameraAsync({
-            mediaTypes: Platform.OS === 'ios' ? mediaTypeMap[mediaType] : mediaType[mediaType],
+            mediaTypes: mediaTypeMap[mediaType],
             quality: Math.min(Math.max(0, compressImageQuality), 1),
           });
           const canceled = imagePickerSuccessResult.canceled;
           const assets = imagePickerSuccessResult.assets;
           // since we only support single photo upload for now we will only be focusing on 0'th element.
           const photo = assets && assets[0];
-          console.log('photo', photo);
           if (canceled) {
             return { cancelled: true };
           }
diff --git a/package/native-package/src/optionalDependencies/takePhoto.ts b/package/native-package/src/optionalDependencies/takePhoto.ts
@@ -35,7 +35,7 @@ export const takePhoto = ImagePicker
           mediaType: mediaType,
           quality: Math.min(Math.max(0, compressImageQuality), 1),
         });
-        if (!result.assets.length) {
+        if (!result.assets.length || result.didCancel) {
           return {
             cancelled: true,
           };
diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx
@@ -113,7 +113,7 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
           </View>
         )}
         <View style={styles.videoView}>
-          <Recorder height={20} pathFill={white} width={25} />
+          <Recorder height={20} pathFill={white} width={20} />
           {videoDuration ? (
             <Text style={[{ color: white }, styles.durationText, durationText]}>
               {durationLabel}
diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { useAttachmentPickerContext } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
 import { useOwnCapabilitiesContext } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Recorder } from '../../../icons';
 
 const styles = StyleSheet.create({
   container: {
@@ -30,6 +29,7 @@ export const AttachmentPickerSelectionBar = () => {
     ImageSelectorIcon,
     selectedPicker,
     setSelectedPicker,
+    VideoRecorderSelectorIcon,
   } = useAttachmentPickerContext();
 
   const {
@@ -49,7 +49,6 @@ export const AttachmentPickerSelectionBar = () => {
   const {
     theme: {
       attachmentSelectionBar: { container, icon },
-      colors: { grey },
     },
   } = useTheme();
 
@@ -108,7 +107,7 @@ export const AttachmentPickerSelectionBar = () => {
         <TouchableOpacity
           hitSlop={{ bottom: 15, top: 15 }}
           onPress={() => {
-            takeAndUploadImage();
+            takeAndUploadImage(Platform.OS === 'android' ? 'image' : 'mixed');
           }}
           testID='take-photo-touchable'
         >
@@ -120,16 +119,19 @@ export const AttachmentPickerSelectionBar = () => {
           </View>
         </TouchableOpacity>
       ) : null}
-      {hasCameraPicker ? (
+      {hasCameraPicker && Platform.OS === 'android' ? (
         <TouchableOpacity
           hitSlop={{ bottom: 15, top: 15 }}
           onPress={() => {
             takeAndUploadImage('video');
           }}
           testID='take-photo-touchable'
         >
-          <View style={[styles.icon, icon]}>
-            <Recorder pathFill={grey} height={20} width={20} />
+          <View style={[styles.icon, { marginTop: 4 }, icon]}>
+            <VideoRecorderSelectorIcon
+              numberOfImageUploads={imageUploads.length}
+              selectedPicker={selectedPicker}
+            />
           </View>
         </TouchableOpacity>
       ) : null}
diff --git a/package/src/components/AttachmentPicker/components/VideoRecorderSelectorIcon.tsx b/package/src/components/AttachmentPicker/components/VideoRecorderSelectorIcon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { Recorder } from '../../../icons';
+
+export const VideoRecorderSelectorIcon = () => {
+  const {
+    theme: {
+      colors: { grey },
+    },
+  } = useTheme();
+
+  return <Recorder height={20} pathFill={grey} width={20} />;
+};
diff --git a/package/src/components/MessageInput/components/NativeAttachmentPicker.tsx b/package/src/components/MessageInput/components/NativeAttachmentPicker.tsx
@@ -1,19 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, LayoutRectangle, Pressable, StyleSheet } from 'react-native';
+import { Animated, Easing, LayoutRectangle, Platform, Pressable, StyleSheet } from 'react-native';
 
 import {
+  useAttachmentPickerContext,
   useChannelContext,
   useMessagesContext,
   useOwnCapabilitiesContext,
 } from '../../../contexts';
 import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
-import { CameraSelectorIcon } from '../../AttachmentPicker/components/CameraSelectorIcon';
-import { FileSelectorIcon } from '../../AttachmentPicker/components/FileSelectorIcon';
-import { ImageSelectorIcon } from '../../AttachmentPicker/components/ImageSelectorIcon';
 import { CreatePollIcon } from '../../Poll/components/CreatePollIcon';
-import { Recorder } from '../../../icons';
 
 type NativeAttachmentPickerProps = {
   onRequestedClose: () => void;
@@ -29,10 +26,9 @@ export const NativeAttachmentPicker = ({
 }: NativeAttachmentPickerProps) => {
   const size = attachButtonLayoutRectangle?.width ?? 0;
   const attachButtonItemSize = 40;
-  const NUMBER_OF_BUTTONS = 5;
   const {
     theme: {
-      colors: { grey, grey_whisper },
+      colors: { grey_whisper },
       messageInput: {
         nativeAttachmentPicker: {
           buttonContainer,
@@ -55,14 +51,16 @@ export const NativeAttachmentPicker = ({
   const { threadList } = useChannelContext();
   const { hasCreatePoll } = useMessagesContext();
   const ownCapabilities = useOwnCapabilitiesContext();
+  const { CameraSelectorIcon, FileSelectorIcon, ImageSelectorIcon, VideoRecorderSelectorIcon } =
+    useAttachmentPickerContext();
 
   const popupHeight =
     // the top padding
     TOP_PADDING +
     // take margins into account
-    ATTACH_MARGIN_BOTTOM * NUMBER_OF_BUTTONS +
+    ATTACH_MARGIN_BOTTOM +
     // the size of the attachment icon items (same size as attach button * amount of attachment button types)
-    attachButtonItemSize * NUMBER_OF_BUTTONS;
+    attachButtonItemSize;
 
   const containerPopupStyle = {
     borderTopEndRadius: size / 2,
@@ -148,15 +146,19 @@ export const NativeAttachmentPicker = ({
     buttons.push({
       icon: <CameraSelectorIcon />,
       id: 'Camera',
-      onPressHandler: takeAndUploadImage,
-    });
-    buttons.push({
-      icon: <Recorder pathFill={grey} height={20} width={20} />,
-      id: 'Video',
       onPressHandler: () => {
-        takeAndUploadImage('video');
+        takeAndUploadImage(Platform.OS === 'android' ? 'image' : 'mixed');
       },
     });
+    if (Platform.OS === 'android') {
+      buttons.push({
+        icon: <VideoRecorderSelectorIcon />,
+        id: 'Video',
+        onPressHandler: () => {
+          takeAndUploadImage('video');
+        },
+      });
+    }
   }
 
   return (
diff --git a/package/src/components/index.ts b/package/src/components/index.ts
@@ -17,6 +17,7 @@ export * from './AttachmentPicker/components/AttachmentPickerErrorImage';
 export * from './AttachmentPicker/components/AttachmentPickerSelectionBar';
 export * from './AttachmentPicker/components/CameraSelectorIcon';
 export * from './AttachmentPicker/components/FileSelectorIcon';
+export * from './AttachmentPicker/components/VideoRecorderSelectorIcon';
 export * from './AttachmentPicker/components/ImageOverlaySelectedComponent';
 export * from './AttachmentPicker/components/ImageSelectorIcon';
 
diff --git a/package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx b/package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx
@@ -8,7 +8,7 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type AttachmentPickerIconProps = {
-  numberOfImageUploads: number;
+  numberOfImageUploads?: number;
   selectedPicker?: 'images';
 };
 
@@ -90,6 +90,12 @@ export type AttachmentPickerContextValue = {
   setSelectedPicker: React.Dispatch<React.SetStateAction<'images' | undefined>>;
   setTopInset: React.Dispatch<React.SetStateAction<number>>;
   topInset: number;
+  /**
+   * Custom UI component for Android's video recorder selector icon.
+   *
+   * **Default: ** [VideoRecorderSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/VideoRecorderSelectorIcon.tsx)
+   */
+  VideoRecorderSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   selectedPicker?: 'images';
 };
 
@@ -109,6 +115,7 @@ export const AttachmentPickerProvider = ({
     | 'FileSelectorIcon'
     | 'ImageSelectorIcon'
     | 'openPicker'
+    | 'VideoRecorderSelectorIcon'
   > &
     Partial<Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset'>>;
 }>) => {
diff --git a/package/src/contexts/overlayContext/OverlayContext.tsx b/package/src/contexts/overlayContext/OverlayContext.tsx
@@ -44,6 +44,7 @@ export type OverlayProviderProps<
       | 'FileSelectorIcon'
       | 'ImageSelectorIcon'
       | 'topInset'
+      | 'VideoRecorderSelectorIcon'
     >
   > &
   ImageGalleryCustomComponents<StreamChatGenerics> & {
diff --git a/package/src/contexts/overlayContext/OverlayProvider.tsx b/package/src/contexts/overlayContext/OverlayProvider.tsx
@@ -19,6 +19,7 @@ import { CameraSelectorIcon as DefaultCameraSelectorIcon } from '../../component
 import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/AttachmentPicker/components/FileSelectorIcon';
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/AttachmentPicker/components/ImageSelectorIcon';
+import { VideoRecorderSelectorIcon as DefaultVideoRecorderSelectorIcon } from '../../components/AttachmentPicker/components/VideoRecorderSelectorIcon';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 import { CreatePollIcon as DefaultCreatePollIcon } from '../../components/Poll/components/CreatePollIcon';
 import { useStreami18n } from '../../hooks/useStreami18n';
@@ -116,6 +117,7 @@ export const OverlayProvider = <
     },
     topInset,
     value,
+    VideoRecorderSelectorIcon = DefaultVideoRecorderSelectorIcon,
   } = props;
 
   const attachmentPickerProps = {
@@ -192,6 +194,7 @@ export const OverlayProvider = <
     ImageSelectorIcon,
     openPicker: () => openPicker(bottomSheetRef),
     topInset,
+    VideoRecorderSelectorIcon,
   };
 
   const overlayContext = {
diff --git a/package/src/icons/Recorder.tsx b/package/src/icons/Recorder.tsx
@@ -2,15 +2,11 @@ import React from 'react';
 
 import { IconProps, RootPath, RootSvg } from './utils/base';
 
-export const Recorder = (props: IconProps) => (
-  <RootSvg {...props}>
+export const Recorder = ({ ...rest }: IconProps) => (
+  <RootSvg viewBox={`0 0 19 12`} {...rest}>
     <RootPath
-      d='M0 2C0 0.895432 0.89543 0 2 0H16C17.1046 0 18 0.895431 18 2V5.38526L22.4855 3.14251C22.7944 2.95715 23.1792 2.95229 23.4927 3.1298C23.8062 3.30731 24 3.63973 24 4V16C24 16.3603 23.8062 16.6927 23.4927 16.8702C23.1792 17.0477 22.7944 17.0429 22.4855 16.8575L18 14.6147V18C18 19.1046 17.1046 20 16 20H2C0.895431 20 0 19.1046 0 18V2ZM2 2H16V6V6.94546C16 7.67313 16.7524 8.15716 17.4146 7.85545L22 5.76619V14.2338L17.4146 12.1446C16.7524 11.8428 16 12.3269 16 13.0545V14.6147V18H2V2Z'
-      {...props}
-    />
-    <RootPath
-      d='M7 5.5C7 6.32843 6.32843 7 5.5 7C4.67157 7 4 6.32843 4 5.5C4 4.67157 4.67157 4 5.5 4C6.32843 4 7 4.67157 7 5.5Z'
-      {...props}
+      d='M12.1914 2V10H2.19141V2H12.1914ZM13.1914 0H1.19141C0.641406 0 0.191406 0.45 0.191406 1V11C0.191406 11.55 0.641406 12 1.19141 12H13.1914C13.7414 12 14.1914 11.55 14.1914 11V7.5L18.1914 11.5V0.5L14.1914 4.5V1C14.1914 0.45 13.7414 0 13.1914 0Z'
+      {...rest}
     />
   </RootSvg>
 );

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ export type OverlayProviderProps<`
`44`	`44`	`\| 'FileSelectorIcon'`
`45`	`45`	`\| 'ImageSelectorIcon'`
`46`	`46`	`\| 'topInset'`
	`47`	`+ \| 'VideoRecorderSelectorIcon'`
`47`	`48`	`>`
`48`	`49`	`> &`
`49`	`50`	`ImageGalleryCustomComponents<StreamChatGenerics> & {`