[Video] require email to post videos (#5152)

Co-authored-by: Hailey <me@haileyok.com>

src/components/Prompt.tsx

@@ -8,7 +8,10 @@ import {Button, ButtonColor, ButtonProps, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 
-export {useDialogControl as usePromptControl} from '#/components/Dialog'
+export {
+  type DialogControlProps as PromptControlProps,
+  useDialogControl as usePromptControl,
+} from '#/components/Dialog'
 
 const Context = React.createContext<{
   titleId: string
@@ -23,7 +26,7 @@ export function Outer({
   control,
   testID,
 }: React.PropsWithChildren<{
-  control: Dialog.DialogOuterProps['control']
+  control: Dialog.DialogControlProps
   testID?: string
 }>) {
   const {gtMobile} = useBreakpoints()

src/view/com/composer/videos/SelectVideoBtn.tsx

@@ -1,4 +1,5 @@
 import React, {useCallback} from 'react'
+import {Keyboard} from 'react-native'
 import {
   ImagePickerAsset,
   launchImageLibraryAsync,
@@ -10,11 +11,14 @@ import {useLingui} from '@lingui/react'
 
 import {useVideoLibraryPermission} from '#/lib/hooks/usePermissions'
 import {isNative} from '#/platform/detection'
+import {useModalControls} from '#/state/modals'
+import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {VideoClip_Stroke2_Corner0_Rounded as VideoClipIcon} from '#/components/icons/VideoClip'
+import * as Prompt from '#/components/Prompt'
 
-const VIDEO_MAX_DURATION = 90
+const VIDEO_MAX_DURATION = 60
 
 type Props = {
   onSelectVideo: (video: ImagePickerAsset) => void
@@ -26,33 +30,47 @@ export function SelectVideoBtn({onSelectVideo, disabled, setError}: Props) {
   const {_} = useLingui()
   const t = useTheme()
   const {requestVideoAccessIfNeeded} = useVideoLibraryPermission()
+  const control = Prompt.usePromptControl()
+  const {currentAccount} = useSession()
 
   const onPressSelectVideo = useCallback(async () => {
     if (isNative && !(await requestVideoAccessIfNeeded())) {
       return
     }
 
-    const response = await launchImageLibraryAsync({
+    if (!currentAccount?.emailConfirmed) {
-      exif: false,
+      Keyboard.dismiss()
-      mediaTypes: MediaTypeOptions.Videos,
+      control.open()
-      videoMaxDuration: VIDEO_MAX_DURATION,
+    } else {
-      quality: 1,
+      const response = await launchImageLibraryAsync({
-      legacy: true,
+        exif: false,
-      preferredAssetRepresentationMode:
+        mediaTypes: MediaTypeOptions.Videos,
-        UIImagePickerPreferredAssetRepresentationMode.Current,
+        videoMaxDuration: VIDEO_MAX_DURATION,
-    })
+        quality: 1,
-    if (response.assets && response.assets.length > 0) {
+        legacy: true,
-      try {
+        preferredAssetRepresentationMode:
-        onSelectVideo(response.assets[0])
+          UIImagePickerPreferredAssetRepresentationMode.Current,
-      } catch (err) {
+      })
-        if (err instanceof Error) {
+      if (response.assets && response.assets.length > 0) {
-          setError(err.message)
+        try {
-        } else {
+          onSelectVideo(response.assets[0])
-          setError(_(msg`An error occurred while selecting the video`))
+        } catch (err) {
+          if (err instanceof Error) {
+            setError(err.message)
+          } else {
+            setError(_(msg`An error occurred while selecting the video`))
+          }
         }
       }
     }
-  }, [onSelectVideo, requestVideoAccessIfNeeded, setError, _])
+  }, [
+    onSelectVideo,
+    requestVideoAccessIfNeeded,
+    setError,
+    _,
+    control,
+    currentAccount?.emailConfirmed,
+  ])
 
   return (
     <>
@@ -71,6 +89,32 @@ export function SelectVideoBtn({onSelectVideo, disabled, setError}: Props) {
           style={disabled && t.atoms.text_contrast_low}
         />
       </Button>
+      <VerifyEmailPrompt control={control} />
     </>
   )
 }
+
+function VerifyEmailPrompt({control}: {control: Prompt.PromptControlProps}) {
+  const {_} = useLingui()
+  const {openModal} = useModalControls()
+
+  return (
+    <Prompt.Basic
+      control={control}
+      title={_(msg`Verified email required`)}
+      description={_(
+        msg`To upload videos to Bluesky, you must first verify your email.`,
+      )}
+      confirmButtonCta={_(msg`Verify now`)}
+      confirmButtonColor="primary"
+      onConfirm={() => {
+        control.close(() => {
+          openModal({
+            name: 'verify-email',
+            showReminder: false,
+          })
+        })
+      }}
+    />
+  )
+}