martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

moving ringing component into modal

Browse Source
This commit is contained in:
Roland Osborne 2023-03-25 12:18:29 -07:00
parent 5836e856f6
commit 10f1c77158
5 changed files with 131 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
net/web/src/constants/Colors.js
View File

@ -2,6 +2,7 @@ const Colors = {
background: '#8fbea7', background: '#8fbea7',
primary: '#448866', primary: '#448866',
formBackground: '#f2f2f2', formBackground: '#f2f2f2',
darkBackground: '#222222',
formFocus: '#f8f8f8', formFocus: '#f8f8f8',
formHover: '#efefef', formHover: '#efefef',
grey: '#888888', grey: '#888888',

38
net/web/src/context/useRingContext.hook.js
View File

@ -20,6 +20,7 @@ export function useRingContext() {
const calling = useRef(null); const calling = useRef(null);
const ws = useRef(null); const ws = useRef(null);
const pc = useRef(null); const pc = useRef(null);
const stream = useRef(null);
const updateState = (value) => { const updateState = (value) => {
setState((s) => ({ ...s, ...value })) setState((s) => ({ ...s, ...value }))
@ -84,8 +85,14 @@ export function useRingContext() {
// form peer connection // form peer connection
pc.current = new RTCPeerConnection(); pc.current = new RTCPeerConnection();
pc.current.ontrack = ({streams: [stream]}) => { pc.current.ontrack = (ev) => { //{streams: [stream]}) => {
updateState({ 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}) => { pc.current.onicecandidate = ({candidate}) => {
ws.current.send(JSON.stringify({ candidate })); ws.current.send(JSON.stringify({ candidate }));
@ -101,8 +108,9 @@ export function useRingContext() {
} }
}; };
const stream = await whiteNoise(); console.log("ADD TRANSCEIVER");
pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]}); const media = await whiteNoise();
pc.current.addTransceiver(media.getTracks()[0], {streams: [media]});
ws.current = createWebsocket(`wss://${contactNode}/signal`); ws.current = createWebsocket(`wss://${contactNode}/signal`);
ws.current.onmessage = async (ev) => { ws.current.onmessage = async (ev) => {
@ -211,8 +219,14 @@ export function useRingContext() {
// form peer connection // form peer connection
pc.current = new RTCPeerConnection(); pc.current = new RTCPeerConnection();
pc.current.ontrack = ({streams: [stream]}) => { pc.current.ontrack = (ev) => { //{streams: [stream]}) => {
updateState({ 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}) => { pc.current.onicecandidate = ({candidate}) => {
ws.current.send(JSON.stringify({ candidate })); ws.current.send(JSON.stringify({ candidate }));
@ -228,8 +242,16 @@ export function useRingContext() {
} }
}; };
const stream = await whiteNoise(); const stream = await navigator.mediaDevices.getUserMedia({
pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]}); 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://'; const protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
ws.current = createWebsocket(`${protocol}${window.location.host}/signal`); ws.current = createWebsocket(`${protocol}${window.location.host}/signal`);

46
net/web/src/session/Session.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect } from 'react'; import { useRef, useState, useEffect } from 'react';
import { Drawer, Spin } from 'antd'; import { Modal, Drawer, Spin } from 'antd';
import { SessionWrapper } from './Session.styled'; import { RingingWrapper, SessionWrapper } from './Session.styled';
import { useSession } from './useSession.hook'; import { useSession } from './useSession.hook';
import { Conversation } from './conversation/Conversation'; import { Conversation } from './conversation/Conversation';
import { Details } from './details/Details'; import { Details } from './details/Details';
@ -18,6 +18,8 @@ import { EyeInvisibleOutlined, CloseOutlined, PhoneOutlined } from '@ant-design/
export function Session() { export function Session() {
const [ showRinging, setShowRinging ] = useState(false);
const [ modal, modalContext ] = Modal.useModal();
const { state, actions } = useSession(); const { state, actions } = useSession();
const [ringing, setRinging] = useState([]); const [ringing, setRinging] = useState([]);
const vid = useRef(); const vid = useRef();
@ -40,6 +42,12 @@ export function Session() {
setRinging(incoming); setRinging(incoming);
}, [state.ringing]); }, [state.ringing]);
useEffect(() => {
console.log("SHOW>>>>>", ringing.length > 0);
setShowRinging(ringing.length > 0 && state.callStatus == null);
}, [state.ringing, state.callStatus]);
useEffect(() => { useEffect(() => {
if (vid.current) { if (vid.current) {
vid.current.srcObject = state.stream; vid.current.srcObject = state.stream;
@ -123,18 +131,11 @@ export function Session() {
<Profile closeProfile={actions.closeProfile} /> <Profile closeProfile={actions.closeProfile} />
</div> </div>
)} )}
{ ringing.length > 0 && (
<div className="ringing">
<div className="ringing-list">
{ringing}
</div>
</div>
)}
{ state.callStatus && ( { state.callStatus && (
<div className="calling"> <div className="calling">
<div className="calling-screen"> <div className="calling-screen">
{ state.stream && ( { state.stream && (
<video ref={vid} autoPlay <video ref={vid} autoPlay controls
complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} /> complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
)} )}
</div> </div>
@ -220,18 +221,11 @@ export function Session() {
<Profile closeProfile={closeAccount}/> <Profile closeProfile={closeAccount}/>
)} )}
</Drawer> </Drawer>
{ ringing.length > 0 && (
<div className="ringing">
<div className="ringing-list">
{ringing}
</div>
</div>
)}
{ state.callStatus && ( { state.callStatus && (
<div className="calling"> <div className="calling">
<div className="calling-screen"> <div className="calling-screen">
{ state.stream && ( { state.stream && (
<video ref={vid} autoPlay <video ref={vid} autoPlay controls
complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} /> complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
)} )}
</div> </div>
@ -287,18 +281,11 @@ export function Session() {
<Profile /> <Profile />
</div> </div>
)} )}
{ ringing.length > 0 && (
<div className="ringing">
<div className="ringing-list">
{ringing}
</div>
</div>
)}
{ state.callStatus && ( { state.callStatus && (
<div className="calling"> <div className="calling">
<div className="calling-screen"> <div className="calling-screen">
{ state.stream && ( { state.stream && (
<video ref={vid} autoPlay <video ref={vid} autoPlay controls
complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} /> complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
)} )}
</div> </div>
@ -310,6 +297,13 @@ export function Session() {
</div> </div>
</div> </div>
)} )}
<Modal centered visible={ringing.length > 0 && state.callStatus == null} footer={null} closable={false}>
<RingingWrapper>
<div className="ringing-list">
{ringing}
</div>
</RingingWrapper>
</Modal>
</SessionWrapper> </SessionWrapper>
); );
} }

152
net/web/src/session/Session.styled.js
View File

@ -1,6 +1,77 @@
import styled from 'styled-components'; import styled from 'styled-components';
import Colors from 'constants/Colors'; 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` export const SessionWrapper = styled.div`
height: 100%; height: 100%;
width: 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 { .spinner {
position: absolute; position: absolute;
width: 100%; width: 100%;

14
net/web/src/session/useSession.hook.js
View File

@ -51,13 +51,17 @@ export function useSession() {
if (call.expires > expired && !call.status) { if (call.expires > expired && !call.status) {
const { callId, cardId, calleeToken } = call; const { callId, cardId, calleeToken } = call;
const contact = card.state.cards.get(cardId); const contact = card.state.cards.get(cardId);
const { imageSet, name, handle, node, guid } = contact.data.cardProfile || {}; if (contact) {
const { token } = contact.data.cardDetail; const { imageSet, name, handle, node, guid } = contact.data.cardProfile || {};
const contactToken = `${guid}.${token}`; const { token } = contact.data.cardDetail;
const img = imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar'; const contactToken = `${guid}.${token}`;
ringing.push({ cardId, img, name, handle, contactNode: node, callId, contactToken, calleeToken }); 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 }); updateState({ ringing, stream: ring.state.stream, callStatus: ring.state.callStatus });
}, [ring.state]); }, [ring.state]);