use oids for avatars

BBN-Holding · Feb 11, 2024 · eeab379 · eeab379
1 parent 5f09cbf
commit eeab379
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/pages/_legacy/helper.ts b/pages/_legacy/helper.ts
@@ -172,19 +172,6 @@ export function getYearList(): string[] {
         .map((x) => x.toString());
 }
 
-export function stringToColor(str: string) {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    let color = '#';
-    for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 0xFF;
-        color += (`00${value.toString(16)}`).slice(-2);
-    }
-    return color;
-}
-
 const a = document.createElement('a');
 document.body.appendChild(a);
 a.setAttribute('style', 'display: none');
@@ -245,14 +232,26 @@ async function loadImage(x: Drop) {
     return blob;
 }
 
+export function stringToColor(str: string) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let color = '#';
+    for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 0xFF;
+        color += (`00${value.toString(16)}`).slice(-2);
+    }
+    return color;
+}
+
 export function ProfilePicture(component: Component, name: string) {
     const ele = component.draw();
     ele.style.backgroundColor = stringToColor(name);
     return Custom(ele).addClass("profile-picture");
 }
 
-export function getNameInital(raw: string) {
-    const name = raw.trim();
+export function getNameInital(name: string) {
     if (name.includes(", "))
         return name.split(", ").map(x => x.at(0)?.toUpperCase()).join("");
     if (name.includes(","))
@@ -263,8 +262,11 @@ export function getNameInital(raw: string) {
 }
 
 export function showProfilePicture(x: ProfileData) {
+    console.log(x.profile.avatar, x.profile.username);
     return ProfilePicture(
-        x.profile.avatar ? Image(x.profile.avatar!, "") : Label(getNameInital(x.profile.username)),
+        x.profile.avatar ? Image({
+            type: "direct", source: async () => await API.user.picture(x._id).then(stupidErrorAlert)
+        }, "Profile Picture") : Label(getNameInital(x.profile.username)),
         x.profile.username
     );
 }
diff --git a/pages/shared/restSpec.ts b/pages/shared/restSpec.ts
@@ -122,7 +122,12 @@ export const API = {
             })
                 .then(none())
                 .catch(reject)
-        }
+        },
+        picture: (id: string) => fetch(`${API.BASE_URL}user/${id}/picture`, {
+            headers: headers(API.getToken())
+        })
+            .then(blob())
+            .catch(reject)
     },
     auth: {
         oauthRedirect: (type: "discord" | "google" | "microsoft") => `${API.BASE_URL}auth/redirect/${type}?goal=${localStorage.getItem('goal') ?? '/music'}`,

diff --git a/pages/user/settings.personal.ts b/pages/user/settings.personal.ts
@@ -10,7 +10,7 @@ export function ChangePersonal() {
         email: activeUser.email,
         name: activeUser.username,
         loading: false,
-        profilePicture: activeUser.avatar ?? { type: "loading" } as string | AdvancedImage | undefined,
+        profilePicture: activeUser.avatar ? { type: "direct", source: async () => await API.user.picture(activeUser.id!).then(stupidErrorAlert) } : { type: "loading" } as AdvancedImage | undefined,
         validationState: <ZodError | undefined>undefined,
     });
 
@@ -25,7 +25,7 @@ export function ChangePersonal() {
                     StreamingUploadHandler(`user/set-me/avatar/upload`, {
                         failure: () => {
                             state.loading = false;
-                            state.profilePicture = activeUser.avatar;
+                            state.profilePicture = activeUser.avatar ? { type: "direct", source: async () => await API.user.picture(activeUser.id!).then(stupidErrorAlert) } : { type: "loading" };
                             alert("Your Upload has failed. Please try a different file or try again later");
                         },
                         uploadDone: () => {