[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients
docs.multi-scrobbler.app
deezer
docker
jellyfin
koito
lastfm
listenbrainz
maloja
mopidy
mpris
music
music-assistant
plex
scrobble
self-hosted
spotify
subsonic
tautulli
youtube-music
Improve layout for activity summary
+14
-21
+11
-18
src/client/components/ActivityDetail.tsx
+11
-18
src/client/components/ActivityDetail.tsx
···
39
39
sortBy
40
40
} = props;
41
41
return (
42
-
<Container fluid p="0">
43
-
<Flex justify="space-between">
44
-
<Stack alignContent="flex-start" textAlign="start" gap="1">
45
-
<Span>{play.data.track}</Span>
46
-
<TextMuted truncate>{play.data.artists.map(x => x.name).join(' / ')}</TextMuted>
47
-
<HStack gap="1">
48
-
<ShortDateDisplay date={sortBy === 'played' ? play.data.playDate : play.meta?.seenAt} prefix={sortBy === 'played' ? 'Played' : 'Seen'} /><Separator orientation="vertical" height="4" />
49
-
<TextMuted>{play.meta?.source}</TextMuted>
50
-
</HStack>
51
-
</Stack>
52
-
<Stack style={{
53
-
paddingBlock: "var(--accordion-padding-y)",
54
-
paddingInline: "var(--accordion-padding-x)"
55
-
}} justify="flex-start" alignItems="flex-end">
56
-
<PlayStateBadge maxWidth="fit-content" state={activity.state} />
57
-
</Stack>
42
+
<Flex direction="column" width="100%" truncate rowGap="0.5">
43
+
<Flex width="100%" truncate>
44
+
<Span truncate marginEnd="auto">{play.data.track}</Span>
45
+
<PlayStateBadge state={activity.state} />
46
+
</Flex>
47
+
<TextMuted truncate>{play.data.artists.map(x => x.name).join(' / ')}</TextMuted>
48
+
<HStack gap="1">
49
+
<ShortDateDisplay date={sortBy === 'played' ? play.data.playDate : play.meta?.seenAt} prefix={sortBy === 'played' ? 'Played' : 'Seen'} /><Separator orientation="vertical" height="4" />
50
+
<TextMuted>{play.meta?.source}</TextMuted>
51
+
</HStack>
58
52
</Flex>
59
-
</Container>
60
-
)
53
+
);
61
54
}
62
55
63
56
export const ActivitySummaryFetchable = (props: MarkOptional<ActivitySummaryProps, 'activity'> & { componentId: number, activityUid: string, query: QueryPlaysOpts}) => {
+3
-3
src/client/components/TextMuted.tsx
+3
-3
src/client/components/TextMuted.tsx
···
1
-
import { Text as ChakraText } from "@chakra-ui/react"
1
+
import { Text as ChakraText, Span } from "@chakra-ui/react"
2
2
import { ComponentProps } from "react"
3
3
4
4
export const TextMuted = (props: ComponentProps<typeof ChakraText>) => {
···
6
6
children,
7
7
...rest
8
8
} = props;
9
-
return <ChakraText textStyle="xs" color="fg.muted" {...rest}>{props.children}
10
-
</ChakraText>
9
+
return <Span textStyle="xs" color="fg.muted" {...rest}>{props.children}
10
+
</Span>
11
11
}