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/room/GroupCallInspector.tsx

@@ -353,7 +353,7 @@ function useGroupCallState(
   client: MatrixClient,
   groupCall: GroupCall,
   showPollCallStats: boolean
-) {
+): InspectorContextState {
   const [state, dispatch] = useReducer(reducer, {
     localUserId: client.getUserId(),
     localSessionId: client.getSessionId(),
@@ -410,11 +410,13 @@ function useGroupCallState(
 
   return state;
 }
+
 interface GroupCallInspectorProps {
   client: MatrixClient;
   groupCall: GroupCall;
   show: boolean;
 }
+
 export function GroupCallInspector({
   client,
   groupCall,

src/room/GroupCallView.tsx

@@ -32,6 +32,7 @@ import { CallEndedView } from "./CallEndedView";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { useLocationNavigation } from "../useLocationNavigation";
+import { PosthogAnalytics } from "../PosthogAnalytics";
 import { useMediaHandler } from "../settings/useMediaHandler";
 import { findDeviceByName, getDevices } from "../media-utils";
 
@@ -170,6 +171,12 @@ export function GroupCallView({
 
   const onLeave = useCallback(() => {
     setLeft(true);
+
+    PosthogAnalytics.instance.eventCallEnded.track(
+      groupCall.room.name,
+      groupCall.participants.length
+    );
+
     leave();
     if (widget) {
       widget.api.transport.send(ElementWidgetActions.HangupCall, {});
@@ -179,7 +186,14 @@ export function GroupCallView({
     if (!isPasswordlessUser && !isEmbedded) {
       history.push("/");
     }
-  }, [leave, isPasswordlessUser, isEmbedded, history]);
+  }, [
+    groupCall.room.name,
+    groupCall.participants.length,
+    leave,
+    isPasswordlessUser,
+    isEmbedded,
+    history,
+  ]);
 
   useEffect(() => {
     if (widget && state === GroupCallState.Entered) {

src/room/InCallView.tsx

@@ -57,6 +57,7 @@ import { useAudioContext } from "../video-grid/useMediaStream";
 import { useFullscreen } from "../video-grid/useFullscreen";
 import { AudioContainer } from "../video-grid/AudioContainer";
 import { useAudioOutputDevice } from "../video-grid/useAudioOutputDevice";
+import { PosthogAnalytics } from "../PosthogAnalytics";
 import { widget, ElementWidgetActions } from "../widget";
 import { useJoinRule } from "./useJoinRule";
 import { useUrlParams } from "../UrlParams";
@@ -210,6 +211,9 @@ export function InCallView({
       });
     }
 
+    PosthogAnalytics.instance.eventCallEnded.cacheParticipantCountChanged(
+      participants.length
+    );
     // add the screenshares too
     for (const screenshareFeed of screenshareFeeds) {
       const userMediaItem = tileDescriptors.find(

src/room/useGroupCall.ts

@@ -30,6 +30,7 @@ import { useTranslation } from "react-i18next";
 import { IWidgetApiRequest } from "matrix-widget-api";
 
 import { usePageUnload } from "./usePageUnload";
+import { PosthogAnalytics } from "../PosthogAnalytics";
 import { TranslatedError, translatedError } from "../TranslatedError";
 import { ElementWidgetActions, ScreenshareStartData, widget } from "../widget";
 
@@ -280,6 +281,9 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
       return;
     }
 
+    PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
+    PosthogAnalytics.instance.eventCallStarted.track(groupCall.room.name);
+
     groupCall.enter().catch((error) => {
       console.error(error);
       updateState({ error });
@@ -289,11 +293,15 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
   const leave = useCallback(() => groupCall.leave(), [groupCall]);
 
   const toggleLocalVideoMuted = useCallback(() => {
-    groupCall.setLocalVideoMuted(!groupCall.isLocalVideoMuted());
+    const toggleToMute = !groupCall.isLocalVideoMuted();
+    groupCall.setLocalVideoMuted(toggleToMute);
+    PosthogAnalytics.instance.eventMuteCamera.track(toggleToMute);
   }, [groupCall]);
 
   const toggleMicrophoneMuted = useCallback(() => {
-    groupCall.setMicrophoneMuted(!groupCall.isMicrophoneMuted());
+    const toggleToMute = !groupCall.isMicrophoneMuted();
+    groupCall.setMicrophoneMuted(toggleToMute);
+    PosthogAnalytics.instance.eventMuteMicrophone.track(toggleToMute);
   }, [groupCall]);
 
   const toggleScreensharing = useCallback(async () => {