[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
bluesky-social · Sep 5, 2024 · 4e6b674 · 4e6b674
1 parent 428607d
commit 4e6b674
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 deletions.
diff --git a/src/view/com/composer/Composer.tsx b/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,29 +769,36 @@ export const ComposePost = observer(function ComposePost({
                 )}
               </View>
             ) : null}
-            {videoUploadState.asset &&
-              (videoUploadState.status === 'compressing' ? (
-                <VideoTranscodeProgress
-                  asset={videoUploadState.asset}
-                  progress={videoUploadState.progress}
-                  clear={clearVideo}
-                />
-              ) : videoUploadState.video ? (
-                <VideoPreview
-                  asset={videoUploadState.asset}
-                  video={videoUploadState.video}
-                  setDimensions={updateVideoDimensions}
-                  clear={clearVideo}
-                />
-              ) : null)}
-            {(videoUploadState.asset || videoUploadState.video) && (
-              <SubtitleDialogBtn
-                altText={videoAltText}
-                setAltText={setVideoAltText}
-                captions={captions}
-                setCaptions={setCaptions}
-              />
-            )}
+            <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
+                        asset={videoUploadState.asset}
+                        progress={videoUploadState.progress}
+                        clear={clearVideo}
+                      />
+                    ) : videoUploadState.video ? (
+                      <VideoPreview
+                        asset={videoUploadState.asset}
+                        video={videoUploadState.video}
+                        setDimensions={updateVideoDimensions}
+                        clear={clearVideo}
+                      />
+                    ) : null)}
+                  <SubtitleDialogBtn
+                    altText={videoAltText}
+                    setAltText={setVideoAltText}
+                    captions={captions}
+                    setCaptions={setCaptions}
+                  />
+                </Animated.View>
+              )}
+            </LayoutAnimationConfig>
           </View>
         </Animated.ScrollView>
         <SuggestedLanguage text={richtext.text} />

diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/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={

diff --git a/src/view/com/composer/videos/VideoTranscodeProgress.tsx b/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,