45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import React, { useMemo } from 'react';
|
|
|
|
import { TrayButton } from '@custom/shared/components/Tray';
|
|
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
|
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
|
import { ReactComponent as IconShare } from '@custom/shared/icons/share-sm.svg';
|
|
|
|
const MAX_SCREEN_SHARES = 2;
|
|
|
|
export const ScreenShareTray = () => {
|
|
const { callObject, enableScreenShare } = useCallState();
|
|
const { screens, participants, localParticipant } = useParticipants();
|
|
|
|
const isSharingScreen = useMemo(
|
|
() => screens.some((s) => s.isLocal),
|
|
[screens]
|
|
);
|
|
|
|
const screensLength = useMemo(() => screens.length, [screens]);
|
|
|
|
const toggleScreenShare = () =>
|
|
isSharingScreen ? callObject.stopScreenShare() : callObject.startScreenShare();
|
|
|
|
const disabled =
|
|
participants.length &&
|
|
screensLength >= MAX_SCREEN_SHARES &&
|
|
!isSharingScreen;
|
|
|
|
if (!enableScreenShare) return null;
|
|
if (!localParticipant.isOwner) return null;
|
|
|
|
return (
|
|
<TrayButton
|
|
label={isSharingScreen ? 'Stop': 'Share'}
|
|
orange={isSharingScreen}
|
|
disabled={disabled}
|
|
onClick={toggleScreenShare}
|
|
>
|
|
<IconShare />
|
|
</TrayButton>
|
|
);
|
|
};
|
|
|
|
export default ScreenShareTray;
|