show/hide name tag dyte component on mouse move

ParticipantTileApp.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import DyteClient from '@dytesdk/web-core';
import { DyteGrid, DyteUIBuilder, generateConfig } from '@dytesdk/react-ui-kit';

type UIConfig = ReturnType<typeof generateConfig>['config'];

function ParticipantTileApp() {
	const [meeting, setMeeting] = useState<DyteClient | null>(null);
	const [uiConfig, setUIConfig] = useState<UIConfig>();
	const timerId = useRef<number>();
	const url = new URL(window.location.href);
	const queryToken = url.searchParams.get('authToken')!;

	if (!queryToken) {
		alert('Please add authToken to url query params');
	}

	const moveHandler = useCallback(() => {
		if (uiConfig?.root) {
			const builder = new DyteUIBuilder(uiConfig);
			const participantTile = builder.find('dyte-participant-tile');
			if (!participantTile) return;
			if (!timerId.current) {
				participantTile.add('dyte-name-tag');
				setUIConfig(builder.build());
			}
			clearTimeout(timerId.current);
			timerId.current = setTimeout(() => {
				participantTile.remove('dyte-name-tag');
				setUIConfig(builder.build());
				timerId.current = undefined;
			}, 3000);
		}
	}, [uiConfig]);

	useEffect(() => {
		if (meeting) return;
		const init = async () => {
			DyteClient.init({
				defaults: { audio: false, video: false },
				authToken: queryToken,
			}).then(async (m) => {
				await m.join();
				setMeeting(m);
				setUIConfig(generateConfig(m.self.suggestedTheme, m).config);
			});
		};
		init();
	}, [meeting, moveHandler, queryToken, uiConfig]);

	if (!meeting) {
		return 'Loading...';
	}

	return (
		<div style={{ height: '100vh' }}>
			<DyteGrid meeting={meeting} config={uiConfig} onMouseMove={moveHandler} />
		</div>
	);
}

export default ParticipantTileApp;