[Video] Enter/exit animations for video in composer (#5164)

* enter/exit animations for video in composer

* use zoom out animation

* unify margin between different steps

* skip animation when posting

src/view/com/composer/Composer.tsx

@@ -24,11 +24,14 @@ import Animated, {
   FadeIn,
   FadeOut,
   interpolateColor,
+  LayoutAnimationConfig,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
   withRepeat,
   withTiming,
+  ZoomIn,
+  ZoomOut,
 } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
@@ -84,7 +87,7 @@ import {GalleryModel} from 'state/models/media/gallery'
 import {State as VideoUploadState} from 'state/queries/video/video'
 import {ComposerOpts} from 'state/shell/composer'
 import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
@@ -766,6 +769,12 @@ export const ComposePost = observer(function ComposePost({
                 )}
               </View>
             ) : null}
+            <LayoutAnimationConfig skipExiting>
+              {(videoUploadState.asset || videoUploadState.video) && (
+                <Animated.View
+                  style={[a.w_full, a.mt_xs]}
+                  entering={native(ZoomIn)}
+                  exiting={native(ZoomOut)}>
                   {videoUploadState.asset &&
                     (videoUploadState.status === 'compressing' ? (
                       <VideoTranscodeProgress
@@ -781,14 +790,15 @@ export const ComposePost = observer(function ComposePost({
                         clear={clearVideo}
                       />
                     ) : null)}
-            {(videoUploadState.asset || videoUploadState.video) && (
                   <SubtitleDialogBtn
                     altText={videoAltText}
                     setAltText={setVideoAltText}
                     captions={captions}
                     setCaptions={setCaptions}
                   />
+                </Animated.View>
               )}
+            </LayoutAnimationConfig>
           </View>
         </Animated.ScrollView>
         <SuggestedLanguage text={richtext.text} />

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

@@ -34,7 +34,7 @@ export function SubtitleDialogBtn(props: Props) {
   const {_} = useLingui()
 
   return (
-    <View style={[a.flex_row, a.mt_xs]}>
+    <View style={[a.flex_row, a.my_xs]}>
       <Button
         label={isWeb ? _('Captions & alt text') : _('Alt text')}
         accessibilityHint={

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

@@ -35,7 +35,6 @@ export function VideoTranscodeProgress({
     <View
       style={[
         a.w_full,
-        a.mt_md,
         t.atoms.bg_contrast_50,
         a.rounded_md,
         a.overflow_hidden,