Add setting to toggle maps

9 files changed, 61 insertions, 1 deletions

diff --git a/gui/src/main/gui-settings.ts b/gui/src/main/gui-settings.ts
index f8aa81f665..ae0cff0cab 100644
--- a/gui/src/main/gui-settings.ts
+++ b/gui/src/main/gui-settings.ts
@@ -14,6 +14,7 @@ const settingsSchema: Record<keyof IGuiSettingsState, string> = {
   unpinnedWindow: 'boolean',
   browsedForSplitTunnelingApplications: 'Array<string>',
   changelogDisplayedForVersion: 'string',
+  animateMap: 'boolean',
 };
 
 const defaultSettings: IGuiSettingsState = {
@@ -25,6 +26,7 @@ const defaultSettings: IGuiSettingsState = {
   unpinnedWindow: process.platform !== 'win32' && process.platform !== 'darwin',
   browsedForSplitTunnelingApplications: [],
   changelogDisplayedForVersion: '',
+  animateMap: true,
 };
 
 export default class GuiSettings {
@@ -114,6 +116,14 @@ export default class GuiSettings {
       : this.stateValue.changelogDisplayedForVersion;
   }
 
+  set animateMap(newValue: boolean) {
+    this.changeStateAndNotify({ ...this.stateValue, animateMap: newValue });
+  }
+
+  get animateMap(): boolean {
+    return this.stateValue.animateMap;
+  }
+
   public load() {
     try {
       const settingsFile = this.filePath();
diff --git a/gui/src/main/settings.ts b/gui/src/main/settings.ts
index 71a973daeb..7c304f3e71 100644
--- a/gui/src/main/settings.ts
+++ b/gui/src/main/settings.ts
@@ -111,6 +111,10 @@ export default class Settings implements Readonly<ISettings> {
       this.delegate.handleUnpinnedWindowChange();
     });
 
+    IpcMainEventChannel.guiSettings.handleSetAnimateMap((animateMap: boolean) => {
+      this.guiSettings.animateMap = animateMap;
+    });
+
     IpcMainEventChannel.currentVersion.handleDisplayedChangelog(() => {
       this.guiSettings.changelogDisplayedForVersion = this.currentVersion.gui;
     });
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 325e237b23..78c11504f2 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -364,6 +364,8 @@ export default class AppRenderer {
   public testCustomApiAccessMethod = (method: CustomProxy) =>
     IpcRendererEventChannel.settings.testCustomApiAccessMethod(method);
   public getMapData = () => IpcRendererEventChannel.map.getData();
+  public setAnimateMap = (displayMap: boolean): void =>
+    IpcRendererEventChannel.guiSettings.setAnimateMap(displayMap);
 
   public login = async (accountToken: AccountToken) => {
     const actions = this.reduxActions;
diff --git a/gui/src/renderer/components/Map.tsx b/gui/src/renderer/components/Map.tsx
index 3ccc794008..859328daba 100644
--- a/gui/src/renderer/components/Map.tsx
+++ b/gui/src/renderer/components/Map.tsx
@@ -26,6 +26,7 @@ type AnimationFrameCallback = (now: number, newParams?: MapParams) => void;
 
 export default function Map() {
   const connection = useSelector((state) => state.connection);
+  const animateMap = useSelector((state) => state.settings.guiSettings.animateMap);
 
   const hasLocationValue = hasLocation(connection);
   const location = useMemo<Coordinate | undefined>(() => {
@@ -35,7 +36,7 @@ export default function Map() {
   const connectionState = getConnectionState(hasLocationValue, connection.status.state);
 
   const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  const animate = !reduceMotion;
+  const animate = !reduceMotion && animateMap;
 
   return (
     <MapInner
diff --git a/gui/src/renderer/components/UserInterfaceSettings.tsx b/gui/src/renderer/components/UserInterfaceSettings.tsx
index 315c3ad06c..9c3415d90d 100644
--- a/gui/src/renderer/components/UserInterfaceSettings.tsx
+++ b/gui/src/renderer/components/UserInterfaceSettings.tsx
@@ -30,6 +30,12 @@ const StyledCellIcon = styled(Cell.UntintedIcon)({
   marginRight: '8px',
 });
 
+const StyledAnimateMapSettingsGroup = styled(Cell.Group)({
+  '@media (prefers-reduced-motion: reduce)': {
+    display: 'none',
+  },
+});
+
 export default function UserInterfaceSettings() {
   const { pop } = useHistory();
   const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
@@ -81,6 +87,10 @@ export default function UserInterfaceSettings() {
                     <StartMinimizedSetting />
                   </Cell.Group>
                 )}
+
+                <StyledAnimateMapSettingsGroup>
+                  <AnimateMapSetting />
+                </StyledAnimateMapSettingsGroup>
               </StyledContent>
             </NavigationScrollbars>
           </NavigationContainer>
@@ -212,6 +222,33 @@ function StartMinimizedSetting() {
   );
 }
 
+function AnimateMapSetting() {
+  const animateMap = useSelector((state) => state.settings.guiSettings.animateMap);
+  const { setAnimateMap } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('user-interface-settings-view', 'Animate map')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={animateMap} onChange={setAnimateMap} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.CellFooter>
+        <AriaDescription>
+          <Cell.CellFooterText>
+            {messages.pgettext('user-interface-settings-view', 'Animate map movements.')}
+          </Cell.CellFooterText>
+        </AriaDescription>
+      </Cell.CellFooter>
+    </AriaInputGroup>
+  );
+}
+
 function LanguageButton() {
   const history = useHistory();
   const { getPreferredLocaleDisplayName } = useAppContext();
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index 39e4b3de56..cdff32e22c 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -124,6 +124,7 @@ const initialState: ISettingsReduxState = {
     unpinnedWindow: window.env.platform !== 'win32' && window.env.platform !== 'darwin',
     browsedForSplitTunnelingApplications: [],
     changelogDisplayedForVersion: '',
+    animateMap: true,
   },
   relaySettings: {
     normal: {
diff --git a/gui/src/shared/gui-settings-state.ts b/gui/src/shared/gui-settings-state.ts
index d09421c92a..68e958324a 100644
--- a/gui/src/shared/gui-settings-state.ts
+++ b/gui/src/shared/gui-settings-state.ts
@@ -31,4 +31,7 @@ export interface IGuiSettingsState {
   // The last version that the changelog dialog was shown for. This is used to only show the
   // changelog after upgrade.
   changelogDisplayedForVersion: string;
+
+  // Tells the app whether or not to show the map in the main view.
+  animateMap: boolean;
 }
diff --git a/gui/src/shared/ipc-schema.ts b/gui/src/shared/ipc-schema.ts
index 6c7004d787..5257bb7b78 100644
--- a/gui/src/shared/ipc-schema.ts
+++ b/gui/src/shared/ipc-schema.ts
@@ -196,6 +196,7 @@ export const ipcSchema = {
     setMonochromaticIcon: send<boolean>(),
     setPreferredLocale: invoke<string, ITranslations>(),
     setUnpinnedWindow: send<boolean>(),
+    setAnimateMap: send<boolean>(),
   },
   account: {
     '': notifyRenderer<IAccountData | undefined>(),
diff --git a/gui/test/e2e/setup/main.ts b/gui/test/e2e/setup/main.ts
index e645e8b794..c0114494d9 100644
--- a/gui/test/e2e/setup/main.ts
+++ b/gui/test/e2e/setup/main.ts
@@ -29,6 +29,7 @@ class ApplicationMain {
     unpinnedWindow: process.platform !== 'win32' && process.platform !== 'darwin',
     browsedForSplitTunnelingApplications: [],
     changelogDisplayedForVersion: '',
+    animateMap: true,
   };
 
   private settings = getDefaultSettings();