MediaCallHistoryExternal.tsx

import type { CallHistoryItem, IExternalMediaCallHistoryItem, IMediaCall, Serialized } from '@rocket.chat/core-typings';
import { CallHistoryContextualBar, useWidgetExternalControls, usePeekMediaSessionState } from '@rocket.chat/ui-voip';
import { useMemo } from 'react';

type ExternalCallEndpointData = Serialized<{
	item: IExternalMediaCallHistoryItem;
	call: IMediaCall;
}>;

type MediaCallHistoryExternalProps = {
	data: ExternalCallEndpointData;
	onClose: () => void;
};

const getContact = (item: ExternalCallEndpointData['item']) => {
	return {
		number: item.contactExtension,
	};
};

export const isExternalCallHistoryItem = (data: { item: Serialized<CallHistoryItem> }): data is ExternalCallEndpointData => {
	return 'external' in data.item && data.item.external;
};

const MediaCallHistoryExternal = ({ data, onClose }: MediaCallHistoryExternalProps) => {
	const contact = useMemo(() => getContact(data.item), [data]);
	const historyData = useMemo(() => {
		return {
			callId: data.call._id,
			direction: data.item.direction,
			duration: data.item.duration,
			startedAt: new Date(data.item.ts),
			state: data.item.state,
		};
	}, [data]);
	const state = usePeekMediaSessionState();
	const { toggleWidget } = useWidgetExternalControls();

	const actions = useMemo(() => {
		if (state !== 'available') {
			return {};
		}
		return {
			voiceCall: () => toggleWidget(contact),
		};
	}, [contact, state, toggleWidget]);

	return <CallHistoryContextualBar onClose={onClose} actions={actions} contact={contact} data={historyData} />;
};

export default MediaCallHistoryExternal;