Add video support

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

android/app/src/main/AndroidManifest.xml

@@ -28,6 +28,21 @@
           <data android:mimeType="image/png" />
           <data android:mimeType="image/webp" />
           <data android:mimeType="image/gif" />
+          <data android:mimeType="video/av01" />
+          <data android:mimeType="video/3gpp" />
+          <data android:mimeType="video/avc" />
+          <data android:mimeType="video/hevc" />
+          <data android:mimeType="video/x-matroska" />
+          <data android:mimeType="video/mp2t" />
+          <data android:mimeType="video/mp4" />
+          <data android:mimeType="video/mp42" />
+          <data android:mimeType="video/mp43" />
+          <data android:mimeType="video/mp4v-es" />
+          <data android:mimeType="video/mpeg" />
+          <data android:mimeType="video/mpeg2" />
+          <data android:mimeType="video/x-vnd.on2.vp8" />
+          <data android:mimeType="video/x-vnd.on2.vp9" />
+          <data android:mimeType="video/webm" />
         </intent-filter>
         <intent-filter>
           <action android:name="android.intent.action.SEND_MULTIPLE" />
@@ -37,6 +52,21 @@
           <data android:mimeType="image/png" />
           <data android:mimeType="image/webp" />
           <data android:mimeType="image/gif" />
+          <data android:mimeType="video/av01" />
+          <data android:mimeType="video/3gpp" />
+          <data android:mimeType="video/avc" />
+          <data android:mimeType="video/hevc" />
+          <data android:mimeType="video/x-matroska" />
+          <data android:mimeType="video/mp2t" />
+          <data android:mimeType="video/mp4" />
+          <data android:mimeType="video/mp42" />
+          <data android:mimeType="video/mp43" />
+          <data android:mimeType="video/mp4v-es" />
+          <data android:mimeType="video/mpeg" />
+          <data android:mimeType="video/mpeg2" />
+          <data android:mimeType="video/x-vnd.on2.vp8" />
+          <data android:mimeType="video/x-vnd.on2.vp9" />
+          <data android:mimeType="video/webm" />
         </intent-filter>
       </activity>
     </application>

package-lock.json

@@ -18,6 +18,7 @@
         "@realm/react": "^0.5.1",
         "@reduxjs/toolkit": "^1.9.5",
         "@shopify/flash-list": "^1.4.3",
+        "magic-bytes.js": "^1.0.15",
         "react": "18.2.0",
         "react-native": "0.72.2",
         "react-native-document-picker": "^9.0.1",
@@ -5617,6 +5618,29 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5687,7 +5711,7 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/buffer": {
+    "node_modules/bson/node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
@@ -11095,6 +11119,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-bytes.js": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/magic-bytes.js/-/magic-bytes.js-1.0.15.tgz",
+      "integrity": "sha512-bpRmwbRHqongRhA+mXzbLWjVy7ylqmfMBYaQkSs6pac0z6hBTvsgrH0r4FBYd/UYVJBmS6Rp/O+oCCQVLzKV1g=="
+    },
     "node_modules/magic-string": {
       "version": "0.30.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
@@ -19947,6 +19976,17 @@
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
         "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        }
       }
     },
     "brace-expansion": {
@@ -19991,8 +20031,8 @@
       "integrity": "sha512-Uu4OCZa0jouQJCKOk1EmmyqtdWAP5HVLru4lQxTwzJzxT+sJ13lVpEZU/MATDxtHiekWMAL84oQY3Xn1LpJVSg==",
       "requires": {
         "buffer": "^5.6.0"
-      }
       },
+      "dependencies": {
         "buffer": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -20001,6 +20041,8 @@
             "base64-js": "^1.3.1",
             "ieee754": "^1.1.13"
           }
+        }
+      }
     },
     "buffer-from": {
       "version": "1.1.2",
@@ -23979,6 +24021,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "magic-bytes.js": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/magic-bytes.js/-/magic-bytes.js-1.0.15.tgz",
+      "integrity": "sha512-bpRmwbRHqongRhA+mXzbLWjVy7ylqmfMBYaQkSs6pac0z6hBTvsgrH0r4FBYd/UYVJBmS6Rp/O+oCCQVLzKV1g=="
+    },
     "magic-string": {
       "version": "0.30.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",

package.json

@@ -23,6 +23,7 @@
     "@realm/react": "^0.5.1",
     "@reduxjs/toolkit": "^1.9.5",
     "@shopify/flash-list": "^1.4.3",
+    "magic-bytes.js": "^1.0.15",
     "react": "18.2.0",
     "react-native": "0.72.2",
     "react-native-document-picker": "^9.0.1",

patches/react-native-file-access+3.0.4.patch

@@ -0,0 +1,169 @@
+diff --git a/node_modules/react-native-file-access/README.md b/node_modules/react-native-file-access/README.md
+index e0540e0..9eb3295 100644
+--- a/node_modules/react-native-file-access/README.md
++++ b/node_modules/react-native-file-access/README.md
+@@ -155,6 +155,12 @@ type ManagedFetchResult = {
+ - Read the content of a file.
+   - Default encoding of returned string is utf8.
+ 
++`FileSystem.read(path: string, length?: number, position?: number): Promise<number[]>`
++
++- Read a file as a byte array.
++  - `length` - Optional number of bytes to read.
++  - `position` - Optional position to start reading from.
++
+ ```
+ FileSystem.stat(path: string): Promise<FileStat>
+ 
+diff --git a/node_modules/react-native-file-access/android/src/main/java/com/alpha0010/fs/FileAccessModule.kt b/node_modules/react-native-file-access/android/src/main/java/com/alpha0010/fs/FileAccessModule.kt
+index 248a938..cbd4fe7 100644
+--- a/node_modules/react-native-file-access/android/src/main/java/com/alpha0010/fs/FileAccessModule.kt
++++ b/node_modules/react-native-file-access/android/src/main/java/com/alpha0010/fs/FileAccessModule.kt
+@@ -13,6 +13,8 @@ import com.facebook.react.bridge.Promise
+ import com.facebook.react.bridge.ReactApplicationContext
+ import com.facebook.react.bridge.ReactMethod
+ import com.facebook.react.bridge.ReadableMap
++import com.facebook.react.bridge.WritableArray
++import com.facebook.react.bridge.WritableNativeArray
+ import kotlinx.coroutines.CoroutineScope
+ import kotlinx.coroutines.Dispatchers
+ import kotlinx.coroutines.launch
+@@ -400,6 +402,27 @@ class FileAccessModule internal constructor(context: ReactApplicationContext) :
+     }
+   }
+ 
++  @ReactMethod
++  override fun read(path: String, length: Double, position: Double, promise: Promise) {
++    ioScope.launch {
++      try {
++        val data = openForReading(path).use {
++          it.skip(position.toLong())
++          val byteArray = ByteArray(length.toInt())
++          it.read(byteArray)
++          byteArray
++        }
++        val writableArray: WritableArray = WritableNativeArray()
++        for (byte in data) {
++          writableArray.pushInt(byte.toInt() and 0xFF)
++        }
++        promise.resolve(writableArray)
++      } catch (e: Throwable) {
++        promise.reject(e)
++      }
++    }
++  }
++
+   @ReactMethod
+   override fun stat(path: String, promise: Promise) {
+     ioScope.launch {
+diff --git a/node_modules/react-native-file-access/android/src/oldarch/FileAccessSpec.kt b/node_modules/react-native-file-access/android/src/oldarch/FileAccessSpec.kt
+index 736324b..c223276 100644
+--- a/node_modules/react-native-file-access/android/src/oldarch/FileAccessSpec.kt
++++ b/node_modules/react-native-file-access/android/src/oldarch/FileAccessSpec.kt
+@@ -30,6 +30,7 @@ abstract class FileAccessSpec internal constructor(context: ReactApplicationCont
+   abstract fun mkdir(path: String, promise: Promise)
+   abstract fun mv(source: String, target: String, promise: Promise)
+   abstract fun readFile(path: String, encoding: String, promise: Promise)
++  abstract fun read(path: String, length: Double, position: Double, promise: Promise)
+   abstract fun stat(path: String, promise: Promise)
+   abstract fun statDir(path: String, promise: Promise)
+   abstract fun unlink(path: String, promise: Promise)
+diff --git a/node_modules/react-native-file-access/lib/commonjs/index.js b/node_modules/react-native-file-access/lib/commonjs/index.js
+index 88f1c2c..20eb70b 100644
+--- a/node_modules/react-native-file-access/lib/commonjs/index.js
++++ b/node_modules/react-native-file-access/lib/commonjs/index.js
+@@ -209,6 +209,12 @@ const FileSystem = {
+     let encoding = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'utf8';
+     return FileAccessNative.readFile(path, encoding);
+   },
++  /**
++   * Read the content of a file as a byte array.
++   */
++  read(path, length, position) {
++    return FileAccessNative.read(path, length, position);
++  },
+   /**
+    * Read file metadata.
+    */
+diff --git a/node_modules/react-native-file-access/lib/module/index.js b/node_modules/react-native-file-access/lib/module/index.js
+index 0581920..22c37d3 100644
+--- a/node_modules/react-native-file-access/lib/module/index.js
++++ b/node_modules/react-native-file-access/lib/module/index.js
+@@ -198,6 +198,12 @@ export const FileSystem = {
+     let encoding = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'utf8';
+     return FileAccessNative.readFile(path, encoding);
+   },
++  /**
++   * Read the content of a file as a byte array.
++   */
++  read(path, length, position) {
++    return FileAccessNative.read(path, length, position);
++  },
+   /**
+    * Read file metadata.
+    */
+diff --git a/node_modules/react-native-file-access/lib/typescript/NativeFileAccess.d.ts b/node_modules/react-native-file-access/lib/typescript/NativeFileAccess.d.ts
+index 0c58874..ed84081 100644
+--- a/node_modules/react-native-file-access/lib/typescript/NativeFileAccess.d.ts
++++ b/node_modules/react-native-file-access/lib/typescript/NativeFileAccess.d.ts
+@@ -63,6 +63,7 @@ export interface Spec extends TurboModule {
+     mkdir(path: string): Promise<string>;
+     mv(source: string, target: string): Promise<void>;
+     readFile(path: string, encoding: string): Promise<string>;
++    read(path: string, length: number, position: number): Promise<number[]>;
+     stat(path: string): Promise<FileStat>;
+     statDir(path: string): Promise<FileStat[]>;
+     unlink(path: string): Promise<void>;
+diff --git a/node_modules/react-native-file-access/lib/typescript/index.d.ts b/node_modules/react-native-file-access/lib/typescript/index.d.ts
+index 5433d53..12854ca 100644
+--- a/node_modules/react-native-file-access/lib/typescript/index.d.ts
++++ b/node_modules/react-native-file-access/lib/typescript/index.d.ts
+@@ -84,6 +84,10 @@ export declare const FileSystem: {
+      * Read the content of a file.
+      */
+     readFile(path: string, encoding?: Encoding): Promise<string>;
++    /**
++     * Read the content of a file as a byte array.
++     */
++    read(path: string, length?: number, position?: number): Promise<number[]>;
+     /**
+      * Read file metadata.
+      */
+diff --git a/node_modules/react-native-file-access/src/NativeFileAccess.ts b/node_modules/react-native-file-access/src/NativeFileAccess.ts
+index b3a7baa..affd76c 100644
+--- a/node_modules/react-native-file-access/src/NativeFileAccess.ts
++++ b/node_modules/react-native-file-access/src/NativeFileAccess.ts
+@@ -71,6 +71,7 @@ export interface Spec extends TurboModule {
+   mkdir(path: string): Promise<string>;
+   mv(source: string, target: string): Promise<void>;
+   readFile(path: string, encoding: string): Promise<string>;
++  read(path: string, length: number, position: number): Promise<number[]>;
+   stat(path: string): Promise<FileStat>;
+   statDir(path: string): Promise<FileStat[]>;
+   unlink(path: string): Promise<void>;
+diff --git a/node_modules/react-native-file-access/src/index.ts b/node_modules/react-native-file-access/src/index.ts
+index 1b38d45..5c9fd5e 100644
+--- a/node_modules/react-native-file-access/src/index.ts
++++ b/node_modules/react-native-file-access/src/index.ts
+@@ -31,7 +31,6 @@ const LINKING_ERROR =
+   '- You rebuilt the app after installing the package\n' +
+   '- You are not using Expo Go\n';
+ 
+-// @ts-expect-error
+ const isTurboModuleEnabled = global.__turboModuleProxy != null;
+ 
+ const FileAccessModule = isTurboModuleEnabled
+@@ -275,6 +274,13 @@ export const FileSystem = {
+     return FileAccessNative.readFile(path, encoding);
+   },
+ 
++  /**
++   * Read the content of a file as a byte array.
++   */
++  read(path: string, length: number = 1000, position: number = 0) {
++    return FileAccessNative.read(path, length, position);
++  },
++
+   /**
+    * Read file metadata.
+    */

src/components/floatingActionButton.tsx

@@ -9,14 +9,9 @@ import {
   useKeyboard,
 } from '@react-native-community/hooks';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { documentPickerResponseToAddMemeFile, ROUTE } from '../types';
-import {
-  allowedMimeTypes,
-  getFilenameFromUri,
-  guessMimeType,
-  noOp,
-} from '../utilities';
 import { useDispatch } from 'react-redux';
+import { documentPickerResponseToAddMemeFile, ROUTE } from '../types';
+import { allowedMimeTypes, getFilenameFromUri, noOp } from '../utilities';
 import { setSnackbarMessage } from '../state';
 
 const floatingActionButtonStyles = StyleSheet.create({
@@ -59,17 +54,11 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
       dispatch(setSnackbarMessage('Clipboard does not contain a URI.'));
       return;
     }
-    const mimeType = guessMimeType(uri);
-    if (!mimeType) {
-      dispatch(setSnackbarMessage('Unsupported MIME type.'));
-      return;
-    }
     navigate(ROUTE.ADD_MEME, {
       files: [
         {
           uri: uri,
           filename: getFilenameFromUri(uri),
-          type: mimeType,
         },
       ],
     });

src/components/loadingView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTheme } from 'react-native-paper';
 
@@ -10,12 +10,17 @@ const loadingViewStyles = StyleSheet.create({
   },
 });
 
-const LoadingView = () => {
+const LoadingView = ({ ...props }: ComponentProps<typeof View>) => {
   const { colors } = useTheme();
 
   return (
     <View
-      style={[loadingViewStyles.view, { backgroundColor: colors.background }]}>
+      {...props}
+      style={[
+        props.style,
+        loadingViewStyles.view,
+        { backgroundColor: colors.background },
+      ]}>
       <ActivityIndicator size="large" color={colors.primary} />
     </View>
   );

src/components/memes/memeEditor.tsx

@@ -1,14 +1,20 @@
-import React, { useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
-import { Image } from 'react-native';
+import { Image, LayoutAnimation } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { useImageDimensions } from '@react-native-community/hooks/lib/useImageDimensions';
+import { LoadingView, MemeFail, MemeTagSelector } from '..';
-import { MemeFail, MemeTagSelector, LoadingView } from '..';
+import {
-import { Tag } from '../../database';
+  getFilenameFromUri,
-import { StringValidationResult, validateMemeTitle } from '../../utilities';
+  getMemeTypeFromMimeType,
+  validateMemeTitle,
+} from '../../utilities';
+import { StagingMeme } from '../../types';
+import { useMemeDimensions } from '../../hooks';
+import { MEME_TYPE } from '../../database';
+import Video from 'react-native-video';
 
 const memeEditorStyles = {
-  image: {
+  media: {
     marginBottom: 15,
     borderRadius: 5,
   },
@@ -25,84 +31,124 @@ const memeEditorStyles = {
 };
 
 const MemeEditor = ({
-  memeUri,
+  uri,
-  memeFilename,
+  mimeType,
-  memeError,
+  loading,
-  setMemeError,
+  setLoading,
-  memeTitle,
+  error,
-  setMemeTitle,
+  setError,
-  memeTags,
+  staging,
-  setMemeTags,
+  setStaging,
 }: {
-  memeUri: string;
+  uri?: string;
-  memeFilename?: string;
+  mimeType?: string;
-  memeError: Error | undefined;
+  loading: boolean;
-  setMemeError: (error: Error | undefined) => void;
+  setLoading: (loading: boolean) => void;
-  memeTitle: StringValidationResult;
+  error: Error | undefined;
-  setMemeTitle: (name: StringValidationResult) => void;
+  setError: (error: Error | undefined) => void;
-  memeTags: Map<string, Tag>;
+  staging?: StagingMeme;
-  setMemeTags: (tags: Map<string, Tag>) => void;
+  setStaging: (staging: StagingMeme) => void;
 }) => {
   const { width } = useSafeAreaFrame();
   const { colors } = useTheme();
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: memeUri });
+  const { dimensions } = useMemeDimensions(
-  useEffect(() => setMemeError(error), [error, setMemeError]);
+    uri,
+    mimeType,
+    useMemo(
+      () => () => {
+        setLoading(false);
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      },
+      [setLoading],
+    ),
+    useMemo(() => (errorIn: Error) => setError(errorIn), [setError]),
+  );
 
-  if (!memeError && (loading || !dimensions)) return <LoadingView />;
+  const mediaComponent = useMemo(() => {
+    if (!mimeType || !dimensions) return <></>;
+
+    const dimensionStyles = {
+      width: width * 0.92,
+      height: Math.max(
+        Math.min((width * 0.92) / dimensions.aspectRatio, 500),
+        100,
+      ),
+    };
+
+    const memeType = getMemeTypeFromMimeType(mimeType);
+    if (!memeType) return <></>;
+
+    switch (memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF: {
+        return (
+          <Image
+            source={{ uri }}
+            style={[memeEditorStyles.media, dimensionStyles]}
+            resizeMode="contain"
+          />
+        );
+      }
+      case MEME_TYPE.VIDEO: {
+        return (
+          <Video
+            source={{ uri }}
+            style={[memeEditorStyles.media, dimensionStyles]}
+            resizeMode="contain"
+            controls
+          />
+        );
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [dimensions, mimeType, uri, width]);
+
+  if (!uri || !mimeType || !staging) return <LoadingView />;
 
   return (
     <>
       <TextInput
         mode="outlined"
         label="Title"
-        value={memeTitle.raw}
+        value={staging.title.raw}
-        onChangeText={title => setMemeTitle(validateMemeTitle(title))}
+        onChangeText={title =>
-        error={!memeTitle.valid}
+          setStaging({ ...staging, title: validateMemeTitle(title) })
+        }
+        error={!staging.title.valid}
         selectTextOnFocus
       />
-      <HelperText type="error" visible={!memeTitle.valid}>
+      <HelperText type="error" visible={!staging.title.valid}>
-        {memeTitle.error}
+        {staging.title.error}
       </HelperText>
-      {memeError || !dimensions ? (
+      {error ? (
         <MemeFail
           style={[
             {
               width: width * 0.92,
               height: width * 0.92,
             },
-            memeEditorStyles.image,
+            memeEditorStyles.media,
           ]}
           iconSize={50}
         />
+      ) : // eslint-disable-next-line unicorn/no-nested-ternary
+      loading || !dimensions ? (
+        <></>
       ) : (
-        <Image
+        mediaComponent
-          source={{ uri: memeUri }}
-          style={[
-            {
-              width: width * 0.92,
-              height: Math.max(
-                Math.min(
-                  ((width * 0.92) / dimensions.width) * dimensions.height,
-                  500,
-                ),
-                100,
-              ),
-            },
-            memeEditorStyles.image,
-          ]}
-          resizeMode="contain"
-        />
       )}
       <Text
         variant="bodySmall"
         style={[memeEditorStyles.uri, { color: colors.onSurfaceDisabled }]}
         numberOfLines={1}>
-        {memeFilename}
+        {getFilenameFromUri(uri)}
       </Text>
       <MemeTagSelector
-        memeTags={memeTags}
+        memeTags={staging.tags}
-        setMemeTags={setMemeTags}
+        setMemeTags={tags => setStaging({ ...staging, tags })}
         style={memeEditorStyles.memeTagSelector}
       />
     </>

src/components/memes/memeViewItem.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { useImageDimensions } from '@react-native-community/hooks';
 import { AndroidScoped } from 'react-native-file-access';
 import { useSelector } from 'react-redux';
-import { Meme } from '../../database';
+import { MEME_TYPE, Meme } from '../../database';
 import { RootState } from '../../state';
 import { AnimatedImage, LoadingView, MemeFail } from '..';
+import { useMemeDimensions } from '../../hooks';
+import Video from 'react-native-video';
 
 const memeViewItemStyles = StyleSheet.create({
   view: {
@@ -24,14 +25,37 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
 
   const uri = AndroidScoped.appendPath(storageUri, meme.filename);
 
-  const { dimensions, loading, error } = useImageDimensions({ uri });
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
+
+  const mediaComponent = useMemo(() => {
+    if (!dimensions) return <></>;
+
+    const dimensionStyles =
+      dimensions.aspectRatio > width / (height - 128)
+        ? {
+            width,
+            height: width / (dimensions.width / dimensions.height),
+          }
+        : {
+            width: (height - 128) * (dimensions.width / dimensions.height),
+            height: height - 128,
+          };
+
+    switch (meme.memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF: {
+        return <AnimatedImage source={{ uri }} style={dimensionStyles} />;
+      }
+      default: {
+        return (
+          <Video source={{ uri }} style={dimensionStyles} paused controls />
+        );
+      }
+    }
+  }, [dimensions, height, meme.memeType, uri, width]);
 
   if (!error && (loading || !dimensions)) {
-    return (
+    return <LoadingView style={{ width, height }} />;
-      <View style={{ width, height }}>
-        <LoadingView />
-      </View>
-    );
   }
 
   return (
@@ -45,21 +69,7 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
           iconSize={50}
         />
       ) : (
-        <AnimatedImage
+        mediaComponent
-          source={{ uri }}
-          style={
-            dimensions.aspectRatio > width / (height - 128)
-              ? {
-                  width,
-                  height: width / (dimensions.width / dimensions.height),
-                }
-              : {
-                  width:
-                    (height - 128) * (dimensions.width / dimensions.height),
-                  height: height - 128,
-                }
-          }
-        />
       )}
     </View>
   );

src/components/memes/memesList/memesGridItem.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Image, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { useImageDimensions } from '@react-native-community/hooks';
 import { AndroidScoped } from 'react-native-file-access';
-import { Meme } from '../../../database';
+import { MEME_TYPE, Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { MemeFail } from '..';
 import { getFontAwesome5IconSize } from '../../../utilities';
+import { useMemeDimensions } from '../../../hooks';
 
 const MemesGridItem = ({
   meme,
@@ -29,7 +29,32 @@ const MemesGridItem = ({
 
   const uri = AndroidScoped.appendPath(storageUri, meme.filename);
 
-  const { dimensions, loading, error } = useImageDimensions({ uri });
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
+
+  const itemWidth = (width * 0.92 - 5) / gridColumns;
+
+  const mediaComponent = useMemo(() => {
+    switch (meme.memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF:
+      case MEME_TYPE.VIDEO: {
+        return (
+          <Image
+            source={{ uri }}
+            style={[
+              {
+                width: itemWidth,
+                height: itemWidth,
+              },
+            ]}
+          />
+        );
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [itemWidth, meme.memeType, uri]);
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -44,15 +69,7 @@ const MemesGridItem = ({
           iconSize={getFontAwesome5IconSize(gridColumns)}
         />
       ) : (
-        <Image
+        mediaComponent
-          source={{ uri }}
-          style={[
-            {
-              width: (width * 0.92 - 5) / gridColumns,
-              height: (width * 0.92 - 5) / gridColumns,
-            },
-          ]}
-        />
       )}
     </TouchableHighlight>
   );

src/components/memes/memesList/memesList.tsx

@@ -73,6 +73,7 @@ const MemesList = ({
         <MasonryFlashList
           ref={flashListRef}
           data={memes}
+          key={masonryColumns}
           estimatedItemSize={getFlashListItemHeight(masonryColumns)}
           estimatedListSize={{
             height,
@@ -101,6 +102,7 @@ const MemesList = ({
         <FlashList
           ref={flashListRef}
           data={memes}
+          key={gridColumns}
           estimatedItemSize={getFlashListItemHeight(gridColumns)}
           estimatedListSize={{
             height: height,

src/components/memes/memesList/memesListItem.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { Text, TouchableRipple } from 'react-native-paper';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { useImageDimensions } from '@react-native-community/hooks';
 import { AndroidScoped } from 'react-native-file-access';
 import { useSelector } from 'react-redux';
-import { Meme } from '../../../database';
+import { MEME_TYPE, Meme } from '../../../database';
 import { MemeFail } from '..';
 import { RootState } from '../../../state';
+import { useMemeDimensions } from '../../../hooks';
 
 const memesListItemStyles = StyleSheet.create({
   view: {
@@ -50,7 +50,20 @@ const MemesListItem = ({
 
   const uri = AndroidScoped.appendPath(storageUri, meme.filename);
 
-  const { dimensions, loading, error } = useImageDimensions({ uri });
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
+
+  const mediaComponent = useMemo(() => {
+    switch (meme.memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF:
+      case MEME_TYPE.VIDEO: {
+        return <Image source={{ uri }} style={[memesListItemStyles.image]} />;
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [meme.memeType, uri]);
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -62,7 +75,7 @@ const MemesListItem = ({
         {error ? (
           <MemeFail style={memesListItemStyles.image} />
         ) : (
-          <Image source={{ uri }} style={memesListItemStyles.image} />
+          mediaComponent
         )}
         <View
           style={[

src/components/memes/memesList/memesMasonryItem.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Image, StyleSheet, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { AndroidScoped } from 'react-native-file-access';
-import { useImageDimensions } from '@react-native-community/hooks';
+import { MEME_TYPE, Meme } from '../../../database';
-import { Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { MemeFail } from '..';
 import { getFontAwesome5IconSize } from '../../../utilities';
+import { useMemeDimensions } from '../../../hooks';
 
 const memeMasonryItemStyles = StyleSheet.create({
   view: {
@@ -39,7 +39,35 @@ const MemesMasonryItem = ({
 
   const uri = AndroidScoped.appendPath(storageUri, meme.filename);
 
-  const { dimensions, loading, error } = useImageDimensions({ uri });
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
+
+  const itemWidth = (width * 0.92 - 5) / masonryColumns - 5;
+  const itemHeight =
+    ((width * 0.92) / masonryColumns - 5) / (dimensions?.aspectRatio ?? 1);
+
+  const mediaComponent = useMemo(() => {
+    switch (meme.memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF:
+      case MEME_TYPE.VIDEO: {
+        return (
+          <Image
+            source={{ uri }}
+            style={[
+              memeMasonryItemStyles.image,
+              {
+                width: itemWidth,
+                height: itemHeight,
+              },
+            ]}
+          />
+        );
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [itemHeight, itemWidth, meme.memeType, uri]);
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -51,25 +79,12 @@ const MemesMasonryItem = ({
         <MemeFail
           style={[
             memeMasonryItemStyles.image,
-            {
+            { width: itemWidth, height: itemHeight },
-              width: (width * 0.92) / masonryColumns - 5,
-              height: (width * 0.92) / masonryColumns - 5,
-            },
           ]}
           iconSize={getFontAwesome5IconSize(masonryColumns)}
         />
       ) : (
-        <Image
+        mediaComponent
-          source={{ uri }}
-          style={[
-            memeMasonryItemStyles.image,
-            {
-              width: (width * 0.92) / masonryColumns - 5,
-              height:
-                ((width * 0.92) / masonryColumns - 5) / dimensions.aspectRatio,
-            },
-          ]}
-        />
       )}
     </TouchableHighlight>
   );

src/components/tags/tagEditor.tsx

@@ -2,62 +2,69 @@ import React, { useEffect, useRef } from 'react';
 import { HelperText, TextInput } from 'react-native-paper';
 import TagPreview from './tagPreview';
 import {
-  StringValidationResult,
   generateRandomColor,
   validateColor,
   validateTagName,
 } from '../../utilities';
+import { StagingTag } from '../../types';
 
 const TagEditor = ({
-  tagName,
+  staging,
-  setTagName,
+  setStaging,
-  tagColor,
-  setTagColor,
 }: {
-  tagName: StringValidationResult;
+  staging: StagingTag;
-  setTagName: (name: StringValidationResult) => void;
+  setStaging: (staging: StagingTag) => void;
-  tagColor: StringValidationResult;
-  setTagColor: (color: StringValidationResult) => void;
 }) => {
-  const lastValidTagColor = useRef(tagColor.parsed);
+  const lastValidColor = useRef(staging.color.parsed);
 
   useEffect(() => {
-    if (tagColor.valid) lastValidTagColor.current = tagColor.parsed;
+    if (staging.color.valid) lastValidColor.current = staging.color.parsed;
-  }, [tagColor]);
+  }, [staging.color.parsed, staging.color.valid]);
 
   return (
     <>
       <TagPreview
-        name={tagName.parsed}
+        name={staging.name.parsed}
-        color={tagColor.valid ? tagColor.parsed : lastValidTagColor.current}
+        color={
+          staging.color.valid ? staging.color.parsed : lastValidColor.current
+        }
       />
       <TextInput
         mode="outlined"
         label="Name"
-        value={tagName.raw}
+        value={staging.name.raw}
-        onChangeText={name => setTagName(validateTagName(name))}
+        onChangeText={name =>
-        error={!tagName.valid}
+          setStaging({ ...staging, name: validateTagName(name) })
+        }
+        error={!staging.name.valid}
         selectTextOnFocus
       />
-      <HelperText type="error" visible={!tagName.valid}>
+      <HelperText type="error" visible={!staging.name.valid}>
-        {tagName.error}
+        {staging.name.error}
       </HelperText>
       <TextInput
         mode="outlined"
         label="Color"
-        value={tagColor.raw}
+        value={staging.color.raw}
-        onChangeText={color => setTagColor(validateColor(color))}
+        onChangeText={color =>
-        error={!tagColor.valid}
+          setStaging({ ...staging, color: validateColor(color) })
+        }
+        error={!staging.color.valid}
         autoCorrect={false}
         right={
           <TextInput.Icon
             icon="palette"
-            onPress={() => setTagColor(validateColor(generateRandomColor()))}
+            onPress={() =>
+              setStaging({
+                ...staging,
+                color: validateColor(generateRandomColor()),
+              })
+            }
           />
         }
       />
-      <HelperText type="error" visible={!tagColor.valid}>
+      <HelperText type="error" visible={!staging.color.valid}>
-        {tagColor.error}
+        {staging.color.error}
       </HelperText>
     </>
   );

src/database/meme.ts

@@ -17,11 +17,10 @@ const memeTypePlural = {
   [MEME_TYPE.TEXT]: 'Text',
 };
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 class Meme extends Object<Meme> {
   id!: BSON.UUID;
-  type!: MEME_TYPE;
   filename!: string;
+  memeType!: MEME_TYPE;
   mimeType!: string;
   size!: number;
   title!: string;
@@ -38,8 +37,8 @@ class Meme extends Object<Meme> {
     primaryKey: 'id',
     properties: {
       id: { type: 'uuid', default: () => new BSON.UUID() },
-      type: { type: 'string', indexed: true },
       filename: 'string',
+      memeType: { type: 'string', indexed: true },
       mimeType: 'string',
       size: 'int',
       title: 'string',

src/database/tag.ts

@@ -2,7 +2,6 @@ import { BSON, Object, ObjectSchema } from 'realm';
 import { Meme } from './meme';
 import { generateRandomColor } from '../utilities';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 class Tag extends Object<Tag> {
   id!: BSON.UUID;
   name!: string;

src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useMemeDimensions } from './useMemeDimensions';

src/hooks/useMemeDimensions.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Image } from 'react-native';
+import { Dimensions } from '../types';
+
+const useMediaDimensions = (
+  uri?: string,
+  mimeType?: string,
+  onLoad?: (width: number, height: number, aspectRatio: number) => void,
+  onError?: (error: Error) => void,
+) => {
+  const [dimensions, setDimensions] = useState<Dimensions | undefined>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | undefined>();
+
+  useEffect(() => {
+    const getDimensions = () => {
+      if (!uri || !mimeType) return;
+
+      const mimeStart = mimeType.split('/')[0];
+
+      switch (mimeStart) {
+        case 'image':
+        case 'video': {
+          Image.getSize(
+            uri,
+            (width, height) => {
+              const aspectRatio = width / height;
+              setDimensions({ width, height, aspectRatio });
+              setLoading(false);
+              onLoad?.(width, height, aspectRatio);
+            },
+            (errorIn: string) => {
+              const errorOut = new Error(errorIn);
+              setError(errorOut);
+              setLoading(false);
+              onError?.(errorOut);
+            },
+          );
+          break;
+        }
+        default: {
+          const errorOut = new Error(`Unknown mime type: ${mimeType}`);
+          setError(errorOut);
+          setLoading(false);
+          onError?.(errorOut);
+        }
+      }
+    };
+
+    getDimensions();
+  }, [mimeType, onError, onLoad, uri]);
+
+  return { dimensions, loading, error };
+};
+
+export default useMediaDimensions;

src/screens/editors/addMeme.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Appbar, Banner, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { ScrollView, View } from 'react-native';
@@ -14,12 +14,14 @@ import {
   documentPickerResponseToAddMemeFile,
   ROUTE,
   RootStackParamList,
+  StagingMeme,
 } from '../../types';
 import { Meme, Tag } from '../../database';
 import { RootState } from '../../state';
 import {
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
+  guessMimeType,
   validateMemeTitle,
 } from '../../utilities';
 import { MemeEditor } from '../../components';
@@ -42,54 +44,83 @@ const AddMeme = ({
   const file = useRef(files.current[index]);
   const isLastFile = index === files.current.length - 1;
 
-  const [memeUri, setMemeUri] = useState(file.current.uri);
-  const [memeFilename, setMemeFilename] = useState(file.current.filename);
-  const [memeError, setMemeError] = useState<Error>();
-  const [memeTitle, setMemeTitle] = useState(validateMemeTitle('New Meme'));
-  const [memeIsFavorite, setMemeIsFavorite] = useState(false);
-  const [memeTags, setMemeTags] = useState(new Map<string, Tag>());
-
   const [isSaving, setIsSaving] = useState(false);
   const [isSavingAndAddingMore, setIsSavingAndAddingMore] = useState(false);
 
-  const saveMeme = useCallback(async () => {
+  const [uri, setUri] = useState<string>();
-    const uuid = new BSON.UUID();
+  const [mimeType, setMimeType] = useState<string>();
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const [loading, setLoading] = useState(true);
-    const mimeType = file.current.type!;
+  const [error, setError] = useState<Error>();
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const [staging, setStaging] = useState<StagingMeme>();
-    const memeType = getMemeType(mimeType)!;
 
-    const fileExtension = extension(mimeType) as string;
+  const resetState = useCallback(async (newIndex: number) => {
-    if (!fileExtension) goBack();
+    setLoading(true);
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    setError(undefined);
+
+    setIndex(newIndex);
+    file.current = files.current[newIndex];
+
+    setUri(file.current.uri);
+
+    const guessedMimeType = await guessMimeType(file.current.uri);
+    if (!guessedMimeType) {
+      setError(
+        new Error('Could not determine MIME type or file is not supported.'),
+      );
+      return;
+    }
+    setMimeType(guessedMimeType);
+
+    setStaging({
+      title: validateMemeTitle('New Meme'),
+      isFavorite: false,
+      tags: new Map<string, Tag>(),
+    });
+
+    setLoading(false);
+  }, []);
+
+  useEffect(() => void resetState(0), [resetState]);
+
+  const saveMeme = useCallback(async () => {
+    if (!mimeType || !staging) return;
+    const uuid = new BSON.UUID();
+
+    const memeType = getMemeTypeFromMimeType(mimeType);
+    if (!memeType) return;
+
+    const fileExtension = extension(mimeType);
+    if (!fileExtension) return;
 
     const filename = `${uuid.toHexString()}-${Math.round(
       Date.now() / 1000,
     )}.${fileExtension}`;
-    const uri = AndroidScoped.appendPath(storageUri, filename);
+    const finalUri = AndroidScoped.appendPath(storageUri, filename);
 
-    await FileSystem.cp(file.current.uri, uri);
+    await FileSystem.cp(file.current.uri, finalUri);
-    const { size } = await FileSystem.stat(uri);
+    const { size } = await FileSystem.stat(finalUri);
 
     realm.write(() => {
       const meme: Meme | undefined = realm.create<Meme>(Meme.schema.name, {
         id: uuid,
-        type: memeType,
+        memeType,
         filename,
-        mimeType,
+        mimeType: mimeType,
         size,
-        title: memeTitle.parsed,
+        title: staging.title.parsed,
-        isFavorite: memeIsFavorite,
+        isFavorite: staging.isFavorite,
-        tags: [...memeTags.values()],
+        tags: [...staging.tags.values()],
-        tagsLength: memeTags.size,
+        tagsLength: staging.tags.size,
       });
 
-      memeTags.forEach(tag => {
+      staging.tags.forEach(tag => {
         tag.dateModified = new Date();
         tag.memes.push(meme);
         tag.memesLength = tag.memes.length;
       });
     });
-  }, [goBack, memeIsFavorite, memeTags, memeTitle.parsed, realm, storageUri]);
+  }, [mimeType, realm, staging, storageUri]);
 
   const handleSave = useCallback(async () => {
     setIsSaving(true);
@@ -101,37 +132,21 @@ const AddMeme = ({
     setIsSaving(true);
     await saveMeme();
     setIsSaving(false);
-
+    await resetState(index + 1);
-    setIndex(index + 1);
+  }, [index, resetState, saveMeme]);
-    file.current = files.current[index + 1];
-
-    setMemeUri(file.current.uri);
-    setMemeFilename(file.current.filename);
-    setMemeTitle(validateMemeTitle('New Meme'));
-    setMemeIsFavorite(false);
-    setMemeTags(new Map<string, Tag>());
-  }, [index, saveMeme]);
 
   const handleSaveAndAddMore = useCallback(async () => {
     setIsSavingAndAddingMore(true);
     await saveMeme();
     setIsSavingAndAddingMore(false);
-
-    setIndex(0);
     const response = await pick({
       type: allowedMimeTypes,
       allowMultiSelection: true,
     }).catch(goBack);
     if (!response) return;
     files.current = documentPickerResponseToAddMemeFile(response);
-    file.current = files.current[0];
+    await resetState(0);
-
+  }, [goBack, resetState, saveMeme]);
-    setMemeUri(file.current.uri);
-    setMemeFilename(file.current.filename);
-    setMemeTitle(validateMemeTitle('New Meme'));
-    setMemeIsFavorite(false);
-    setMemeTags(new Map<string, Tag>());
-  }, [goBack, saveMeme]);
 
   return (
     <>
@@ -139,20 +154,23 @@ const AddMeme = ({
         <Appbar.BackAction onPress={() => goBack()} />
         <Appbar.Content title={'Add Meme'} />
         <Appbar.Action
-          icon={memeIsFavorite ? 'heart' : 'heart-outline'}
+          icon={staging?.isFavorite ? 'heart' : 'heart-outline'}
-          onPress={() => setMemeIsFavorite(!memeIsFavorite)}
+          disabled={!staging}
+          onPress={() =>
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            setStaging({ ...staging!, isFavorite: !staging!.isFavorite })
+          }
         />
       </Appbar.Header>
       <Banner
-        visible={!!memeError}
+        visible={!!error}
         actions={[
           {
             label: 'Cancel',
             onPress: goBack,
           },
         ]}>
-        The selected URI appears to be broken. This may have been caused by the
+        {error?.message}
-        file being corrupted or unsupported.
       </Banner>
       <ScrollView
         contentContainerStyle={[
@@ -164,14 +182,14 @@ const AddMeme = ({
         ]}>
         <View style={editorStyles.editorView}>
           <MemeEditor
-            memeUri={memeUri}
+            uri={uri}
-            memeFilename={memeFilename}
+            mimeType={mimeType}
-            memeError={memeError}
+            loading={loading}
-            setMemeError={setMemeError}
+            setLoading={setLoading}
-            memeTitle={memeTitle}
+            error={error}
-            setMemeTitle={setMemeTitle}
+            setError={setError}
-            memeTags={memeTags}
+            staging={staging}
-            setMemeTags={setMemeTags}
+            setStaging={setStaging}
           />
         </View>
         <View style={editorStyles.saveButtonView}>
@@ -180,10 +198,11 @@ const AddMeme = ({
             icon="plus"
             onPress={handleSaveAndAddMore}
             disabled={
-              !memeTitle.valid ||
+              loading ||
+              !!error ||
               isSaving ||
               isSavingAndAddingMore ||
-              !!memeError ||
+              !staging?.title.valid ||
               !isLastFile
             }
             loading={isSavingAndAddingMore}
@@ -195,10 +214,11 @@ const AddMeme = ({
             icon="floppy"
             onPress={isLastFile ? handleSave : handleSaveAndNext}
             disabled={
-              !memeTitle.valid ||
+              loading ||
+              !!error ||
               isSaving ||
               isSavingAndAddingMore ||
-              !!memeError
+              !staging?.title.valid
             }
             loading={isSaving}
             style={editorStyles.saveButton}>

src/screens/editors/addTag.tsx

@@ -12,6 +12,7 @@ import {
 import { Tag } from '../../database';
 import { TagEditor } from '../../components';
 import editorStyles from './editorStyles';
+import { StagingTag } from '../../types';
 
 const AddTag = () => {
   const { goBack } = useNavigation();
@@ -19,10 +20,10 @@ const AddTag = () => {
   const orientation = useDeviceOrientation();
   const realm = useRealm();
 
-  const [tagName, setTagName] = useState(validateTagName('newTag'));
+  const [staging, setStaging] = useState<StagingTag>({
-  const [tagColor, setTagColor] = useState(
+    name: validateTagName('newTag'),
-    validateColor(generateRandomColor()),
+    color: validateColor(generateRandomColor()),
-  );
+  });
 
   // Although saving tags is instantaneous, we still want to show a loading
   // indicator to prevent the user from spamming the save button.
@@ -31,11 +32,11 @@ const AddTag = () => {
   const saveTag = useCallback(() => {
     realm.write(() => {
       realm.create(Tag.schema.name, {
-        name: tagName.parsed,
+        name: staging.name.parsed,
-        color: tagColor.parsed,
+        color: staging.color.parsed,
       });
     });
-  }, [realm, tagColor.parsed, tagName.parsed]);
+  }, [realm, staging.color.parsed, staging.name.parsed]);
 
   const handleSave = useCallback(() => {
     saveTag();
@@ -46,8 +47,10 @@ const AddTag = () => {
     setIsSavingAndAddingMore(true);
     saveTag();
     setTimeout(() => setIsSavingAndAddingMore(false), 250);
-    setTagName(validateTagName('newTag'));
+    setStaging({
-    setTagColor(validateColor(generateRandomColor()));
+      name: validateTagName('newTag'),
+      color: validateColor(generateRandomColor()),
+    });
   }, [saveTag]);
 
   return (
@@ -65,19 +68,14 @@ const AddTag = () => {
           { backgroundColor: colors.background },
         ]}>
         <View style={editorStyles.editorView}>
-          <TagEditor
+          <TagEditor staging={staging} setStaging={setStaging} />
-            tagName={tagName}
-            setTagName={setTagName}
-            tagColor={tagColor}
-            setTagColor={setTagColor}
-          />
         </View>
         <View style={editorStyles.saveButtonView}>
           <Button
             mode="contained-tonal"
             icon="plus"
             onPress={handleSaveAndAddMore}
-            disabled={!tagName.valid || isSavingAndAddingMore}
+            disabled={!staging.name.valid || isSavingAndAddingMore}
             loading={isSavingAndAddingMore}
             style={editorStyles.saveAndAddButton}>
             Save & Add
@@ -86,7 +84,7 @@ const AddTag = () => {
             mode="contained"
             icon="floppy"
             onPress={handleSave}
-            disabled={!tagName.valid || isSavingAndAddingMore}
+            disabled={!staging.name.valid || isSavingAndAddingMore}
             style={editorStyles.saveButton}>
             Save
           </Button>

src/screens/editors/editMeme.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { Appbar, Banner, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
@@ -6,18 +6,18 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useObject, useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
 import { BSON } from 'realm';
-import { RootStackParamList, ROUTE } from '../../types';
+import { RootStackParamList, ROUTE, StagingMeme } from '../../types';
 import { pickSingle } from 'react-native-document-picker';
 import { AndroidScoped, FileSystem } from 'react-native-file-access';
 import { extension } from 'react-native-mime-types';
 import { useSelector } from 'react-redux';
-import { Tag, Meme } from '../../database';
+import { Meme } from '../../database';
 import {
-  StringValidationResult,
   allowedMimeTypes,
   deleteMeme,
   favoriteMeme,
-  getMemeType,
+  getMemeTypeFromMimeType,
+  guessMimeType,
   noOp,
   validateMemeTitle,
 } from '../../utilities';
@@ -42,41 +42,67 @@ const EditMeme = ({
     Meme.schema.name,
     BSON.UUID.createFromHexString(route.params.id),
   )!;
-  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
-
-  const [hasChanges, setHasChanges] = useState(false);
-
-  const [memeError, setMemeError] = useState<Error>();
-  const [memeTitle, setMemeTitle] = useState(validateMemeTitle(meme.title));
-  const [memeTags, setMemeTags] = useState(
-    new Map<string, Tag>(meme.tags.map(tag => [tag.id.toHexString(), tag])),
-  );
-
-  const handleMemeTitleChange = useCallback((title: StringValidationResult) => {
-    setMemeTitle(title);
-    setHasChanges(true);
-  }, []);
-
-  const handleMemeTagsChange = useCallback((tags: Map<string, Tag>) => {
-    setMemeTags(tags);
-    setHasChanges(true);
-  }, []);
 
   const [isSaving, setIsSaving] = useState(false);
 
+  const [uri, setUri] = useState<string>();
+  const [mimeType, setMimeType] = useState<string>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error>();
+  const [staging, setStaging] = useState<StagingMeme>();
+  const originalStaging = useRef<StagingMeme>();
+
+  const resetState = useCallback(
+    async (newUri: string) => {
+      setLoading(true);
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      setError(undefined);
+
+      setUri(newUri);
+
+      const guessedMimeType = await guessMimeType(newUri);
+      if (!guessedMimeType) {
+        setError(
+          new Error('Could not determine MIME type or file is not supported.'),
+        );
+        return;
+      }
+      setMimeType(guessedMimeType);
+
+      const stagingMeme = {
+        title: validateMemeTitle(meme.title),
+        isFavorite: meme.isFavorite,
+        tags: new Map(meme.tags.map(tag => [tag.id.toHexString(), tag])),
+      };
+
+      setStaging(stagingMeme);
+      originalStaging.current = stagingMeme;
+
+      setLoading(false);
+    },
+    [meme.isFavorite, meme.tags, meme.title],
+  );
+
+  useEffect(
+    () => void resetState(AndroidScoped.appendPath(storageUri, meme.filename)),
+    [meme.filename, resetState, storageUri],
+  );
+
   const handleSave = useCallback(() => {
+    if (!mimeType || !staging) return;
+
     setIsSaving(true);
 
     realm.write(() => {
       meme.tags.forEach(tag => {
-        if (!memeTags.has(tag.id.toHexString())) {
+        if (!staging.tags.has(tag.id.toHexString())) {
           tag.memes.slice(tag.memes.indexOf(meme), 1);
           tag.memesLength -= 1;
           tag.dateModified = new Date();
         }
       });
 
-      memeTags.forEach(tag => {
+      staging.tags.forEach(tag => {
         if (!meme.tags.some(memeTag => memeTag.id.equals(tag.id))) {
           tag.memes.push(meme);
           tag.memesLength = tag.memes.length;
@@ -84,15 +110,15 @@ const EditMeme = ({
         }
       });
 
-      meme.title = memeTitle.parsed;
+      meme.title = staging.title.parsed;
       // @ts-expect-error - Realm is a fuck
-      meme.tags = [...memeTags.values()];
+      meme.tags = [...staging.tags.values()];
-      meme.tagsLength = memeTags.size;
+      meme.tagsLength = staging.tags.size;
       meme.dateModified = new Date();
     });
 
     goBack();
-  }, [goBack, meme, memeTags, memeTitle.parsed, realm]);
+  }, [goBack, meme, mimeType, realm, staging]);
 
   const handleDelete = useCallback(async () => {
     setIsSaving(true);
@@ -104,12 +130,18 @@ const EditMeme = ({
     const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
     if (!file) return;
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const guessedMimeType = await guessMimeType(file.uri, file.type);
-    const mimeType = file.type!;
+    if (!guessedMimeType) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      setError(
-    const memeType = getMemeType(mimeType)!;
+        new Error('Could not determine MIME type or file is not supported.'),
+      );
+      return;
+    }
 
-    const fileExtension = extension(mimeType) as string;
+    const memeType = getMemeTypeFromMimeType(guessedMimeType);
+    if (!memeType) return;
+
+    const fileExtension = extension(guessedMimeType);
     if (!fileExtension) return;
 
     const filename = `${meme.id.toHexString()}-${
@@ -122,11 +154,13 @@ const EditMeme = ({
 
     realm.write(() => {
       meme.filename = filename;
-      meme.type = memeType;
+      meme.memeType = memeType;
-      meme.mimeType = mimeType;
+      meme.mimeType = guessedMimeType;
       meme.size = size;
     });
-  }, [meme, realm, storageUri]);
+
+    void resetState(newUri);
+  }, [meme, realm, resetState, storageUri]);
 
   return (
     <>
@@ -140,7 +174,7 @@ const EditMeme = ({
         <Appbar.Action icon="delete" onPress={handleDelete} />
       </Appbar.Header>
       <Banner
-        visible={!!memeError}
+        visible={!!error}
         actions={[
           {
             label: 'Fix URI',
@@ -151,8 +185,7 @@ const EditMeme = ({
             onPress: handleDelete,
           },
         ]}>
-        The URI for this meme appears to be broken. This may have been caused by
+        {error?.message}
-        the file being moved or deleted.
       </Banner>
       <ScrollView
         contentContainerStyle={[
@@ -164,14 +197,14 @@ const EditMeme = ({
         ]}>
         <View style={editorStyles.editorView}>
           <MemeEditor
-            memeUri={uri}
+            uri={uri}
-            memeFilename={meme.filename}
+            mimeType={mimeType}
-            memeError={memeError}
+            loading={loading}
-            setMemeError={setMemeError}
+            setLoading={setLoading}
-            memeTitle={memeTitle}
+            error={error}
-            setMemeTitle={handleMemeTitleChange}
+            setError={setError}
-            memeTags={memeTags}
+            staging={staging}
-            setMemeTags={handleMemeTagsChange}
+            setStaging={setStaging}
           />
         </View>
         <View style={editorStyles.saveButtonView}>
@@ -180,7 +213,11 @@ const EditMeme = ({
             icon="floppy"
             onPress={handleSave}
             disabled={
-              !memeTitle.valid || !hasChanges || isSaving || !!memeError
+              loading ||
+              !!error ||
+              isSaving ||
+              !staging?.title.valid ||
+              originalStaging.current === staging
             }
             loading={isSaving}
             style={editorStyles.soloSaveButton}>

src/screens/editors/editTag.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
@@ -7,14 +7,9 @@ import { BSON } from 'realm';
 import { useObject, useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
 import { TagEditor } from '../../components';
-import { ROUTE, RootStackParamList } from '../../types';
+import { ROUTE, RootStackParamList, StagingTag } from '../../types';
 import { Tag } from '../../database';
-import {
+import { deleteTag, validateColor, validateTagName } from '../../utilities';
-  StringValidationResult,
-  deleteTag,
-  validateColor,
-  validateTagName,
-} from '../../utilities';
 import editorStyles from './editorStyles';
 
 const EditTag = ({
@@ -31,29 +26,21 @@ const EditTag = ({
     BSON.UUID.createFromHexString(route.params.id),
   )!;
 
-  const [hasChanges, setHasChanges] = useState(false);
+  const [staging, setStaging] = useState<StagingTag>({
-  const [tagName, setTagName] = useState(validateTagName(tag.name));
+    name: validateTagName(tag.name),
-  const [tagColor, setTagColor] = useState(validateColor(tag.color));
+    color: validateColor(tag.color),
-
+  });
-  const handleTagNameChange = useCallback((name: StringValidationResult) => {
+  const originalStaging = useRef<StagingTag>(staging);
-    setTagName(name);
-    setHasChanges(true);
-  }, []);
-
-  const handleTagColorChange = useCallback((color: StringValidationResult) => {
-    setTagColor(color);
-    setHasChanges(true);
-  }, []);
 
   const handleSave = useCallback(() => {
     realm.write(() => {
-      tag.name = tagName.parsed;
+      tag.name = staging.name.parsed;
-      tag.color = tagColor.parsed;
+      tag.color = staging.color.parsed;
       tag.dateModified = new Date();
     });
 
     goBack();
-  }, [goBack, realm, tag, tagColor.parsed, tagName.parsed]);
+  }, [goBack, realm, staging.color.parsed, staging.name.parsed, tag]);
 
   return (
     <>
@@ -78,19 +65,18 @@ const EditTag = ({
         ]}
         nestedScrollEnabled>
         <View style={editorStyles.editorView}>
-          <TagEditor
+          <TagEditor staging={staging} setStaging={setStaging} />
-            tagName={tagName}
-            setTagName={handleTagNameChange}
-            tagColor={tagColor}
-            setTagColor={handleTagColorChange}
-          />
         </View>
         <View style={editorStyles.saveButtonView}>
           <Button
             mode="contained"
             icon="floppy"
             onPress={handleSave}
-            disabled={!tagName.valid || !tagColor.valid || !hasChanges}
+            disabled={
+              !staging.name.valid ||
+              !staging.color.valid ||
+              originalStaging.current === staging
+            }
             style={editorStyles.soloSaveButton}>
             Save
           </Button>

src/screens/memeView.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { StyleSheet } from 'react-native';
 import { useQuery, useRealm } from '@realm/react';
@@ -6,9 +6,15 @@ import { FlashList } from '@shopify/flash-list';
 import { Appbar, Portal, Snackbar } from 'react-native-paper';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
-import { RootStackParamList, ROUTE } from '../types';
+import { useSelector } from 'react-redux';
+import {
+  memesSortQuery,
+  RootStackParamList,
+  ROUTE,
+  SORT_DIRECTION,
+} from '../types';
 import { Meme } from '../database';
-import { MemeViewItem } from '../components';
+import { LoadingView, MemeViewItem } from '../components';
 import {
   copyMeme,
   deleteMeme,
@@ -17,7 +23,6 @@ import {
   multipleIdQuery,
   shareMeme,
 } from '../utilities';
-import { useSelector } from 'react-redux';
 import { RootState } from '../state';
 
 const memeViewStyles = StyleSheet.create({
@@ -50,87 +55,113 @@ const MemeView = ({
 }: NativeStackScreenProps<RootStackParamList, ROUTE.MEME_VIEW>) => {
   const { height, width } = useSafeAreaFrame();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+  const sort = useSelector((state: RootState) => state.memes.sort);
+  const sortDirection = useSelector(
+    (state: RootState) => state.memes.sortDirection,
+  );
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const storageUri = useSelector(
     (state: RootState) => state.settings.storageUri,
   )!;
   const realm = useRealm();
 
-  const { ids } = route.params;
+  const [isBlocked, setIsBlocked] = useState(false);
-  const [index, setIndex] = useState(route.params.index);
-
   const [snackbarMessage, setSnackbarMessage] = useState<string>();
 
   const flashListRef = useRef<FlashList<Meme>>(null);
 
+  const index = useRef(route.params.index);
   const memes = useQuery<Meme>(Meme.schema.name, collectionIn => {
-    return collectionIn.filtered(multipleIdQuery(ids));
+    return collectionIn
+      .filtered(multipleIdQuery(route.params.ids))
+      .sorted(
+        memesSortQuery(sort),
+        sortDirection === SORT_DIRECTION.DESCENDING,
+      );
   });
 
+  useEffect(() => {
+    if (memes.length === 0) navigation.goBack();
+    if (index.current >= memes.length) {
+      index.current = memes.length - 1;
+      flashListRef.current?.scrollToIndex({ index: memes.length - 1 });
+    }
+  }, [index, memes.length, navigation]);
+
   return (
     <>
       <Appbar.Header style={memeViewStyles.header}>
         <Appbar.BackAction onPress={() => navigation.goBack()} />
-        <Appbar.Content title={memes[index].title} />
+        {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+        <Appbar.Content title={memes[index.current]?.title} />
       </Appbar.Header>
       <FlashList
         ref={flashListRef}
         key={height}
         data={memes}
-        initialScrollIndex={index}
+        initialScrollIndex={index.current}
         onScroll={event => {
           const newIndex = Math.round(
             event.nativeEvent.contentOffset.x /
               event.nativeEvent.layoutMeasurement.width,
           );
-          if (newIndex !== index) setIndex(newIndex);
+          if (newIndex !== index.current) index.current = newIndex;
         }}
         estimatedItemSize={width}
         estimatedListSize={{ height, width }}
         pagingEnabled
         horizontal
         showsHorizontalScrollIndicator={false}
-        renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
+        renderItem={({ item }) =>
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          item ? (
+            <MemeViewItem meme={item} />
+          ) : (
+            <LoadingView style={{ width, height }} />
+          )
+        }
+        scrollEnabled={!isBlocked}
       />
       <Appbar style={memeViewStyles.footer}>
         <Appbar.Action
-          icon={memes[index].isFavorite ? 'heart' : 'heart-outline'}
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          onPress={() => favoriteMeme(realm, memes[index])}
+          icon={memes[index.current]?.isFavorite ? 'heart' : 'heart-outline'}
+          onPress={() => favoriteMeme(realm, memes[index.current])}
+          disabled={isBlocked}
         />
         <Appbar.Action
           icon="share"
           onPress={() => {
-            shareMeme(realm, storageUri, memes[index]).catch(() =>
+            shareMeme(realm, storageUri, memes[index.current]).catch(() =>
               setSnackbarMessage('Failed to share meme!'),
             );
           }}
+          disabled={isBlocked}
         />
         <Appbar.Action
           icon="content-copy"
           onPress={async () => {
-            await copyMeme(realm, storageUri, memes[index])
+            await copyMeme(realm, storageUri, memes[index.current])
               .then(() => setSnackbarMessage('Meme copied!'))
               .catch(() => setSnackbarMessage('Failed to copy meme!'));
           }}
+          disabled={isBlocked}
         />
         <Appbar.Action
           icon="pencil"
           onPress={() => {
-            editMeme(navigation, memes[index]);
+            editMeme(navigation, memes[index.current]);
           }}
+          disabled={isBlocked}
         />
         <Appbar.Action
           icon="delete"
-          onPress={() => {
+          onPress={async () => {
-            void deleteMeme(realm, storageUri, memes[index]);
+            setIsBlocked(true);
-            if (index === memes.length - 1) {
+            await deleteMeme(realm, storageUri, memes[index.current]);
-              setIndex(index - 1);
+            setIsBlocked(false);
-              flashListRef.current?.scrollToIndex({
-                index: index - 1,
-              });
-            }
-            if (memes.length === 1) navigation.goBack();
           }}
+          disabled={isBlocked}
         />
       </Appbar>
       <Portal>

src/screens/memes.tsx

@@ -80,7 +80,7 @@ const Memes = () => {
         .join(' OR ');
 
       if (favoritesOnly) collection = collection.filtered('isFavorite == true');
-      if (filter) collection = collection.filtered('type == $0', filter);
+      if (filter) collection = collection.filtered('memeType == $0', filter);
       if (tags && tagsQuery) {
         collection = collection.filtered(tagsQuery, ...tags);
       }
@@ -98,7 +98,7 @@ const Memes = () => {
     [sort, sortDirection, favoritesOnly, filter, search],
   );
 
-  const [scrollOffset, setScrollOffset] = useState(0);
+  const previousOffset = useRef(0);
 
   const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const currentOffset = event.nativeEvent.contentOffset.y;
@@ -106,13 +106,13 @@ const Memes = () => {
     if (currentOffset <= 150) {
       dispatch(setNavVisible(true));
     } else {
-      const diff = currentOffset - scrollOffset;
+      const diff = currentOffset - previousOffset.current;
-      if (Math.abs(diff) > 50) {
+      if (Math.abs(diff) > 35) {
         dispatch(setNavVisible(diff < 0));
       }
     }
 
-    setScrollOffset(currentOffset);
+    previousOffset.current = currentOffset;
   };
 
   const flashListRef = useRef<FlashList<Meme>>(null);
@@ -120,7 +120,7 @@ const Memes = () => {
   useFocusEffect(
     useCallback(() => {
       const handleBackPress = () => {
-        if (scrollOffset <= 0) return false;
+        if (previousOffset.current <= 0) return false;
         flashListRef.current?.scrollToOffset({ offset: 0, animated: true });
         return true;
       };
@@ -129,7 +129,7 @@ const Memes = () => {
 
       return () =>
         BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
-    }, [scrollOffset]),
+    }, []),
   );
 
   useFocusEffect(

src/screens/tags.tsx

@@ -71,7 +71,7 @@ const Tags = () => {
     [search, sort, sortDirection],
   );
 
-  const [scrollOffset, setScrollOffset] = useState(0);
+  const previousOffset = useRef(0);
 
   const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const currentOffset = event.nativeEvent.contentOffset.y;
@@ -79,11 +79,11 @@ const Tags = () => {
     if (currentOffset <= 150) {
       dispatch(setNavVisible(true));
     } else {
-      const diff = currentOffset - scrollOffset;
+      const diff = currentOffset - previousOffset.current;
       if (Math.abs(diff) > 50) dispatch(setNavVisible(diff < 0));
     }
 
-    setScrollOffset(currentOffset);
+    previousOffset.current = currentOffset;
   };
 
   const flashListRef = useRef<FlashList<Tag>>(null);
@@ -91,7 +91,7 @@ const Tags = () => {
   useFocusEffect(
     useCallback(() => {
       const handleBackPress = () => {
-        if (scrollOffset > 0) {
+        if (previousOffset.current > 0) {
           flashListRef.current?.scrollToOffset({ offset: 0, animated: true });
           return true;
         }
@@ -102,7 +102,7 @@ const Tags = () => {
 
       return () =>
         BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
-    }, [scrollOffset]),
+    }, []),
   );
 
   useFocusEffect(

src/state/settings.ts

@@ -91,8 +91,7 @@ const updateNoMedia = createAsyncThunk(
 
 const validateSettings = createAsyncThunk(
   'settings/validateSettings',
-  // eslint-disable-next-line @typescript-eslint/naming-convention
+  async (ignored, { dispatch, getState }) => {
-  async (_, { dispatch, getState }) => {
     const state = getState() as RootState;
     const { storageUri, noMedia } = state.settings;
 

src/types/dimensions.ts

@@ -1,6 +1,7 @@
 interface Dimensions {
   width: number;
   height: number;
+  aspectRatio: number;
 }
 
 export { type Dimensions };

src/types/index.ts

@@ -13,4 +13,5 @@ export {
   tagSortQuery,
   SORT_DIRECTION,
 } from './sort';
+export { type StagingMeme, type StagingTag } from './staging';
 export { VIEW } from './view';

src/types/route.ts

@@ -1,5 +1,5 @@
 import { DocumentPickerResponse } from 'react-native-document-picker';
-import { getFilenameFromUri, guessMimeType } from '../utilities';
+import { getFilenameFromUri } from '../utilities';
 import { SharedItem } from './share';
 
 enum ROUTE {
@@ -34,7 +34,7 @@ const documentPickerResponseToAddMemeFile = (
     return {
       uri,
       filename: name ?? getFilenameFromUri(uri),
-      type: type ?? guessMimeType(uri),
+      type: type ?? undefined,
     };
   });
 };
@@ -55,7 +55,7 @@ const sharedItemToAddMemeFile = (item: SharedItem): AddMemeFile[] => {
   return data.map(uri => ({
     uri,
     filename: getFilenameFromUri(uri),
-    type: guessMimeType(uri),
+    type: mimeType,
   }));
 };
 

src/types/staging.ts

@@ -0,0 +1,15 @@
+import { Tag } from '../database';
+import { StringValidationResult } from '../utilities';
+
+interface StagingMeme {
+  title: StringValidationResult;
+  isFavorite: boolean;
+  tags: Map<string, Tag>;
+}
+
+interface StagingTag {
+  name: StringValidationResult;
+  color: StringValidationResult;
+}
+
+export { type StagingMeme, type StagingTag };

src/utilities/constants.ts

@@ -1,8 +1,7 @@
 const packageName = 'com.karaolidis.terminallyonline';
 const appName = 'Terminally Online';
-const fileProvider = 'com.karaolidis.terminallyonline.rnshare.fileprovider';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noOp = () => {};
 
-export { packageName, appName, fileProvider, noOp };
+export { packageName, appName, noOp };

src/utilities/filesystem.ts

@@ -1,3 +1,6 @@
+import { FileSystem } from 'react-native-file-access';
+import filetypemime from 'magic-bytes.js';
+import { lookup } from 'react-native-mime-types';
 import { MEME_TYPE } from '../database';
 
 const allowedImageMimeTypes = [
@@ -10,42 +13,77 @@ const allowedImageMimeTypes = [
 
 const allowedGifMimeTypes = ['image/gif'];
 
-const allowedMimeTypes = [...allowedImageMimeTypes, ...allowedGifMimeTypes];
+const allowedVideoMimeTypes = [
+  'video/av01',
+  'video/3gpp',
+  'video/avc',
+  'video/hevc',
+  'video/x-matroska',
+  'video/mp2t',
+  'video/mp4',
+  'video/mp42',
+  'video/mp43',
+  'video/mp4v-es',
+  'video/mpeg',
+  'video/mpeg2',
+  'video/x-vnd.on2.vp8',
+  'video/x-vnd.on2.vp9',
+  'video/webm',
+];
 
-const getMemeType = (mimeType: string): MEME_TYPE | undefined => {
+const allowedMimeTypes = [
-  switch (mimeType) {
+  ...allowedImageMimeTypes,
-    case 'image/bmp':
+  ...allowedGifMimeTypes,
-    case 'image/jpg':
+  ...allowedVideoMimeTypes,
-    case 'image/jpeg':
+];
-    case 'image/png':
+
-    case 'image/webp': {
+const getMemeTypeFromMimeType = (mimeType: string): MEME_TYPE | undefined => {
+  if (!allowedMimeTypes.includes(mimeType)) return undefined;
+
+  const mimeStart = mimeType.split('/')[0];
+
+  switch (mimeStart) {
+    case 'image': {
+      if (mimeType === 'image/gif') return MEME_TYPE.GIF;
       return MEME_TYPE.IMAGE;
     }
-    case 'image/gif': {
+    case 'video': {
-      return MEME_TYPE.GIF;
+      return MEME_TYPE.VIDEO;
     }
   }
 };
 
-const guessMimeType = (filename: string): string | undefined => {
+const guessMimeTypeFromExtension = (filename: string): string | undefined => {
   const extension = filename.split('.').pop()?.toLowerCase();
-  switch (extension) {
+  if (!extension) return undefined;
-    case 'bmp': {
+  const guessedMimeType = lookup(extension);
-      return 'image/bmp';
+  if (!guessedMimeType) return undefined;
-    }
+  return guessedMimeType;
-    case 'jpg':
+};
-    case 'jpeg': {
+
-      return 'image/jpeg';
+const guessMimeTypeFromMagicBytes = async (
-    }
+  uri: string,
-    case 'png': {
+): Promise<string | undefined> => {
-      return 'image/png';
+  const fileContent = await FileSystem.read(uri, 100);
-    }
+  const possibleMimeTypes = filetypemime(fileContent);
-    case 'webp': {
+  if (possibleMimeTypes.length === 0) return undefined;
-      return 'image/webp';
+  return possibleMimeTypes[0].mime;
-    }
+};
-    case 'gif': {
+
-      return 'image/gif';
+const guessMimeType = async (
+  uri: string,
+  hint?: string | null,
+): Promise<string | undefined> => {
+  if (hint && allowedMimeTypes.includes(hint)) return hint;
+
+  let guessedMimeType = guessMimeTypeFromExtension(uri);
+  if (guessedMimeType && allowedMimeTypes.includes(guessedMimeType)) {
+    return guessedMimeType;
   }
+
+  guessedMimeType = await guessMimeTypeFromMagicBytes(uri);
+  if (guessedMimeType && allowedMimeTypes.includes(guessedMimeType)) {
+    return guessedMimeType;
   }
 };
 
@@ -53,6 +91,6 @@ export {
   allowedImageMimeTypes,
   allowedGifMimeTypes,
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
   guessMimeType,
 };

src/utilities/index.ts

@@ -7,14 +7,14 @@ export {
   rgbToRgba,
   generateRandomColor,
 } from './color';
-export { packageName, appName, fileProvider, noOp } from './constants';
+export { packageName, appName, noOp } from './constants';
 export { multipleIdQuery } from './database';
 export { getFlashListItemHeight, getFontAwesome5IconSize } from './dimensions';
 export {
   allowedImageMimeTypes,
   allowedGifMimeTypes,
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
   guessMimeType,
 } from './filesystem';
 export { getSortIcon, getViewIcon } from './icon';