snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundRow.tsx

@@ -0,0 +1,62 @@
+import type { ICustomSound } from '@rocket.chat/core-typings';
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+import { useCustomSound } from '@rocket.chat/ui-contexts';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type CustomSoundRowProps = {
+	onClick: (soundId: ICustomSound['_id']) => () => void;
+	sound: {
+		name: string;
+		_id: string;
+	};
+};
+
+const CustomSoundRow = ({ onClick, sound }: CustomSoundRowProps) => {
+	const { t } = useTranslation();
+	const [isPlay, setPlayAudio] = useState(false);
+	const customSound = useCustomSound();
+
+	const handleToggle = useCallback(
+		(sound: ICustomSound['_id']) => {
+			setPlayAudio(!isPlay);
+			if (!isPlay) {
+				return customSound.play(sound);
+			}
+
+			return customSound.pause(sound);
+		},
+		[customSound, isPlay],
+	);
+
+	return (
+		<GenericTableRow
+			key={sound._id}
+			onKeyDown={onClick(sound._id)}
+			onClick={onClick(sound._id)}
+			tabIndex={0}
+			role='link'
+			action
+			qa-emoji-id={sound._id}
+		>
+			<GenericTableCell>
+				<Box withTruncatedText>{sound.name}</Box>
+			</GenericTableCell>
+			<GenericTableCell>
+				<IconButton
+					icon={!isPlay ? 'play' : 'pause'}
+					small
+					aria-label={!isPlay ? t('Play') : t('Pause')}
+					onClick={(e): void => {
+						e.preventDefault();
+						e.stopPropagation();
+						handleToggle(sound._id);
+					}}
+				/>
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default CustomSoundRow;