Fix/mobile lottie pause reset reset stale ref

packages/common/src/hooks/__tests__/useTimer.test.ts

@@ -48,6 +48,41 @@ describe('useTimer', () => {
     expect(remainingTime).toBe(expectedRemainingTime);
     expect(clearTimeout).toHaveBeenCalledTimes(1);
   });
+
+  it('does not report a negative remaining time when pausing before starting', () => {
+    const { result } = renderHook(() => useTimer());
+
+    const remainingTime = result.current.pause();
+
+    expect(remainingTime).toBe(0);
+    expect(result.current.getRemainingTime()).toBe(0);
+  });
+
+  it('does not report a negative remaining time when pausing after the timer elapsed', () => {
+    const { result } = renderHook(() => useTimer());
+    const callback = jest.fn();
+    const duration = 1000;
+
+    result.current.start(callback, duration);
+    jest.advanceTimersByTime(duration + 500);
+
+    expect(result.current.pause()).toBe(0);
+    expect(result.current.getRemainingTime()).toBe(0);
+  });
+
+  it('resumes with a non-negative delay when pausing after the timer elapsed', () => {
+    const { result } = renderHook(() => useTimer());
+    const callback = jest.fn();
+    const duration = 1000;
+
+    result.current.start(callback, duration);
+    jest.advanceTimersByTime(duration + 500);
+    result.current.pause();
+    result.current.resume();
+
+    expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 0);
+  });
+
   it('resumes timer', async () => {
     const { result } = renderHook(() => useTimer());
     const callback = jest.fn();

packages/common/src/hooks/useTimer.ts

@@ -31,9 +31,11 @@ export const useTimer = () => {
 
   const pause = useCallback(() => {
     if (!isPausedRef.current) {
-      const currentTime = new Date().getTime();
+      // Elapsed time is only meaningful while a timer is running, and a timer can never
+      // have negative time remaining. Clamping keeps `pause` from storing a negative value.
+      const elapsedTime = timerRef.current ? Date.now() - startTimeRef.current : 0;
       clear();
-      remainingTimeRef.current -= currentTime - startTimeRef.current;
+      remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsedTime);
       isPausedRef.current = true;
     }
     return remainingTimeRef.current;

packages/mobile/src/animation/createLottie.tsx

@@ -30,8 +30,6 @@ export type LottiePlayerMobile<Source extends LottieSource = LottieSource> = {
   };
 } & LottiePlayer<Source>;
 
-const noop = () => {};
-
 export const createLottie = <Source extends LottieSource>(
   source: Source,
   progressOverride?: Animated.Value,
@@ -104,9 +102,9 @@ export const createLottie = <Source extends LottieSource>(
   return {
     play,
     playMarkers,
-    pause: lottieRef.current?.pause ?? noop,
-    resume: lottieRef.current?.resume ?? noop,
-    reset: lottieRef.current?.reset ?? noop,
+    pause: () => lottieRef.current?.pause(),
+    resume: () => lottieRef.current?.resume(),
+    reset: () => lottieRef.current?.reset(),
     progress: {
       value: progress,
       timing: setProgressTiming,