Add posthog Telemetry (Anonymity Logic + call duration telemetry) (#658)

Co-authored-by: Timo K <timok@element.io>
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/settings/SettingsModal.tsx

@@ -26,7 +26,11 @@ import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
 import { SelectInput } from "../input/SelectInput";
 import { useMediaHandler } from "./useMediaHandler";
-import { useSpatialAudio, useShowInspector } from "./useSetting";
+import {
+  useSpatialAudio,
+  useShowInspector,
+  useOptInAnalytics,
+} from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
 import { useDownloadDebugLog } from "./submit-rageshake";
@@ -53,6 +57,7 @@ export const SettingsModal = (props: Props) => {
 
   const [spatialAudio, setSpatialAudio] = useSpatialAudio();
   const [showInspector, setShowInspector] = useShowInspector();
+  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -115,6 +120,18 @@ export const SettingsModal = (props: Props) => {
               }
             />
           </FieldRow>
+          <FieldRow>
+            <InputField
+              id="optInAnalytics"
+              label="Allow analytics"
+              type="checkbox"
+              checked={optInAnalytics}
+              description="This will send anonymized data such as the duration of a call the and number of participants to the element call team to help us optimizing the application based on how it is used."
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setOptInAnalytics(event.target.checked)
+              }
+            />
+          </FieldRow>
         </TabItem>
         <TabItem
           title={

src/settings/useSetting.ts

@@ -18,7 +18,7 @@ import { EventEmitter } from "events";
 import { useMemo, useState, useEffect, useCallback } from "react";
 
 // Bus to notify other useSetting consumers when a setting is changed
-const settingsBus = new EventEmitter();
+export const settingsBus = new EventEmitter();
 
 // Like useState, but reads from and persists the value to localStorage
 const useSetting = <T>(
@@ -54,3 +54,4 @@ const useSetting = <T>(
 
 export const useSpatialAudio = () => useSetting("spatial-audio", false);
 export const useShowInspector = () => useSetting("show-inspector", false);
+export const useOptInAnalytics = () => useSetting("opt-in-analytics", false);