diff --git a/packages/mobile/src/components/details-tile/DetailsTile.tsx b/packages/mobile/src/components/details-tile/DetailsTile.tsx index 8dc5fe9654b..24d9d3796e4 100644 --- a/packages/mobile/src/components/details-tile/DetailsTile.tsx +++ b/packages/mobile/src/components/details-tile/DetailsTile.tsx @@ -392,7 +392,11 @@ export const DetailsTile = ({ contentType={contentType} /> ) : null} - + const Metadata = (props: MetadataProps) => { - const { label, value } = props + const { label, children } = props return ( @@ -28,35 +32,49 @@ const Metadata = (props: MetadataProps) => { {label} {' '} - {value} + {children} ) } type DetailsTileMetadataProps = { + id?: ID genre?: string mood?: Nullable } export const DetailsTileMetadata = (props: DetailsTileMetadataProps) => { - const { genre, mood } = props + const { id, genre, mood } = props const { spacing } = useTheme() - if (!genre && !mood) return null + const { data: albumInfo } = trpc.tracks.getAlbumBacklink.useQuery( + // @ts-ignore enabled flag handles the case where track is undefined + { trackId: id }, + { enabled: !!id } + ) + + if (!genre && !mood && !albumInfo) return null return ( - - {genre ? : null} + + {genre ? {genre} : null} {mood ? ( - + {mood} ) : null} + {albumInfo ? ( + + + {albumInfo.playlist_name} + + + ) : null} ) }