martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 18:15:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

implementing ringing list

Browse Source
This commit is contained in:
balzack 2025-01-31 18:31:24 -08:00
parent f6cbc7853e
commit a3535caf4f
2 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/client/web/src/calling/Calling.module.css
View File

@ -23,3 +23,13 @@
padding-right: 16px;
padding-left: 16px;
}
.off {
transform: rotate(135deg);
}
.space {
position: relative;
top: 4px;
padding: 8px;
}

45
app/client/web/src/calling/Calling.tsx
View File

@ -2,13 +2,34 @@ import React, { useEffect, useState } from 'react';
import classes from './Calling.module.css'
import { useCalling } from './useCalling.hook';
import { Card } from '../card/Card';
import { Modal, ActionIcon } from '@mantine/core'
import { IconCancel } from '@tabler/icons-react'
import { Modal, Text, ActionIcon } from '@mantine/core'
import { IconEyeX, IconPhone, IconPhoneOff } from '@tabler/icons-react'
import { modals } from '@mantine/modals'
import { Colors } from '../constants/Colors'
export function Calling({ callCard }: { callCard: string }) {
const [connecting, setConnecting] = useState(false);
const [applyingVideo, setApplyingVideo] = useState(false);
const [applyingAudio, setApplyingAudio] = useState(false);
const [ignoring, setIgnoring] = useState(false);
const [declining, setDeclining] = useState(false);
const [accepting, setAccepting] = useState(false);
const { state, actions } = useCalling();
const showError = () => {
modals.openConfirmModal({
title: state.strings.operationFailed,
withCloseButton: true,
overlayProps: {
backgroundOpacity: 0.55,
blur: 3,
},
children: <Text>{state.strings.tryAgain}</Text>,
cancelProps: { display: 'none' },
confirmProps: { display: 'none' },
})
}
const toggleVideo = async () => {
if (!applyingVideo) {
setApplyingVideo(true);
@ -20,7 +41,7 @@ export function Calling({ callCard }: { callCard: string }) {
}
} catch (err) {
console.log(err);
setAlert(true);
showError();
}
setApplyingVideo(false);
}
@ -37,7 +58,7 @@ export function Calling({ callCard }: { callCard: string }) {
}
} catch (err) {
console.log(err);
setAlert(true);
showError();
}
setApplyingAudio(false);
}
@ -50,7 +71,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.end();
} catch (err) {
console.log(err);
setAlert(true);
showError();
}
setEnding(false);
}
@ -63,7 +84,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.call(cardId);
} catch (err) {
console.log(err);
setAlert(true);
showError();
}
setConnecting(false);
}
@ -76,7 +97,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.accept(callId, card);
} catch (err) {
console.log(err);
setAlert(true);
showError();
}
setAccepting(null);
}
@ -89,7 +110,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.ignore(callId, card);
} catch (err) {
console.log(err);
setAlert(true);
showError();
}
setIgnoring(null);
}
@ -102,7 +123,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.decline(callId, card);
} catch (err) {
console.log(err);
setAlert(true);
showError();
}
setDeclining(null);
}
@ -129,9 +150,9 @@ export function Calling({ callCard }: { callCard: string }) {
const calls = state.calls.map((contact, index) => {
const { callId, card } = contact;
const { name, handle, node, imageUrl } = card;
const ignoreButton = <ActionIcon variant="subtle" onClick={()=>{}}><IconCancel /></ActionIcon>
const declineButton = <ActionIcon variant="subtle" onClick={()=>{}}><IconCancel /></ActionIcon>
const acceptButton = <ActionIcon variant="subtle" onClick={()=>{}}><IconCancel /></ActionIcon>
const ignoreButton = <ActionIcon variant="subtle" loading={ignoring===callId} onClick={()=>ignore(callId, card)} color={Colors.pending}><IconEyeX /></ActionIcon>
const declineButton = <div className={classes.space}><ActionIcon variant="subtle" loading={declining===callId} onClick={()=>decline(callId, card)} color={Colors.offsync}><IconPhone className={classes.off} /></ActionIcon></div>
const acceptButton = <ActionIcon variant="subtle" loading={accepting===callId} onClick={()=>accept(callId, card)} color={Colors.primary}><IconPhone /></ActionIcon>
return (
<div key={index} className={classes.caller}>