[Video] Tweak order of elements in composer (#5213)

bluesky-social · Sep 7, 2024 · 9b8d62c · 9b8d62c
1 parent f1877e4
commit 9b8d62c
Showing 1 changed file with 32 additions and 32 deletions.
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
@@ -200,6 +200,7 @@ export const ComposePost = observer(function ComposePost({
       }
     },
   })
+  const hasVideo = Boolean(videoUploadState.asset || videoUploadState.video)
 
   const [publishOnUpload, setPublishOnUpload] = useState(false)
 
@@ -730,8 +731,37 @@ export const ComposePost = observer(function ComposePost({
               />
             </View>
           )}
-
-          <View style={[a.mt_md]}>
+          <LayoutAnimationConfig skipExiting>
+            {hasVideo && (
+              <Animated.View
+                style={[a.w_full, a.mt_lg]}
+                entering={native(ZoomIn)}
+                exiting={native(ZoomOut)}>
+                {videoUploadState.asset &&
+                  (videoUploadState.status === 'compressing' ? (
+                    <VideoTranscodeProgress
+                      asset={videoUploadState.asset}
+                      progress={videoUploadState.progress}
+                      clear={clearVideo}
+                    />
+                  ) : videoUploadState.video ? (
+                    <VideoPreview
+                      asset={videoUploadState.asset}
+                      video={videoUploadState.video}
+                      setDimensions={updateVideoDimensions}
+                      clear={clearVideo}
+                    />
+                  ) : null)}
+                <SubtitleDialogBtn
+                  defaultAltText={videoAltText}
+                  saveAltText={setVideoAltText}
+                  captions={captions}
+                  setCaptions={setCaptions}
+                />
+              </Animated.View>
+            )}
+          </LayoutAnimationConfig>
+          <View style={!hasVideo ? [a.mt_md] : []}>
             {quote ? (
               <View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
                 <View style={{pointerEvents: 'none'}}>
@@ -742,36 +772,6 @@ 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
-                        asset={videoUploadState.asset}
-                        progress={videoUploadState.progress}
-                        clear={clearVideo}
-                      />
-                    ) : videoUploadState.video ? (
-                      <VideoPreview
-                        asset={videoUploadState.asset}
-                        video={videoUploadState.video}
-                        setDimensions={updateVideoDimensions}
-                        clear={clearVideo}
-                      />
-                    ) : null)}
-                  <SubtitleDialogBtn
-                    defaultAltText={videoAltText}
-                    saveAltText={setVideoAltText}
-                    captions={captions}
-                    setCaptions={setCaptions}
-                  />
-                </Animated.View>
-              )}
-            </LayoutAnimationConfig>
           </View>
         </Animated.ScrollView>
         <SuggestedLanguage text={richtext.text} />