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 RING = 2000
const RING_COUNT = 10
const ringing = useRef(new Map());
const calling = useRef(null);
const ws = useRef(null);
@ -429,9 +430,16 @@ export function useRingContext() {
let index = 0;
const ringInterval = setInterval(async () => {
try {
if (index > RING_COUNT) {
if (ws.current) {
ws.current.close();
}
}
else {
await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken });
index += 1;
}
}
catch (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 RING = 2000
const RING_COUNT = 10
const ringing = useRef(new Map());
const calling = useRef(null);
const ws = useRef(null);
@ -390,9 +391,16 @@ export function useRingContext() {
let index = 0;
const ringInterval = setInterval(async () => {
try {
if (index > RING_COUNT) {
if (ws.current) {
ws.current.close();
}
}
else {
await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken });
index += 1;
}
}
catch (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 [callWidth, setCallWidth] = useState(256);
const [callHeight, setCallHeight] = useState(256);
const [callModal, setCallModal] = useState({ width: 256, height: 256, offset: 0 });
const remote = useRef();
const local = useRef();
@ -44,23 +45,20 @@ export function Session() {
setRinging(incoming);
}, [state.ringing]);
const getWidth = () => {
if (state.remoteVideo) {
return callWidth;
useEffect(() => {
if (!state.remoteVideo) {
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 = () => {
if (state.remoteVideo) {
return callHeight;
}
return 256;
}
}, [callWidth, callHeight, state.remoteVideo])
useEffect(() => {
if (remote.current) {
remote.current.onloadedmetadata = (ev) => {
const { videoWidth, videoHeight } = ev.target || { videoWidth: 256, videoHeight: 256 }
if ((window.innerWidth * 8) / 10 < videoWidth) {
const scaledWidth = window.innerWidth * 8 / 10;
@ -80,16 +78,15 @@ export function Session() {
setCallHeight(height);
setCallWidth(videoWidth * (height / videoHeight));
}
else if (videoHeight < 256 || videoWidth < 256) {
setCallHeight(256);
setCallWidth(256);
else if (videoHeight < 72 || videoWidth < 72) {
setCallHeight(72);
setCallWidth(72);
}
else {
setCallHeight(videoHeight);
setCallWidth(videoWidth);
}
};
console.log(" SET REMOTE STREAM");
remote.current.srcObject = state.remoteStream;
remote.current.load();
remote.current.play();
@ -330,7 +327,7 @@ console.log(" SET REMOTE STREAM");
</div>
</RingingWrapper>
</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>
{ !state.remoteVideo && (
<Logo url={state.callLogo} width={256} height={256} radius={8} />