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

fixed position of video call in webapp

Browse Source
This commit is contained in:
Roland Osborne 2023-04-12 14:09:46 -07:00
parent adbb07da30
commit 9ccbbe6838
3 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/mobile/src/context/useRingContext.hook.js
View File

@ -36,6 +36,7 @@ export function useRingContext() {
const EXPIRE = 3000 const EXPIRE = 3000
const RING = 2000 const RING = 2000
const RING_COUNT = 10
const ringing = useRef(new Map()); const ringing = useRef(new Map());
const calling = useRef(null); const calling = useRef(null);
const ws = useRef(null); const ws = useRef(null);
@ -429,9 +430,16 @@ export function useRingContext() {
let index = 0; let index = 0;
const ringInterval = setInterval(async () => { const ringInterval = setInterval(async () => {
try { try {
if (index > RING_COUNT) {
if (ws.current) {
ws.current.close();
}
}
else {
await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken }); await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken });
index += 1; index += 1;
} }
}
catch (err) { catch (err) {
console.log(err); console.log(err);
} }

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

@ -22,6 +22,7 @@ export function useRingContext() {
const EXPIRE = 3000 const EXPIRE = 3000
const RING = 2000 const RING = 2000
const RING_COUNT = 10
const ringing = useRef(new Map()); const ringing = useRef(new Map());
const calling = useRef(null); const calling = useRef(null);
const ws = useRef(null); const ws = useRef(null);
@ -390,9 +391,16 @@ export function useRingContext() {
let index = 0; let index = 0;
const ringInterval = setInterval(async () => { const ringInterval = setInterval(async () => {
try { try {
if (index > RING_COUNT) {
if (ws.current) {
ws.current.close();
}
}
else {
await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken }); await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken });
index += 1; index += 1;
} }
}
catch (err) { catch (err) {
console.log(err); console.log(err);
} }

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

@ -23,6 +23,7 @@ export function Session() {
const [ringing, setRinging] = useState([]); const [ringing, setRinging] = useState([]);
const [callWidth, setCallWidth] = useState(256); const [callWidth, setCallWidth] = useState(256);
const [callHeight, setCallHeight] = useState(256); const [callHeight, setCallHeight] = useState(256);
const [callModal, setCallModal] = useState({ width: 256, height: 256, offset: 0 });
const remote = useRef(); const remote = useRef();
const local = useRef(); const local = useRef();
@ -44,23 +45,20 @@ export function Session() {
setRinging(incoming); setRinging(incoming);
}, [state.ringing]); }, [state.ringing]);
const getWidth = () => { useEffect(() => {
if (state.remoteVideo) { if (!state.remoteVideo) {
return callWidth; setCallModal({ width: 256 + 12, height: 256 + 12, offset: 0 });
} }
return 256; else {
setCallModal({ width: callWidth + 12, height: callHeight + 12, offset: ((268 - callHeight) / 2) });
} }
const getHeight = () => { }, [callWidth, callHeight, state.remoteVideo])
if (state.remoteVideo) {
return callHeight;
}
return 256;
}
useEffect(() => { useEffect(() => {
if (remote.current) { if (remote.current) {
remote.current.onloadedmetadata = (ev) => { remote.current.onloadedmetadata = (ev) => {
const { videoWidth, videoHeight } = ev.target || { videoWidth: 256, videoHeight: 256 } const { videoWidth, videoHeight } = ev.target || { videoWidth: 256, videoHeight: 256 }
if ((window.innerWidth * 8) / 10 < videoWidth) { if ((window.innerWidth * 8) / 10 < videoWidth) {
const scaledWidth = window.innerWidth * 8 / 10; const scaledWidth = window.innerWidth * 8 / 10;
@ -80,16 +78,15 @@ export function Session() {
setCallHeight(height); setCallHeight(height);
setCallWidth(videoWidth * (height / videoHeight)); setCallWidth(videoWidth * (height / videoHeight));
} }
else if (videoHeight < 256 || videoWidth < 256) { else if (videoHeight < 72 || videoWidth < 72) {
setCallHeight(256); setCallHeight(72);
setCallWidth(256); setCallWidth(72);
} }
else { else {
setCallHeight(videoHeight); setCallHeight(videoHeight);
setCallWidth(videoWidth); setCallWidth(videoWidth);
} }
}; };
console.log(" SET REMOTE STREAM");
remote.current.srcObject = state.remoteStream; remote.current.srcObject = state.remoteStream;
remote.current.load(); remote.current.load();
remote.current.play(); remote.current.play();
@ -330,7 +327,7 @@ console.log(" SET REMOTE STREAM");
</div> </div>
</RingingWrapper> </RingingWrapper>
</Modal> </Modal>
<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={callModal.width} height={callModal.height} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 6 }}>
<CallingWrapper> <CallingWrapper>
{ !state.remoteVideo && ( { !state.remoteVideo && (
<Logo url={state.callLogo} width={256} height={256} radius={8} /> <Logo url={state.callLogo} width={256} height={256} radius={8} />