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

render contact logo when video off

Browse Source
This commit is contained in:
Roland Osborne 2023-03-28 13:08:12 -07:00
parent 201861c8b9
commit 41ca37d2df
4 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ export function useRingContext() {
const [state, setState] = useState({ const [state, setState] = useState({
ringing: new Map(), ringing: new Map(),
callStatus: null, callStatus: null,
cardId: null,
localStream: null, localStream: null,
localVideo: false, localVideo: false,
localAudio: false, localAudio: false,
@ -30,6 +31,18 @@ export function useRingContext() {
const videoTrack = useRef(); const videoTrack = useRef();
const audioTrack = useRef(); const audioTrack = useRef();
const iceServers = [
{
urls: 'stun:35.165.123.117:5001?transport=udp',
username: 'user',
credential: 'pass'
},
{
urls: 'turn:35.165.123.117:5001?transport=udp',
username: 'user',
credential: 'pass'
}];
const updateState = (value) => { const updateState = (value) => {
setState((s) => ({ ...s, ...value })) setState((s) => ({ ...s, ...value }))
} }
@ -95,10 +108,10 @@ export function useRingContext() {
// connect signal socket // connect signal socket
calling.current = { state: "connecting", callId, contactNode, contactToken, host: false }; calling.current = { state: "connecting", callId, contactNode, contactToken, host: false };
updateState({ callStatus: "connecting", remoteVideo: false, remoteAudio: false }); updateState({ callStatus: "connecting", cardId, remoteVideo: false, remoteAudio: false });
// form peer connection // form peer connection
pc.current = new RTCPeerConnection(); pc.current = new RTCPeerConnection({ iceServers });
pc.current.ontrack = (ev) => { pc.current.ontrack = (ev) => {
if (!stream.current) { if (!stream.current) {
stream.current = new MediaStream(); stream.current = new MediaStream();
@ -253,10 +266,10 @@ export function useRingContext() {
}, RING); }, RING);
calling.current = { state: "connecting", callId: id, host: true }; calling.current = { state: "connecting", callId: id, host: true };
updateState({ callStatus: "connecting", remoteVideo: false, remoteAudio: false }); updateState({ callStatus: "connecting", cardId, remoteVideo: false, remoteAudio: false });
// form peer connection // form peer connection
pc.current = new RTCPeerConnection(); pc.current = new RTCPeerConnection({ iceServers });
pc.current.ontrack = (ev) => { //{streams: [stream]}) => { pc.current.ontrack = (ev) => { //{streams: [stream]}) => {
console.log("ADD TRACK", ev); console.log("ADD TRACK", ev);
if (!stream.current) { if (!stream.current) {
@ -385,7 +398,7 @@ export function useRingContext() {
else { else {
videoTrack.current.enabled = true; videoTrack.current.enabled = true;
} }
updateState({ localVideo: true }); updateState({ localVideo: true, localAudio: true });
}, },
disableVideo: async () => { disableVideo: async () => {
if (videoTrack.current) { if (videoTrack.current) {
@ -399,7 +412,7 @@ export function useRingContext() {
}, },
disableAudio: async () => { disableAudio: async () => {
audioTrack.current.enabled = false; audioTrack.current.enabled = false;
updateState({ loaclAudio: false }); updateState({ localAudio: false });
}, },
} }

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

@ -33,7 +33,7 @@ export function Session() {
const label = ring.name ? ring.name : `${ring.handle}@${ring.node}`; const label = ring.name ? ring.name : `${ring.handle}@${ring.node}`;
incoming.push( incoming.push(
<div className="ringing-entry"> <div className="ringing-entry">
<Logo url={ring.url} width={40} height={40} radius={4} /> <Logo url={ring.img} width={40} height={40} radius={4} />
<div className="ringing-name">{ label }</div> <div className="ringing-name">{ label }</div>
<div onClick={() => actions.ignore(ring)} className="ringing-ignore"><EyeInvisibleOutlined /></div> <div onClick={() => actions.ignore(ring)} className="ringing-ignore"><EyeInvisibleOutlined /></div>
<div onClick={() => actions.decline(ring)} className="ringing-decline"><PhoneOutlined /></div> <div onClick={() => actions.decline(ring)} className="ringing-decline"><PhoneOutlined /></div>
@ -86,6 +86,7 @@ export function Session() {
} }
}; };
remote.current.srcObject = state.remoteStream; remote.current.srcObject = state.remoteStream;
remote.current.play();
} }
else { else {
console.log("video player not set"); console.log("video player not set");
@ -95,6 +96,7 @@ export function Session() {
useEffect(() => { useEffect(() => {
if (local.current) { if (local.current) {
local.current.srcObject = state.localStream; local.current.srcObject = state.localStream;
local.current.play();
} }
}, [state.localStream]); }, [state.localStream]);
@ -325,19 +327,19 @@ export function Session() {
<Modal centered visible={state.callStatus} footer={null} closable={false} width={getWidth() + 12} height={getHeight() + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 6 }}> <Modal centered visible={state.callStatus} footer={null} closable={false} width={getWidth() + 12} height={getHeight() + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 6 }}>
<CallingWrapper> <CallingWrapper>
{ !state.remoteVideo && ( { !state.remoteVideo && (
<Logo url={null} width={256} height={256} radius={8} /> <Logo url={state.callLogo} width={256} height={256} radius={8} />
)} )}
{ state.remoteStream && ( { state.remoteStream && (
<video ref={remote} disablepictureinpicture autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%', height: '100%' }} <video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%' }}
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")} />
)} )}
{ state.localStream && ( { state.localStream && (
<div className="calling-local"> <div className="calling-local">
<video ref={local} disablepictureinpicture autoPlay style={{ width: '100%', height: '100%' }} <video ref={local} disablepictureinpicture playsInline autoPlay style={{ width: '100%', display: 'block' }}
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>
)} )}
<div className="calling-options"> <div className="calling-options calling-hovered">
{ state.localVideo && ( { state.localVideo && (
<div className="calling-option" onClick={actions.disableVideo}> <div className="calling-option" onClick={actions.disableVideo}>
<IoVideocamOutline /> <IoVideocamOutline />
@ -359,7 +361,7 @@ export function Session() {
</div> </div>
)} )}
</div> </div>
<div className="calling-end" onClick={actions.end}> <div className="calling-end calling-hovered" onClick={actions.end}>
<IoCallOutline /> <IoCallOutline />
</div> </div>
</CallingWrapper> </CallingWrapper>

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

@ -53,7 +53,7 @@ export const RingingWrapper = styled.div`
background-color: ${Colors.white}; background-color: ${Colors.white};
border-radius: 16px; border-radius: 16px;
margin: 8px; margin: 8px;
transform: rotate(135deg); transform: rotate(224deg);
cursor: pointer; cursor: pointer;
} }
@ -76,10 +76,13 @@ export const CallingWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover .calling-hovered {
display: flex;
}
.calling-local { .calling-local {
width: 33%; width: 33%;
height: 33%;
bottom: 16px; bottom: 16px;
left: 16px; left: 16px;
position: absolute; position: absolute;
@ -100,19 +103,19 @@ export const CallingWrapper = styled.div`
color: ${Colors.white}; color: ${Colors.white};
font-size: 24px; font-size: 24px;
background-color: ${Colors.alert}; background-color: ${Colors.alert};
display: flex; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 8px; padding: 8px;
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
transform: rotate(270deg); transform: rotate(135deg);
} }
.calling-options { .calling-options {
display: none;
position: absolute; position: absolute;
top: 16px; top: 16px;
display: flex;
flex-direction: row; flex-direction: row;
} }

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

@ -25,6 +25,7 @@ export function useSession() {
loading: false, loading: false,
ringing: [], ringing: [],
callStatus: null, callStatus: null,
callLogo: null,
localStream: null, localStream: null,
localVideo: false, localVideo: false,
localAudio: false, localAudio: false,
@ -60,14 +61,21 @@ export function useSession() {
const { imageSet, name, handle, node, guid } = contact.data.cardProfile || {}; const { imageSet, name, handle, node, guid } = contact.data.cardProfile || {};
const { token } = contact.data.cardDetail; const { token } = contact.data.cardDetail;
const contactToken = `${guid}.${token}`; const contactToken = `${guid}.${token}`;
const img = imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar'; const img = imageSet ? card.actions.getCardImageUrl(cardId) : null;
ringing.push({ cardId, img, name, handle, contactNode: node, callId, contactToken, calleeToken }); ringing.push({ cardId, img, name, handle, contactNode: node, callId, contactToken, calleeToken });
} }
} }
}); });
let callLogo = null;
const contact = card.state.cards.get(ring.state.cardId);
if (contact) {
const { imageSet } = contact.data.cardProfile || {};
callLogo = imageSet ? card.actions.getCardImageUrl(ring.state.cardId) : null;
}
const { callStatus, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio } = ring.state; const { callStatus, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio } = ring.state;
updateState({ ringing, callStatus, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio }); updateState({ ringing, callStatus, callLogo, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio });
}, [ring.state]); }, [ring.state]);
useEffect(() => { useEffect(() => {