feat: adding image processing

src/locales/en/translation.json

@@ -286,6 +286,10 @@
     "friend_code_copied": "Friend code copied",
     "undo_friendship_modal_text": "This will undo your friendship with {{displayName}}",
     "privacy_hint": "To adjust who can see this, go to the <0>Settings</0>",
-    "locked_profile": "This profile is private"
+    "locked_profile": "This profile is private",
+    "image_process_failure": "Failure while processing the image",
+    "required_field": "This field is required",
+    "displayname_min_length": "Display name must be at least 3 characters long",
+    "displayname_max_length": "Display name must be at most 50 characters long"
   }
 }

src/locales/pt-BR/translation.json

@@ -289,6 +289,10 @@
     "friend_code_copied": "Código de amigo copiado",
     "undo_friendship_modal_text": "Isso irá remover sua amizade com {{displayName}}",
     "privacy_hint": "Pra controlar quem pode ver seu perfil, acesse a <0>Tela de Configurações</0>",
-    "profile_locked": "Este perfil é privado"
+    "profile_locked": "Este perfil é privado",
+    "image_process_failure": "Falha ao processar a imagem",
+    "required_field": "Este campo é obrigatório",
+    "displayname_min_length": "Nome de exibição deve ter pelo menos 3 caracteres",
+    "displayname_max_length": "Nome de exibição deve ter no máximo 50 caracteres"
   }
 }

src/locales/pt-PT/translation.json

@@ -277,6 +277,7 @@
     "pending": "Pendentes",
     "no_pending_invites": "Não tens convites de amizade pendentes",
     "no_blocked_users": "Não tens nenhum utilizador bloqueado",
-    "friend_code_copied": "Código de amigo copiado"
+    "friend_code_copied": "Código de amigo copiado",
+    "image_process_failure": "Falha ao processar a imagem"
   }
 }

src/main/constants.ts

@@ -3,11 +3,8 @@ import path from "node:path";
 
 export const defaultDownloadsPath = app.getPath("downloads");
 
-export const databasePath = path.join(
-  app.getPath("appData"),
-  "hydra",
-  "hydra.db"
-);
+export const databaseDirectory = path.join(app.getPath("appData"), "hydra");
+export const databasePath = path.join(databaseDirectory, "hydra.db");
 
 export const logsPath = path.join(app.getPath("appData"), "hydra", "logs");
 

src/main/events/index.ts

@@ -54,6 +54,7 @@ import "./profile/get-me";
 import "./profile/undo-friendship";
 import "./profile/update-friend-request";
 import "./profile/update-profile";
+import "./profile/process-profile-image";
 import "./profile/send-friend-request";
 import { isPortableVersion } from "@main/helpers";
 

src/main/events/profile/process-profile-image.ts

@@ -0,0 +1,11 @@
+import { registerEvent } from "../register-event";
+import { PythonInstance } from "@main/services";
+
+const processProfileImage = async (
+  _event: Electron.IpcMainInvokeEvent,
+  path: string
+) => {
+  return PythonInstance.processProfileImage(path);
+};
+
+registerEvent("processProfileImage", processProfileImage);

src/main/events/profile/update-profile.ts

@@ -1,50 +1,54 @@
 import { registerEvent } from "../register-event";
-import { HydraApi, logger } from "@main/services";
-import axios from "axios";
+import { HydraApi, PythonInstance } from "@main/services";
 import fs from "node:fs";
 import path from "node:path";
-import { fileTypeFromFile } from "file-type";
 import type { UpdateProfileRequest, UserProfile } from "@types";
+import { omit } from "lodash-es";
+import axios from "axios";
+
+interface PresignedResponse {
+  presignedUrl: string;
+  profileImageUrl: string;
+}
 
 const patchUserProfile = async (updateProfile: UpdateProfileRequest) => {
-  return HydraApi.patch("/profile", updateProfile);
+  return HydraApi.patch<UserProfile>("/profile", updateProfile);
+};
+
+const getNewProfileImageUrl = async (localImageUrl: string) => {
+  const { imagePath, mimeType } =
+    await PythonInstance.processProfileImage(localImageUrl);
+
+  const stats = fs.statSync(imagePath);
+  const fileBuffer = fs.readFileSync(imagePath);
+  const fileSizeInBytes = stats.size;
+
+  const { presignedUrl, profileImageUrl } =
+    await HydraApi.post<PresignedResponse>(`/presigned-urls/profile-image`, {
+      imageExt: path.extname(imagePath).slice(1),
+      imageLength: fileSizeInBytes,
+    });
+
+  await axios.put(presignedUrl, fileBuffer, {
+    headers: {
+      "Content-Type": mimeType,
+    },
+  });
+
+  return profileImageUrl;
 };
 
 const updateProfile = async (
   _event: Electron.IpcMainInvokeEvent,
   updateProfile: UpdateProfileRequest
-): Promise<UserProfile> => {
+) => {
   if (!updateProfile.profileImageUrl) {
-    return patchUserProfile(updateProfile);
+    return patchUserProfile(omit(updateProfile, "profileImageUrl"));
   }
 
-  const newProfileImagePath = updateProfile.profileImageUrl;
-
-  const stats = fs.statSync(newProfileImagePath);
-  const fileBuffer = fs.readFileSync(newProfileImagePath);
-  const fileSizeInBytes = stats.size;
-
-  const profileImageUrl = await HydraApi.post(`/presigned-urls/profile-image`, {
-    imageExt: path.extname(newProfileImagePath).slice(1),
-    imageLength: fileSizeInBytes,
-  })
-    .then(async (preSignedResponse) => {
-      const { presignedUrl, profileImageUrl } = preSignedResponse;
-
-      const mimeType = await fileTypeFromFile(newProfileImagePath);
-
-      await axios.put(presignedUrl, fileBuffer, {
-        headers: {
-          "Content-Type": mimeType?.mime,
-        },
-      });
-      return profileImageUrl as string;
-    })
-    .catch((err) => {
-      logger.error("Error uploading profile image", err);
-
-      return undefined;
-    });
+  const profileImageUrl = await getNewProfileImageUrl(
+    updateProfile.profileImageUrl
+  ).catch(() => undefined);
 
   return patchUserProfile({ ...updateProfile, profileImageUrl });
 };

src/main/index.ts

@@ -4,12 +4,14 @@ import updater from "electron-updater";
 import i18n from "i18next";
 import path from "node:path";
 import url from "node:url";
+import fs from "node:fs";
 import { electronApp, optimizer } from "@electron-toolkit/utils";
 import { logger, PythonInstance, WindowManager } from "@main/services";
 import { dataSource } from "@main/data-source";
 import resources from "@locales";
 import { userPreferencesRepository } from "@main/repository";
 import { knexClient, migrationConfig } from "./knex-client";
+import { databaseDirectory } from "./constants";
 
 const { autoUpdater } = updater;
 
@@ -54,6 +56,10 @@ if (process.defaultApp) {
 }
 
 const runMigrations = async () => {
+  if (!fs.existsSync(databaseDirectory)) {
+    fs.mkdirSync(databaseDirectory, { recursive: true });
+  }
+
   await knexClient.migrate.list(migrationConfig).then((result) => {
     logger.log(
       "Migrations to run:",

src/main/services/download/python-instance.ts

@@ -166,6 +166,14 @@ export class PythonInstance {
     this.downloadingGameId = -1;
   }
 
+  static async processProfileImage(imagePath: string) {
+    return this.rpc
+      .post<{ imagePath: string; mimeType: string }>("/profile-image", {
+        image_path: imagePath,
+      })
+      .then((response) => response.data);
+  }
+
   private static async handleRpcError(_error: unknown) {
     await this.rpc.get("/healthcheck").catch(() => {
       logger.error(

src/preload/index.ts

@@ -145,6 +145,8 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("undoFriendship", userId),
   updateProfile: (updateProfile: UpdateProfileRequest) =>
     ipcRenderer.invoke("updateProfile", updateProfile),
+  processProfileImage: (imagePath: string) =>
+    ipcRenderer.invoke("processProfileImage", imagePath),
   getFriendRequests: () => ipcRenderer.invoke("getFriendRequests"),
   updateFriendRequest: (userId: string, action: FriendRequestAction) =>
     ipcRenderer.invoke("updateFriendRequest", userId, action),

src/renderer/src/declaration.d.ts

@@ -150,6 +150,10 @@ declare global {
     updateProfile: (
       updateProfile: UpdateProfileRequest
     ) => Promise<UserProfile>;
+    updateProfile: (updateProfile: UpdateProfileProps) => Promise<UserProfile>;
+    processProfileImage: (
+      path: string
+    ) => Promise<{ imagePath: string; mimeType: string }>;
     getFriendRequests: () => Promise<FriendRequest[]>;
     updateFriendRequest: (
       userId: string,

src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx

@@ -102,7 +102,7 @@ export function EditProfileModal(
                   filters: [
                     {
                       name: "Image",
-                      extensions: ["jpg", "jpeg", "png"],
+                      extensions: ["jpg", "jpeg", "png", "gif", "webp"],
                     },
                   ],
                 });
@@ -110,7 +110,14 @@ export function EditProfileModal(
                 if (filePaths && filePaths.length > 0) {
                   const path = filePaths[0];
 
-                  onChange(path);
+                  const { imagePath } = await window.electron
+                    .processProfileImage(path)
+                    .catch(() => {
+                      showErrorToast(t("image_process_failure"));
+                      return { imagePath: null };
+                    });
+
+                  onChange(imagePath);
                 }
               };