martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +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',
primary: '#448866',
formBackground: '#f2f2f2',
darkBackground: '#222222',
formFocus: '#f8f8f8',
formHover: '#efefef',
grey: '#888888',

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

@ -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`);

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

@ -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() {
<Profile closeProfile={actions.closeProfile} />
</div>
)}
{ ringing.length > 0 && (
<div className="ringing">
<div className="ringing-list">
{ringing}
</div>
</div>
)}
{ state.callStatus && (
<div className="calling">
<div className="calling-screen">
{ 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")} />
)}
</div>
@ -220,18 +221,11 @@ export function Session() {
<Profile closeProfile={closeAccount}/>
)}
</Drawer>
{ ringing.length > 0 && (
<div className="ringing">
<div className="ringing-list">
{ringing}
</div>
</div>
)}
{ state.callStatus && (
<div className="calling">
<div className="calling-screen">
{ 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")} />
)}
</div>
@ -287,18 +281,11 @@ export function Session() {
<Profile />
</div>
)}
{ ringing.length > 0 && (
<div className="ringing">
<div className="ringing-list">
{ringing}
</div>
</div>
)}
{ state.callStatus && (
<div className="calling">
<div className="calling-screen">
{ 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")} />
)}
</div>
@ -310,6 +297,13 @@ export function Session() {
</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>
);
}

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

@ -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%;

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

@ -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]);