Add copy meeting id button in debug mode

app/components/CopyButton.tsx

@@ -1,42 +1,58 @@
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import type { FC } from 'react'
-import { useState } from 'react'
+import {
+	type ComponentProps,
+	type ElementRef,
+	forwardRef,
+	type ReactNode,
+	useState,
+} from 'react'
 import { useTimeoutFn } from 'react-use'
-import { useRoomUrl } from '~/hooks/useRoomUrl'
 import { Button } from './Button'
 import { Icon } from './Icon/Icon'
-import { Tooltip } from './Tooltip'
 
-interface CopyButtonProps {}
-
-export const CopyButton: FC<CopyButtonProps> = () => {
-	const [copied, setCopied] = useState(false)
+interface CopyButtonProps extends ComponentProps<'button'> {
+	contentValue: string
+	copiedMessage?: ReactNode
+}
 
-	const roomUrl = useRoomUrl()
+export const CopyButton = forwardRef<ElementRef<'button'>, CopyButtonProps>(
+	(
+		{
+			children = <VisuallyHidden>Copy</VisuallyHidden>,
+			copiedMessage = <VisuallyHidden>Copied!</VisuallyHidden>,
+			contentValue,
+			onClick,
+			...rest
+		},
+		ref
+	) => {
+		const [copied, setCopied] = useState(false)
 
-	const [_isReady, _cancel, reset] = useTimeoutFn(() => {
-		setCopied(false)
-	}, 2000)
+		const [_isReady, _cancel, reset] = useTimeoutFn(() => {
+			setCopied(false)
+		}, 2000)
 
-	return (
-		<Tooltip
-			content={copied ? 'Copied!' : 'Copy URL'}
-			open={copied ? true : undefined}
-		>
+		return (
 			<Button
 				displayType="secondary"
-				onClick={() => {
-					navigator.clipboard.writeText(roomUrl)
+				onClick={(e) => {
+					onClick && onClick(e)
+					navigator.clipboard.writeText(contentValue)
 					setCopied(true)
 					reset()
 				}}
+				ref={ref}
+				className="flex items-center gap-2 text-xs"
+				{...rest}
 			>
 				<Icon
 					type={copied ? 'ClipboardDocumentCheckIcon' : 'ClipboardDocumentIcon'}
 					className="text-xl"
 				/>
-				<VisuallyHidden>{copied ? 'Copied!' : 'Copy URL'}</VisuallyHidden>
+				{copied ? copiedMessage : children}
 			</Button>
-		</Tooltip>
-	)
-}
+		)
+	}
+)
+
+CopyButton.displayName = 'CopyButton'

app/routes/_room.$roomName._index.tsx

@@ -17,6 +17,7 @@ import { Spinner } from '~/components/Spinner'
 import { Tooltip } from '~/components/Tooltip'
 import { useSubscribedState } from '~/hooks/rxjsHooks'
 import { useRoomContext } from '~/hooks/useRoomContext'
+import { useRoomUrl } from '~/hooks/useRoomUrl'
 import { errorMessageMap } from '~/hooks/useUserMedia'
 import getUsername from '~/utils/getUsername.server'
 
@@ -62,6 +63,8 @@ export default function Lobby() {
 		? errorMessageMap[userMedia.audioUnavailableReason]
 		: null
 
+	const roomUrl = useRoomUrl()
+
 	return (
 		<div className="flex flex-col items-center justify-center h-full p-4">
 			<div className="flex-1"></div>
@@ -167,7 +170,9 @@ export default function Lobby() {
 					<MicButton />
 					<CameraButton />
 					<SettingsButton />
-					<CopyButton></CopyButton>
+					<Tooltip content="Copy URL">
+						<CopyButton contentValue={roomUrl}></CopyButton>
+					</Tooltip>
 				</div>
 			</div>
 			<div className="flex flex-col justify-end flex-1">

app/routes/_room.$roomName.room.tsx

@@ -7,6 +7,7 @@ import { Flipper } from 'react-flip-toolkit'
 import { useMeasure, useMount, useWindowSize } from 'react-use'
 import { Button } from '~/components/Button'
 import { CameraButton } from '~/components/CameraButton'
+import { CopyButton } from '~/components/CopyButton'
 import { HighPacketLossWarningsToast } from '~/components/HighPacketLossWarningsToast'
 import { IceDisconnectedToast } from '~/components/IceDisconnectedToast'
 import { Icon } from '~/components/Icon/Icon'
@@ -335,6 +336,9 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
 						navigateToFeedbackPage={hasDb}
 						meetingId={meetingId}
 					/>
+					{debugEnabled && meetingId && (
+						<CopyButton contentValue={meetingId}>Meeting Id</CopyButton>
+					)}
 				</div>
 			</div>
 			<HighPacketLossWarningsToast />