Attempt to try to fix track progress going over duration

src/components/PlayingBarInfo/PlayingBarInfo.tsx

@@ -1,6 +1,6 @@
 import type { Repeat, Track } from '../../generated/typings';
+import useFormattedDuration from '../../hooks/useFormattedDuration';
 import usePlayingTrackCurrentTime from '../../hooks/usePlayingTrackCurrentTime';
-import * as utils from '../../lib/utils';
 import TrackProgress from '../TrackProgress/TrackProgress';
 
 import styles from './PlayingBarInfo.module.css';
@@ -14,11 +14,15 @@ type Props = {
 export default function PlayingBarInfo(props: Props) {
   const { trackPlaying } = props;
   const elapsed = usePlayingTrackCurrentTime();
+  const formattedDuration = useFormattedDuration(trackPlaying.duration);
+  const formattedProgress = useFormattedDuration(
+    Math.min(trackPlaying.duration, elapsed),
+  );
 
   return (
     <div className={styles.playingBar__info} data-tauri-drag-region>
       <div className={styles.playingBar__info__metas}>
-        <div className={styles.duration}>{utils.parseDuration(elapsed)}</div>
+        <div className={styles.duration}>{formattedProgress}</div>
 
         <div className={styles.metas}>
           <div className={`${styles.metadata} ${styles.metadataTitle}`}>
@@ -31,9 +35,7 @@ export default function PlayingBarInfo(props: Props) {
           </div>
         </div>
 
-        <div className={styles.duration}>
-          {utils.parseDuration(trackPlaying.duration)}
-        </div>
+        <div className={styles.duration}>{formattedDuration}</div>
       </div>
       <TrackProgress trackPlaying={trackPlaying} />
     </div>

src/components/TrackProgress/TrackProgress.tsx

@@ -3,9 +3,9 @@ import { useCallback, useState } from 'react';
 
 import type { Track } from '../../generated/typings';
 import usePlayingTrackCurrentTime from '../../hooks/usePlayingTrackCurrentTime';
-import { parseDuration } from '../../lib/utils';
 import { usePlayerAPI } from '../../stores/usePlayerStore';
 
+import useFormattedDuration from '../../hooks/useFormattedDuration';
 import styles from './TrackProgress.module.css';
 
 type Props = {
@@ -52,6 +52,8 @@ export default function TrackProgress(props: Props) {
     setTooltipX(null);
   }, []);
 
+  const tooltipContent = useFormattedDuration(tooltipTargetTime);
+
   return (
     <Slider.Root
       min={0}
@@ -72,7 +74,7 @@ export default function TrackProgress(props: Props) {
             display: tooltipX == null ? 'none' : 'block',
           }}
         >
-          {parseDuration(tooltipTargetTime)}
+          {tooltipContent}
         </div>
       </Slider.Track>
       <Slider.Thumb />

src/components/TrackRow/TrackRow.tsx

@@ -3,10 +3,10 @@ import type React from 'react';
 import { useCallback, useState } from 'react';
 
 import type { Track } from '../../generated/typings';
-import { parseDuration } from '../../lib/utils';
 import PlayingIndicator from '../PlayingIndicator/PlayingIndicator';
 import cellStyles from '../TracksListHeader/TracksListHeader.module.css';
 
+import useFormattedDuration from '../../hooks/useFormattedDuration';
 import styles from './TrackRow.module.css';
 
 type Props = {
@@ -53,6 +53,8 @@ export default function TrackRow(props: Props) {
     onDoubleClick,
   } = props;
 
+  const duration = useFormattedDuration(track.duration);
+
   // TODO: migrate to react-dnd
   const onDragStart = useCallback(
     (event: React.DragEvent<HTMLDivElement>) => {
@@ -134,7 +136,7 @@ export default function TrackRow(props: Props) {
         {track.title}
       </div>
       <div className={`${styles.cell} ${cellStyles.cellDuration}`}>
-        {parseDuration(track.duration)}
+        {duration}
       </div>
       <div className={`${styles.cell} ${cellStyles.cellArtist}`}>
         {track.artists.join(', ')}

src/hooks/useFormattedDuration.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+/**
+ * Parse an int to a more readable string
+ */
+export function parseDuration(maybe_duration: number | null): string {
+  if (maybe_duration !== null && !Number.isNaN(maybe_duration)) {
+    const duration = Math.trunc(maybe_duration);
+    const hours = Math.trunc(duration / 3600);
+    const minutes = Math.trunc(duration / 60) % 60;
+    const seconds = Math.trunc(duration) % 60;
+
+    const hoursStringified = hours < 10 ? `0${hours}` : hours;
+    const minutesStringified = minutes < 10 ? `0${minutes}` : minutes;
+    const secondsStringified = seconds < 10 ? `0${seconds}` : seconds;
+
+    let result = hours > 0 ? `${hoursStringified}:` : '';
+    result += `${minutesStringified}:${secondsStringified}`;
+
+    return result;
+  }
+
+  return '00:00';
+}
+
+/**
+ * Memoize a formatted duration for a given number
+ */
+export default function useFormattedDuration(duration: number | null): string {
+  const durationAsSeconds = duration !== null ? Math.trunc(duration) : null;
+
+  const display = useMemo(() => {
+    return parseDuration(durationAsSeconds);
+  }, [durationAsSeconds]);
+
+  return display;
+}

src/lib/utils-library.ts

@@ -2,8 +2,8 @@ import orderBy from 'lodash/orderBy';
 
 import type { Track } from '../generated/typings';
 
+import { parseDuration } from '../hooks/useFormattedDuration';
 import type { SortTuple } from './sort-orders';
-import * as utils from './utils';
 import { stripAccents } from './utils-id3';
 
 /**
@@ -35,7 +35,7 @@ export const sortTracks = (tracks: Track[], sort: SortTuple): Track[] => {
  * Format a list of tracks to a nice status
  */
 export const getStatus = (tracks: Track[]): string => {
-  const status = utils.parseDuration(
+  const status = parseDuration(
     tracks.map((d) => d.duration).reduce((a, b) => a + b, 0),
   );
   return `${tracks.length} tracks, ${status}`;

src/lib/utils.ts

@@ -2,28 +2,6 @@ import * as logger from '@tauri-apps/plugin-log';
 
 import useToastsStore from '../stores/useToastsStore';
 
-/**
- * Parse an int to a more readable string
- */
-export const parseDuration = (duration: number | null): string => {
-  if (duration !== null) {
-    const hours = Math.trunc(duration / 3600);
-    const minutes = Math.trunc(duration / 60) % 60;
-    const seconds = Math.trunc(duration) % 60;
-
-    const hoursStringified = hours < 10 ? `0${hours}` : hours;
-    const minutesStringified = minutes < 10 ? `0${minutes}` : minutes;
-    const secondsStringified = seconds < 10 ? `0${seconds}` : seconds;
-
-    let result = hours > 0 ? `${hoursStringified}:` : '';
-    result += `${minutesStringified}:${secondsStringified}`;
-
-    return result;
-  }
-
-  return '00:00';
-};
-
 /**
  * Friendly logging for caught errors
  * https://kentcdodds.com/blog/get-a-catch-block-error-message-with-typescript