Skip to content

feat(voip): tap-to-hide call controls with animations #7078

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diegolmello merged 12 commits into from
Apr 6, 2026
Merged

feat(voip): tap-to-hide call controls with animations #7078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ba7972d
feat(voip): add controlsVisible state and actions to call store
diegolmello Mar 31, 2026
2a0af77
feat(voip): tap CallerInfo to toggle controls visibility
diegolmello Mar 31, 2026
bb8e6f1
feat(voip): animate CallButtons slide-down + fade on toggle
diegolmello Mar 31, 2026
520b1b4
fix(voip): update CallerInfo testID references in CallView tests
diegolmello Mar 31, 2026
ff3fcdc
feat(voip): animate MediaCallHeader slide-up + fade on toggle
diegolmello Mar 31, 2026
9e3e7a4
feat(voip): auto-show controls on call state changes
diegolmello Mar 31, 2026
8e27ba7
chore: mark all controls animation slices as complete
diegolmello Mar 31, 2026
99a5b9a
chore: format code and fix lint issues
diegolmello Mar 31, 2026
e6ee7ff
refactor(voip): route force-show controls through showControls
diegolmello Apr 2, 2026
72540a9
Fix animation
diegolmello Apr 2, 2026
1155e88
fix(voip): animate header background to transparent when hiding controls
diegolmello Apr 6, 2026
a8ae63c
fix(voip): fold controlsVisible into set() calls, update snapshots, r…
diegolmello Apr 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions app/containers/MediaCallHeader/MediaCallHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,39 @@ describe('MediaCallHeader', () => {
expect(endCall).toHaveBeenCalledTimes(1);
});

it('should have pointerEvents none when focused and controls hidden', () => {
setStoreState({ focused: true, controlsVisible: false });
const { getByTestId } = render(
<Wrapper>
<MediaCallHeader />
</Wrapper>
);

expect(getByTestId('media-call-header')).toHaveProp('pointerEvents', 'none');
});

it('should have pointerEvents auto when focused and controls visible', () => {
setStoreState({ focused: true, controlsVisible: true });
const { getByTestId } = render(
<Wrapper>
<MediaCallHeader />
</Wrapper>
);

expect(getByTestId('media-call-header')).toHaveProp('pointerEvents', 'auto');
});

it('should have pointerEvents auto when not focused even if controls hidden', () => {
setStoreState({ focused: false, controlsVisible: false });
const { getByTestId } = render(
<Wrapper>
<MediaCallHeader />
</Wrapper>
);

expect(getByTestId('media-call-header')).toHaveProp('pointerEvents', 'auto');
});

it('should show alert when content is pressed', () => {
setStoreState();
const { getByTestId } = render(
Expand Down
32 changes: 28 additions & 4 deletions app/containers/MediaCallHeader/MediaCallHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { StyleSheet, View } from 'react-native';
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useShallow } from 'zustand/react/shallow';

import { useTheme } from '../../theme';
import Collapse from './components/Collapse';
import EndCall from './components/EndCall';
import { useCallStore } from '../../lib/services/voip/useCallStore';
import { useCallStore, useControlsVisible } from '../../lib/services/voip/useCallStore';
import { Content } from './components/Content';
import { CONTROLS_ANIMATION_DURATION } from '../../views/CallView/styles';

const styles = StyleSheet.create({
header: {
Expand All @@ -25,6 +27,23 @@ const MediaCallHeader = () => {
const { colors } = useTheme();
const insets = useSafeAreaInsets();
const call = useCallStore(useShallow(state => state.call));
const focused = useCallStore(state => state.focused);
const controlsVisible = useControlsVisible();

const shouldHide = focused && !controlsVisible;

const animatedStyle = useAnimatedStyle(() => ({
opacity: withTiming(shouldHide ? 0 : 1, { duration: CONTROLS_ANIMATION_DURATION }),
transform: [
{
translateY: withTiming(shouldHide ? -100 : 0, {
duration: CONTROLS_ANIMATION_DURATION
})
}
],
backgroundColor: withTiming(shouldHide ? 'transparent' : colors.surfaceNeutral, { duration: CONTROLS_ANIMATION_DURATION }),
borderBottomColor: withTiming(shouldHide ? 'transparent' : colors.strokeLight, { duration: CONTROLS_ANIMATION_DURATION })
}));

const defaultHeaderStyle = {
backgroundColor: colors.surfaceNeutral,
Expand All @@ -36,13 +55,18 @@ const MediaCallHeader = () => {
}

return (
<View
style={[styles.header, { ...defaultHeaderStyle, borderBottomColor: colors.strokeLight, paddingTop: insets.top + 12 }]}
<Animated.View
style={[
styles.header,
{ ...defaultHeaderStyle, borderBottomColor: colors.strokeLight, paddingTop: insets.top + 12 },
animatedStyle
]}
pointerEvents={shouldHide ? 'none' : 'auto'}
testID='media-call-header'>
<Collapse />
<Content />
<EndCall />
</View>
</Animated.View>
);
};

Expand Down
90 changes: 78 additions & 12 deletions app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
}
>
<View
pointerEvents="auto"
style={
[
{
Expand All @@ -24,6 +25,16 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
"borderBottomColor": "#CBCED1",
"paddingTop": 12,
},
{
"backgroundColor": "#E4E7EA",
"borderBottomColor": "#CBCED1",
"opacity": 1,
"transform": [
{
"translateY": 0,
},
],
},
]
}
testID="media-call-header"
Expand All @@ -50,7 +61,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={13}
handlerTag={19}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -277,7 +288,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={14}
handlerTag={20}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -356,6 +367,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
}
>
<View
pointerEvents="auto"
style={
[
{
Expand All @@ -371,6 +383,16 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
"borderBottomColor": "#CBCED1",
"paddingTop": 12,
},
{
"backgroundColor": "#E4E7EA",
"borderBottomColor": "#CBCED1",
"opacity": 1,
"transform": [
{
"translateY": 0,
},
],
},
]
}
testID="media-call-header"
Expand All @@ -397,7 +419,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={15}
handlerTag={21}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -624,7 +646,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={16}
handlerTag={22}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -703,6 +725,7 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
}
>
<View
pointerEvents="auto"
style={
[
{
Expand All @@ -718,6 +741,16 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
"borderBottomColor": "#CBCED1",
"paddingTop": 12,
},
{
"backgroundColor": "#E4E7EA",
"borderBottomColor": "#CBCED1",
"opacity": 1,
"transform": [
{
"translateY": 0,
},
],
},
]
}
testID="media-call-header"
Expand All @@ -744,7 +777,7 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={17}
handlerTag={23}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -967,7 +1000,7 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={18}
handlerTag={24}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -1046,6 +1079,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
}
>
<View
pointerEvents="auto"
style={
[
{
Expand All @@ -1061,6 +1095,16 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
"borderBottomColor": "#CBCED1",
"paddingTop": 12,
},
{
"backgroundColor": "#E4E7EA",
"borderBottomColor": "#CBCED1",
"opacity": 1,
"transform": [
{
"translateY": 0,
},
],
},
]
}
testID="media-call-header"
Expand All @@ -1087,7 +1131,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={19}
handlerTag={25}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -1314,7 +1358,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={20}
handlerTag={26}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -1413,6 +1457,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
}
>
<View
pointerEvents="auto"
style={
[
{
Expand All @@ -1428,6 +1473,16 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
"borderBottomColor": "#CBCED1",
"paddingTop": 12,
},
{
"backgroundColor": "#E4E7EA",
"borderBottomColor": "#CBCED1",
"opacity": 1,
"transform": [
{
"translateY": 0,
},
],
},
]
}
testID="media-call-header"
Expand All @@ -1454,7 +1509,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={21}
handlerTag={27}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -1681,7 +1736,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={22}
handlerTag={28}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -1760,6 +1815,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
}
>
<View
pointerEvents="auto"
style={
[
{
Expand All @@ -1775,6 +1831,16 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
"borderBottomColor": "#CBCED1",
"paddingTop": 12,
},
{
"backgroundColor": "#E4E7EA",
"borderBottomColor": "#CBCED1",
"opacity": 1,
"transform": [
{
"translateY": 0,
},
],
},
]
}
testID="media-call-header"
Expand All @@ -1801,7 +1867,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={23}
handlerTag={29}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down Expand Up @@ -2028,7 +2094,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
collapsable={false}
delayLongPress={600}
enabled={true}
handlerTag={24}
handlerTag={30}
handlerType="NativeViewGestureHandler"
hitSlop={
{
Expand Down
1 change: 0 additions & 1 deletion app/lib/services/voip/MediaSessionInstance.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ jest.mock('react-native-callkeep', () => ({
setAvailable: jest.fn()
}
}));

jest.mock('react-native-device-info', () => ({
getUniqueId: jest.fn(() => 'test-device-id'),
getUniqueIdSync: jest.fn(() => 'test-device-id')
Expand Down
Loading
Loading