martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-03-13 09:00:06 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

show rotating bell when calling

Browse Source
This commit is contained in:
Roland Osborne 2025-02-27 14:43:37 -08:00
parent fb1ef135ba
commit e775d00fc6
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/client/mobile/src/ring/Ring.tsx
View File

@ -1,24 +1,35 @@
import React, { useEffect, useState } from 'react';
import React, { useRef, useEffect, useState } from 'react';
import { Animated, useAnimatedValue, View } from 'react-native';
import { useRing } from './useRing.hook';
import { styles } from './Ring.styled'
import { Card as Contact } from '../card/Card';
import { Text, Surface, IconButton, ActivityIndicator } from 'react-native-paper';
import { Icon, Text, Surface, IconButton, ActivityIndicator } from 'react-native-paper';
import { Confirm } from '../confirm/Confirm';
import { Colors } from '../constants/Colors';
const ACCEPT_DELAY_MS = 100;
const RING_ICON_MS = 500;
export function Ring() {
const { state, actions } = useRing();
const [alert, setAlert] = useState(false);
const [ending, setEnding] = useState(false);
const counting = useRef(0);
const [counter, setCounter] = useState(0);
const [applyingAudio, setApplyingAudio] = useState(false);
const [accepting, setAccepting] = useState(null as null|string);
const [ignoring, setIgnoring] = useState(null as null|string);
const [declining, setDeclining] = useState(null as null|string);
const scale = useAnimatedValue(0)
useEffect(() => {
const ringing = setInterval(() => {
counting.current += 1;
setCounter(counting.current);
}, RING_ICON_MS);
return () => clearInterval(ringing);
}, []);
useEffect(() => {
if (accepting || state.calling || state.calls.length > 0) {
Animated.timing(scale, {
@ -157,7 +168,9 @@ export function Ring() {
<Text style={styles.duration}>{ `${Math.floor(state.duration/60)}:${(state.duration % 60).toString().padStart(2, '0')}` }</Text>
)}
{ !state.connected && (
<ActivityIndicator size={18} />
<View style={{ transform: [{ rotate: counter % 2 ? '15deg' : '-15deg' }] }}>
<Icon size={24} source="bell-outline" color={Colors.primary} />
</View>
)}
</View>
<View style={styles.end}>