frontend-next/src/components/app/datatypes.js

@@ -37,29 +37,42 @@ let dateOptions = {
   minute: "2-digit",
 };
 
+/**
+ * Photo URL Test
+ * @param {String} url - URL to Test
+ * @returns {Boolean} - Image Loaded (True) or Not (False)
+ */
+function imageProcessing(url) {
+  var img = new Image();
+  img.src = url;
+  return img.complete;
+}
+
+
 /**
  * Rich Message Formatting
  * @param {String} message - Message to Format
  * @returns {String} - Formatted Message (IN HTML)
  */
 function RMF(message) {
-  var IMG_END = [".jpg", ".jpeg", ".png", ".gif", ".webp"]
   var URLREGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
   var URLmatch = message.match(URLREGEX);
   var newMessage = URLmatch ? [] : message
   if (URLmatch) {
     for (var i = 0; i < URLmatch.length; i++) {
-      if (IMG_END.includes(URLmatch[i].slice(-4)) || IMG_END.includes(URLmatch[i].slice(-5))) {
-        // Its a photo
-        newMessage.push((<img src={"https://"+URLmatch[i]} className="max-w-[100%] max-h-[100%]"/>))
-      } else {
+      if (imageProcessing("https://"+URLmatch[i])) {
         newMessage.push((<span className="mr-2">
-          {URLmatch.length == 1 && message.split(URLmatch[i])[0]}
-          <Link href={"https://"+URLmatch[i]} target="_blank" className="hover:underline">{URLmatch[i]}</Link>
+          {(URLmatch.length == 1) && message.split(URLmatch[i])[0].replace("https://","")}
+          <img src={"https://"+URLmatch[i]} className="max-w-[100%]"/>
           {(i == URLmatch.length || URLmatch.length == 1) && message.split(URLmatch[i])[1]}
         </span>))
+      } else {
+        newMessage.push((<span className="mr-2">
+        {URLmatch.length == 1 && message.split(URLmatch[i])[0]}
+        <Link href={"https://"+URLmatch[i]} target="_blank" className="hover:underline">{URLmatch[i]}</Link>
+        {(i == URLmatch.length || URLmatch.length == 1) && message.split(URLmatch[i])[1]}
+      </span>))
       }
-      
     }
   }
   return newMessage