Improve mime type handling using magic byes

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

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';
@@ -19,7 +19,8 @@ import { Meme, Tag } from '../../database';
 import { RootState } from '../../state';
 import {
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
+  guessMimeType,
   validateMemeTitle,
 } from '../../utilities';
 import { MemeEditor } from '../../components';
@@ -42,25 +43,46 @@ 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 [memeLoading, setMemeLoading] = useState(true);
   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 uuid = new BSON.UUID();
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const mimeType = file.current.type!;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const memeType = getMemeType(mimeType)!;
+  const [memeUri, setMemeUri] = useState(file.current.uri);
+  const [memeFilename, setMemeFilename] = useState(file.current.filename);
+  const [memeMimeType, setMemeMimeType] = useState<string>();
+  const [memeTitle, setMemeTitle] = useState(validateMemeTitle('New Meme'));
+  const [memeIsFavorite, setMemeIsFavorite] = useState(false);
+  const [memeTags, setMemeTags] = useState(new Map<string, Tag>());
 
-    const fileExtension = extension(mimeType) as string;
-    if (!fileExtension) goBack();
+  useEffect(() => {
+    const loadMeme = async () => {
+      const mimeType = await guessMimeType(file.current.uri);
+      if (!mimeType) {
+        setMemeError(
+          new Error('Could not determine MIME type or file is not supported.'),
+        );
+        return;
+      }
+
+      setMemeMimeType(mimeType);
+    };
+
+    setMemeLoading(true);
+    void loadMeme();
+    setMemeLoading(false);
+  }, [file]);
+
+  const saveMeme = useCallback(async () => {
+    if (!memeMimeType) return;
+    const uuid = new BSON.UUID();
+
+    const memeType = getMemeTypeFromMimeType(memeMimeType);
+    if (!memeType) return;
+
+    const fileExtension = extension(memeMimeType);
+    if (!fileExtension) return;
 
     const filename = `${uuid.toHexString()}-${Math.round(
       Date.now() / 1000,
@@ -73,9 +95,9 @@ const AddMeme = ({
     realm.write(() => {
       const meme: Meme | undefined = realm.create<Meme>(Meme.schema.name, {
         id: uuid,
-        type: memeType,
+        memeType,
         filename,
-        mimeType,
+        mimeType: memeMimeType,
         size,
         title: memeTitle.parsed,
         isFavorite: memeIsFavorite,
@@ -89,7 +111,14 @@ const AddMeme = ({
         tag.memesLength = tag.memes.length;
       });
     });
-  }, [goBack, memeIsFavorite, memeTags, memeTitle.parsed, realm, storageUri]);
+  }, [
+    memeIsFavorite,
+    memeMimeType,
+    memeTags,
+    memeTitle.parsed,
+    realm,
+    storageUri,
+  ]);
 
   const handleSave = useCallback(async () => {
     setIsSaving(true);
@@ -97,6 +126,14 @@ const AddMeme = ({
     goBack();
   }, [goBack, saveMeme]);
 
+  const resetState = useCallback(() => {
+    setMemeUri(file.current.uri);
+    setMemeFilename(file.current.filename);
+    setMemeTitle(validateMemeTitle('New Meme'));
+    setMemeIsFavorite(false);
+    setMemeTags(new Map<string, Tag>());
+  }, []);
+
   const handleSaveAndNext = useCallback(async () => {
     setIsSaving(true);
     await saveMeme();
@@ -105,12 +142,8 @@ const AddMeme = ({
     setIndex(index + 1);
     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]);
+    resetState();
+  }, [index, resetState, saveMeme]);
 
   const handleSaveAndAddMore = useCallback(async () => {
     setIsSavingAndAddingMore(true);
@@ -126,12 +159,8 @@ const AddMeme = ({
     files.current = documentPickerResponseToAddMemeFile(response);
     file.current = files.current[0];
 
-    setMemeUri(file.current.uri);
-    setMemeFilename(file.current.filename);
-    setMemeTitle(validateMemeTitle('New Meme'));
-    setMemeIsFavorite(false);
-    setMemeTags(new Map<string, Tag>());
-  }, [goBack, saveMeme]);
+    resetState();
+  }, [goBack, resetState, saveMeme]);
 
   return (
     <>
@@ -180,10 +209,11 @@ const AddMeme = ({
             icon="plus"
             onPress={handleSaveAndAddMore}
             disabled={
-              !memeTitle.valid ||
+              memeLoading ||
+              !!memeError ||
               isSaving ||
               isSavingAndAddingMore ||
-              !!memeError ||
+              !memeTitle.valid ||
               !isLastFile
             }
             loading={isSavingAndAddingMore}
@@ -195,10 +225,11 @@ const AddMeme = ({
             icon="floppy"
             onPress={isLastFile ? handleSave : handleSaveAndNext}
             disabled={
-              !memeTitle.valid ||
+              memeLoading ||
+              !!memeError ||
               isSaving ||
               isSavingAndAddingMore ||
-              !!memeError
+              !memeTitle.valid
             }
             loading={isSaving}
             style={editorStyles.saveButton}>

src/screens/editors/editMeme.tsx

@@ -17,7 +17,8 @@ import {
   allowedMimeTypes,
   deleteMeme,
   favoriteMeme,
-  getMemeType,
+  getMemeTypeFromMimeType,
+  guessMimeType,
   noOp,
   validateMemeTitle,
 } from '../../utilities';
@@ -47,6 +48,7 @@ const EditMeme = ({
   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])),
@@ -104,10 +106,16 @@ const EditMeme = ({
     const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
     if (!file) return;
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const mimeType = file.type!;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const memeType = getMemeType(mimeType)!;
+    const mimeType = await guessMimeType(file.uri, file.type);
+    if (!mimeType) {
+      setMemeError(
+        new Error('Could not determine MIME type or file is not supported.'),
+      );
+      return;
+    }
+
+    const memeType = getMemeTypeFromMimeType(mimeType);
+    if (!memeType) return;
 
     const fileExtension = extension(mimeType) as string;
     if (!fileExtension) return;
@@ -122,7 +130,7 @@ const EditMeme = ({
 
     realm.write(() => {
       meme.filename = filename;
-      meme.type = memeType;
+      meme.memeType = memeType;
       meme.mimeType = mimeType;
       meme.size = size;
     });

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);
       }