fix: use minutes instead of hours for time listened

client/app/routes/MediaItems/Album.tsx

@@ -19,42 +19,58 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
 
 export default function Album() {
   const album = useLoaderData() as Album;
-  const [period, setPeriod] = useState('week')
+  const [period, setPeriod] = useState("week");
 
-  console.log(album)
+  console.log(album);
 
   return (
-    <MediaLayout type="Album"
-        title={album.title}
-        img={album.image}
-        id={album.id}
-        musicbrainzId={album.musicbrainz_id}
-        imgItemId={album.id}
-        mergeFunc={mergeAlbums}
-        mergeCleanerFunc={(r, id) => {
-            r.artists = []
-            r.tracks = []
-            for (let i = 0; i < r.albums.length; i ++) {
-                if (r.albums[i].id === id) {
-                    delete r.albums[i]
-                }
-            }
-            return r
-        }}
-        subContent={<div className="flex flex-col gap-2 items-start">
-        {album.listen_count && <p>{album.listen_count} play{ album.listen_count > 1 ? 's' : ''}</p>}
-        {<p title={Math.floor(album.time_listened / 60) + " minutes"}>{timeListenedString(album.time_listened)}</p>}
-        {<p title={new Date(album.first_listen * 1000).toLocaleString()}>Listening since {new Date(album.first_listen * 1000).toLocaleDateString()}</p>}
-        </div>}
+    <MediaLayout
+      type="Album"
+      title={album.title}
+      img={album.image}
+      id={album.id}
+      musicbrainzId={album.musicbrainz_id}
+      imgItemId={album.id}
+      mergeFunc={mergeAlbums}
+      mergeCleanerFunc={(r, id) => {
+        r.artists = [];
+        r.tracks = [];
+        for (let i = 0; i < r.albums.length; i++) {
+          if (r.albums[i].id === id) {
+            delete r.albums[i];
+          }
+        }
+        return r;
+      }}
+      subContent={
+        <div className="flex flex-col gap-2 items-start">
+          {album.listen_count && (
+            <p>
+              {album.listen_count} play{album.listen_count > 1 ? "s" : ""}
+            </p>
+          )}
+          {
+            <p title={Math.floor(album.time_listened / 60 / 60) + " hours"}>
+              {timeListenedString(album.time_listened)}
+            </p>
+          }
+          {
+            <p title={new Date(album.first_listen * 1000).toLocaleString()}>
+              Listening since{" "}
+              {new Date(album.first_listen * 1000).toLocaleDateString()}
+            </p>
+          }
+        </div>
+      }
     >
-        <div className="mt-10">
-            <PeriodSelector setter={setPeriod} current={period} />
-        </div>
-        <div className="flex flex-wrap gap-20 mt-10">
-            <LastPlays limit={30} albumId={album.id} />
-            <TopTracks limit={12} period={period} albumId={album.id} />
-            <ActivityGrid configurable albumId={album.id} />
-        </div>
+      <div className="mt-10">
+        <PeriodSelector setter={setPeriod} current={period} />
+      </div>
+      <div className="flex flex-wrap gap-20 mt-10">
+        <LastPlays limit={30} albumId={album.id} />
+        <TopTracks limit={12} period={period} albumId={album.id} />
+        <ActivityGrid configurable albumId={album.id} />
+      </div>
     </MediaLayout>
   );
 }

client/app/routes/MediaItems/Artist.tsx

@@ -20,50 +20,66 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
 
 export default function Artist() {
   const artist = useLoaderData() as Artist;
-  const [period, setPeriod] = useState('week')
+  const [period, setPeriod] = useState("week");
 
   // remove canonical name from alias list
-  console.log(artist.aliases)
+  console.log(artist.aliases);
   let index = artist.aliases.indexOf(artist.name);
   if (index !== -1) {
     artist.aliases.splice(index, 1);
   }
 
   return (
-    <MediaLayout type="Artist"
-        title={artist.name}
-        img={artist.image}
-        id={artist.id}
-        musicbrainzId={artist.musicbrainz_id}
-        imgItemId={artist.id}
-        mergeFunc={mergeArtists}
-        mergeCleanerFunc={(r, id) => {
-            r.albums = []
-            r.tracks = []
-            for (let i = 0; i < r.artists.length; i ++) {
-                if (r.artists[i].id === id) {
-                    delete r.artists[i]
-                }
-            }
-            return r
-        }}
-        subContent={<div className="flex flex-col gap-2 items-start">
-        {artist.listen_count && <p>{artist.listen_count} play{ artist.listen_count > 1 ? 's' : ''}</p>}
-        {<p title={Math.floor(artist.time_listened / 60) + " minutes"}>{timeListenedString(artist.time_listened)}</p>}
-        {<p title={new Date(artist.first_listen * 1000).toLocaleString()}>Listening since {new Date(artist.first_listen * 1000).toLocaleDateString()}</p>}
-        </div>}
+    <MediaLayout
+      type="Artist"
+      title={artist.name}
+      img={artist.image}
+      id={artist.id}
+      musicbrainzId={artist.musicbrainz_id}
+      imgItemId={artist.id}
+      mergeFunc={mergeArtists}
+      mergeCleanerFunc={(r, id) => {
+        r.albums = [];
+        r.tracks = [];
+        for (let i = 0; i < r.artists.length; i++) {
+          if (r.artists[i].id === id) {
+            delete r.artists[i];
+          }
+        }
+        return r;
+      }}
+      subContent={
+        <div className="flex flex-col gap-2 items-start">
+          {artist.listen_count && (
+            <p>
+              {artist.listen_count} play{artist.listen_count > 1 ? "s" : ""}
+            </p>
+          )}
+          {
+            <p title={Math.floor(artist.time_listened / 60 / 60) + " hours"}>
+              {timeListenedString(artist.time_listened)}
+            </p>
+          }
+          {
+            <p title={new Date(artist.first_listen * 1000).toLocaleString()}>
+              Listening since{" "}
+              {new Date(artist.first_listen * 1000).toLocaleDateString()}
+            </p>
+          }
+        </div>
+      }
     >
-        <div className="mt-10">
-            <PeriodSelector setter={setPeriod} current={period} />
-        </div>
-        <div className="flex flex-col gap-20">
-            <div className="flex gap-15 mt-10 flex-wrap">
-                <LastPlays limit={20} artistId={artist.id} />
-                <TopTracks limit={8} period={period} artistId={artist.id} />
-                <ActivityGrid configurable artistId={artist.id} />
-            </div>
-            <ArtistAlbums period={period} artistId={artist.id} name={artist.name} />
+      <div className="mt-10">
+        <PeriodSelector setter={setPeriod} current={period} />
+      </div>
+      <div className="flex flex-col gap-20">
+        <div className="flex gap-15 mt-10 flex-wrap">
+          <LastPlays limit={20} artistId={artist.id} />
+          <TopTracks limit={8} period={period} artistId={artist.id} />
+          <ActivityGrid configurable artistId={artist.id} />
         </div>
+        <ArtistAlbums period={period} artistId={artist.id} name={artist.name} />
+      </div>
     </MediaLayout>
   );
 }

client/app/routes/MediaItems/Track.tsx

@@ -8,55 +8,73 @@ import ActivityGrid from "~/components/ActivityGrid";
 import { timeListenedString } from "~/utils/utils";
 
 export async function clientLoader({ params }: LoaderFunctionArgs) {
-    let res = await fetch(`/apis/web/v1/track?id=${params.id}`);
-    if (!res.ok) {
-        throw new Response("Failed to load track", { status: res.status });
-    }
-    const track: Track = await res.json();
-    res = await fetch(`/apis/web/v1/album?id=${track.album_id}`)
-    if (!res.ok) {
-        throw new Response("Failed to load album for track", { status: res.status })
-    }
-    const album: Album = await res.json()
-    return {track: track, album: album};
+  let res = await fetch(`/apis/web/v1/track?id=${params.id}`);
+  if (!res.ok) {
+    throw new Response("Failed to load track", { status: res.status });
+  }
+  const track: Track = await res.json();
+  res = await fetch(`/apis/web/v1/album?id=${track.album_id}`);
+  if (!res.ok) {
+    throw new Response("Failed to load album for track", {
+      status: res.status,
+    });
+  }
+  const album: Album = await res.json();
+  return { track: track, album: album };
 }
 
 export default function Track() {
-    const { track, album } = useLoaderData();
-    const [period, setPeriod] = useState('week')
+  const { track, album } = useLoaderData();
+  const [period, setPeriod] = useState("week");
 
-    return (
-        <MediaLayout type="Track"
-            title={track.title}
-            img={track.image}
-            id={track.id}
-            musicbrainzId={album.musicbrainz_id}
-            imgItemId={track.album_id}
-            mergeFunc={mergeTracks}
-            mergeCleanerFunc={(r, id) => {
-                r.albums = []
-                r.artists = []
-                for (let i = 0; i < r.tracks.length; i ++) {
-                    if (r.tracks[i].id === id) {
-                        delete r.tracks[i]
-                    }
-                }
-                return r
-            }}
-            subContent={<div className="flex flex-col gap-2 items-start">
-            <Link to={`/album/${track.album_id}`}>appears on {album.title}</Link>
-            {track.listen_count && <p>{track.listen_count} play{ track.listen_count > 1 ? 's' : ''}</p>}
-            {<p title={Math.floor(track.time_listened / 60) + " minutes"}>{timeListenedString(track.time_listened)}</p>}
-            {<p title={new Date(track.first_listen * 1000).toLocaleString()}>Listening since {new Date(track.first_listen * 1000).toLocaleDateString()}</p>}
-            </div>}
-        >
-            <div className="mt-10">
-                <PeriodSelector setter={setPeriod} current={period} />
-            </div>
-            <div className="flex flex-wrap gap-20 mt-10">
-                <LastPlays limit={20} trackId={track.id}/>
-                <ActivityGrid trackId={track.id} configurable />
-            </div>
-        </MediaLayout>
-    )
+  return (
+    <MediaLayout
+      type="Track"
+      title={track.title}
+      img={track.image}
+      id={track.id}
+      musicbrainzId={album.musicbrainz_id}
+      imgItemId={track.album_id}
+      mergeFunc={mergeTracks}
+      mergeCleanerFunc={(r, id) => {
+        r.albums = [];
+        r.artists = [];
+        for (let i = 0; i < r.tracks.length; i++) {
+          if (r.tracks[i].id === id) {
+            delete r.tracks[i];
+          }
+        }
+        return r;
+      }}
+      subContent={
+        <div className="flex flex-col gap-2 items-start">
+          <Link to={`/album/${track.album_id}`}>appears on {album.title}</Link>
+          {track.listen_count && (
+            <p>
+              {track.listen_count} play{track.listen_count > 1 ? "s" : ""}
+            </p>
+          )}
+          {
+            <p title={Math.floor(track.time_listened / 60 / 60) + " hours"}>
+              {timeListenedString(track.time_listened)}
+            </p>
+          }
+          {
+            <p title={new Date(track.first_listen * 1000).toLocaleString()}>
+              Listening since{" "}
+              {new Date(track.first_listen * 1000).toLocaleDateString()}
+            </p>
+          }
+        </div>
+      }
+    >
+      <div className="mt-10">
+        <PeriodSelector setter={setPeriod} current={period} />
+      </div>
+      <div className="flex flex-wrap gap-20 mt-10">
+        <LastPlays limit={20} trackId={track.id} />
+        <ActivityGrid trackId={track.id} configurable />
+      </div>
+    </MediaLayout>
+  );
 }