use mimetype lib to get types

packages/app/package.json

@@ -66,6 +66,7 @@
     "localforage": "^1.10.0",
     "luxon": "^3.0.4",
     "match-sorter": "^6.3.1",
+    "mime": "^3.0.0",
     "moment": "2.29.4",
     "moment-timezone": "^0.5.37",
     "mpegts.js": "^1.6.10",

packages/app/src/components/PostCard/components/attachments/index.jsx

@@ -3,42 +3,24 @@ import { Skeleton } from "antd"
 import { Carousel } from "react-responsive-carousel"
 import { ImageViewer } from "components"
 import Plyr from "plyr-react"
+import mimetypes from "mime"
 
 import ContentFailed from "../contentFailed"
 
-const mediaTypes = {
-    "jpg": "image",
-    "jpeg": "image",
-    "png": "image",
-    "gif": "image",
-    "mp4": "video",
-    "webm": "video",
-    "ogv": "video",
-    "mov": "video",
-    "avi": "video",
-    "mkv": "video",
-    "ogg": "audio",
-    "mp3": "audio",
-    "wav": "audio",
-    "flac": "audio",
-    "aac": "audio",
-    "m4a": "audio",
-}
-
 import "react-responsive-carousel/lib/styles/carousel.min.css"
 import "plyr-react/dist/plyr.css"
 import "./index.less"
 
 const Attachment = React.memo((props) => {
-    const { url, id } = props.attachment
-
     const [loaded, setLoaded] = React.useState(false)
 
-    const [mediaType, setMediaType] = React.useState(null)
     const [mimeType, setMimeType] = React.useState(null)
 
+    try {
+        const { url, id } = props.attachment
+
         const onDoubleClickAttachment = (e) => {
-        if (mediaType.split("/")[0] === "image") {
+            if (mimeType.split("/")[0] === "image") {
                 e.preventDefault()
                 e.stopPropagation()
 
@@ -50,10 +32,10 @@ const Attachment = React.memo((props) => {
             let extension = null
 
             // get media type by parsing the url
-        const mediaTypeExt = /\.([a-zA-Z0-9]+)$/.exec(url)
+            const mediaExtname = /\.([a-zA-Z0-9]+)$/.exec(url)
 
-        if (mediaTypeExt) {
+            if (mediaExtname) {
-            extension = mediaTypeExt[1]
+                extension = mediaExtname[1]
             } else {
                 // try to get media by creating requesting the url
                 const response = await fetch(url, {
@@ -65,17 +47,27 @@ const Attachment = React.memo((props) => {
 
             extension = extension.toLowerCase()
 
-        const mediaType = mediaTypes[extension]
+            if (!extension) {
-        const mimeType = `${mediaType}/${extension}`
+                setLoaded(true)
+
+                console.error("Failed to get media type", url, extension)
+
+                return
+            }
+
+            const mimeType = mimetypes.getType(extension)
 
-        setMediaType(mediaType)
             setMimeType(mimeType)
 
             setLoaded(true)
         }
 
         const renderMedia = () => {
-        switch (mediaType.split("/")[0]) {
+            if (!mimeType) {
+                return null
+            }
+
+            switch (mimeType.split("/")[0]) {
                 case "image": {
                     return <ImageViewer src={url} />
                 }
@@ -99,7 +91,7 @@ const Attachment = React.memo((props) => {
                 }
                 default: {
                     return <h4>
-                    Unsupported media type [{mediaType}/{mediaTypeExt}]
+                        Unsupported media type [{mimeType}]
                     </h4>
                 }
             }
@@ -113,11 +105,10 @@ const Attachment = React.memo((props) => {
             return <Skeleton active />
         }
 
-    if (loaded && !mediaType && !mimeType) {
+        if (loaded && !mimeType) {
             return <ContentFailed />
         }
 
-    try {
         return <div
             key={props.index}
             id={id}
@@ -127,7 +118,7 @@ const Attachment = React.memo((props) => {
             {renderMedia()}
         </div>
     } catch (error) {
-        console.error(`Failed to render attachment ${props.attachment.name} (${props.attachment.id})`, error)
+        console.error(error)
 
         return <ContentFailed />
     }
@@ -179,6 +170,10 @@ export default (props) => {
         >
             {
                 props.attachments?.length > 0 && props.attachments.map((attachment, index) => {
+                    if (typeof attachment !== "object") {
+                        return null
+                    }
+
                     return <Attachment index={index} attachment={attachment} />
                 })
             }