From 10f1c77158b7749f596c02b8dc1152c6a85b55ac Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Sat, 25 Mar 2023 12:18:29 -0700 Subject: [PATCH] moving ringing component into modal --- net/web/src/constants/Colors.js | 1 + net/web/src/context/useRingContext.hook.js | 38 ++++-- net/web/src/session/Session.jsx | 46 +++---- net/web/src/session/Session.styled.js | 152 ++++++++++----------- net/web/src/session/useSession.hook.js | 14 +- 5 files changed, 131 insertions(+), 120 deletions(-) diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js index 5e228692..fe048542 100644 --- a/net/web/src/constants/Colors.js +++ b/net/web/src/constants/Colors.js @@ -2,6 +2,7 @@ const Colors = { background: '#8fbea7', primary: '#448866', formBackground: '#f2f2f2', + darkBackground: '#222222', formFocus: '#f8f8f8', formHover: '#efefef', grey: '#888888', diff --git a/net/web/src/context/useRingContext.hook.js b/net/web/src/context/useRingContext.hook.js index e51f9c22..8bc5af12 100644 --- a/net/web/src/context/useRingContext.hook.js +++ b/net/web/src/context/useRingContext.hook.js @@ -20,6 +20,7 @@ export function useRingContext() { const calling = useRef(null); const ws = useRef(null); const pc = useRef(null); + const stream = useRef(null); const updateState = (value) => { setState((s) => ({ ...s, ...value })) @@ -84,8 +85,14 @@ export function useRingContext() { // form peer connection pc.current = new RTCPeerConnection(); - pc.current.ontrack = ({streams: [stream]}) => { - updateState({ stream }); + pc.current.ontrack = (ev) => { //{streams: [stream]}) => { + console.log("ADD TRACK", ev); + if (!stream.current) { +console.log("ADD STREAM"); + stream.current = new MediaStream(); + updateState({ stream: stream.current }); + } + stream.current.addTrack(ev.track); }; pc.current.onicecandidate = ({candidate}) => { ws.current.send(JSON.stringify({ candidate })); @@ -101,8 +108,9 @@ export function useRingContext() { } }; - const stream = await whiteNoise(); - pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]}); +console.log("ADD TRANSCEIVER"); + const media = await whiteNoise(); + pc.current.addTransceiver(media.getTracks()[0], {streams: [media]}); ws.current = createWebsocket(`wss://${contactNode}/signal`); ws.current.onmessage = async (ev) => { @@ -211,8 +219,14 @@ export function useRingContext() { // form peer connection pc.current = new RTCPeerConnection(); - pc.current.ontrack = ({streams: [stream]}) => { - updateState({ stream }); + pc.current.ontrack = (ev) => { //{streams: [stream]}) => { + console.log("ADD TRACK", ev); + if (!stream.current) { + stream.current = new MediaStream(); +console.log("ADD STREAM"); + updateState({ stream: stream.current }); + } + stream.current.addTrack(ev.track); }; pc.current.onicecandidate = ({candidate}) => { ws.current.send(JSON.stringify({ candidate })); @@ -228,8 +242,16 @@ export function useRingContext() { } }; - const stream = await whiteNoise(); - pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]}); + const stream = await navigator.mediaDevices.getUserMedia({ + video: true, + audio: true, + }); + for (const track of stream.getTracks()) { +console.log("ADD TRANSCEIVER TRACK"); + pc.current.addTrack(track); + } +// const stream = await whiteNoise(); + // pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]}); const protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://'; ws.current = createWebsocket(`${protocol}${window.location.host}/signal`); diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index ed31722b..ec2e5641 100644 --- a/net/web/src/session/Session.jsx +++ b/net/web/src/session/Session.jsx @@ -1,6 +1,6 @@ import { useRef, useState, useEffect } from 'react'; -import { Drawer, Spin } from 'antd'; -import { SessionWrapper } from './Session.styled'; +import { Modal, Drawer, Spin } from 'antd'; +import { RingingWrapper, SessionWrapper } from './Session.styled'; import { useSession } from './useSession.hook'; import { Conversation } from './conversation/Conversation'; import { Details } from './details/Details'; @@ -18,6 +18,8 @@ import { EyeInvisibleOutlined, CloseOutlined, PhoneOutlined } from '@ant-design/ export function Session() { + const [ showRinging, setShowRinging ] = useState(false); + const [ modal, modalContext ] = Modal.useModal(); const { state, actions } = useSession(); const [ringing, setRinging] = useState([]); const vid = useRef(); @@ -40,6 +42,12 @@ export function Session() { setRinging(incoming); }, [state.ringing]); + useEffect(() => { +console.log("SHOW>>>>>", ringing.length > 0); + + setShowRinging(ringing.length > 0 && state.callStatus == null); + }, [state.ringing, state.callStatus]); + useEffect(() => { if (vid.current) { vid.current.srcObject = state.stream; @@ -123,18 +131,11 @@ export function Session() { )} - { ringing.length > 0 && ( -
-
- {ringing} -
-
- )} { state.callStatus && (
{ state.stream && ( -
@@ -220,18 +221,11 @@ export function Session() { )} - { ringing.length > 0 && ( -
-
- {ringing} -
-
- )} { state.callStatus && (
{ state.stream && ( -
@@ -287,18 +281,11 @@ export function Session() {
)} - { ringing.length > 0 && ( -
-
- {ringing} -
-
- )} { state.callStatus && (
{ state.stream && ( -
@@ -310,6 +297,13 @@ export function Session() {
)} + 0 && state.callStatus == null} footer={null} closable={false}> + +
+ {ringing} +
+ + ); } diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js index 4259da27..bb1688b0 100644 --- a/net/web/src/session/Session.styled.js +++ b/net/web/src/session/Session.styled.js @@ -1,6 +1,77 @@ import styled from 'styled-components'; import Colors from 'constants/Colors'; +export const RingingWrapper = styled.div` + .ringing-list { + padding: 4px; + display: flex; + flex-direction: column; + background-color: ${Colors.darkBackground}; + + .ringing-entry { + display: flex; + flex-direction: row; + align-items: center; + padding-left: 8px; + + .ringing-accept { + color: ${Colors.primary}; + font-size: 18; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background-color: ${Colors.white}; + border-radius: 16px; + margin: 8px; + cursor: pointer; + } + + .ringing-ignore { + color: ${Colors.grey}; + font-size: 18; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background-color: ${Colors.white}; + border-radius: 16px; + margin: 8px; + cursor: pointer; + } + + .ringing-decline { + color: ${Colors.alert}; + font-size: 18; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background-color: ${Colors.white}; + border-radius: 16px; + margin: 8px; + transform: rotate(270deg); + cursor: pointer; + } + + .ringing-name { + font-size: 16px; + flex-grow: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: flex; + justify-content: center; + color: ${Colors.white}; + } + } + } +} +`; + export const SessionWrapper = styled.div` height: 100%; width: 100%; @@ -29,87 +100,6 @@ export const SessionWrapper = styled.div` } } - .ringing { - position: absolute; - top: 20%; - max-height: 15%; - width: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - z-index: 2; - - .ringing-list { - padding: 4px; - border-radius: 4px; - background-color: rgba(0,0,0,0.6); - display: flex; - flex-direction: column; - - .ringing-entry { - display: flex; - flex-direction: row; - align-items: center; - padding-left: 8px; - - .ringing-accept { - color: ${Colors.primary}; - font-size: 18; - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - background-color: ${Colors.white}; - border-radius: 16px; - margin: 8px; - cursor: pointer; - } - - .ringing-ignore { - color: ${Colors.grey}; - font-size: 18; - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - background-color: ${Colors.white}; - border-radius: 16px; - margin: 8px; - cursor: pointer; - } - - .ringing-decline { - color: ${Colors.alert}; - font-size: 18; - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - background-color: ${Colors.white}; - border-radius: 16px; - margin: 8px; - transform: rotate(270deg); - cursor: pointer; - } - - .ringing-name { - font-size: 16px; - width: 192px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: flex; - justify-content: center; - color: ${Colors.white}; - } - } - } - } - .spinner { position: absolute; width: 100%; diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js index 1279c74c..b53fba25 100644 --- a/net/web/src/session/useSession.hook.js +++ b/net/web/src/session/useSession.hook.js @@ -51,13 +51,17 @@ export function useSession() { if (call.expires > expired && !call.status) { const { callId, cardId, calleeToken } = call; const contact = card.state.cards.get(cardId); - const { imageSet, name, handle, node, guid } = contact.data.cardProfile || {}; - const { token } = contact.data.cardDetail; - const contactToken = `${guid}.${token}`; - const img = imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar'; - ringing.push({ cardId, img, name, handle, contactNode: node, callId, contactToken, calleeToken }); + if (contact) { + const { imageSet, name, handle, node, guid } = contact.data.cardProfile || {}; + const { token } = contact.data.cardDetail; + const contactToken = `${guid}.${token}`; + const img = imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar'; + ringing.push({ cardId, img, name, handle, contactNode: node, callId, contactToken, calleeToken }); + } } }); +console.log(ringing, ring.state.callStatus); + updateState({ ringing, stream: ring.state.stream, callStatus: ring.state.callStatus }); }, [ring.state]);