Add a pref for pausing on losing page focus (Closes crosshare-org#389)

adamthedog · Feb 1, 2024 · b2e0179 · b2e0179
1 parent 1b128a5
commit b2e0179
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/app/components/Puzzle.tsx b/app/components/Puzzle.tsx
@@ -395,7 +395,8 @@ export const Puzzle = ({
 
   // Pause when page goes out of focus
   function prodPause() {
-    if (process.env.NODE_ENV !== 'development') {
+      if (process.env.NODE_ENV !== 'development' && !props.prefs?.dontPauseOnLostFocus) {
+
       window.parent.postMessage(
         {
           type: 'pause',
@@ -1204,7 +1205,15 @@ export const Puzzle = ({
                             text="Start puzzles in downs-only mode"
                           />
                         </li>
-
+                        <li>
+                          <PrefSetting
+                            prefs={props.prefs}
+                            userId={props.user!.uid}
+                            flag={'dontPauseOnLostFocus'}
+                            invert={true}
+                            text="Pause solving when clicking away from the page"
+                          />
+                        </li>
                       </ul>
                     }
                     </NestedDropDown>

diff --git a/app/lib/prefs.ts b/app/lib/prefs.ts
@@ -14,6 +14,7 @@ const AccountPrefsFlagsV = t.partial({
   dontAdvanceWordAfterCompletion: t.boolean,
   solveDownsOnly: t.boolean,
   disableCommentsByDefault: t.boolean,
+  dontPauseOnLostFocus: t.boolean
 });
 export type AccountPrefsFlagsT = t.TypeOf<typeof AccountPrefsFlagsV>;
 

diff --git a/app/pages/account.tsx b/app/pages/account.tsx
@@ -243,6 +243,15 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
               text="Start puzzles in downs-only mode"
             />
           </li>
+          <li>
+            <PrefSetting
+              prefs={prefs}
+              userId={user.uid}
+              flag={'dontPauseOnLostFocus'}
+              invert={true}
+              text="Pause solving when clicking away from the page"
+            />
+          </li>
         </ul>
         <hr css={{ margin: '2em 0' }} />
         <h2>Browser-specific Settings</h2>