[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,
|
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} />
|
||||||
|
|
|
@ -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={
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue