89 lines
2.7 KiB
React
89 lines
2.7 KiB
React
|
import React from "react";
|
||
|
|
import { useModalTriggerState } from "../Modal";
|
||
|
|
import { SettingsModal } from "../settings/SettingsModal";
|
||
|
|
import { InviteModal } from "./InviteModal";
|
||
|
|
import { Button } from "../button";
|
||
|
|
import { Header, LeftNav, RightNav, RoomSetupHeaderInfo } from "../Header";
|
||
|
|
import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
|
||
|
|
import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
|
||
|
|
import styles from "./PTTCallView.module.css";
|
||
|
|
import { Facepile } from "../Facepile";
|
||
|
|
import { PTTButton } from "./PTTButton";
|
||
|
|
import { PTTFeed } from "./PTTFeed";
|
||
|
|
import { useMediaHandler } from "../settings/useMediaHandler";
|
||
|
|
|
||
|
|
export function PTTCallView({
|
||
|
|
groupCall,
|
||
|
|
participants,
|
||
|
|
client,
|
||
|
|
roomName,
|
||
|
|
microphoneMuted,
|
||
|
|
toggleMicrophoneMuted,
|
||
|
|
userMediaFeeds,
|
||
|
|
activeSpeaker,
|
||
|
|
onLeave,
|
||
|
|
setShowInspector,
|
||
|
|
showInspector,
|
||
|
|
roomId,
|
||
|
|
}) {
|
||
|
|
const { modalState: inviteModalState, modalProps: inviteModalProps } =
|
||
|
|
useModalTriggerState();
|
||
|
|
const { modalState: settingsModalState, modalProps: settingsModalProps } =
|
||
|
|
useModalTriggerState();
|
||
|
|
const { audioOutput } = useMediaHandler();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.pttCallView}>
|
||
|
|
<Header className={styles.header}>
|
||
|
|
<LeftNav>
|
||
|
|
<RoomSetupHeaderInfo roomName={roomName} onPress={onLeave} />
|
||
|
|
</LeftNav>
|
||
|
|
<RightNav>
|
||
|
|
<Button variant="secondaryHangup" onPress={onLeave}>
|
||
|
|
Leave
|
||
|
|
</Button>
|
||
|
|
<Button variant="icon" onPress={() => inviteModalState.open()}>
|
||
|
|
<AddUserIcon />
|
||
|
|
</Button>
|
||
|
|
<Button variant="icon" onPress={() => settingsModalState.open()}>
|
||
|
|
<SettingsIcon />
|
||
|
|
</Button>
|
||
|
|
</RightNav>
|
||
|
|
</Header>
|
||
|
|
<div className={styles.headerSeparator} />
|
||
|
|
<div className={styles.participants}>
|
||
|
|
<p>{`${participants.length} user${
|
||
|
|
participants.length > 1 ? "s" : ""
|
||
|
|
} connected`}</p>
|
||
|
|
<Facepile client={client} participants={participants} />
|
||
|
|
</div>
|
||
|
|
<div className={styles.center}>
|
||
|
|
<PTTButton
|
||
|
|
client={client}
|
||
|
|
activeSpeaker={activeSpeaker}
|
||
|
|
groupCall={groupCall}
|
||
|
|
/>
|
||
|
|
<p className={styles.actionTip}>Press and hold spacebar to talk</p>
|
||
|
|
{userMediaFeeds.map((callFeed) => (
|
||
|
|
<PTTFeed
|
||
|
|
key={callFeed.userId}
|
||
|
|
callFeed={callFeed}
|
||
|
|
audioOutputDevice={audioOutput}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{settingsModalState.isOpen && (
|
||
|
|
<SettingsModal
|
||
|
|
{...settingsModalProps}
|
||
|
|
setShowInspector={setShowInspector}
|
||
|
|
showInspector={showInspector}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{inviteModalState.isOpen && (
|
||
|
|
<InviteModal roomId={roomId} {...inviteModalProps} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|