Something went wrong. Try again.
[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
Something went wrong. Try again.
2.3 kB · 71 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071import { Clipboard, IconButton, useClipboard } from "@chakra-ui/react";import { type ComponentProps, useCallback, useEffect, useMemo, useState } from 'react';import { safeStringify } from '../../core/StringUtils';import { CheckIcon, CopyIcon } from './icons/ChakraIcons';
export const ChakraClip = (props: Omit<ComponentProps<typeof Clipboard.Root>, 'children' | 'value'> & {value: any}) => { const { value, ...rest } = props; const clipVal = useMemo(() => { if(typeof value === 'string') { return value; } return safeStringify(value); },[value]) return ( <Clipboard.Root value={clipVal} {...rest}> <Clipboard.Trigger asChild> <IconButton variant="surface" size="xs"> <Clipboard.Indicator /> </IconButton> </Clipboard.Trigger> </Clipboard.Root> )}
const createCopyVal = (value: any) => { if(typeof value === 'string') { return value; } return safeStringify(value);}
/** * Copies value from onCopy only when clicked */export const ChakraClipDynamic = (props: Omit<ComponentProps<typeof Clipboard.Root>, 'children' | 'value'> & {onCopy: () => any}) => { const { onCopy, ...rest } = props;
// idk what's going on here exactly but just using clip.setValue does not set clipboard, it requires two clicks to get actual value // so instead using some useState abuse to re-render component and wait to copy until everything matches // probably related to this https://github.com/chakra-ui/chakra-ui/issues/6759
const [clipVal, setClipVal] = useState<string | undefined>(); const clip = useClipboard({timeout: 1000});
useEffect(() => { if(clipVal !== undefined && clip.value === clipVal) { //console.log('run copy'); clip.copy(); setClipVal(undefined); } },[clip.value, clipVal, setClipVal]); const invokeCopy = useCallback(() => { const val = createCopyVal(onCopy()); //console.log(val); setClipVal(val); clip.setValue(val); },[onCopy, clip.setValue]); return ( <IconButton variant="surface" size="xs" onClick={invokeCopy}> {!clip.copied ? <CopyIcon/> : <CheckIcon/>} </IconButton> )}