rework web compression a bit

src/lib/media/video/compress.ts

@@ -7,6 +7,11 @@ import {
 
 const PRESET = 'faster'
 
+export type CompressedVideo = {
+  uri: string
+  size: number
+}
+
 export async function compressVideo(
   file: string,
   callbacks?: {
@@ -30,9 +35,18 @@ export async function compressVideo(
 
   if (success) {
     await FileSystem.deleteAsync(file)
-  }
+    const res = await FileSystem.getInfoAsync(newFile, {size: true})
+    if (res.exists) {
+      console.log('compressed size', (res.size / 1024 / 1024).toFixed(2) + 'mb')
 
       return {
-    uri: success ? newFile : null,
+        success,
+        video: {uri: newFile, size: res.size} as CompressedVideo,
+      }
+    } else {
+      throw new Error('Could not find output video')
+    }
+  } else {
+    return {success: false}
   }
 }

src/lib/media/video/compress.web.ts

@@ -56,13 +56,12 @@ export async function compressVideo(
   if (!ctx) throw new Error('Could not get canvas context')
   ctx.fillStyle = '#fff'
 
-  console.log('canvas', canvas)
-
+  try {
     let wasTruncated = false
     const videoBlob = await new Promise<Blob>(async resolve => {
       const chunks: Blob[] = []
       let options = {
-      mimeType: 'video/webm;codecs=h264',
+        mimeType: getSupportedMimeType(),
         videoBitsPerSecond: 200000,
       }
       const recorder = new MediaRecorder(canvas.captureStream(25), options)
@@ -118,9 +117,25 @@ export async function compressVideo(
       Toast.show('Video was too long and was truncated')
     }
 
-  URL.revokeObjectURL(objectUrl)
-
     return {
       uri: URL.createObjectURL(videoBlob),
     }
+  } catch (err) {
+    console.error(err)
+    Toast.show('Failed to compress video')
+  } finally {
+    URL.revokeObjectURL(objectUrl)
+  }
+}
+
+function getSupportedMimeType() {
+  if (MediaRecorder.isTypeSupported('video/mp4;codecs=h264')) {
+    return 'video/mp4;codecs=h264'
+  } else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) {
+    return 'video/webm;codecs=h264'
+  } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
+    return 'video/webm;codecs=vp9'
+  } else {
+    throw new Error('No supported video codec found')
+  }
 }

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import * as FileSystem from 'expo-file-system'
 
+import {CompressedVideo} from '#/lib/media/video/compress'
 import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
 
@@ -8,7 +8,7 @@ export function VideoPreview({
   video,
   clear,
 }: {
-  video: FileSystem.FileInfo
+  video: CompressedVideo
   clear: () => void
 }) {
   return (

src/view/com/composer/videos/state.ts

@@ -1,5 +1,4 @@
 import {useState} from 'react'
-import * as FileSystem from 'expo-file-system'
 import {ImagePickerAsset} from 'expo-image-picker'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -13,6 +12,10 @@ export function useVideoState({setError}: {setError: (error: string) => void}) {
 
   const {mutate, data, isPending, isError, reset, variables} = useMutation({
     mutationFn: async (asset: ImagePickerAsset) => {
+      console.log(
+        'uncompressed size',
+        ((asset.fileSize ?? 0) / 1024 / 1024).toFixed(2) + 'mb',
+      )
       const compressed = await compressVideo(asset.uri, {
         onProgress: progressMs => {
           if (asset.duration) {
@@ -20,24 +23,8 @@ export function useVideoState({setError}: {setError: (error: string) => void}) {
           }
         },
       })
-      if (!compressed.uri) {
-        throw new Error('Failed to compress video')
-      }
 
-      const res = await FileSystem.getInfoAsync(compressed.uri, {size: true})
-      if (res.exists) {
-        console.log(
-          'uncompressed size',
-          (asset.fileSize! / 1024 / 1024).toFixed(2) + 'mb',
-        )
-        console.log(
-          'compressed size',
-          (res.size / 1024 / 1024).toFixed(2) + 'mb',
-        )
-        return res
-      } else {
-        throw new Error('Could not find output video')
-      }
+      return compressed
     },
     onError: error => {
       console.error('error', error)
@@ -49,7 +36,7 @@ export function useVideoState({setError}: {setError: (error: string) => void}) {
   })
 
   return {
-    video: data,
+    video: data?.video,
     onSelectVideo: mutate,
     videoPending: isPending,
     videoProcessingData: variables,