diff --git a/src/client/components/ArtistCreditDisplay.tsx b/src/client/components/ArtistCreditDisplay.tsx
new file mode 100644
index 00000000..5b6d53a4
--- /dev/null
+++ b/src/client/components/ArtistCreditDisplay.tsx
@@ -0,0 +1,38 @@
+import React, { Fragment } from 'react';
+import { ArtistCredit as AC } from '../../core/Atomic';
+
+import { HStack, Tag } from "@chakra-ui/react"
+import { SiMusicbrainz } from "react-icons/si";
+import { Tooltip } from './ChakraTooltip';
+
+export const ArtistCredit = (props: { data: AC, showIdLink?: boolean }) => {
+
+ const {
+ data,
+ showIdLink = true
+ } = props;
+
+ if (!showIdLink || Object.keys(data).length === 1) {
+ return data.name;
+ }
+
+ return
+
+ {data.name}
+
+ {data.mbid !== undefined ? : null}
+
+
+
+
+}
+
+export const ArtistCreditTags = (props: { data: AC[], showIdLink?: boolean }) => {
+ return {props.data.map((x, index) => {
+ return (
+
+
+
+ );
+ })}
+}
\ No newline at end of file
diff --git a/src/client/components/ChakraTooltip.tsx b/src/client/components/ChakraTooltip.tsx
new file mode 100644
index 00000000..0129778d
--- /dev/null
+++ b/src/client/components/ChakraTooltip.tsx
@@ -0,0 +1,46 @@
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+ showArrow?: boolean
+ portalled?: boolean
+ portalRef?: React.RefObject
+ content: React.ReactNode
+ contentProps?: ChakraTooltip.ContentProps
+ disabled?: boolean
+}
+
+export const Tooltip = React.forwardRef(
+ function Tooltip(props, ref) {
+ const {
+ showArrow,
+ children,
+ disabled,
+ portalled = true,
+ content,
+ contentProps,
+ portalRef,
+ ...rest
+ } = props
+
+ if (disabled) return children
+
+ return (
+
+ {children}
+
+
+
+ {showArrow && (
+
+
+
+ )}
+ {content}
+
+
+
+
+ )
+ },
+)
diff --git a/src/client/components/PlayData.tsx b/src/client/components/PlayData.tsx
index d764aa91..f387d412 100644
--- a/src/client/components/PlayData.tsx
+++ b/src/client/components/PlayData.tsx
@@ -1,5 +1,5 @@
import React, { Fragment, useMemo, useState } from 'react';
-import { EmptyState, DataList, HStack, Tag, Tabs, Wrap, Box, Flex, SegmentGroup, Stack, Text, Separator, IconButton, Container, SimpleGrid, Float, Spacer, Icon, Link, Span, Show } from "@chakra-ui/react"
+import { EmptyState, DataList, HStack, Tag, Tabs, Wrap, Box, Flex, SegmentGroup, Stack, Text, Tooltip, Separator, IconButton, Container, SimpleGrid, Float, Spacer, Icon, Link, Span, Show } from "@chakra-ui/react"
import { LuCode, LuText, LuCheck, LuX } from "react-icons/lu"
import { JsonPlayObject, PlayObjectLifecycleless } from '../../core/Atomic.js';
import { shortTodayAwareFormat, timeToHumanTimestamp } from '../../core/TimeUtils.js';
@@ -8,6 +8,7 @@ import { ChakraCodeBlock } from './CodeBlock.js';
import { TextMuted } from './TextMuted.js';
import { formatNumber } from '../../core/DataUtils.js';
import { Muted } from './Typography.js';
+import { ArtistCreditTags } from './ArtistCreditDisplay.js';
const EmptyPlayData = () => {
return (
@@ -102,13 +103,7 @@ export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDa
Album Artists
- {play.data.albumArtists.map((x, index) => {
- return (
-
- {x}
-
- );
- })}
+
);
@@ -151,13 +146,7 @@ export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDa
Artists
{artists.length === 0 ? (No Artists) :
- {play.data.artists.map((x, index) => {
- return (
-
- {x.name}
-
- );
- })}}
+ }
{albumArtistElm}
diff --git a/src/client/components/playActivity/PlayList.tsx b/src/client/components/playActivity/PlayList.tsx
index 94549c4e..7b7a2c14 100644
--- a/src/client/components/playActivity/PlayList.tsx
+++ b/src/client/components/playActivity/PlayList.tsx
@@ -168,7 +168,7 @@ const VirtualizedCollapse = (props: { data: PlayActivity[] }) => {
{play.data.track}
- {play.data.artists.join(' / ')}
+ {play.data.artists.map(x => x.name).join(' / ')}
{play.meta?.source}
@@ -260,7 +260,7 @@ const VirtualizedAccordian = (props: { data: PlayActivity[] }) => {
{play.data.track}
- {play.data.artists.join(' / ')}
+ {play.data.artists.map(x => x.name).join(' / ')}
{play.meta?.source}
@@ -331,7 +331,7 @@ const PlainAccordian = (props: { data: PlayActivity[], sortBy: 'played' | 'seen'
{play.data.track}
- {play.data.artists.join(' / ')}
+ {play.data.artists.map(x => x.name).join(' / ')}
{play.meta?.source}
diff --git a/src/stories/PlayInfo.stories.tsx b/src/stories/PlayInfo.stories.tsx
index c8f71270..b5196a0f 100644
--- a/src/stories/PlayInfo.stories.tsx
+++ b/src/stories/PlayInfo.stories.tsx
@@ -5,14 +5,16 @@ import { fn } from 'storybook/test';
import { PlayData } from "../client/components/PlayData.js";
import {Provider} from "../client/components/Provider";
import { Container } from '@chakra-ui/react';
-import { generateArtists, generateJsonPlay, generatePlay, withBrainz } from "../core/PlayTestUtils.js"
+import { generateArtistCredits, generateArtists, generateJsonPlay, generatePlay, withBrainz } from "../core/PlayTestUtils.js"
import clone from "clone";
import { asJsonPlayObject } from '../core/PlayMarshalUtils.js';
+import { JsonPlayObject } from "../core/Atomic.js";
type PropsAndCustomArgs = React.ComponentProps & {
includeAlbumArtists?: boolean;
defaultFinal?: boolean
brainz?: boolean
+ play: JsonPlayObject
};
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = preview.type<{args: PropsAndCustomArgs}>().meta({
@@ -48,7 +50,7 @@ export const PlayInfoStory = meta.story({
}
if(args.includeAlbumArtists && (args.play.data.albumArtists === undefined || args.play.data.albumArtists.length === 0)) {
- const aa = generateArtists(undefined, 2);
+ const aa = generateArtistCredits(undefined, 2, {mbidVal: true});
args.play.data.albumArtists = aa;
if(args.final !== undefined) {
args.final.data.albumArtists = aa;