Merge pull request #96 from Resgrid/develop

RU-T46 Bug fixed from testing

Author: ucswift

.github/copilot-instructions.md

@@ -48,6 +48,7 @@ Best Practices:
 - Handle errors gracefully and provide user feedback.
 - Implement proper offline support.
 - Ensure the user interface is intuitive and user-friendly and works seamlessly across different devices and screen sizes.
+- This is an expo managed project that uses prebuild, do not make native code changes outside of expo prebuild capabilities.
 
 Additional Rules:
 

docs/headset-button-ptt-implementation.md

@@ -0,0 +1,189 @@
+# Headset Button PTT (Push-to-Talk) Implementation
+
+This document describes the implementation of AirPods/Bluetooth earbuds button support for Push-to-Talk (PTT) functionality with LiveKit.
+
+## Overview
+
+AirPods and standard Bluetooth earbuds use AVRCP (Audio/Video Remote Control Profile) to communicate media button events. Unlike specialized PTT devices (Aina, B01 Inrico, HYS) that use BLE characteristics, standard Bluetooth audio devices send button events through the system's audio session.
+
+This implementation adds support for using the play/pause button on AirPods and other Bluetooth earbuds to mute/unmute the microphone during a LiveKit voice call.
+
+## Files Modified/Created
+
+### New Files
+
+1. **`src/services/headset-button.service.ts`**
+   - Core service that handles media button events from AirPods and Bluetooth earbuds
+   - Listens for `DeviceEventEmitter` events: `HeadsetButtonEvent`, `AudioRouteChange`, `RemoteControlEvent`, `MediaButtonEvent`
+   - Provides methods for toggling microphone, starting/stopping monitoring
+   - Supports configurable PTT modes: toggle, push-to-talk, disabled
+
+2. **`src/lib/hooks/use-headset-button-ptt.ts`**
+   - Custom React hook for easy integration with components
+   - Auto-starts/stops monitoring based on LiveKit connection status
+   - Provides `toggleMicrophone`, `startMonitoring`, `stopMonitoring` functions
+
+3. **`src/services/__tests__/headset-button.service.test.ts`**
+   - Comprehensive unit tests for the headset button service
+
+### Modified Files
+
+1. **`src/stores/app/bluetooth-audio-store.ts`**
+   - Added `PttMode` type and `HeadsetButtonConfig` interface
+   - Added `isHeadsetButtonMonitoring` state
+   - Added `headsetButtonConfig` state
+   - Added `setIsHeadsetButtonMonitoring` and `setHeadsetButtonConfig` actions
+
+2. **`src/stores/app/livekit-store.ts`**
+   - Added import for `headsetButtonService`
+   - Added `toggleMicrophone` and `setMicrophoneEnabled` actions
+   - Added `startHeadsetButtonMonitoring` and `stopHeadsetButtonMonitoring` actions
+   - Modified `connectToRoom` to auto-start headset button monitoring
+   - Modified `disconnectFromRoom` to auto-stop headset button monitoring
+
+3. **`src/translations/en.json`**
+   - Added translations for headset button PTT feature
+
+4. **`src/translations/es.json`**
+   - Added Spanish translations for headset button PTT feature
+
+5. **`src/translations/ar.json`**
+   - Added Arabic translations for headset button PTT feature
+
+## Usage
+
+### Basic Usage with the Hook
+
+```typescript
+import { useHeadsetButtonPTT } from '@/lib/hooks/use-headset-button-ptt';
+
+function MyVoiceComponent() {
+  const {
+    isMonitoring,
+    isConnected,
+    isMuted,
+    toggleMicrophone,
+    startMonitoring,
+    stopMonitoring,
+  } = useHeadsetButtonPTT();
+
+  return (
+    <View>
+      <Text>Monitoring: {isMonitoring ? 'Active' : 'Inactive'}</Text>
+      <Text>Muted: {isMuted ? 'Yes' : 'No'}</Text>
+      <Button onPress={toggleMicrophone} title="Toggle Mute" />
+    </View>
+  );
+}
+```
+
+### Configuration Options
+
+```typescript
+const { updateConfig } = useHeadsetButtonPTT({
+  autoStartOnConnect: true,  // Auto-start when LiveKit connects
+  autoStopOnDisconnect: true, // Auto-stop when LiveKit disconnects
+  pttMode: 'toggle',         // 'toggle', 'push_to_talk', or 'disabled'
+  soundFeedback: true,       // Play sounds when muting/unmuting
+});
+
+// Update configuration at runtime
+updateConfig({
+  playPauseAction: 'toggle_mute',  // What to do on play/pause press
+  doubleClickAction: 'none',       // What to do on double click
+  longPressAction: 'none',         // What to do on long press
+});
+```
+
+### Using the Service Directly
+
+```typescript
+import { headsetButtonService } from '@/services/headset-button.service';
+
+// Initialize the service
+await headsetButtonService.initialize();
+
+// Start monitoring
+headsetButtonService.startMonitoring();
+
+// Toggle microphone
+await headsetButtonService.toggleMicrophone();
+
+// Enable microphone
+await headsetButtonService.enableMicrophone();
+
+// Disable microphone
+await headsetButtonService.disableMicrophone();
+
+// Stop monitoring
+headsetButtonService.stopMonitoring();
+```
+
+## How It Works
+
+1. When a user connects to a LiveKit room, the headset button monitoring is automatically started.
+
+2. The service listens for media button events from the system:
+   - On iOS: Remote control events via `AVAudioSession`
+   - On Android: Media button events via `AudioManager`
+
+3. When the play/pause button is pressed on AirPods or Bluetooth earbuds:
+   - Single tap: Toggle microphone mute state
+   - Double tap: Configurable action (default: none)
+   - Long press: Configurable action (default: none)
+
+4. Sound feedback is played when muting/unmuting (configurable).
+
+5. When the user disconnects from the LiveKit room, monitoring is automatically stopped.
+
+## Supported Button Types
+
+| Button Type | Description |
+|------------|-------------|
+| `play_pause` | Play/Pause media button (main action button) |
+| `hook` | Headset hook button (answer/end call) |
+| `next` | Skip to next track |
+| `previous` | Skip to previous track |
+| `stop` | Stop media playback |
+
+## PTT Modes
+
+| Mode | Description |
+|------|-------------|
+| `toggle` | Tap to toggle between muted and unmuted |
+| `push_to_talk` | Hold to talk, release to mute (not yet implemented) |
+| `disabled` | Headset buttons don't affect microphone |
+
+## Native Module Requirements
+
+For full functionality, native modules need to be implemented to:
+
+1. **iOS**: Register for remote control events via `MPRemoteCommandCenter`
+2. **Android**: Register a `MediaSession` and handle `MediaButtonReceiver`
+
+The service is designed to receive events from these native modules via `DeviceEventEmitter`. The expected event format:
+
+```typescript
+// HeadsetButtonEvent
+{
+  type: 'play_pause' | 'hook' | 'next' | 'previous' | 'stop',
+  source: 'airpods' | 'bluetooth_headset' | 'wired_headset',
+  deviceName: string
+}
+```
+
+## Testing
+
+Run the tests with:
+
+```bash
+yarn test -- --testPathPattern="headset-button" --no-coverage
+```
+
+## Future Enhancements
+
+1. Implement native modules for iOS and Android to capture media button events
+2. Add push-to-talk (hold to talk) mode
+3. Add support for volume button controls
+4. Add support for custom button mappings
+5. Integrate with iOS CallKit for better system integration

src/app/_layout.tsx

@@ -168,6 +168,7 @@ function RootLayout() {
     <Providers>
       <Stack>
         <Stack.Screen name="(app)" options={{ headerShown: false }} />
+        <Stack.Screen name="call" options={{ headerShown: false }} />
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
         <Stack.Screen name="login/index" options={{ headerShown: false }} />
       </Stack>

src/app/call/[id]/__tests__/_layout.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { View } from 'react-native';
+
+// Mock expo-router
+jest.mock('expo-router', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  const MockStack = React.forwardRef((props: any, ref: any) => (
+    <View ref={ref} testID="mock-stack" {...props}>
+      {props.children}
+    </View>
+  ));
+  MockStack.Screen = jest.fn(() => null);
+  return {
+    Stack: MockStack,
+  };
+});
+
+import CallIdLayout from '../_layout';
+
+describe('Call [id] Layout', () => {
+  it('should render without crashing', () => {
+    const { getByTestId } = render(<CallIdLayout />);
+    expect(getByTestId('mock-stack')).toBeDefined();
+  });
+
+  it('should configure Stack with proper screenOptions', () => {
+    const { getByTestId } = render(<CallIdLayout />);
+    const stack = getByTestId('mock-stack');
+    expect(stack).toBeDefined();
+  });
+});

src/app/call/[id]/_layout.tsx

@@ -0,0 +1,8 @@
+import { Stack } from 'expo-router';
+import React from 'react';
+
+import { callScreenOptions } from '../shared-options';
+
+export default function CallIdLayout() {
+  return <Stack screenOptions={callScreenOptions} />;
+}

src/app/call/[id]/edit.tsx

@@ -80,7 +80,7 @@ export default function EditCall() {
   const { id } = useLocalSearchParams();
   const callId = Array.isArray(id) ? id[0] : id;
   const { callPriorities, callTypes, isLoading: callDataLoading, error: callDataError, fetchCallPriorities, fetchCallTypes } = useCallsStore();
-  const { call, isLoading: callDetailLoading, error: callDetailError, fetchCallDetail } = useCallDetailStore();
+  const { call, callExtraData, isLoading: callDetailLoading, error: callDetailError, fetchCallDetail } = useCallDetailStore();
   const { config } = useCoreStore();
   const { trackEvent } = useAnalytics();
   // Safe wrapper for analytics that catches errors and promise rejections
@@ -187,6 +187,44 @@ export default function EditCall() {
       const priority = callPriorities.find((p) => p.Id === call.Priority);
       const type = callTypes.find((t) => t.Id === call.Type);
 
+      // Parse dispatched items from callExtraData
+      const dispatchedUsers: string[] = [];
+      const dispatchedGroups: string[] = [];
+      const dispatchedRoles: string[] = [];
+      const dispatchedUnits: string[] = [];
+
+      if (callExtraData?.Dispatches) {
+        callExtraData.Dispatches.forEach((dispatch) => {
+          // Type indicates what kind of entity was dispatched
+          // Common types: "User", "Unit", "Group", "Role"
+          const dispatchType = dispatch.Type?.toLowerCase() || '';
+          const dispatchId = dispatch.Id;
+
+          if (dispatchId) {
+            if (dispatchType === 'user' || dispatchType === 'personnel') {
+              dispatchedUsers.push(dispatchId);
+            } else if (dispatchType === 'unit') {
+              dispatchedUnits.push(dispatchId);
+            } else if (dispatchType === 'group' || dispatchType === 'station') {
+              dispatchedGroups.push(dispatchId);
+            } else if (dispatchType === 'role') {
+              dispatchedRoles.push(dispatchId);
+            }
+          }
+        });
+      }
+
+      const initialDispatchSelection: DispatchSelection = {
+        everyone: false,
+        users: dispatchedUsers,
+        groups: dispatchedGroups,
+        roles: dispatchedRoles,
+        units: dispatchedUnits,
+      };
+
+      // Update local state for dispatch selection
+      setDispatchSelection(initialDispatchSelection);
+
       reset({
         name: call.Name || '',
         nature: call.Nature || '',
@@ -201,13 +239,7 @@ export default function EditCall() {
         type: type?.Name || '',
         contactName: call.ContactName || '',
         contactInfo: call.ContactInfo || '',
-        dispatchSelection: {
-          everyone: false,
-          users: [],
-          groups: [],
-          roles: [],
-          units: [],
-        },
+        dispatchSelection: initialDispatchSelection,
       });
 
       // Set selected location if coordinates exist
@@ -224,7 +256,7 @@ export default function EditCall() {
         }
       }
     }
-  }, [call, callPriorities, callTypes, reset]);
+  }, [call, callExtraData, callPriorities, callTypes, reset]);
 
   const onSubmit = async (data: FormValues) => {
     try {

src/app/call/__tests__/_layout.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { View } from 'react-native';
+
+// Mock expo-router
+jest.mock('expo-router', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  const MockStack = React.forwardRef((props: any, ref: any) => (
+    <View ref={ref} testID="mock-stack" {...props}>
+      {props.children}
+    </View>
+  ));
+  MockStack.Screen = jest.fn(() => null);
+  return {
+    Stack: MockStack,
+  };
+});
+
+import CallLayout from '../_layout';
+
+describe('Call Layout', () => {
+  it('should render without crashing', () => {
+    const { getByTestId } = render(<CallLayout />);
+    expect(getByTestId('mock-stack')).toBeDefined();
+  });
+
+  it('should configure Stack with proper screenOptions', () => {
+    const { getByTestId } = render(<CallLayout />);
+    const stack = getByTestId('mock-stack');
+    expect(stack).toBeDefined();
+  });
+});

src/app/call/_layout.tsx

@@ -0,0 +1,8 @@
+import { Stack } from 'expo-router';
+import React from 'react';
+
+import { callScreenOptions } from './shared-options';
+
+export default function CallLayout() {
+  return <Stack screenOptions={callScreenOptions} />;
+}

src/app/call/shared-options.ts

@@ -0,0 +1,9 @@
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import { Platform } from 'react-native';
+
+export const callScreenOptions: NativeStackNavigationOptions = {
+  headerBackVisible: false,
+  ...(Platform.OS === 'android' && {
+    animation: 'slide_from_right',
+  }),
+};

src/components/calendar/calendar-item-details-sheet.tsx

@@ -235,7 +235,7 @@ export const CalendarItemDetailsSheet: React.FC<CalendarItemDetailsSheetProps> =
   return (
     <CustomBottomSheet isOpen={isOpen} onClose={onClose}>
       <VStack style={{ flex: 1 }}>
-        <ScrollView showsVerticalScrollIndicator={true} contentContainerStyle={{ padding: 24, flexGrow: 1 }}>
+        <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={true} contentContainerStyle={{ padding: 24, paddingBottom: 40 }}>
           {/* Header */}
           <VStack className="mb-6">
             <HStack className="mb-2 items-start justify-between">