Update embed resolver, update open-graph-scraper, update deps, fix crashes without a default theme

backend/lib/resolveEmbeds.js

@@ -3,64 +3,59 @@ const axios = require("axios")
 const ogs = require("open-graph-scraper")
 const cryptoRandomString = require("crypto-random-string")
 const blacklist = require("./blacklist.json")
-module.exports = async function (req, message) {
+module.exports = async function (message) {
   return new Promise(async (resolve, reject) => {
     try {
       if (message.content) {
         const regex = /(https?:\/\/\S+)/g
         let links = message.content.match(regex)
-        if (links && links.length > 3) {
-          links = links.slice(0, 3)
-        }
-        let embeds = []
         if (links) {
-          for (let [i, link] of links.entries()) {
+          if (links.length > 3) links = links.slice(0, 3)
-            const linkURL = new URL(link)
+          const promises = links.map(async (embedLink, i) => {
+            let embed = {}
+            const linkURL = new URL(embedLink)
             if (blacklist.includes(linkURL.hostname)) {
-              console.log("Blacklisted link " + linkURL.hostname)
+              console.log(`Blacklisted link ${linkURL.hostname}`)
-              embeds.push({
+              return {
-                link: link,
+                embedLink,
-                type: "openGraph",
                 openGraph: {
-                  ogTitle: "Blacklisted link",
                   ogDescription:
-                    "This link cannot be mediaproxied at this time."
+                    "This link cannot be mediaproxied at this time.",
+                  ogTitle: "Blacklisted link"
+                },
+                type: "openGraph"
               }
-              })
-              continue
             }
             await ogs({
-              url: link,
-              followRedirect: true,
-              followAllRedirects: true,
               headers: {
                 "user-agent": "Googlebot/2.1 (+http://www.google.com/bot.html)"
-              }
+              },
+              url: embedLink
             })
-              .then(({ result }) => {
+              .then((result) => {
-                if (result) {
+                if (result?.result) {
-                  embeds.push({
+                  embed = {
-                    openGraph: result,
+                    embedLink,
-                    link: link,
+                    openGraph: result.result,
                     type: "openGraph"
-                  })
+                  }
                 }
               })
               .catch(async () => {
                 await axios
-                  .get(link, {
+                  .get(embedLink, {
                     headers: {
                       "user-agent":
                         "Googlebot/2.1 (+http://www.google.com/bot.html)"
                     }
                   })
                   .then((res) => {
-                    // if content type is image
+                    // If content type is image
                     if (res.headers["content-type"].startsWith("image/")) {
                       const securityToken = cryptoRandomString({ length: 32 })
-                      embeds.push({
+                      embed = {
                         type: "image",
-                        link: link,
+                        link: embedLink,
                         securityToken,
                         mediaProxyLink:
                           "/api/v1/mediaproxy/" +
@@ -69,15 +64,19 @@ module.exports = async function (req, message) {
                           i +
                           "/" +
                           securityToken
-                      })
+                      }
                     }
                   })
-                  .catch(() => {})
+                  .catch((e) => {
+                    console.log(e)
                   })
-          }
+              })
+            return embed
+          })
+          const embeds = await Promise.all(promises)
           await Message.update(
             {
-              embeds: embeds
+              embeds
             },
             {
               where: {
@@ -92,8 +91,8 @@ module.exports = async function (req, message) {
       } else {
         reject()
       }
-    } catch (err) {
+    } catch (e) {
-      console.log(err)
+      console.log(e)
     }
   })
 }

backend/package.json

@@ -30,7 +30,7 @@
     "multer": "^1.4.4",
     "node-xwhois": "^2.0.10",
     "nodemailer": "^6.7.7",
-    "open-graph-scraper": "^4.11.0",
+    "open-graph-scraper": "^5.0.5",
     "patch-package": "^6.4.7",
     "pg": "^8.7.3",
     "pg-hstore": "^2.3.4",

backend/routes/communications.js

@@ -876,7 +876,7 @@ router.put("/:id/message/edit", auth, async (req, res, next) => {
             chatId: chat.chat.id
           }
         })
-        await resolveEmbeds(req, message, associationsWithUser)
+        await resolveEmbeds(message)
           .then((embeds) => {
             associationsWithUser.forEach((association) => {
               io.to(association.userId).emit("messageEmbedResolved", {
@@ -1280,7 +1280,7 @@ router.post(
             chatId: chat.chat.id
           }
         })
-        await resolveEmbeds(req, messageLookup, associations)
+        await resolveEmbeds(messageLookup)
           .then((embeds) => {
             associationsWithUser.forEach((association) => {
               io.to(association.userId).emit("messageEmbedResolved", {
@@ -1590,7 +1590,7 @@ router.post("/:id/message", auth, limiter, async (req, res, next) => {
         ...messageLookup.dataValues,
         keyId: `${message.id}-${message.updatedAt.toISOString()}`
       })
-      await resolveEmbeds(req, messageLookup, associations)
+      await resolveEmbeds(messageLookup)
         .then((embeds) => {
           associationsWithUser.forEach((association) => {
             io.to(association.userId).emit("messageEmbedResolved", {

frontend/src/App.vue

@@ -2,7 +2,7 @@
   <v-app
     :style="
       'background-color: ' +
-      $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].bg
+      $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']?.bg
     "
   >
     <v-overlay :value="!$store.state.wsConnected" absolute style="z-index: 69">
@@ -446,7 +446,7 @@
           id="main"
           :style="
             'background-color: ' +
-            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].bg
+            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']?.bg
           "
         />
       </div>

frontend/src/components/Header.vue

@@ -204,7 +204,7 @@
               v-for="user in settings.item.chat.associations"
               :key="user.id"
             >
-              <v-list-item-avatar :color="$vuetify.theme.themes.dark.primary">
+              <v-list-item-avatar :color="$vuetify.theme.themes.dark?.primary">
                 <v-img
                   :src="
                     $store.state.baseURL + '/usercontent/' + user.user.avatar
@@ -613,7 +613,7 @@
           :style="
             'color: ' +
             $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']
-              .primary
+              ?.primary
           "
           class="troplo-title"
           @click="$router.push('/')"
@@ -723,7 +723,7 @@
                   offset-y="20"
                 >
                   <v-list-item-avatar
-                    :color="$vuetify.theme.themes.dark.primary"
+                    :color="$vuetify.theme.themes.dark?.primary"
                   >
                     <v-img
                       v-if="
@@ -743,7 +743,7 @@
                 </v-badge>
                 <v-badge dot color="none" v-else>
                   <v-list-item-avatar
-                    :color="$vuetify.theme.themes.dark.primary"
+                    :color="$vuetify.theme.themes.dark?.primary"
                   >
                     <v-img
                       v-if="item.chat.type === 'group' && item.chat.icon"
@@ -803,7 +803,7 @@
                   v-bind="attrs"
                 >
                   <v-list-item-avatar
-                    :color="$vuetify.theme.themes.dark.primary"
+                    :color="$vuetify.theme.themes.dark?.primary"
                     v-on="on"
                     v-bind="attrs"
                   >

frontend/src/store/index.js

@@ -23,6 +23,38 @@ function getDirectRecipient(context, item) {
     return user
   }
 }
+
+const darkTheme = {
+  primary: "#0190ea",
+  secondary: "#757575",
+  accent: "#000000",
+  error: "#ff1744",
+  info: "#2196F3",
+  success: "#4CAF50",
+  warning: "#ff9800",
+  card: "#151515",
+  toolbar: "#191919",
+  sheet: "#181818",
+  text: "#000000",
+  dark: "#151515",
+  bg: "#151515"
+}
+const lightTheme = {
+  primary: "#0190ea",
+  secondary: "#757575",
+  accent: "#000000",
+  error: "#ff1744",
+  info: "#2196F3",
+  success: "#4CAF50",
+  warning: "#ff9800",
+  card: "#f8f8f8",
+  toolbar: "#f8f8f8",
+  sheet: "#f8f8f8",
+  text: "#000000",
+  dark: "#f8f8f8",
+  bg: "#f8f8f8"
+}
+
 export default new Vuex.Store({
   state: {
     desktop: !!process.env.IS_ELECTRON,
@@ -179,36 +211,8 @@ export default new Vuex.Store({
         name: "Colubrina Classic",
         primaryType: "all",
         css: "",
-        dark: {
+        dark: darkTheme,
-          primary: "#0190ea",
+        light: lightTheme
-          secondary: "#757575",
-          accent: "#000000",
-          error: "#ff1744",
-          info: "#2196F3",
-          success: "#4CAF50",
-          warning: "#ff9800",
-          card: "#151515",
-          toolbar: "#191919",
-          sheet: "#181818",
-          text: "#000000",
-          dark: "#151515",
-          bg: "#151515"
-        },
-        light: {
-          primary: "#0190ea",
-          secondary: "#757575",
-          accent: "#000000",
-          error: "#ff1744",
-          info: "#2196F3",
-          success: "#4CAF50",
-          warning: "#ff9800",
-          card: "#f8f8f8",
-          toolbar: "#f8f8f8",
-          sheet: "#f8f8f8",
-          text: "#000000",
-          dark: "#f8f8f8",
-          bg: "#f8f8f8"
-        }
       }
       context.state.themeEngine.type = "create"
     },
@@ -394,9 +398,9 @@ export default new Vuex.Store({
           console.log("Socket not connected")
         }
         localStorage.setItem("userCache", JSON.stringify(user))
-        const name = user.themeObject.id
+        const name = user.themeObject?.id
-        const dark = user.themeObject.theme.dark
+        const dark = user.themeObject?.theme.dark
-        const light = user.themeObject.theme.light
+        const light = user.themeObject?.theme.light
         if (user.accentColor) {
           user.themeObject.theme.dark.primary = user.accentColor
           user.themeObject.theme.light.primary = user.accentColor
@@ -405,12 +409,12 @@ export default new Vuex.Store({
         Vuetify.framework.theme.themes.light = light
         Vuetify.framework.theme.themes.name = name
         Vuetify.framework.theme.themes.primaryType =
-          user.themeObject.theme.primaryType
+          user.themeObject?.theme.primaryType
         const themeElement = document.getElementById("user-theme")
         if (!themeElement) {
           const style = document.createElement("style")
           style.id = "user-theme"
-          style.innerHTML = user.themeObject.theme.css
+          style.innerHTML = user.themeObject?.theme.css
           document.head.appendChild(style)
         }
         const fontElement = document.getElementById("user-font")
@@ -460,36 +464,8 @@ div {
                   id: 1,
                   name: "Colubrina Classic",
                   primaryType: "all",
-                  dark: {
+                  dark: darkTheme,
-                    primary: "#0190ea",
+                  light: lightTheme
-                    secondary: "#757575",
-                    accent: "#000000",
-                    error: "#ff1744",
-                    info: "#2196F3",
-                    success: "#4CAF50",
-                    warning: "#ff9800",
-                    card: "#151515",
-                    toolbar: "#191919",
-                    sheet: "#181818",
-                    text: "#000000",
-                    dark: "#151515",
-                    bg: "#151515"
-                  },
-                  light: {
-                    primary: "#0190ea",
-                    secondary: "#757575",
-                    accent: "#000000",
-                    error: "#ff1744",
-                    info: "#2196F3",
-                    success: "#4CAF50",
-                    warning: "#ff9800",
-                    card: "#f8f8f8",
-                    toolbar: "#f8f8f8",
-                    sheet: "#f8f8f8",
-                    text: "#000000",
-                    dark: "#f8f8f8",
-                    bg: "#f8f8f8"
-                  }
                 }
                 const name = theme.id
                 const dark = theme.dark
@@ -508,36 +484,8 @@ div {
                 id: 1,
                 name: "Colubrina Classic",
                 primaryType: "all",
-                dark: {
+                dark: darkTheme,
-                  primary: "#0190ea",
+                light: lightTheme
-                  secondary: "#757575",
-                  accent: "#000000",
-                  error: "#ff1744",
-                  info: "#2196F3",
-                  success: "#4CAF50",
-                  warning: "#ff9800",
-                  card: "#151515",
-                  toolbar: "#191919",
-                  sheet: "#181818",
-                  text: "#000000",
-                  dark: "#151515",
-                  bg: "#151515"
-                },
-                light: {
-                  primary: "#0190ea",
-                  secondary: "#757575",
-                  accent: "#000000",
-                  error: "#ff1744",
-                  info: "#2196F3",
-                  success: "#4CAF50",
-                  warning: "#ff9800",
-                  card: "#f8f8f8",
-                  toolbar: "#f8f8f8",
-                  sheet: "#f8f8f8",
-                  text: "#000000",
-                  dark: "#f8f8f8",
-                  bg: "#f8f8f8"
-                }
               }
               const name = theme.id
               const dark = theme.dark
@@ -556,36 +504,8 @@ div {
                 id: 1,
                 name: "Colubrina Classic",
                 primaryType: "all",
-                dark: {
+                dark: darkTheme,
-                  primary: "#0190ea",
+                light: lightTheme
-                  secondary: "#757575",
-                  accent: "#000000",
-                  error: "#ff1744",
-                  info: "#2196F3",
-                  success: "#4CAF50",
-                  warning: "#ff9800",
-                  card: "#151515",
-                  toolbar: "#191919",
-                  sheet: "#181818",
-                  text: "#000000",
-                  dark: "#151515",
-                  bg: "#151515"
-                },
-                light: {
-                  primary: "#0190ea",
-                  secondary: "#757575",
-                  accent: "#000000",
-                  error: "#ff1744",
-                  info: "#2196F3",
-                  success: "#4CAF50",
-                  warning: "#ff9800",
-                  card: "#f8f8f8",
-                  toolbar: "#f8f8f8",
-                  sheet: "#f8f8f8",
-                  text: "#000000",
-                  dark: "#f8f8f8",
-                  bg: "#f8f8f8"
-                }
               }
               const name = theme.id
               const dark = theme.dark

frontend/src/views/Communications/CommunicationsFriends.vue

@@ -8,7 +8,7 @@
         <v-tab-item
           :style="
             'background-color: ' +
-            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
+            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']?.card
           "
         >
           <v-card class="rounded-0" color="card" elevation="0">
@@ -21,7 +21,7 @@
                   <v-list-item-avatar
                     @click="userProfile(user)"
                     style="cursor: pointer"
-                    :color="$vuetify.theme.themes.dark.primary"
+                    :color="$vuetify.theme.themes.dark?.primary"
                   >
                     <v-img
                       :src="
@@ -79,7 +79,7 @@
         <v-tab-item
           :style="
             'background-color: ' +
-            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
+            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']?.card
           "
         >
           <v-card class="rounded-0" color="card" elevation="0">
@@ -101,7 +101,7 @@
                 >
                   <v-list-item-avatar
                     @click="userProfile(friend.user2)"
-                    :color="$vuetify.theme.themes.dark.primary"
+                    :color="$vuetify.theme.themes.dark?.primary"
                   >
                     <v-img
                       :src="
@@ -155,7 +155,7 @@
                   <v-list-item-avatar
                     @click="userProfile(friend.user2)"
                     style="cursor: pointer"
-                    :color="$vuetify.theme.themes.dark.primary"
+                    :color="$vuetify.theme.themes.dark?.primary"
                   >
                     <v-img
                       :src="
@@ -202,7 +202,7 @@
                   <v-list-item-avatar
                     @click="userProfile(friend.user2)"
                     style="cursor: pointer"
-                    :color="$vuetify.theme.themes.dark.primary"
+                    :color="$vuetify.theme.themes.dark?.primary"
                   >
                     <v-img
                       :src="
@@ -235,7 +235,7 @@
         <v-tab-item
           :style="
             'background-color: ' +
-            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light'].card
+            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']?.card
           "
         >
           <v-card color="card">