[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
zio/stable
Samuel Newman 2024-09-05 16:07:06 +01:00 committed by GitHub
parent 428607d9a3
commit 4e6b6740f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 35 additions and 26 deletions

View File

@ -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} />

View File

@ -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={

View File

@ -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,