MBS-2768: Add acoustID info in the recording merge table

Display acoustIDs column in the recording merge tables and fetch data from api.acoustid.org. Displayed acoustIDs are shortened to 6 characters to have a good compromise between column width and clear display of unique/duplicate values. The React hook is set on the parent table (I don't think it can be attached to the column directly), which will make easier later to add another column e.g. for AcousticBrainz data.
metabrainz · Sep 17, 2020 · 53fc7e3 · 53fc7e3
1 parent 3326b3a
commit 53fc7e3
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 1 deletion.
diff --git a/root/components/list/RecordingList.js b/root/components/list/RecordingList.js
@@ -19,10 +19,12 @@ import {
   defineNameColumn,
   defineSeriesNumberColumn,
   defineTextColumn,
+  acoustIdColumn,
   isrcsColumn,
   ratingsColumn,
   removeFromMergeColumn,
 } from '../../utility/tableColumns';
+import hydrate from '../../utility/hydrate';
 
 type Props = {
   ...InstrumentCreditsAndRelTypesRoleT,
@@ -33,6 +35,7 @@ type Props = {
   +mergeForm?: MergeFormT,
   +order?: string,
   +recordings: $ReadOnlyArray<RecordingT>,
+  +showAcoustIds?: boolean,
   +showExpandedArtistCredits?: boolean,
   +showInstrumentCreditsAndRelTypes?: boolean,
   +showRatings?: boolean,
@@ -48,6 +51,7 @@ const RecordingList = ({
   order,
   recordings,
   seriesItemNumbers,
+  showAcoustIds = false,
   showExpandedArtistCredits = false,
   showInstrumentCreditsAndRelTypes = false,
   showRatings = false,
@@ -97,6 +101,7 @@ const RecordingList = ({
         artistCreditColumn,
         isrcsColumn,
         ...(showRatings ? [ratingsColumn] : []),
+        ...(showAcoustIds ? [acoustIdColumn] : []),
         lengthColumn,
         ...(instrumentUsageColumn ? [instrumentUsageColumn] : []),
         ...(mergeForm && recordings.length > 2
@@ -113,6 +118,7 @@ const RecordingList = ({
       order,
       recordings,
       seriesItemNumbers,
+      showAcoustIds,
       showExpandedArtistCredits,
       showInstrumentCreditsAndRelTypes,
       showRatings,
@@ -128,4 +134,7 @@ const RecordingList = ({
   );
 };
 
-export default RecordingList;
+export default (hydrate<Props>(
+  'div.recording-list',
+  RecordingList,
+): React.AbstractComponent<Props, void>);
diff --git a/root/recording/RecordingMerge.js b/root/recording/RecordingMerge.js
@@ -54,6 +54,7 @@ const RecordingMerge = ({
           $c={$c}
           mergeForm={form}
           recordings={sortByEntityName(toMerge)}
+          showAcoustIds
           showExpandedArtistCredits
         />
         <FieldErrors field={form.field.target} />

diff --git a/root/static/scripts/common.js b/root/static/scripts/common.js
@@ -30,6 +30,8 @@ require('./common/sentry');
 window.ko = require('knockout');
 window.$ = window.jQuery = require('jquery');
 
+require('../../components/list/RecordingList');
+
 require('../lib/jquery.ui/ui/jquery-ui.custom');
 
 require('./common/components/Annotation');

diff --git a/root/utility/tableColumns.js b/root/utility/tableColumns.js
@@ -503,6 +503,55 @@ export const isrcsColumn:
     accessor: 'isrcs',
   };
 
+const AcoustIdCell = ({
+  value,
+}: {value: string}): React.Element<typeof React.Fragment> => {
+  const url = '//api.acoustid.org/v2/track/list_by_mbid' +
+    `?format=json&disabled=1&mbid=${value}`;
+  const [tracks, setTracks] = React.useState([]);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  React.useEffect(() => {
+    fetch(url).then(
+      resp => resp.json(),
+    ).then(data => {
+      setTracks(data.tracks);
+      setIsLoaded(true);
+    });
+  }, [url]);
+
+  return (
+    <>
+      {isLoaded ? (
+        tracks.length ? (
+          <ul>
+            {tracks.map((track) => (
+              <li key={track.id}>
+                <code>
+                  <a
+                    className={'external' +
+                      (track.disabled ? ' disabled-acoustid' : '')}
+                    href={`//acoustid.org/track/${track.id}`}
+                  >
+                    {track.id.slice(0, 6) + '…'}
+                  </a>
+                </code>
+              </li>
+            ))}
+          </ul>
+        ) : null
+      ) : <p className="loading-message">{l('Loading...')}</p>}
+    </>
+  );
+};
+
+export const acoustIdColumn:
+  ColumnOptions<{+gid?: string, ...}, string> = {
+    Cell: ({cell: {value}}) => (<AcoustIdCell value={value} />),
+    Header: N_l('AcoustIDs'),
+    accessor: 'gid',
+    id: 'acoustid',
+  };
+
 export const iswcsColumn:
   ColumnOptions<{
     +iswcs: $ReadOnlyArray<IswcT>,