fix: add extra logic to keep track of time accurately when in the bac…

…kground

Fixes #608

app/renderer/src/contexts/CounterContext.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import useStayAwake from "use-stay-awake";
-import { setRound, setTimerType, setPlay } from "store";
+import { setPlay, setRound, setTimerType } from "store";
 import { useNotification } from "hooks";
-import { padNum, isEqualToOne } from "utils";
+import { isEqualToOne, padNum } from "utils";
 
 import notificationIcon from "assets/logos/notification-dark.png";
 
@@ -51,12 +51,14 @@ const CounterProvider: React.FC = ({ children }) => {
   const [shouldFullscreen, setShouldFullscreen] = useState(false);
 
   const [count, setCount] = useState(config.stayFocus * 60);
+  const [lastCountTime, setLastCountTime] = useState(Date.now());
 
   const [duration, setDuration] = useState(config.stayFocus * 60);
 
   const setTimerDuration = useCallback((time: number) => {
     setDuration(time * 60);
     setCount(time * 60);
+    setLastCountTime(Date.now());
   }, []);
 
   const resetTimerAction = useCallback(() => {
@@ -73,6 +75,7 @@ const CounterProvider: React.FC = ({ children }) => {
       case TimerStatus.SPECIAL_BREAK:
         setDuration(duration);
         setCount(duration);
+        setLastCountTime(Date.now());
         break;
     }
   }, [
@@ -85,6 +88,12 @@ const CounterProvider: React.FC = ({ children }) => {
     setTimerDuration,
   ]);
 
+  useEffect(() => {
+    if (timer.playing) {
+      setLastCountTime(Date.now());
+    }
+  }, [timer.playing]);
+
   useEffect(() => {
     if (timer.playing && timer.timerType !== TimerStatus.STAY_FOCUS) {
       preventSleeping();
@@ -212,17 +221,23 @@ const CounterProvider: React.FC = ({ children }) => {
   useEffect(() => {
     let timerInterval: NodeJS.Timeout;
 
+    // calculate how far off a full second the countdown timer is and adjust the countdown timer accordingly
+    const offset = count % 1;
     if (timer.playing) {
       timerInterval = setInterval(() => {
         setCount((prevState) => {
-          let remaining = prevState - 1;
-          return remaining;
+          // Calculate time passed since last count
+          const now = Date.now();
+          const timePassed = now - lastCountTime;
+
+          setLastCountTime(Date.now());
+          return prevState - timePassed / 1000;
         });
-      }, 1000);
+      }, offset * 1000);
     }
 
     return () => clearInterval(timerInterval);
-  }, [timer.playing]);
+  }, [timer.playing, lastCountTime, count]);
 
   useEffect(() => {
     if (settings.notificationType === "extra") {
@@ -258,7 +273,7 @@ const CounterProvider: React.FC = ({ children }) => {
       }
     }
 
-    if (count === 0) {
+    if (count <= 0) {
       switch (timer.timerType) {
         case TimerStatus.STAY_FOCUS:
           if (timer.round < config.sessionRounds) {
@@ -394,7 +409,7 @@ const CounterProvider: React.FC = ({ children }) => {
   return (
     <CounterContext.Provider
       value={{
-        count,
+        count: Math.round(count),
         duration,
         resetTimerAction,
         shouldFullscreen,

app/tauri/Cargo.toml

@@ -3,7 +3,7 @@ name = "pomatez"
 # In the current version of release please, unless the toml file is in the root of the project it cannot be updated.
 # https://github.com/googleapis/release-please/issues/1724
 # util/cargo-version-updater.js will run to keep this value up to date before rust builds.
-version = "1.6.4"
+version = "1.7.0"
 description = "Attractive pomodoro timer for Windows, Mac, and Linux."
 authors = ["Roldan Montilla Jr"]
 license = "MIT"