Add setting to toggle maps

4 files changed, 42 insertions, 1 deletions

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: {