[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,12 +30,18 @@ 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
     }
 
+    if (!currentAccount?.emailConfirmed) {
+      Keyboard.dismiss()
+      control.open()
+    } else {
       const response = await launchImageLibraryAsync({
         exif: false,
         mediaTypes: MediaTypeOptions.Videos,
@@ -52,7 +62,15 @@ export function SelectVideoBtn({onSelectVideo, disabled, setError}: Props) {
           }
         }
       }
-  }, [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,
+          })
+        })
+      }}
+    />
+  )
+}