PiP App sample using Dyte

App.tsx

import { useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import {
	DyteCameraToggle,
	DyteControlbarButton,
	DyteMicToggle,
	DyteParticipantTile,
	defaultIconPack,
} from '@dytesdk/react-ui-kit';

function App() {
	const [meeting, initMeeting] = useDyteClient();
	const url = new URL(window.location.href);
	const queryToken = url.searchParams.get('authToken');

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

	const onParticipantTileLoad = (
		event: CustomEvent<{ participant: any; videoElement: HTMLVideoElement }>,
	) => {
		if (!meeting) return;
		const { participant, videoElement } = event.detail;
		if (!participant || !videoElement) return;

		meeting.participants.pip?.addSource(
			participant.id,
			videoElement,
			participant.videoEnabled,
			false,
			participant.name,
		);
		if (participant.videoEnabled) {
			meeting.participants.pip?.enableSource(participant.id);
		}
	};
	const onParticipantTileUnload = (event: CustomEvent<any>) => {
		if (!meeting) return;

		const participant = event.detail;
		meeting.participants.pip?.removeSource(participant.id);
	};

	const togglePip = () => {
		if (meeting?.participants.pip.isActive) {
			meeting?.participants.pip.disable();
		} else {
			meeting?.participants.pip.enable();
		}
	};

	useEffect(() => {
		const init = async () => {
			if (!queryToken) return;

			await initMeeting({
				authToken: queryToken,
				defaults: {
					video: false,
					audio: false,
				},
			}).then(async (meet) => {
				if (!meet) return;

				await meet.join();
				const pipSupported =
					meet.participants.pip?.isSupported() && meet.self.config?.pipMode;
				if (pipSupported) {
					meet.participants.pip.init();
				}
			});
		};
		init();
	}, [initMeeting, queryToken]);

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

	return (
		<div>
			{[meeting.self, ...meeting.participants.joined.toArray()].map((p) => (
				<DyteParticipantTile
					key={p.id}
					participant={p}
					meeting={meeting}
					onTileLoad={onParticipantTileLoad}
					onTileUnload={onParticipantTileUnload}
				/>
			))}

			<DyteMicToggle meeting={meeting} />
			<DyteCameraToggle meeting={meeting} />
			<DyteControlbarButton icon={defaultIconPack.pip_on} label="PIP" onClick={togglePip} />
		</div>
	);
}

export default App;