diff --git a/apps/client/src/common/components/copy-tag/CopyTag.tsx b/apps/client/src/common/components/copy-tag/CopyTag.tsx index 4306560ae..82aa6171c 100644 --- a/apps/client/src/common/components/copy-tag/CopyTag.tsx +++ b/apps/client/src/common/components/copy-tag/CopyTag.tsx @@ -4,6 +4,7 @@ import { IoCopy } from '@react-icons/all-files/io5/IoCopy'; import { tooltipDelayFast } from '../../../ontimeConfig'; import { Size } from '../../models/Util.type'; +import copyToClipboard from '../../utils/copyToClipboard'; interface CopyTagProps { label: string; @@ -14,10 +15,7 @@ interface CopyTagProps { export default function CopyTag(props: PropsWithChildren) { const { label, className, size = 'xs', children } = props; - const handleClick = () => { - // we need to this as a promise because safari - setTimeout(async () => await navigator.clipboard.writeText(children as string)); - }; + const handleClick = () => copyToClipboard(children as string); return ( diff --git a/apps/client/src/common/utils/copyToClipboard.ts b/apps/client/src/common/utils/copyToClipboard.ts new file mode 100644 index 000000000..8423ab693 --- /dev/null +++ b/apps/client/src/common/utils/copyToClipboard.ts @@ -0,0 +1,4 @@ +// we need to this as a promise because safari +export default async function copyToClipboard(text: string) { + setTimeout(async () => await navigator.clipboard.writeText(text)); +} diff --git a/apps/client/src/features/rundown/event-block/EventBlock.tsx b/apps/client/src/features/rundown/event-block/EventBlock.tsx index dc803ddcd..a2945ce1f 100644 --- a/apps/client/src/features/rundown/event-block/EventBlock.tsx +++ b/apps/client/src/features/rundown/event-block/EventBlock.tsx @@ -1,12 +1,15 @@ import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; -import { IoAdd } from '@react-icons/all-files/io5/IoAdd'; +import { IoCopyOutline } from '@react-icons/all-files/io5/IoCopyOutline'; +import { IoPeopleOutline } from '@react-icons/all-files/io5/IoPeopleOutline'; import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo'; import { EndAction, OntimeEvent, Playback, TimerType } from 'ontime-types'; import { useContextMenu } from '../../../common/hooks/useContextMenu'; +import { useEventAction } from '../../../common/hooks/useEventAction'; import { useAppMode } from '../../../common/stores/appModeStore'; +import copyToClipboard from '../../../common/utils/copyToClipboard'; import { cx, getAccessibleColour } from '../../../common/utils/styleUtils'; import type { EventItemActions } from '../RundownEntry'; @@ -72,13 +75,22 @@ export default function EventBlock(props: EventBlockProps) { actionHandler, disableEdit, } = props; - + const { updateEvent } = useEventAction(); const moveCursorTo = useAppMode((state) => state.setCursor); const handleRef = useRef(null); const [isVisible, setIsVisible] = useState(false); const openId = useAppMode((state) => state.editId); const [onContextMenu] = useContextMenu([ - { label: eventId, icon: IoAdd, onClick: () => console.log(eventId) }, + { label: `Copy ID: ${eventId}}`, icon: IoCopyOutline, onClick: () => copyToClipboard(eventId) }, + { + label: 'Toggle public', + icon: IoPeopleOutline, + onClick: () => + updateEvent({ + id: eventId, + isPublic: !isPublic, + }), + }, ]); const {