compose: Make it possible to upload videos (on iOS, and on Android 13+) 🎉

ios/Podfile.lock

@@ -314,7 +314,7 @@ PODS:
  - React-Core
  - react-native-document-picker (8.2.0):
  - React-Core
- - react-native-image-picker (4.10.3):
+ - react-native-image-picker (5.3.1):
  - React-Core
  - react-native-netinfo (6.0.0):
  - React-Core
@@ -735,7 +735,7 @@ SPEC CHECKSUMS:
  React-logger: b75b80500ea80457b2cf169427d66de986cdcb29
  react-native-cameraroll: cb752fda6d5268f1646b4390bd5be1f27706b9a0
  react-native-document-picker: 495c444c0c773c6e83a5d91165890ecb1c0a399a
- react-native-image-picker: 60f4246eb5bb7187fc15638a8c1f13abd3820695
+ react-native-image-picker: ec9b713e248760bfa0f879f0715391de4651a7cb
  react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
  react-native-photo-view: ea0ec91bf5991a6843e740b1f47ab355171c996c
  react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc

ios/ZulipMobile/Info.plist

@@ -54,6 +54,8 @@
  <string>By allowing camera access, you can take photos and send them in Zulip messages.</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string></string>
+ <key>NSMicrophoneUsageDescription</key>
+ <string>By allowing microphone access, you can take videos and send them in Zulip messages.</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>Save photos you choose from Zulip to your photo library.</string>
  <key>NSPhotoLibraryUsageDescription</key>

package.json

@@ -60,7 +60,7 @@
  "react-native": "0.68.7",
  "react-native-document-picker": "^8.1.3",
  "react-native-gesture-handler": "^2.8.0",
- "react-native-image-picker": "4.10.3",
+ "react-native-image-picker": "^5.3.1",
  "react-native-open-notification": "^0.1.4",
  "react-native-photo-view": "alwx/react-native-photo-view#91b873c85",
  "react-native-reanimated": "^2.2.0 <2.3.0",

src/compose/ComposeMenu.js

@@ -88,6 +88,18 @@ const kShouldOfferImageMultiselect =
  // Android 13
  || androidSdkVersion() >= 33;
 
+// As of r-n-image-picker v5.3.1, this is needed to ensure that any received
+// videos have a `fileName` that includes a filename extension. (Servers
+// will interpret the filename extension.) See library implementation.
+//
+// For older Android, it seems the alternative is a generic file-picker UI
+// not specialized to images/videos (in a library codepath that uses
+// Intent.ACTION_GET_CONTENT).
+const kShouldOfferImagePickerMixedMedia =
+ Platform.OS === 'ios'
+ // Android 13
+ || androidSdkVersion() >= 33;
+
 type MenuButtonProps = $ReadOnly<{|
  onPress: () => void | Promise<void>,
  IconComponent: SpecificIconType,
@@ -215,8 +227,7 @@ export default function ComposeMenu(props: Props): Node {
  const handleImagePicker = useCallback(() => {
  launchImageLibrary(
  {
- // TODO(#3624): Try 'mixed', to allow both photos and videos
- mediaType: 'photo',
+ mediaType: kShouldOfferImagePickerMixedMedia ? 'mixed' : 'photo',
 
  quality: 1.0,
  includeBase64: false,
@@ -248,7 +259,25 @@ export default function ComposeMenu(props: Props): Node {
 
  launchCamera(
  {
- mediaType: 'photo',
+ // Here's how iOS video recording works in an attempt on iOS 16:
+ // - iOS gives a native interface with a camera preview. You can
+ // choose "photo" or "video", with "photo" selected by default.
+ // - On tapping "video" for the first time, it shows a permissions
+ // prompt with the NSMicrophoneUsageDescription string. (If we
+ // didn't declare that string, the app would hang here.)
+ // - If you grant the permission, the interaction proceeds as
+ // you'd hope: you take a video (or cancel), then confirm,
+ // retake, or cancel.
+ // - If you don't grant the permission, it proceeds similarly,
+ // except the sent video will have no sound. Later interactions
+ // will also let you take video without sound, and you won't get
+ // prompted about permissions (!). If you want to record videos
+ // with sound, you have to look in Settings by yourself and
+ // grant the permission there.
+ //
+ // 'mixed' is not supported on Android:
+ // https://github.com/react-native-image-picker/react-native-image-picker#options
+ mediaType: Platform.OS === 'ios' ? 'mixed' : 'photo',
 
  // On Android ≤9 (see above) and on iOS, this means putting up a
  // scary permission request. Shrug, because other apps seem to save

types/patches/0029-tsflower-Fix-a-typeof-to-type-in-import.patch → types/patches/0029-tsflower-Fix-a-typeof-to-type-in-TurboModule-imports.patch

@@ -1,12 +1,26 @@
 From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
 From: Greg Price <[email protected]>
 Date: Tue, 7 Jun 2022 21:19:03 -0700
-Subject: [tsflower] Fix a `typeof` to `type` in import
+Subject: [tsflower] Fix a `typeof` to `type` in TurboModule imports
 
 ---
+ .../lib/typescript/platforms/NativeImagePicker.js.flow | 2 +-
  .../lib/typescript/specs/NativeSafeAreaContext.js.flow | 2 +-
- 1 file changed, 1 insertion(+), 1 deletion(-)
+ 2 files changed, 2 insertions(+), 2 deletions(-)
 
+diff --git types/react-native-image-picker/lib/typescript/platforms/NativeImagePicker.js.flow types/react-native-image-picker/lib/typescript/platforms/NativeImagePicker.js.flow
+index 0e0f49f69..1e426ab40 100644
+--- types/react-native-image-picker/lib/typescript/platforms/NativeImagePicker.js.flow
++++ types/react-native-image-picker/lib/typescript/platforms/NativeImagePicker.js.flow
+@@ -1,7 +1,7 @@
+ /* @flow
+ * @generated by TsFlower
+ */
+-import { typeof TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
++import { type TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
+
+ export interface Spec extends TurboModule {
+ launchCamera(options: Object, callback: () => void): void;
 diff --git types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow
 index 80f3194b4..58f386b04 100644
 --- types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow

types/react-native-image-picker/lib/typescript/platforms/NativeImagePicker.js.flow

@@ -0,0 +1,12 @@
+/* @flow
+ * @generated by TsFlower
+ */
+import { type TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
+
+export interface Spec extends TurboModule {
+ launchCamera(options: Object, callback: () => void): void;
+ launchImageLibrary(options: Object, callback: () => void): void;
+}
+
+declare var _default: Spec | null;
+export default _default;

types/react-native-image-picker/lib/typescript/types.js.flow

@@ -11,6 +11,7 @@ export interface OptionsCommon {
  videoQuality?: AndroidVideoOptions | iOSVideoOptions;
  includeBase64?: boolean;
  includeExtra?: boolean;
+ formatAsMp4?: boolean;
  presentationStyle?:
  | 'currentContext'
  | 'fullScreen'

yarn.lock

@@ -10401,10 +10401,10 @@ react-native-gradle-plugin@^0.0.6:
  resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45"
  integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg==
 
-react-native-image-picker@4.10.3:
- version "4.10.3"
- resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.10.3.tgz#cdc11d9836b4cfa57e658c0700201babf8fdca10"
- integrity sha512-gLX8J6jCBkUt6jogpSdA7YyaGVLGYywRzMEwBciXshihpFZjc/cRlKymAVlu6Q7HMw0j3vrho6pI8ZGC5O/FGg==
+react-native-image-picker@^5.3.1:
+ version "5.3.1"
+ resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-5.3.1.tgz#836ab13c228174728a0bd68293b27dc5e1affa0f"
+ integrity sha512-zRCjtlE3KOeaWDM8gXzTwXfvo3ZeF2XMkHceU7CVCtKRleKxna/E4XWIPu/lXO2qlMdnSx1WvfPSbqzAX0qxpA==
 
 react-native-iphone-x-helper@^1.3.0:
  version "1.3.1"