Merge pull request #154 from hydralauncher/feat/format-playtime-in-hours

Feat/format playtime in hours

src/renderer/src/pages/game-details/hero/hero-panel.tsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useDownload } from "@renderer/hooks";
@@ -22,6 +22,8 @@ export interface HeroPanelProps {
   getGame: () => void;
 }
 
+const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
+
 export function HeroPanel({
   game,
   gameDetails,
@@ -30,7 +32,7 @@ export function HeroPanel({
   getGame,
   isGamePlaying,
 }: HeroPanelProps) {
-  const { t } = useTranslation("game_details");
+  const { t, i18n } = useTranslation("game_details");
 
   const [showBinaryNotFoundModal, setShowBinaryNotFoundModal] = useState(false);
   const [lastTimePlayed, setLastTimePlayed] = useState("");
@@ -48,29 +50,36 @@ export function HeroPanel({
   } = useDownload();
   const isGameDownloading = isDownloading && gameDownloading?.id === game?.id;
 
-  const updateLastTimePlayed = useCallback(() => {
-    setLastTimePlayed(
-      formatDistance(game.lastTimePlayed, new Date(), {
-        addSuffix: true,
-      })
-    );
-  }, [game?.lastTimePlayed, formatDistance]);
-
   useEffect(() => {
     if (game?.lastTimePlayed) {
-      updateLastTimePlayed();
+      setLastTimePlayed(
+        formatDistance(game.lastTimePlayed, new Date(), {
+          addSuffix: true,
+        })
+      );
+    }
+  }, [game?.lastTimePlayed, formatDistance]);
 
-      const interval = setInterval(() => {
-        updateLastTimePlayed();
-      }, 1000);
+  const numberFormatter = useMemo(() => {
+    return new Intl.NumberFormat(i18n.language, {
+      maximumFractionDigits: 1,
+    });
+  }, [i18n]);
 
-      return () => {
-        clearInterval(interval);
-      };
+  const formatPlayTime = () => {
+    const milliseconds = game?.playTimeInMilliseconds || 0;
+    const seconds = milliseconds / 1000;
+    const minutes = seconds / 60;
+
+    if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+      return t("amount_minutes", {
+        amount: minutes.toFixed(0),
+      });
     }
 
-    return () => {};
-  }, [game?.lastTimePlayed, updateLastTimePlayed]);
+    const hours = minutes / 60;
+    return t("amount_hours", { amount: numberFormatter.format(hours) });
+  };
 
   const finalDownloadSize = useMemo(() => {
     if (!game) return "N/A";
@@ -139,7 +148,7 @@ export function HeroPanel({
         <>
           <p>
             {t("play_time", {
-              amount: formatDistance(0, game.playTimeInMilliseconds),
+              amount: formatPlayTime(game.playTimeInMilliseconds),
             })}
           </p>