forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[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
authored by
Samuel Newman
and committed by
GitHub
4e6b6740
428607d9
+35
-26
+34
-24
src/view/com/composer/Composer.tsx
+34
-24
src/view/com/composer/Composer.tsx
···
24
24
FadeIn,
25
25
FadeOut,
26
26
interpolateColor,
27
+
LayoutAnimationConfig,
27
28
useAnimatedStyle,
28
29
useDerivedValue,
29
30
useSharedValue,
30
31
withRepeat,
31
32
withTiming,
33
+
ZoomIn,
34
+
ZoomOut,
32
35
} from 'react-native-reanimated'
33
36
import {useSafeAreaInsets} from 'react-native-safe-area-context'
34
37
import {
···
84
87
import {State as VideoUploadState} from 'state/queries/video/video'
85
88
import {ComposerOpts} from 'state/shell/composer'
86
89
import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
87
-
import {atoms as a, useTheme} from '#/alf'
90
+
import {atoms as a, native, useTheme} from '#/alf'
88
91
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
89
92
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
90
93
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
···
766
769
)}
767
770
</View>
768
771
) : null}
769
-
{videoUploadState.asset &&
770
-
(videoUploadState.status === 'compressing' ? (
771
-
<VideoTranscodeProgress
772
-
asset={videoUploadState.asset}
773
-
progress={videoUploadState.progress}
774
-
clear={clearVideo}
775
-
/>
776
-
) : videoUploadState.video ? (
777
-
<VideoPreview
778
-
asset={videoUploadState.asset}
779
-
video={videoUploadState.video}
780
-
setDimensions={updateVideoDimensions}
781
-
clear={clearVideo}
782
-
/>
783
-
) : null)}
784
-
{(videoUploadState.asset || videoUploadState.video) && (
785
-
<SubtitleDialogBtn
786
-
altText={videoAltText}
787
-
setAltText={setVideoAltText}
788
-
captions={captions}
789
-
setCaptions={setCaptions}
790
-
/>
791
-
)}
772
+
<LayoutAnimationConfig skipExiting>
773
+
{(videoUploadState.asset || videoUploadState.video) && (
774
+
<Animated.View
775
+
style={[a.w_full, a.mt_xs]}
776
+
entering={native(ZoomIn)}
777
+
exiting={native(ZoomOut)}>
778
+
{videoUploadState.asset &&
779
+
(videoUploadState.status === 'compressing' ? (
780
+
<VideoTranscodeProgress
781
+
asset={videoUploadState.asset}
782
+
progress={videoUploadState.progress}
783
+
clear={clearVideo}
784
+
/>
785
+
) : videoUploadState.video ? (
786
+
<VideoPreview
787
+
asset={videoUploadState.asset}
788
+
video={videoUploadState.video}
789
+
setDimensions={updateVideoDimensions}
790
+
clear={clearVideo}
791
+
/>
792
+
) : null)}
793
+
<SubtitleDialogBtn
794
+
altText={videoAltText}
795
+
setAltText={setVideoAltText}
796
+
captions={captions}
797
+
setCaptions={setCaptions}
798
+
/>
799
+
</Animated.View>
800
+
)}
801
+
</LayoutAnimationConfig>
792
802
</View>
793
803
</Animated.ScrollView>
794
804
<SuggestedLanguage text={richtext.text} />
+1
-1
src/view/com/composer/videos/SubtitleDialog.tsx
+1
-1
src/view/com/composer/videos/SubtitleDialog.tsx