diff --git a/src/components/outline-box/index.tsx b/src/components/outline-box/index.tsx
new file mode 100644
index 0000000..f5a51a8
--- /dev/null
+++ b/src/components/outline-box/index.tsx
@@ -0,0 +1,42 @@
+import { VStack, Text } from "@chakra-ui/react";
+import { ReactNode } from "react";
+
+const OutlineBox = ({
+ title,
+ children,
+ h,
+ borderColor,
+}: {
+ title: string;
+ children: ReactNode;
+ h?: string;
+ borderColor?: string;
+}) => {
+ return (
+
+
+
+ {title}
+
+ {children}
+
+
+ );
+};
+
+export default OutlineBox;
diff --git a/src/window/phone/index.tsx b/src/window/phone/index.tsx
index 458024a..b742a84 100644
--- a/src/window/phone/index.tsx
+++ b/src/window/phone/index.tsx
@@ -59,9 +59,10 @@ import {
faPhoneSlash,
faPlay,
faUserGroup,
- faUsers,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import NewConference from "./new-conference";
+import JoinConference from "./join-conference";
type PhoneProbs = {
sipDomain: string;
@@ -74,6 +75,14 @@ type PhoneProbs = {
advancedSettings: AdvancedAppSettings;
};
+enum PAGE_VIEW {
+ DIAL_PAD,
+ INCOMING_CALL,
+ OUTGOING_CALL,
+ START_NEW_CONFERENCE,
+ JOIN_CONFERENCE,
+}
+
export const Phone = ({
sipDomain,
sipServerAddress,
@@ -109,6 +118,7 @@ export const Phone = ({
const [isOnline, setIsOnline] = useState(false);
const unregisteredReasonRef = useRef("");
const isInputNumberFocusRef = useRef(false);
+ const [pageView, setPageView] = useState(PAGE_VIEW.DIAL_PAD);
const [registeredUser, setRegisteredUser] = useState>(
{
allow_direct_app_calling: false,
@@ -158,6 +168,15 @@ export const Phone = ({
if (isSipClientIdle(callStatus) && isCallButtonLoading) {
setIsCallButtonLoading(false);
}
+ if (isSipClientRinging(callStatus)) {
+ if (sessionDirection === "incoming") {
+ setPageView(PAGE_VIEW.INCOMING_CALL);
+ } else {
+ setPageView(PAGE_VIEW.OUTGOING_CALL);
+ }
+ } else {
+ setPageView(PAGE_VIEW.DIAL_PAD);
+ }
}, [callStatus]);
useEffect(() => {
@@ -190,29 +209,6 @@ export const Phone = ({
}, 10_000);
}, []);
- // useEffect(() => {
- // chrome.runtime.onMessage.addListener(function (request) {
- // const msg = request as Message;
- // switch (msg.event) {
- // case MessageEvent.Call:
- // handleCallEvent(msg.data as Call);
- // break;
- // default:
- // break;
- // }
- // });
- // }, []);
-
- // const handleCallEvent = (call: Call) => {
- // if (!call.number) return;
-
- // if (isSipClientIdle(callStatus)) {
- // setIsCallButtonLoading(true);
- // setInputNumber(call.number);
- // sipUA.current?.call(call.number);
- // }
- // };
-
const fetchRegisterUser = () => {
getSelfRegisteredUser(sipUsernameRef.current)
.then(({ json }) => {
@@ -516,21 +512,7 @@ export const Phone = ({
Go to Settings to configure your account
)}
-
- {isSipClientRinging(callStatus) ? (
- sessionDirection === "incoming" ? (
-
- ) : (
-
- )
- ) : (
+ {pageView === PAGE_VIEW.DIAL_PAD && (
}
- tooltip="Call an application"
- noResultLabel="No applications"
+ tooltip="Join a conference"
+ noResultLabel="No conference"
onClick={(name, value) => {
- setAppName(`App ${name}`);
- const calledAppId = `app-${value}`;
- setInputNumber("");
- makeOutboundCall(calledAppId, `App ${name}`);
+ setPageView(PAGE_VIEW.START_NEW_CONFERENCE);
}}
onOpen={() => {
- return new Promise(
- (resolve, reject) => {
- getApplications()
- .then(({ json }) => {
- const sortedApps = json.sort((a, b) =>
- a.name.localeCompare(b.name)
- );
- resolve(
- sortedApps.map((a) => ({
- name: a.name,
- value: a.application_sid,
- }))
- );
- })
- .catch((err) => reject(err));
- }
- );
+ return new Promise((resolve) => {
+ resolve([
+ {
+ name: "Start New Conference",
+ value: "start_new_conference",
+ },
+ ]);
+ });
}}
/>
@@ -771,6 +741,33 @@ export const Phone = ({
)}
)}
+ {pageView === PAGE_VIEW.INCOMING_CALL && (
+
+ )}
+ {pageView === PAGE_VIEW.OUTGOING_CALL && (
+
+ )}
+ {pageView === PAGE_VIEW.JOIN_CONFERENCE && (
+ {
+ setPageView(PAGE_VIEW.DIAL_PAD);
+ }}
+ />
+ )}
+ {pageView === PAGE_VIEW.START_NEW_CONFERENCE && (
+ {
+ setPageView(PAGE_VIEW.DIAL_PAD);
+ }}
+ />
+ )}
);
};
diff --git a/src/window/phone/join-conference.tsx b/src/window/phone/join-conference.tsx
new file mode 100644
index 0000000..3b9c831
--- /dev/null
+++ b/src/window/phone/join-conference.tsx
@@ -0,0 +1,66 @@
+import {
+ Box,
+ Button,
+ Checkbox,
+ FormControl,
+ FormLabel,
+ HStack,
+ Input,
+ Text,
+ VStack,
+} from "@chakra-ui/react";
+import { FormEvent } from "react";
+import OutlineBox from "src/components/outline-box";
+
+type JoinConferenceProbs = {
+ handleCancel: () => void;
+};
+export const JoinConference = ({ handleCancel }: JoinConferenceProbs) => {
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ };
+ return (
+
+
+ Joining conference
+
+ Conference name
+
+
+
+
+ Full participant
+ Muted
+ Coach mode
+
+
+ Speak only to
+
+
+
+
+ Tag
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default JoinConference;
diff --git a/src/window/phone/new-conference.tsx b/src/window/phone/new-conference.tsx
new file mode 100644
index 0000000..c8525f4
--- /dev/null
+++ b/src/window/phone/new-conference.tsx
@@ -0,0 +1,69 @@
+import {
+ Box,
+ Button,
+ Checkbox,
+ FormControl,
+ FormLabel,
+ HStack,
+ Input,
+ Text,
+ VStack,
+} from "@chakra-ui/react";
+import { FormEvent } from "react";
+import OutlineBox from "src/components/outline-box";
+
+type NewConferenceProbs = {
+ handleCancel: () => void;
+};
+
+export const NewConference = ({ handleCancel }: NewConferenceProbs) => {
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ };
+ return (
+
+
+
+ Start new conference
+
+
+ Conference name
+
+
+
+
+ Full participant
+ Muted
+ Coach mode
+
+
+ Speak only to
+
+
+
+
+ Tag
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default NewConference;