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

View File

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

View File

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