feat: background on profile page for other users profile

src/renderer/src/helpers.ts

@@ -1,6 +1,7 @@
 import type { GameShop } from "@types";
 
 import Color from "color";
+import { average } from "color.js";
 
 export const steamUrlBuilder = {
   library: (objectID: string) =>
@@ -45,3 +46,14 @@ export const buildGameDetailsPath = (
 
 export const darkenColor = (color: string, amount: number, alpha: number = 1) =>
   new Color(color).darken(amount).alpha(alpha).toString();
+
+export const profileBackgroundFromProfileImage = async (
+  profileImageUrl: string
+) => {
+  const output = await average(profileImageUrl, {
+    amount: 1,
+    format: "hex",
+  });
+
+  return `linear-gradient(135deg, ${darkenColor(output as string, 0.6)}, ${darkenColor(output as string, 0.8, 0.7)})`;
+};

src/renderer/src/hooks/use-user-details.ts

@@ -1,6 +1,4 @@
 import { useCallback } from "react";
-import { average } from "color.js";
-
 import { useAppDispatch, useAppSelector } from "./redux";
 import {
   setProfileBackground,
@@ -9,7 +7,7 @@ import {
   setFriendsModalVisible,
   setFriendsModalHidden,
 } from "@renderer/features";
-import { darkenColor } from "@renderer/helpers";
+import { profileBackgroundFromProfileImage } from "@renderer/helpers";
 import { FriendRequestAction, UserDetails } from "@types";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 
@@ -42,12 +40,9 @@ export function useUserDetails() {
       dispatch(setUserDetails(userDetails));
 
       if (userDetails.profileImageUrl) {
-        const output = await average(userDetails.profileImageUrl, {
+        const profileBackground = await profileBackgroundFromProfileImage(
-          amount: 1,
+          userDetails.profileImageUrl
-          format: "hex",
+        );
-        });
-
-        const profileBackground = `linear-gradient(135deg, ${darkenColor(output as string, 0.6)}, ${darkenColor(output as string, 0.8, 0.7)})`;
         dispatch(setProfileBackground(profileBackground));
 
         window.localStorage.setItem(

src/renderer/src/pages/user/user-content.tsx

@@ -12,7 +12,11 @@ import {
   useUserDetails,
 } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
-import { buildGameDetailsPath, steamUrlBuilder } from "@renderer/helpers";
+import {
+  buildGameDetailsPath,
+  profileBackgroundFromProfileImage,
+  steamUrlBuilder,
+} from "@renderer/helpers";
 import { PersonIcon, PlusIcon, TelescopeIcon } from "@primer/octicons-react";
 import { Button, Link } from "@renderer/components";
 import { UserEditProfileModal } from "./user-edit-modal";
@@ -41,6 +45,8 @@ export function UserContent({
   } = useUserDetails();
   const { showSuccessToast } = useToast();
 
+  const [profileContentBoxBackground, setProfileContentBoxBackground] =
+    useState<string | undefined>();
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
 
@@ -96,11 +102,19 @@ export function UserContent({
     if (isMe) updateFriendRequests();
   }, [isMe]);
 
-  const profileContentBoxBackground = useMemo(() => {
+  useEffect(() => {
-    if (profileBackground) return profileBackground;
+    if (isMe && profileBackground) {
-    /* TODO: Render background colors for other users */
+      setProfileContentBoxBackground(profileBackground);
-    return undefined;
+    }
-  }, [profileBackground]);
+
+    if (userProfile.profileImageUrl) {
+      profileBackgroundFromProfileImage(userProfile.profileImageUrl).then(
+        (profileBackground) => {
+          setProfileContentBoxBackground(profileBackground);
+        }
+      );
+    }
+  }, [profileBackground, isMe]);
 
   return (
     <>