martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-05 07:55:15 +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-right: 16px;
padding-left: 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 classes from './Calling.module.css'
import { useCalling } from './useCalling.hook'; import { useCalling } from './useCalling.hook';
import { Card } from '../card/Card'; import { Card } from '../card/Card';
import { Modal, ActionIcon } from '@mantine/core' import { Modal, Text, ActionIcon } from '@mantine/core'
import { IconCancel } from '@tabler/icons-react' import { IconEyeX, IconPhone, IconPhoneOff } from '@tabler/icons-react'
import { modals } from '@mantine/modals'
import { Colors } from '../constants/Colors'
export function Calling({ callCard }: { callCard: string }) { export function Calling({ callCard }: { callCard: string }) {
const [connecting, setConnecting] = useState(false); 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 { 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 () => { const toggleVideo = async () => {
if (!applyingVideo) { if (!applyingVideo) {
setApplyingVideo(true); setApplyingVideo(true);
@ -20,7 +41,7 @@ export function Calling({ callCard }: { callCard: string }) {
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err);
setAlert(true); showError();
} }
setApplyingVideo(false); setApplyingVideo(false);
} }
@ -37,7 +58,7 @@ export function Calling({ callCard }: { callCard: string }) {
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err);
setAlert(true); showError();
} }
setApplyingAudio(false); setApplyingAudio(false);
} }
@ -50,7 +71,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.end(); await actions.end();
} catch (err) { } catch (err) {
console.log(err); console.log(err);
setAlert(true); showError();
} }
setEnding(false); setEnding(false);
} }
@ -63,7 +84,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.call(cardId); await actions.call(cardId);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
setAlert(true); showError();
} }
setConnecting(false); setConnecting(false);
} }
@ -76,7 +97,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.accept(callId, card); await actions.accept(callId, card);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
setAlert(true); showError();
} }
setAccepting(null); setAccepting(null);
} }
@ -89,7 +110,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.ignore(callId, card); await actions.ignore(callId, card);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
setAlert(true); showError();
} }
setIgnoring(null); setIgnoring(null);
} }
@ -102,7 +123,7 @@ export function Calling({ callCard }: { callCard: string }) {
await actions.decline(callId, card); await actions.decline(callId, card);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
setAlert(true); showError();
} }
setDeclining(null); setDeclining(null);
} }
@ -129,9 +150,9 @@ export function Calling({ callCard }: { callCard: string }) {
const calls = state.calls.map((contact, index) => { const calls = state.calls.map((contact, index) => {
const { callId, card } = contact; const { callId, card } = contact;
const { name, handle, node, imageUrl } = card; const { name, handle, node, imageUrl } = card;
const ignoreButton = <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 = <ActionIcon variant="subtle" onClick={()=>{}}><IconCancel /></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" onClick={()=>{}}><IconCancel /></ActionIcon> const acceptButton = <ActionIcon variant="subtle" loading={accepting===callId} onClick={()=>accept(callId, card)} color={Colors.primary}><IconPhone /></ActionIcon>
return ( return (
<div key={index} className={classes.caller}> <div key={index} className={classes.caller}>