[Video] Allow drag-and-drop & pasting video (#5252)

* allow DnD/pasting video * rm await
bluesky-social · Sep 10, 2024 · 08f5f37 · 08f5f37
1 parent 6bc5a05
commit 08f5f37
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
@@ -303,9 +303,13 @@ export const ComposePost = observer(function ComposePost({
   const onPhotoPasted = useCallback(
     async (uri: string) => {
       track('Composer:PastedPhotos')
-      await gallery.paste(uri)
+      if (uri.startsWith('data:video/')) {
+        selectVideo({uri, type: 'video', height: 0, width: 0})
+      } else {
+        await gallery.paste(uri)
+      }
     },
-    [gallery, track],
+    [gallery, track, selectVideo],
   )
 
   const isAltTextRequiredAndMissing = useMemo(() => {

diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
@@ -93,9 +93,9 @@ export const TextInput = React.forwardRef(function TextInputImpl(
     }
   }, [onPressPublish])
   React.useEffect(() => {
-    textInputWebEmitter.addListener('photo-pasted', onPhotoPasted)
+    textInputWebEmitter.addListener('media-pasted', onPhotoPasted)
     return () => {
-      textInputWebEmitter.removeListener('photo-pasted', onPhotoPasted)
+      textInputWebEmitter.removeListener('media-pasted', onPhotoPasted)
     }
   }, [onPhotoPasted])
 
@@ -105,8 +105,8 @@ export const TextInput = React.forwardRef(function TextInputImpl(
       if (transfer) {
         const items = transfer.items
 
-        getImageFromUri(items, (uri: string) => {
-          textInputWebEmitter.emit('photo-pasted', uri)
+        getImageOrVideoFromUri(items, (uri: string) => {
+          textInputWebEmitter.emit('media-pasted', uri)
         })
       }
 
@@ -160,8 +160,8 @@ export const TextInput = React.forwardRef(function TextInputImpl(
               view.pasteText(text)
               preventDefault = true
             }
-            getImageFromUri(clipboardData.items, (uri: string) => {
-              textInputWebEmitter.emit('photo-pasted', uri)
+            getImageOrVideoFromUri(clipboardData.items, (uri: string) => {
+              textInputWebEmitter.emit('media-pasted', uri)
             })
             if (preventDefault) {
               // Return `true` to prevent ProseMirror's default paste behavior.
@@ -346,7 +346,7 @@ const styles = StyleSheet.create({
   },
 })
 
-function getImageFromUri(
+function getImageOrVideoFromUri(
   items: DataTransferItemList,
   callback: (uri: string) => void,
 ) {
@@ -363,11 +363,21 @@ function getImageFromUri(
           if (blob.type.startsWith('image/')) {
             blobToDataUri(blob).then(callback, err => console.error(err))
           }
+
+          if (blob.type.startsWith('video/')) {
+            blobToDataUri(blob).then(callback, err => console.error(err))
+          }
         }
       })
     } else if (type.startsWith('image/')) {
       const file = item.getAsFile()
 
+      if (file) {
+        blobToDataUri(file).then(callback, err => console.error(err))
+      }
+    } else if (type.startsWith('video/')) {
+      const file = item.getAsFile()
+
       if (file) {
         blobToDataUri(file).then(callback, err => console.error(err))
       }