Disable the opt in analytics setting if Posthog isn't configured

src/settings/SettingsModal.tsx

@@ -32,7 +32,6 @@ import {
   useSpatialAudio,
   useShowInspector,
   useOptInAnalytics,
-  canEnableSpatialAudio,
   useNewGrid,
   useDeveloperSettingsTab,
 } from "./useSetting";
@@ -133,16 +132,16 @@ export const SettingsModal = (props: Props) => {
               label={t("Spatial audio")}
               type="checkbox"
               checked={spatialAudio}
-              disabled={!canEnableSpatialAudio()}
+              disabled={setSpatialAudio === null}
               description={
-                canEnableSpatialAudio()
-                  ? t(
+                setSpatialAudio === null
+                  ? t("This feature is only supported on Firefox.")
+                  : t(
                       "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
                     )
-                  : t("This feature is only supported on Firefox.")
               }
               onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                setSpatialAudio(event.target.checked)
+                setSpatialAudio!(event.target.checked)
               }
             />
           </FieldRow>

src/settings/useSetting.ts

@@ -16,6 +16,10 @@ limitations under the License.
 
 import { EventEmitter } from "events";
 import { useMemo, useState, useEffect, useCallback } from "react";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+
+type Setting<T> = [T, (value: T) => void];
+type DisableableSetting<T> = [T, ((value: T) => void) | null];
 
 // Bus to notify other useSetting consumers when a setting is changed
 export const settingsBus = new EventEmitter();
@@ -24,10 +28,7 @@ const getSettingKey = (name: string): string => {
   return `matrix-setting-${name}`;
 };
 // Like useState, but reads from and persists the value to localStorage
-const useSetting = <T>(
-  name: string,
-  defaultValue: T
-): [T, (value: T) => void] => {
+const useSetting = <T>(name: string, defaultValue: T): Setting<T> => {
   const key = useMemo(() => getSettingKey(name), [name]);
 
   const [value, setValue] = useState<T>(() => {
@@ -65,7 +66,7 @@ export const setSetting = <T>(name: string, newValue: T) => {
   settingsBus.emit(name, newValue);
 };
 
-export const canEnableSpatialAudio = () => {
+const canEnableSpatialAudio = () => {
   const { userAgent } = navigator;
   // Spatial audio means routing audio through audio contexts. On Chrome,
   // this bypasses the AEC processor and so breaks echo cancellation.
@@ -79,18 +80,22 @@ export const canEnableSpatialAudio = () => {
   return userAgent.includes("Firefox");
 };
 
-export const useSpatialAudio = (): [boolean, (val: boolean) => void] => {
+export const useSpatialAudio = (): DisableableSetting<boolean> => {
   const settingVal = useSetting("spatial-audio", false);
   if (canEnableSpatialAudio()) return settingVal;
 
-  return [false, (_: boolean) => {}];
+  return [false, null];
 };
 
 export const useShowInspector = () => useSetting("show-inspector", false);
 
 // null = undecided
-export const useOptInAnalytics = () =>
-  useSetting<boolean | null>("opt-in-analytics", null);
+export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
+  const settingVal = useSetting<boolean | null>("opt-in-analytics", null);
+  if (PosthogAnalytics.instance.isEnabled()) return settingVal;
+
+  return [false, null];
+};
 
 export const useKeyboardShortcuts = () =>
   useSetting("keyboard-shortcuts", true);