[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 postingzio/stable
parent
428607d9a3
commit
4e6b6740f7
|
@ -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} />
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue