Thread composer UI (#6050)

* Basic adding of posts

* Switch active post on focus

* Conditionally show plus button

* Insert posts midthread

* Track active/inactive post

* Delete posts in a thread

* Focus after deletion

* Tweak empty post detection

* Mix height for active only

* Move toolbar with post on web

* Fix footer positioning

* Post All button

* Fix reply to positioning

* Improve memoization

* Improve memoization for clearVideo

* Remove unnecessary argument

* Add some manual memoization to fix re-renders

* Scroll to bottom on add new

* Fix opacity on Android

* Add backdrop

* Fix videos

* Check alt for video too

* Clear pending publish on error

* Fork alt message by type

* Separate placeholder for next posts

* Limit hitslop to avoid clashes

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

@@ -9,14 +9,17 @@ import {useAutoplayDisabled} from '#/state/preferences'
 import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn'
 import {atoms as a, useTheme} from '#/alf'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
+import {VideoTranscodeBackdrop} from './VideoTranscodeBackdrop'
 
 export function VideoPreview({
   asset,
   video,
   clear,
+  isActivePost,
 }: {
   asset: ImagePickerAsset
   video: CompressedVideo
+  isActivePost: boolean
   setDimensions: (width: number, height: number) => void
   clear: () => void
 }) {
@@ -42,13 +45,18 @@ export function VideoPreview({
         t.atoms.border_contrast_low,
         {backgroundColor: 'black'},
       ]}>
-      <BlueskyVideoView
-        url={video.uri}
-        autoplay={!autoplayDisabled}
-        beginMuted={true}
-        forceTakeover={true}
-        ref={playerRef}
-      />
+      <View style={[a.absolute, a.inset_0]}>
+        <VideoTranscodeBackdrop uri={asset.uri} />
+      </View>
+      {isActivePost && (
+        <BlueskyVideoView
+          url={video.uri}
+          autoplay={!autoplayDisabled}
+          beginMuted={true}
+          forceTakeover={true}
+          ref={playerRef}
+        />
+      )}
       <ExternalEmbedRemoveBtn onRemove={clear} />
       {autoplayDisabled && (
         <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>