64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
|
import React, { ReactNode, useCallback, useRef } from 'react';
|
||
|
|
import { useAtomValue, useSetAtom } from 'jotai';
|
||
|
|
import {
|
||
|
|
CallEmbedContextProvider,
|
||
|
|
CallEmbedRefContextProvider,
|
||
|
|
useCallHangupEvent,
|
||
|
|
useCallJoined,
|
||
|
|
useCallThemeSync,
|
||
|
|
} from '../hooks/useCallEmbed';
|
||
|
|
import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
|
||
|
|
import { CallEmbed } from '../plugins/call';
|
||
|
|
import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
|
||
|
|
import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
|
||
|
|
|
||
|
|
function CallUtils({ embed }: { embed: CallEmbed }) {
|
||
|
|
const setCallEmbed = useSetAtom(callEmbedAtom);
|
||
|
|
|
||
|
|
useCallThemeSync(embed);
|
||
|
|
useCallHangupEvent(
|
||
|
|
embed,
|
||
|
|
useCallback(() => {
|
||
|
|
setCallEmbed(undefined);
|
||
|
|
}, [setCallEmbed])
|
||
|
|
);
|
||
|
|
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
type CallEmbedProviderProps = {
|
||
|
|
children?: ReactNode;
|
||
|
|
};
|
||
|
|
export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||
|
|
const callEmbed = useAtomValue(callEmbedAtom);
|
||
|
|
const callEmbedRef = useRef<HTMLDivElement>(null);
|
||
|
|
const joined = useCallJoined(callEmbed);
|
||
|
|
|
||
|
|
const selectedRoom = useSelectedRoom();
|
||
|
|
const chat = useAtomValue(callChatAtom);
|
||
|
|
const screenSize = useScreenSizeContext();
|
||
|
|
|
||
|
|
const chatOnlyView = chat && screenSize !== ScreenSize.Desktop;
|
||
|
|
|
||
|
|
const callVisible = callEmbed && selectedRoom === callEmbed.roomId && joined && !chatOnlyView;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<CallEmbedContextProvider value={callEmbed}>
|
||
|
|
{callEmbed && <CallUtils embed={callEmbed} />}
|
||
|
|
<CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
|
||
|
|
<div
|
||
|
|
data-call-embed-container
|
||
|
|
style={{
|
||
|
|
visibility: callVisible ? undefined : 'hidden',
|
||
|
|
position: 'fixed',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
width: '100%',
|
||
|
|
height: '50%',
|
||
|
|
}}
|
||
|
|
ref={callEmbedRef}
|
||
|
|
/>
|
||
|
|
</CallEmbedContextProvider>
|
||
|
|
);
|
||
|
|
}
|