feat: render nip94 from regular note reference

packages/app/src/Element/RevealMedia.tsx

@@ -1,8 +1,9 @@
 import { FormattedMessage } from "react-intl";
 
-import MediaLink from "Element/MediaLink";
+import { FileExtensionRegex } from "Const";
 import Reveal from "Element/Reveal";
 import useLogin from "Hooks/useLogin";
+import { MediaElement } from "Element/MediaLink";
 
 interface RevealMediaProps {
   creator: string;
@@ -18,14 +19,42 @@ export default function RevealMedia(props: RevealMediaProps) {
   const hideMedia = pref.autoLoadMedia === "none" || (!isMine && hideNonFollows);
   const hostname = new URL(props.link).hostname;
 
+  const url = new URL(props.link);
+  const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
+  const type = (() => {
+    switch (extension) {
+      case "gif":
+      case "jpg":
+      case "jpeg":
+      case "jfif":
+      case "png":
+      case "bmp":
+      case "webp":
+        return "image";
+      case "wav":
+      case "mp3":
+      case "ogg":
+        return "audio";
+      case "mp4":
+      case "mov":
+      case "mkv":
+      case "avi":
+      case "m4v":
+      case "webm":
+        return "video";
+      default:
+        return "unknown";
+    }
+  })();
+
   if (hideMedia) {
     return (
       <Reveal
         message={<FormattedMessage defaultMessage="Click to load content from {link}" values={{ link: hostname }} />}>
-        <MediaLink link={props.link} />
+        <MediaElement mime={`${type}/${extension}`} url={url.toString()} />
       </Reveal>
     );
   } else {
-    return <MediaLink link={props.link} />;
+    return <MediaElement mime={`${type}/${extension}`} url={url.toString()} />;
   }
 }