feat: show current game on other users profile

src/main/events/user/get-user.ts

@@ -1,7 +1,7 @@
 import { registerEvent } from "../register-event";
 import { HydraApi } from "@main/services";
 import { steamGamesWorker } from "@main/workers";
-import { UserGame, UserProfile } from "@types";
+import { GameRunning, UserGame, UserProfile } from "@types";
 import { convertSteamGameToCatalogueEntry } from "../helpers/search-games";
 import { getSteamAppAsset } from "@main/helpers";
 import { getUserFriends } from "./get-user-friends";
@@ -30,21 +30,34 @@ const getUser = async (
       })
     );
 
+    const currentGame = await getGameRunning(profile.currentGame);
+
     return {
       ...profile,
       libraryGames,
       recentGames,
       friends: friends.friends,
       totalFriends: friends.totalFriends,
-      currentGame: profile.currentGame
-        ? getSteamUserGame(profile.currentGame)
-        : null,
+      currentGame,
     };
   } catch (err) {
     return null;
   }
 };
 
+const getGameRunning = async (currentGame): Promise<GameRunning | null> => {
+  if (!currentGame) {
+    return null;
+  }
+
+  const gameRunning = await getSteamUserGame(currentGame);
+
+  return {
+    ...gameRunning,
+    sessionDurationInMillis: currentGame.sessionDurationInSeconds * 1000,
+  };
+};
+
 const getSteamUserGame = async (game): Promise<UserGame> => {
   const steamGame = await steamGamesWorker.run(Number(game.objectId), {
     name: "getById",

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -78,7 +78,7 @@ export function SidebarProfile() {
             )}
           </div>
 
-          {userDetails && gameRunning && (
+          {userDetails && gameRunning?.iconUrl && (
             <img
               alt={gameRunning.title}
               width={24}

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

@@ -1,4 +1,9 @@
-import { FriendRequestAction, UserGame, UserProfile } from "@types";
+import {
+  FriendRequestAction,
+  GameRunning,
+  UserGame,
+  UserProfile,
+} from "@types";
 import cn from "classnames";
 import * as styles from "./user.css";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
@@ -44,7 +49,6 @@ export function UserContent({
   updateUserProfile,
 }: ProfileContentProps) {
   const { t, i18n } = useTranslation("user_profile");
-
   const {
     userDetails,
     profileBackground,
@@ -64,6 +68,7 @@ export function UserContent({
     useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
   const [showUserBlockModal, setShowUserBlockModal] = useState(false);
+  const [currentGame, setCurrentGame] = useState<GameRunning | null>(null);
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
@@ -113,6 +118,15 @@ export function UserContent({
 
   const isMe = userDetails?.id == userProfile.id;
 
+  useEffect(() => {
+    if (isMe && gameRunning) {
+      setCurrentGame(gameRunning);
+      return;
+    }
+
+    setCurrentGame(userProfile.currentGame);
+  }, [gameRunning, isMe]);
+
   useEffect(() => {
     if (isMe) fetchFriendRequests();
   }, [isMe, fetchFriendRequests]);
@@ -284,10 +298,10 @@ export function UserContent({
           position: "relative",
         }}
       >
-        {gameRunning && isMe && (
+        {currentGame && (
           <img
-            src={steamUrlBuilder.libraryHero(gameRunning.objectID)}
-            alt={gameRunning.title}
+            src={steamUrlBuilder.libraryHero(currentGame.objectID)}
+            alt={currentGame.title}
             className={styles.profileBackground}
           />
         )}
@@ -315,7 +329,7 @@ export function UserContent({
 
         <div className={styles.profileInformation}>
           <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
-          {isMe && gameRunning && (
+          {currentGame && (
             <div
               style={{
                 display: "flex",
@@ -331,14 +345,14 @@ export function UserContent({
                   alignItems: "center",
                 }}
               >
-                <Link to={buildGameDetailsPath(gameRunning)}>
-                  {gameRunning.title}
+                <Link to={buildGameDetailsPath(currentGame)}>
+                  {currentGame.title}
                 </Link>
               </div>
               <small>
                 {t("playing_for", {
                   amount: formatDiffInMillis(
-                    gameRunning.sessionDurationInMillis,
+                    currentGame.sessionDurationInMillis,
                     new Date()
                   ),
                 })}

src/types/index.ts

@@ -141,9 +141,8 @@ export interface Game {
 export type LibraryGame = Omit<Game, "repacks">;
 
 export interface GameRunning {
-  id: number;
   title: string;
-  iconUrl: string;
+  iconUrl: string | null;
   objectID: string;
   shop: GameShop;
   sessionDurationInMillis: number;
@@ -318,7 +317,7 @@ export interface UserProfile {
   friends: UserFriend[];
   totalFriends: number;
   relation: UserRelation | null;
-  currentGame: UserGame | null;
+  currentGame: GameRunning | null;
 }
 
 export interface UpdateProfileProps {