Fix album duration, simplify ScrobbleItem duration (#249)

* fix album duration format on Scrobble Album page
* use same logic to format durations of an album and a scrobble
* add utils.datetime.formatDuration unit tests

Author: mishmish-dev

src/components/ScrobbleItem.tsx

@@ -5,10 +5,6 @@ import { get } from 'lodash-es';
 
 import { enqueueScrobble } from 'store/actions/scrobbleActions';
 
-import format from 'date-fns/format';
-import isToday from 'date-fns/isToday';
-import getYear from 'date-fns/getYear';
-
 import { Button, Input, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, FormGroup, Label } from 'reactstrap';
 import { useState } from 'react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
@@ -31,6 +27,7 @@ import type { Scrobble } from 'utils/types/scrobble';
 
 import './ScrobbleItem.css';
 import { useSettings } from 'hooks/useSettings';
+import { formatDuration, formatScrobbleTimestamp } from 'utils/datetime';
 
 interface ScrobbleItemProps {
   scrobble: Scrobble;
@@ -110,8 +107,6 @@ export default function ScrobbleItem({
   let songInfo;
   let songFullTitle;
   let statusIcon;
-  let theTimestamp;
-  let timestampFormat = '';
 
   if (noCover || compact) {
     albumArt = null;
@@ -165,36 +160,15 @@ export default function ScrobbleItem({
     }
   }
 
-  if (scrobble.timestamp) {
-    const scrobbleDate = new Date(scrobble.timestamp);
-    if (!isToday(scrobbleDate)) {
-      timestampFormat = settings?.use12Hours ? 'M/d' : 'd/MM';
-      if (getYear(scrobbleDate) < getYear(new Date())) {
-        timestampFormat += '/yyyy';
-      }
-      timestampFormat += ' ';
-    }
-    timestampFormat += settings?.use12Hours ? 'hh:mm a' : 'HH:mm';
-    theTimestamp = format(scrobbleDate, timestampFormat);
-  } else {
-    if (scrobble.duration > 0) {
-      // Yes, there are songs over one hour. Is it worth making this more complex for those? (no, it isn't)
-      const minutes = Math.floor(scrobble.duration / 60);
-      const seconds = `0${scrobble.duration % 60}`.slice(-2);
-      theTimestamp = `${minutes}:${seconds}`;
-    } else {
-      theTimestamp = '';
-    }
-  }
-
   const timeOrDuration = (
     <small
       className={`text-end timestamp d-flex align-items-center ${compact ? 'flex-row' : 'flex-row-reverse'} ${
         !scrobble.timestamp && 'duration text-muted'
       }`}
     >
       {scrobble.timestamp && <FontAwesomeIcon className={`${compact ? 'me-2' : 'ms-2'}`} icon={faClock} />}
-      {theTimestamp}
+      {scrobble.timestamp && formatScrobbleTimestamp(scrobble.timestamp, settings?.use12Hours)}
+      {!scrobble.timestamp && scrobble.duration > 0 && formatDuration(scrobble.duration)}
     </small>
   );
 

src/domains/scrobbleAlbum/partials/Tracklist.tsx

@@ -5,7 +5,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import ReactGA from 'react-ga-neo';
 import addSeconds from 'date-fns/addSeconds';
 import subSeconds from 'date-fns/subSeconds';
-import format from 'date-fns/format';
 
 import { Alert, Badge, Button, FormGroup, Label, Input } from 'reactstrap';
 import { faShoppingCart, faStopwatch, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
@@ -24,6 +23,8 @@ import type { Album, DiscogsAlbum } from 'utils/types/album';
 import type { Scrobble } from 'utils/types/scrobble';
 import type { Track } from 'utils/types/track';
 
+import { formatDuration } from 'utils/datetime';
+
 const DateTimePicker = lazyWithPreload(() => import('components/DateTimePicker'));
 
 // ToDo: refactor this component completely.
@@ -42,7 +43,6 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
   const [totalDuration, setTotalDuration] = useState(0);
   const albumHasTracks = tracks && tracks.length > 0;
   const hasAlbumInfo = !!albumInfo && Object.keys(albumInfo).length > 0;
-  const durationFormat = totalDuration > 3600 ? 'H:mm:ss' : 'mm:ss';
 
   useEffect(() => {
     let newDuration = 0;
@@ -155,11 +155,7 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
               {tracks.length > 0 && (
                 <div className="album-heading-duration">
                   <FontAwesomeIcon icon={faStopwatch} className="me-2" color="var(--bs-gray)" />
-                  {totalDuration ? (
-                    format(addSeconds(new Date(0), totalDuration), durationFormat)
-                  ) : (
-                    <Trans i18nKey="unknown">Unknown</Trans>
-                  )}
+                  {totalDuration ? formatDuration(totalDuration) : <Trans i18nKey="unknown">Unknown</Trans>}
                 </div>
               )}
             </div>

src/utils/datetime.test.ts

@@ -0,0 +1,12 @@
+import { formatDuration } from './datetime';
+
+describe('`formatDuration` helper', () => {
+  it('is correct', () => {
+    expect(formatDuration(45)).toEqual('0:45');
+    expect(formatDuration(150)).toEqual('2:30');
+    expect(formatDuration(187)).toEqual('3:07');
+    expect(formatDuration(777)).toEqual('12:57');
+    expect(formatDuration(3801)).toEqual('1:03:21');
+    expect(formatDuration(4202)).toEqual('1:10:02');
+  });
+});

src/utils/datetime.ts

@@ -0,0 +1,28 @@
+import format from 'date-fns/format';
+import isToday from 'date-fns/isToday';
+import getYear from 'date-fns/getYear';
+
+function zeroPad(secondsOrMinutes: number): string {
+  return secondsOrMinutes < 10 ? '0' + secondsOrMinutes : secondsOrMinutes.toString();
+}
+
+export function formatDuration(totalSeconds: number): string {
+  const datetime = new Date(totalSeconds * 1000);
+  const h = datetime.getUTCHours();
+  const m = datetime.getUTCMinutes();
+  const s = datetime.getUTCSeconds();
+  return h > 0 ? `${h}:${zeroPad(m)}:${zeroPad(s)}` : `${m}:${zeroPad(s)}`;
+}
+
+export function formatScrobbleTimestamp(timestamp: Date, use12Hours: boolean): string {
+  let timestampFormat = '';
+  if (!isToday(timestamp)) {
+    timestampFormat = use12Hours ? 'M/d' : 'd/MM';
+    if (getYear(timestamp) < getYear(new Date())) {
+      timestampFormat += '/yyyy';
+    }
+    timestampFormat += ' ';
+  }
+  timestampFormat += use12Hours ? 'hh:mm a' : 'HH:mm';
+  return format(timestamp, timestampFormat);
+}