diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/view/com/composer/Composer.tsx | 58 | ||||
| -rw-r--r-- | src/view/com/composer/videos/SubtitleDialog.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/composer/videos/VideoTranscodeProgress.tsx | 1 |
3 files changed, 35 insertions, 26 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 6a6ac7267..3ca709a1e 100644 --- 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 index 9cd8eae47..a1cdb906d 100644 --- 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 index 3e26230ff..f6f0f7ccf 100644 --- 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, |