fix: game session duration calculation

src/main/services/process-watcher.ts

@@ -94,7 +94,10 @@ export const watchProcesses = async () => {
 
   if (WindowManager.mainWindow) {
     const runningGames = Array.from(gamesPlaytime.entries()).map((entry) => {
-      return { id: entry[0], sessionStartTimestamp: entry[1].firstTick };
+      return {
+        id: entry[0],
+        sessionDurationInMillis: entry[1].firstTick - performance.now(),
+      };
     });
 
     WindowManager.mainWindow.webContents.send(

src/renderer/src/app.tsx

@@ -108,7 +108,7 @@ export function App() {
           dispatch(
             setRunningGame({
               ...libraryGame,
-              sessionStartTimestamp: lastGame.sessionStartTimestamp,
+              sessionDurationInMillis: lastGame.sessionDurationInMillis,
             })
           );
           return;

src/renderer/src/hooks/use-date.ts

@@ -1,4 +1,4 @@
-import { formatDistance } from "date-fns";
+import { formatDistance, subMilliseconds } from "date-fns";
 import type { FormatDistanceOptions } from "date-fns";
 import {
   ptBR,
@@ -52,5 +52,20 @@ export function useDate() {
         return "";
       }
     },
+
+    formatDistanceInMillis: (
+      millis: number,
+      baseDate: string | number | Date,
+      options?: FormatDistanceOptions
+    ) => {
+      try {
+        return formatDistance(subMilliseconds(new Date(), millis), baseDate, {
+          ...options,
+          locale: getDateLocale(),
+        });
+      } catch (err) {
+        return "";
+      }
+    },
   };
 }

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

@@ -42,7 +42,7 @@ export function UserContent({
     });
   }, [i18n.language]);
 
-  const { formatDistance } = useDate();
+  const { formatDistance, formatDistanceInMillis } = useDate();
 
   const formatPlayTime = () => {
     const seconds = userProfile.libraryGames.reduce(
@@ -107,7 +107,8 @@ export function UserContent({
         {runningGame && isMe && (
           <div
             style={{
-              background: `url(${steamUrlBuilder.libraryHero(runningGame.objectID)})`,
+              backgroundImage: `url(${steamUrlBuilder.libraryHero(runningGame.objectID)})`,
+              backgroundPosition: "top",
               position: "absolute",
               inset: 0,
               backgroundSize: "cover",
@@ -159,9 +160,9 @@ export function UserContent({
               </div>
               <small>
                 {t("playing_for", {
-                  amount: formatDistance(
-                    runningGame.sessionStartTimestamp,
-                    performance.now()
+                  amount: formatDistanceInMillis(
+                    runningGame.sessionDurationInMillis,
+                    new Date().getTime()
                   ),
                 })}
               </small>

src/types/index.ts

@@ -129,7 +129,7 @@ export type LibraryGame = Omit<Game, "repacks">;
 
 export type RunningGameEvent = {
   id: number;
-  sessionStartTimestamp: number;
+  sessionDurationInMillis: number;
 }[];
 
 export interface RunningGame {
@@ -138,7 +138,7 @@ export interface RunningGame {
   iconUrl: string;
   objectID: string;
   shop: GameShop;
-  sessionStartTimestamp: number;
+  sessionDurationInMillis: number;
 }
 
 export interface DownloadProgress {