Merge pull request #124 from Resgrid/develop

Develop

Author: ucswift

docs/audio-stream-refactoring.md

@@ -42,11 +42,16 @@ await setAudioModeAsync({
   allowsRecording: false,
   shouldPlayInBackground: true,
   playsInSilentMode: true,
-  interruptionMode: 'duckOthers',
+  interruptionMode: 'doNotMix',
   shouldRouteThroughEarpiece: false,
 });
 ```
 
+`interruptionMode` must be `'doNotMix'` for the OS to associate lock screen controls with the player.
+The store calls `player.setActiveForLockScreen(true, { title: stream.Name })` before `play()` and
+`player.clearLockScreenControls()` in `stopStream()` — without the lock screen session, Android stops
+background playback after roughly three minutes.
+
 | expo-av | expo-audio |
 | --- | --- |
 | `allowsRecordingIOS` | `allowsRecording` |

global.css

@@ -695,3 +695,31 @@
   --shadow-soft-4: 0px 0px 40px rgba(38, 38, 38, 0.1);
 }
 
+
+/* ─── Web-only keyframes ──────────────────────────────────────────
+   react-native-web has no native animated module, so every RN
+   `Animated` value is driven from JS at 60fps and writes inline
+   styles to the DOM each frame. Long-running loops (marquees,
+   pulses) are handed to CSS instead so they run on the compositor
+   and cost the main thread nothing. */
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.75;
+  }
+}
+
+/* The marquee track holds two identical halves, so translating it by
+   -50% of its own width advances exactly one half and lands back on a
+   pixel-identical frame -- seamless without measuring anything in JS. */
+@keyframes dispatch-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}

jest-setup.ts

@@ -15,6 +15,8 @@ jest.mock('expo-audio', () => ({
     replace: jest.fn(),
     seekTo: jest.fn(),
     addListener: jest.fn(() => ({ remove: jest.fn() })),
+    setActiveForLockScreen: jest.fn(),
+    clearLockScreenControls: jest.fn(),
     playing: false,
     paused: false,
     isLoaded: true,

src/api/common/__tests__/client.test.ts

@@ -0,0 +1,111 @@
+import { type AxiosError, type AxiosRequestConfig } from 'axios';
+
+import useAuthStore from '@/stores/auth/store';
+
+jest.mock('@/lib/logging', () => ({
+  logger: { error: jest.fn(), warn: jest.fn(), info: jest.fn(), debug: jest.fn() },
+}));
+
+jest.mock('@/lib/storage/app', () => ({
+  getBaseApiUrl: () => 'https://example.test/api/v4',
+}));
+
+jest.mock('@/stores/auth/store', () => ({
+  __esModule: true,
+  default: {
+    getState: jest.fn(),
+  },
+}));
+
+const mockRefreshAccessToken = jest.fn();
+const getState = (useAuthStore as unknown as { getState: jest.Mock }).getState;
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { api } = require('../client') as typeof import('../client');
+
+const unauthorized = (config: AxiosRequestConfig): AxiosError => {
+  const error = new Error('Request failed with status code 401') as AxiosError;
+  error.isAxiosError = true;
+  error.config = config as AxiosError['config'];
+  error.response = { status: 401, statusText: 'Unauthorized', data: {}, headers: {}, config: config as never };
+  return error;
+};
+
+describe('api client 401 handling', () => {
+  let adapterCalls: number;
+
+  beforeEach(() => {
+    adapterCalls = 0;
+    mockRefreshAccessToken.mockReset();
+    getState.mockReset();
+    api.defaults.adapter = async (config) => {
+      adapterCalls += 1;
+      throw unauthorized(config);
+    };
+  });
+
+  it('does not attempt a refresh once the refresh token is gone', async () => {
+    getState.mockReturnValue({
+      accessToken: null,
+      refreshToken: null,
+      refreshAccessToken: mockRefreshAccessToken,
+    });
+
+    await expect(api.get('/Calls/GetActiveCalls')).rejects.toMatchObject({ response: { status: 401 } });
+
+    expect(mockRefreshAccessToken).not.toHaveBeenCalled();
+    // The original request only -- no retry, no doomed refresh round-trip.
+    expect(adapterCalls).toBe(1);
+  });
+
+  it('collapses a serial burst of 401s into a single refresh attempt', async () => {
+    // Mirrors the startup chain: each store awaits the previous one, so the in-flight
+    // dedupe never sees them overlap. The first 401 spends the refresh token; the rest
+    // must fail fast rather than replay the refresh once each.
+    let refreshToken: string | null = 'refresh-token';
+    mockRefreshAccessToken.mockImplementation(async () => {
+      refreshToken = null; // refresh failed -> store cleared the session
+    });
+    getState.mockImplementation(() => ({
+      accessToken: null,
+      refreshToken,
+      refreshAccessToken: mockRefreshAccessToken,
+    }));
+
+    const endpoints = ['/Calls/GetActiveCalls', '/Security/GetCurrentUsersRights', '/WeatherAlerts/GetSettings', '/WeatherAlerts/GetActiveAlerts'];
+    for (const endpoint of endpoints) {
+      await expect(api.get(endpoint)).rejects.toBeDefined();
+    }
+
+    expect(mockRefreshAccessToken).toHaveBeenCalledTimes(1);
+    expect(adapterCalls).toBe(4);
+  });
+
+  it('refreshes and retries when a token is available', async () => {
+    getState.mockReturnValue({
+      accessToken: 'stale-token',
+      refreshToken: 'refresh-token',
+      refreshAccessToken: mockRefreshAccessToken,
+    });
+    mockRefreshAccessToken.mockImplementation(async () => {
+      getState.mockReturnValue({
+        accessToken: 'fresh-token',
+        refreshToken: 'refresh-token',
+        refreshAccessToken: mockRefreshAccessToken,
+      });
+    });
+
+    api.defaults.adapter = async (config) => {
+      adapterCalls += 1;
+      if (adapterCalls === 1) {
+        throw unauthorized(config);
+      }
+      return { data: { ok: true }, status: 200, statusText: 'OK', headers: {}, config } as never;
+    };
+
+    await expect(api.get('/Calls/GetActiveCalls')).resolves.toMatchObject({ status: 200 });
+
+    expect(mockRefreshAccessToken).toHaveBeenCalledTimes(1);
+    expect(adapterCalls).toBe(2);
+  });
+});

src/api/common/client.tsx

@@ -68,6 +68,14 @@ axiosInstance.interceptors.response.use(
           });
       }
 
+      // Once a refresh has definitively failed the auth store drops the refresh token, so there is
+      // nothing left to refresh with. The in-flight guard above only collapses *concurrent* callers;
+      // the startup chain awaits each store in turn, so without this every one of them would fire
+      // its own doomed refresh round-trip and its own logout. Fail fast with the original 401.
+      if (!useAuthStore.getState().refreshToken) {
+        return Promise.reject(error);
+      }
+
       // Add _retry property to request config type
       (originalRequest as InternalAxiosRequestConfig & { _retry: boolean })._retry = true;
       isRefreshing = true;

src/app/(app)/map.tsx

@@ -260,7 +260,9 @@ export default function Map() {
   }, [isMapReady, isAuthenticated, isInitialized, isActive, hasUserMovedMap, location.isMapLocked]);
 
   useEffect(() => {
-    Animated.loop(
+    // Held in a local so the loop can be stopped on unmount -- without that it keeps running (and
+    // on web, keeps a JS rAF loop burning) for the rest of the session after leaving this screen.
+    const pulse = Animated.loop(
       Animated.sequence([
         Animated.timing(pulseAnim, {
           toValue: 1.2,
@@ -273,7 +275,13 @@ export default function Map() {
           useNativeDriver: true,
         }),
       ])
-    ).start();
+    );
+
+    pulse.start();
+
+    return () => {
+      pulse.stop();
+    };
   }, [pulseAnim]);
 
   // Track when map view is rendered

src/app/_layout.tsx

@@ -24,7 +24,7 @@ import { PushNotificationModal } from '@/components/push-notification/push-notif
 import { ToastContainer } from '@/components/toast/toast-container';
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
 import { loadKeepAliveState } from '@/lib/hooks/use-keep-alive';
-import { loadSelectedTheme } from '@/lib/hooks/use-selected-theme';
+import { loadSelectedTheme, useSelectedTheme } from '@/lib/hooks/use-selected-theme';
 import { logger } from '@/lib/logging';
 import { sentryService } from '@/lib/sentry';
 import { getDeviceUuid, setDeviceUuid } from '@/lib/storage/app';
@@ -210,11 +210,17 @@ function RootLayout() {
 }
 
 function Providers({ children }: { children: React.ReactNode }) {
-  const colorScheme = useColorScheme();
+  const osScheme = useColorScheme();
+  // The stored preference is the source of truth. On native it also lands in
+  // Appearance, so useColorScheme() alone would do -- but web has no Appearance
+  // override, and the web GluestackUIProvider writes the <html> class straight
+  // from `mode`, so feeding it the OS scheme would undo the selected theme.
+  const { selectedTheme } = useSelectedTheme();
+  const colorScheme: 'light' | 'dark' = selectedTheme === 'system' ? (osScheme === 'dark' ? 'dark' : 'light') : selectedTheme;
 
   const renderContent = () => (
     <APIProvider>
-      <GluestackUIProvider mode={(colorScheme ?? 'light') as 'light' | 'dark'}>
+      <GluestackUIProvider mode={colorScheme}>
         <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
           <BottomSheetModalProvider>
             {children}

src/components/calls/auto-scrolling-dispatches.tsx

@@ -30,25 +30,37 @@ const DISPATCH_TYPE_COLORS: Record<string, string> = {
 
 const SEPARATOR_WIDTH = 40;
 
+const IS_WEB = Platform.OS === 'web';
+
 export const AutoScrollingDispatches: React.FC<AutoScrollingDispatchesProps> = ({ dispatches, resolveDisplayName, scrollSpeed, fontSize }) => {
   const scrollX = useRef(new Animated.Value(0)).current;
   const animRef = useRef<Animated.CompositeAnimation | null>(null);
   const [primaryWidth, setPrimaryWidth] = useState(0);
 
+  const loopWidth = primaryWidth + SEPARATOR_WIDTH;
+  const isScrolling = scrollSpeed > 0 && primaryWidth > 0;
+  const durationMs = isScrolling ? (loopWidth / scrollSpeed) * 1000 : 0;
+
   useEffect(() => {
     // Stop any running animation and reset position whenever deps change
     animRef.current?.stop();
     animRef.current = null;
     scrollX.setValue(0);
 
+    // Web drives this from CSS instead -- see the track style below. react-native-web has no
+    // native animated module, so the JS path here would repaint from a 60fps rAF loop, and one
+    // of these renders per dispatched call.
+    if (IS_WEB) {
+      return;
+    }
+
     if (scrollSpeed <= 0 || primaryWidth <= 0) {
       return;
     }
 
     // Scroll the whole loopWidth (primary + gap) — the duplicate copy placed right
     // after fills the gap so the transition is seamless.
-    const loopWidth = primaryWidth + SEPARATOR_WIDTH;
-    const duration = (loopWidth / scrollSpeed) * 1000;
+    const duration = durationMs;
 
     let active = true;
 
@@ -62,7 +74,7 @@ export const AutoScrollingDispatches: React.FC<AutoScrollingDispatchesProps> = (
       const timing = Animated.timing(scrollX, {
         toValue: -loopWidth,
         duration,
-        useNativeDriver: Platform.OS !== 'web',
+        useNativeDriver: true,
         isInteraction: false,
       });
       animRef.current = timing;
@@ -78,7 +90,7 @@ export const AutoScrollingDispatches: React.FC<AutoScrollingDispatchesProps> = (
       animRef.current?.stop();
       animRef.current = null;
     };
-  }, [primaryWidth, scrollSpeed, scrollX]);
+  }, [primaryWidth, scrollSpeed, scrollX, durationMs, loopWidth]);
 
   if (dispatches.length === 0) return null;
 
@@ -107,9 +119,17 @@ export const AutoScrollingDispatches: React.FC<AutoScrollingDispatchesProps> = (
       );
     });
 
+  // On web the whole track is one compositor-driven CSS animation, so it renders as a plain View
+  // with no Animated wrapper and no per-frame JS. -50% of the track equals one half, which is why
+  // the duplicate copy below gets its own trailing separator on web: the two halves must match.
+  const Track = IS_WEB ? View : Animated.View;
+  const trackStyle = IS_WEB
+    ? [styles.row, isScrolling ? ({ animation: `dispatch-marquee ${durationMs}ms linear infinite`, willChange: 'transform' } as never) : null]
+    : [styles.row, { transform: [{ translateX: scrollX }] }];
+
   return (
     <View style={styles.container}>
-      <Animated.View style={[styles.row, { transform: [{ translateX: scrollX }] }]}>
+      <Track style={trackStyle}>
         {/* Primary copy — measure width to drive the animation */}
         <View
           testID="auto-scroll-primary"
@@ -129,9 +149,11 @@ export const AutoScrollingDispatches: React.FC<AutoScrollingDispatchesProps> = (
             <View style={styles.row} accessible={false} accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants">
               {renderChips(dispatches, 'b')}
             </View>
+            {/* Trailing gap so the two halves are identical and -50% lands seamlessly (web only) */}
+            {IS_WEB ? <View style={{ width: SEPARATOR_WIDTH, flexShrink: 0 }} accessible={false} /> : null}
           </>
         ) : null}
-      </Animated.View>
+      </Track>
     </View>
   );
 };

src/components/widgets/CallsSummaryWidget.tsx

@@ -21,8 +21,12 @@ interface CallsWidgetProps {
 export const CallsSummaryWidget: React.FC<CallsWidgetProps> = ({ onRemove, isEditMode, width = 2, height = 2 }) => {
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === 'dark';
-  const { calls, callPriorities, isLoading, error, init } = useCallsStore();
-  const { callsSummary } = useWidgetSettingsStore();
+  const calls = useCallsStore((state) => state.calls);
+  const callPriorities = useCallsStore((state) => state.callPriorities);
+  const isLoading = useCallsStore((state) => state.isLoading);
+  const error = useCallsStore((state) => state.error);
+  const init = useCallsStore((state) => state.init);
+  const callsSummary = useWidgetSettingsStore((state) => state.callsSummary);
 
   // Enable real-time updates via SignalR
   useCallsSignalRUpdates();

src/components/widgets/CallsWidget.tsx

@@ -32,10 +32,17 @@ interface CallsWidgetProps {
 export const CallsWidget: React.FC<CallsWidgetProps> = ({ onRemove, isEditMode, containerWidth, containerHeight }) => {
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === 'dark';
-  const { calls, callPriorities, callExtraDataMap, isLoading, error, init } = useCallsStore();
-  const { settings } = useCallsSettingsStore();
-  const { personnel, init: initPersonnel } = usePersonnelStore();
-  const { units, fetchUnits } = useUnitsStore();
+  const calls = useCallsStore((state) => state.calls);
+  const callPriorities = useCallsStore((state) => state.callPriorities);
+  const callExtraDataMap = useCallsStore((state) => state.callExtraDataMap);
+  const isLoading = useCallsStore((state) => state.isLoading);
+  const error = useCallsStore((state) => state.error);
+  const init = useCallsStore((state) => state.init);
+  const settings = useCallsSettingsStore((state) => state.settings);
+  const personnel = usePersonnelStore((state) => state.personnel);
+  const initPersonnel = usePersonnelStore((state) => state.init);
+  const units = useUnitsStore((state) => state.units);
+  const fetchUnits = useUnitsStore((state) => state.fetchUnits);
   const [groups, setGroups] = useState<GroupResultData[]>([]);
   const [roles, setRoles] = useState<RecipientsResultData[]>([]);