[Video] Make compress/upload cancelable (#4996)

* add abort controller to video upload system

* rm log

* rm log 2

src/view/com/composer/Composer.tsx

@@ -1,5 +1,4 @@
 import React, {
-  Suspense,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -700,15 +699,10 @@ export const ComposePost = observer(function ComposePost({
               <VideoTranscodeProgress
                 asset={videoUploadState.asset}
                 progress={videoUploadState.progress}
+                clear={clearVideo}
               />
             ) : videoUploadState.video ? (
-              // remove suspense when we get rid of lazy
-              <Suspense fallback={null}>
-                <VideoPreview
-                  video={videoUploadState.video}
-                  clear={clearVideo}
-                />
-              </Suspense>
+              <VideoPreview video={videoUploadState.video} clear={clearVideo} />
             ) : null}
           </View>
         </Animated.ScrollView>

src/view/com/composer/ExternalEmbedRemoveBtn.tsx

@@ -25,8 +25,8 @@ export function ExternalEmbedRemoveBtn({onRemove}: {onRemove: () => void}) {
       }}
       onPress={onRemove}
       accessibilityRole="button"
-      accessibilityLabel={_(msg`Remove image preview`)}
-      accessibilityHint={_(msg`Removes the image preview`)}
+      accessibilityLabel={_(msg`Remove attachment`)}
+      accessibilityHint={_(msg`Removes the attachment`)}
       onAccessibilityEscape={onRemove}>
       <FontAwesomeIcon size={18} icon="xmark" style={s.white} />
     </TouchableOpacity>

src/view/com/composer/videos/VideoTranscodeProgress.tsx

@@ -3,18 +3,19 @@ import {View} from 'react-native'
 // @ts-expect-error no type definition
 import ProgressPie from 'react-native-progress/Pie'
 import {ImagePickerAsset} from 'expo-image-picker'
-import {Trans} from '@lingui/macro'
 
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
+import {ExternalEmbedRemoveBtn} from '../ExternalEmbedRemoveBtn'
 import {VideoTranscodeBackdrop} from './VideoTranscodeBackdrop'
 
 export function VideoTranscodeProgress({
   asset,
   progress,
+  clear,
 }: {
   asset: ImagePickerAsset
   progress: number
+  clear: () => void
 }) {
   const t = useTheme()
 
@@ -41,16 +42,14 @@ export function VideoTranscodeProgress({
           a.inset_0,
         ]}>
         <ProgressPie
-          size={64}
-          borderWidth={4}
+          size={48}
+          borderWidth={3}
           borderColor={t.atoms.text.color}
           color={t.atoms.text.color}
           progress={progress}
         />
-        <Text>
-          <Trans>Compressing...</Trans>
-        </Text>
       </View>
+      <ExternalEmbedRemoveBtn onRemove={clear} />
     </View>
   )
 }