[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
Add placeholder action buttons to play detail
+38
-8
+9
-2
src/client/components/ActivityDetail.tsx
+9
-2
src/client/components/ActivityDetail.tsx
···
1
1
import React, { ComponentProps, useState, Fragment } from "react"
2
-
import { Accordion, For, Span, Stack, Text, Box, AbsoluteCenter, Button, Separator, HStack, Flex, Badge, IconButton, Container, Icon, useAccordionItemContext, Skeleton, SkeletonText, Collapsible } from '@chakra-ui/react';
2
+
import { Accordion, For, Span, Stack, Text, Box, AbsoluteCenter, Button, Clipboard, Separator, HStack, Flex, Badge, IconButton, Container, Icon, useAccordionItemContext, Skeleton, SkeletonText, Collapsible } from '@chakra-ui/react';
3
3
import { ComponentType, Second } from "../../core/Atomic";
4
4
import { PlayData } from "./PlayData";
5
5
import { ErrorAlert } from "./ErrorAlert";
···
20
20
import { PaginatedResponse } from "../../backend/common/database/drizzle/repositories/BaseRepository";
21
21
import { LuChevronRight } from "react-icons/lu";
22
22
import { useSSEContext, useSSEEvent } from "@flamefrontend/sse-runtime-react";
23
+
import { DebugCopy, RetryButton } from "./icons/ChakraIcons";
23
24
24
25
export interface ActivityDetailProps {
25
26
activity: PlayApiCommonDetailed
···
113
114
const [collapsibleOpen, setCollapsibleOpen] = useState(undefined);
114
115
115
116
return (
116
-
<Stack>
117
+
<Stack gap="2">
118
+
<Flex justifyContent="flex-end">
119
+
<HStack>
120
+
<RetryButton/>
121
+
<DebugCopy value={JSON.stringify(activity)}/>
122
+
</HStack>
123
+
</Flex>
117
124
{error !== undefined && error !== null ? <ErrorAlert error={error} /> : null}
118
125
<Accordion.Root width="full" variant="enclosed" collapsible multiple>
119
126
<Accordion.Item value="info">
+29
-6
src/client/components/icons/ChakraIcons.tsx
+29
-6
src/client/components/icons/ChakraIcons.tsx
···
1
-
import { LuChevronRight, LuChevronLeft, LuActivity, LuGithub, LuTerminal, LuAlignJustify, LuX, LuExternalLink, LuArrowUp, LuArrowDown, LuEllipsis, LuArrowBigRight } from "react-icons/lu"
1
+
import { LuChevronRight, LuChevronLeft, LuActivity, LuGithub, LuTerminal, LuAlignJustify, LuX, LuCheck, LuExternalLink, LuArrowUp, LuArrowDown, LuEllipsis, LuArrowBigRight, LuBug } from "react-icons/lu"
2
+
import { VscDebugRestart } from 'react-icons/vsc';
2
3
import { RiZzzFill } from "react-icons/ri";
3
4
import { SiGoogledocs } from "react-icons/si";
4
-
import { IconButton } from "@chakra-ui/react"
5
-
import { ComponentProps } from 'react';
5
+
import { IconButton, Clipboard, useClipboard } from "@chakra-ui/react"
6
+
import { ComponentProps, PropsWithChildren } from 'react';
6
7
import { IconType } from "react-icons/lib";
7
8
8
-
export const makeIconButton = (Icon: IconType) => (props: ComponentProps<typeof IconButton>) => (
9
+
export const makeIconButton = (Icon: IconType) => (props: PropsWithChildren<ComponentProps<typeof IconButton>>) => (
9
10
<IconButton variant="surface" size="xs" {...props}>
10
-
<Icon />
11
+
<Icon />{props.children}
11
12
</IconButton>
12
13
);
13
14
···
79
80
export const EllipsisIcon = LuEllipsis;
80
81
export const EllipsisButton = makeIconButton(EllipsisIcon);
81
82
82
-
export const FatArrowRight = LuArrowBigRight;
83
+
export const FatArrowRight = LuArrowBigRight;
84
+
85
+
export const DebugIcon = LuBug;
86
+
export const DebugButton = makeIconButton(DebugIcon);
87
+
88
+
export const DebugCopy = (props: {value: Clipboard.RootProps['value']} & ComponentProps<typeof IconButton>) => {
89
+
const {
90
+
value,
91
+
onClick,
92
+
children,
93
+
...rest
94
+
} = props;
95
+
const clipboard = useClipboard({value: value});
96
+
97
+
return (
98
+
<IconButton variant="surface" size="xs" onClick={clipboard.copy} {...rest}>
99
+
{clipboard.copied ? <LuCheck/> : <DebugIcon/>}{children}
100
+
</IconButton>
101
+
)
102
+
}
103
+
104
+
export const RetryIcon = VscDebugRestart;
105
+
export const RetryButton = makeIconButton(RetryIcon);