show original and release dates in album grid

Signed-off-by: Deluan <deluan@navidrome.org>

persistence/album_repository.go

@@ -100,6 +100,7 @@ func NewAlbumRepository(ctx context.Context, db dbx.Builder) model.AlbumReposito
 		"name":         "order_album_name, order_album_artist_name",
 		"artist":       "compilation, order_album_artist_name, order_album_name",
 		"album_artist": "compilation, order_album_artist_name, order_album_name",
+		// TODO Rename this to just year (or date)
 		"max_year":       "coalesce(nullif(original_date,''), cast(max_year as text)), release_date, name",
 		"random":         "random",
 		"recently_added": recentlyAddedSort(),

ui/src/album/AlbumDatesField.jsx

@@ -0,0 +1,19 @@
+import { useRecordContext } from 'react-admin'
+import { formatRange } from '../common/index.js'
+
+const originalYearSymbol = '♫'
+const releaseYearSymbol = '○'
+
+export const AlbumDatesField = ({ className, ...rest }) => {
+  const record = useRecordContext(rest)
+  const releaseDate = record.releaseDate
+  const releaseYear = releaseDate?.toString().substring(0, 4)
+  const yearRange =
+    formatRange(record, 'originalYear').toString() || record['maxYear']
+  let label = yearRange
+
+  if (yearRange !== releaseYear && releaseYear !== undefined) {
+    label = `${originalYearSymbol} ${yearRange} · ${releaseYearSymbol} ${releaseYear}`
+  }
+  return <span className={className}>{label}</span>
+}

ui/src/album/AlbumGridView.jsx

@@ -13,14 +13,10 @@ import { linkToRecord, useListContext, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
 import { useDrag } from 'react-dnd'
 import subsonic from '../subsonic'
-import {
-  AlbumContextMenu,
-  PlayButton,
-  ArtistLinkField,
-  RangeDoubleField,
-} from '../common'
+import { AlbumContextMenu, PlayButton, ArtistLinkField } from '../common'
 import { DraggableTypes } from '../consts'
 import clsx from 'clsx'
+import { AlbumDatesField } from './AlbumDatesField.jsx'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -187,16 +183,7 @@ const AlbumGridTile = ({ showArtist, record, basePath, ...props }) => {
       {showArtist ? (
         <ArtistLinkField record={record} className={classes.albumSubtitle} />
       ) : (
-        <RangeDoubleField
-          record={record}
-          source={'year'}
-          symbol1={'♫'}
-          symbol2={'○'}
-          separator={' · '}
-          sortBy={'max_year'}
-          sortByOrder={'DESC'}
-          className={classes.albumSubtitle}
-        />
+        <AlbumDatesField record={record} className={classes.albumSubtitle} />
       )}
     </div>
   )

ui/src/artist/ArtistShow.jsx

@@ -50,7 +50,7 @@ const ArtistDetails = (props) => {
   )
 }
 
-const AlbumShowLayout = (props) => {
+const ArtistShowLayout = (props) => {
   const showContext = useShowContext(props)
   const record = useRecordContext()
   const { width } = props
@@ -98,7 +98,7 @@ const ArtistShow = withWidth()((props) => {
   const controllerProps = useShowController(props)
   return (
     <ShowContextProvider value={controllerProps}>
-      <AlbumShowLayout {...controllerProps} />
+      <ArtistShowLayout {...controllerProps} />
     </ShowContextProvider>
   )
 })

ui/src/common/RangeDoubleField.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useRecordContext } from 'react-admin'
-import { formatRange } from '../common'
-
-export const RangeDoubleField = ({
-  className,
-  source,
-  symbol1,
-  symbol2,
-  separator,
-  ...rest
-}) => {
-  const record = useRecordContext(rest)
-  const yearRange = formatRange(record, source).toString()
-  const releases = [record.releases]
-  const releaseDate = [record.releaseDate]
-  const releaseYear = releaseDate.toString().substring(0, 4)
-  let subtitle = yearRange
-
-  if (releases > 1) {
-    subtitle = [
-      [yearRange && symbol1, yearRange].join(' '),
-      ['(', releases, ')))'].join(' '),
-    ].join(separator)
-  }
-
-  if (
-    yearRange !== releaseYear &&
-    yearRange.length > 0 &&
-    releaseYear.length > 0
-  ) {
-    subtitle = [
-      [yearRange && symbol1, yearRange].join(' '),
-      [symbol2, releaseYear].join(' '),
-    ].join(separator)
-  }
-
-  return <span className={className}>{subtitle}</span>
-}
-
-RangeDoubleField.propTypes = {
-  label: PropTypes.string,
-  record: PropTypes.object,
-  source: PropTypes.string.isRequired,
-}
-
-RangeDoubleField.defaultProps = {
-  addLabel: true,
-}

ui/src/common/index.js

@@ -13,7 +13,6 @@ export * from './Pagination'
 export * from './PlayButton'
 export * from './QuickFilter'
 export * from './RangeField'
-export * from './RangeDoubleField'
 export * from './ShuffleAllButton'
 export * from './SimpleList'
 export * from './SizeField'