Add option to show track numbers in lists

Requested in #222

assets/db/migrations/0003_showTrackNumbers.sql

@@ -0,0 +1,5 @@
+BEGIN;
+  INSERT INTO migrations (revision) VALUES (3);
+  ALTER TABLE settings
+      ADD showTrackNumbers BOOLEAN DEFAULT 0;
+COMMIT;

cypress/fixtures/api/v2/user/authenticated.json

@@ -33,6 +33,7 @@
     "username": "cypress",
     "catchPaste": 1,
     "use12Hours": 0,
+    "showTrackNumbers": 0,
     "lang": "auto",
     "isDonor": 0,
     "keepOriginalTimestamp": 1,

cypress/fixtures/api/v2/user/donor.json

@@ -33,6 +33,7 @@
     "username": "cypress",
     "catchPaste": 1,
     "use12Hours": 0,
+    "showTrackNumbers": 0,
     "lang": "auto",
     "isDonor": 1,
     "keepOriginalTimestamp": 1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openscrobbler",
-  "version": "2.7.12",
+  "version": "2.7.13",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.1",

src/components/ScrobbleItem.js

@@ -204,6 +204,9 @@ class ScrobbleItem extends Component {
       // COMPACT view
       songInfo = (
         <Label className="d-flex align-items-center mb-0" htmlFor={scrobbleItemInputId}>
+          {!!this.props.settings.showTrackNumber && scrobble.trackNumber && (
+            <span className="me-1">{scrobble.trackNumber}.</span>
+          )}
           <span className="song flex-grow-1 pe-2 truncate">{songFullTitle}</span>
           {timeOrDuration}
         </Label>
@@ -292,8 +295,9 @@ class ScrobbleItem extends Component {
       );
     }
 
-    const scrobbleItemClasses =
-      `scrobbled-item status-${scrobble.status} ${(this.props.compact ? 'compact' : 'card mb-2')}`;
+    const scrobbleItemClasses = `scrobbled-item status-${scrobble.status} ${
+      this.props.compact ? 'compact' : 'card mb-2'
+    }`;
 
     // ToDo: evaluate using flex-nowrap instead of flex-wrap
     return (
@@ -348,6 +352,7 @@ ScrobbleItem.propTypes = {
   selected: PropTypes.bool,
   settings: PropTypes.shape({
     use12Hours: PropTypes.bool,
+    showTrackNumber: PropTypes.bool,
   }),
   t: PropTypes.func,
   uuid: PropTypes.string,

src/components/SettingsModal.js

@@ -72,6 +72,9 @@ class SettingsModal extends React.Component {
 
   render() {
     const t = this.props.t;
+    // ToDo: refactor this component ffs
+    // const trackNumbersEnabled = useFeatureIsOn('show-track-numbers');
+    const trackNumbersEnabled = false;
 
     return (
       <Modal
@@ -123,6 +126,12 @@ class SettingsModal extends React.Component {
                 <Input type="checkbox" {...this.createPropsForCheckbox('catchPaste')} />
                 {t('splitPastedText')}
               </Label>
+              {trackNumbersEnabled && (
+                <Label className="d-block" check>
+                  <Input type="checkbox" {...this.createPropsForCheckbox('showTrackNumbers')} />
+                  {t('showTrackNumbers')}
+                </Label>
+              )}
             </FormGroup>
           </Form>
         </ModalBody>

src/store/reducers/settingsReducer.js

@@ -11,6 +11,7 @@ const initialState = {
   lang: 'auto',
   use12Hours: false,
   catchPaste: true,
+  showTrackNumbers: false,
   isDonor: false,
   keepOriginalTimestamp: true,
   modalIsOpen: false,
@@ -27,6 +28,7 @@ const settingsReducer = (state = initialState, action) => {
         ...action.payload,
         use12Hours: !!action.payload.use12Hours,
         catchPaste: !!action.payload.catchPaste,
+        showTrackNumbers: !!action.payload.showTrackNumbers,
         isDonor: !!action.payload.isDonor,
         settingsLoaded: true,
       };

src/utils/clients/discogs/transformers/tracksResponse.transformer.test.ts

@@ -68,6 +68,7 @@ describe('Discogs transformer: tracks response', () => {
         duration: 259,
         uuid: 'fakeShortId',
         cover: null,
+        trackNumber: null,
       },
     ]);
   });

src/utils/clients/discogs/transformers/tracksResponse.transformer.ts

@@ -46,6 +46,7 @@ export function tracksTransformer(
         duration: track.duration && _HMSStrToSeconds(track.duration),
         uuid: shortid.generate(),
         cover: null,
+        trackNumber: track.position || null,
       };
 
       if (hasIn(options, 'cover')) {

src/utils/clients/lastfm/transformers/tracksResponse.transformer.test.ts

@@ -13,6 +13,9 @@ describe('the `tracksTransformer` function', () => {
                 },
                 name: 'track',
                 duration: '123',
+                '@attr': {
+                  rank: '2',
+                },
               },
             ],
           },
@@ -28,6 +31,7 @@ describe('the `tracksTransformer` function', () => {
         duration: 123,
         uuid: expect.anything(),
         cover: undefined,
+        trackNumber: 2,
       },
     ]);
   });

src/utils/clients/lastfm/transformers/tracksResponse.transformer.ts

@@ -18,6 +18,7 @@ export function tracksTransformer(response: any, options?: { album?: string; cov
       duration: track.duration ? parseInt(track.duration) : 0,
       uuid: shortid.generate(),
       cover: undefined,
+      trackNumber: track['@attr'] ? parseInt(track['@attr'].rank) : null,
     };
 
     if (hasIn(options, 'cover')) {