mirror of
https://github.com/balzack/databag.git
synced 2025-02-12 03:29:16 +00:00
render contact logo when video off
This commit is contained in:
Roland Osborne
parent
201861c8b9
commit
41ca37d2df
@ -10,6 +10,7 @@ export function useRingContext() {
|
||||
const [state, setState] = useState({
|
||||
ringing: new Map(),
|
||||
callStatus: null,
|
||||
cardId: null,
|
||||
localStream: null,
|
||||
localVideo: false,
|
||||
localAudio: false,
|
||||
@ -30,6 +31,18 @@ export function useRingContext() {
|
||||
const videoTrack = 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) => {
|
||||
setState((s) => ({ ...s, ...value }))
|
||||
}
|
||||
@ -95,10 +108,10 @@ export function useRingContext() {
|
||||
|
||||
// connect signal socket
|
||||
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
|
||||
pc.current = new RTCPeerConnection();
|
||||
pc.current = new RTCPeerConnection({ iceServers });
|
||||
pc.current.ontrack = (ev) => {
|
||||
if (!stream.current) {
|
||||
stream.current = new MediaStream();
|
||||
@ -253,10 +266,10 @@ export function useRingContext() {
|
||||
}, RING);
|
||||
|
||||
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
|
||||
pc.current = new RTCPeerConnection();
|
||||
pc.current = new RTCPeerConnection({ iceServers });
|
||||
pc.current.ontrack = (ev) => { //{streams: [stream]}) => {
|
||||
console.log("ADD TRACK", ev);
|
||||
if (!stream.current) {
|
||||
@ -385,7 +398,7 @@ export function useRingContext() {
|
||||
else {
|
||||
videoTrack.current.enabled = true;
|
||||
}
|
||||
updateState({ localVideo: true });
|
||||
updateState({ localVideo: true, localAudio: true });
|
||||
},
|
||||
disableVideo: async () => {
|
||||
if (videoTrack.current) {
|
||||
@ -399,7 +412,7 @@ export function useRingContext() {
|
||||
},
|
||||
disableAudio: async () => {
|
||||
audioTrack.current.enabled = false;
|
||||
updateState({ loaclAudio: false });
|
||||
updateState({ localAudio: false });
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ export function Session() {
|
||||
const label = ring.name ? ring.name : `${ring.handle}@${ring.node}`;
|
||||
incoming.push(
|
||||
<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 onClick={() => actions.ignore(ring)} className="ringing-ignore"><EyeInvisibleOutlined /></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.play();
|
||||
}
|
||||
else {
|
||||
console.log("video player not set");
|
||||
@ -95,6 +96,7 @@ export function Session() {
|
||||
useEffect(() => {
|
||||
if (local.current) {
|
||||
local.current.srcObject = state.localStream;
|
||||
local.current.play();
|
||||
}
|
||||
}, [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 }}>
|
||||
<CallingWrapper>
|
||||
{ !state.remoteVideo && (
|
||||
<Logo url={null} width={256} height={256} radius={8} />
|
||||
<Logo url={state.callLogo} width={256} height={256} radius={8} />
|
||||
)}
|
||||
{ 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")} />
|
||||
)}
|
||||
{ state.localStream && (
|
||||
<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")} />
|
||||
</div>
|
||||
)}
|
||||
<div className="calling-options">
|
||||
<div className="calling-options calling-hovered">
|
||||
{ state.localVideo && (
|
||||
<div className="calling-option" onClick={actions.disableVideo}>
|
||||
<IoVideocamOutline />
|
||||
@ -359,7 +361,7 @@ export function Session() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="calling-end" onClick={actions.end}>
|
||||
<div className="calling-end calling-hovered" onClick={actions.end}>
|
||||
<IoCallOutline />
|
||||
</div>
|
||||
</CallingWrapper>
|
||||
|
||||
@ -53,7 +53,7 @@ export const RingingWrapper = styled.div`
|
||||
background-color: ${Colors.white};
|
||||
border-radius: 16px;
|
||||
margin: 8px;
|
||||
transform: rotate(135deg);
|
||||
transform: rotate(224deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -77,9 +77,12 @@ export const CallingWrapper = styled.div`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover .calling-hovered {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.calling-local {
|
||||
width: 33%;
|
||||
height: 33%;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
@ -100,19 +103,19 @@ export const CallingWrapper = styled.div`
|
||||
color: ${Colors.white};
|
||||
font-size: 24px;
|
||||
background-color: ${Colors.alert};
|
||||
display: flex;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transform: rotate(270deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.calling-options {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
||||
@ -25,6 +25,7 @@ export function useSession() {
|
||||
loading: false,
|
||||
ringing: [],
|
||||
callStatus: null,
|
||||
callLogo: null,
|
||||
localStream: null,
|
||||
localVideo: false,
|
||||
localAudio: false,
|
||||
@ -60,14 +61,21 @@ export function useSession() {
|
||||
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';
|
||||
const img = imageSet ? card.actions.getCardImageUrl(cardId) : null;
|
||||
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;
|
||||
updateState({ ringing, callStatus, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio });
|
||||
updateState({ ringing, callStatus, callLogo, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio });
|
||||
}, [ring.state]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user