Wire up analytics for Legacy/EC/Jitsi voip options (#28348)

* Wire up analytics for Legacy/EC/Jitsi voip options

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update @matrix-org/analytics-events

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/rooms/RoomHeader.tsx

@@ -27,7 +27,7 @@ import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMember
 import { _t } from "../../../languageHandler";
 import { Flex } from "../../utils/Flex";
 import { Box } from "../../utils/Box";
-import { getPlatformCallTypeChildren, getPlatformCallTypeLabel, useRoomCall } from "../../../hooks/room/useRoomCall";
+import { getPlatformCallTypeProps, useRoomCall } from "../../../hooks/room/useRoomCall";
 import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications";
 import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
 import SdkConfig from "../../../SdkConfig";
@@ -167,18 +167,21 @@ export default function RoomHeader({
                     side="left"
                     align="start"
                 >
-                    {callOptions.map((option) => (
-                        <MenuItem
-                            key={option}
-                            label={getPlatformCallTypeLabel(option)}
-                            aria-label={getPlatformCallTypeLabel(option)}
-                            children={getPlatformCallTypeChildren(option)}
-                            className="mx_RoomHeader_videoCallOption"
-                            onClick={(ev) => videoCallClick(ev, option)}
-                            Icon={VideoCallIcon}
-                            onSelect={() => {} /* Dummy handler since we want the click event.*/}
-                        />
-                    ))}
+                    {callOptions.map((option) => {
+                        const { label, children } = getPlatformCallTypeProps(option);
+                        return (
+                            <MenuItem
+                                key={option}
+                                label={label}
+                                aria-label={label}
+                                children={children}
+                                className="mx_RoomHeader_videoCallOption"
+                                onClick={(ev) => videoCallClick(ev, option)}
+                                Icon={VideoCallIcon}
+                                onSelect={() => {} /* Dummy handler since we want the click event.*/}
+                            />
+                        );
+                    })}
                 </Menu>
             ) : (
                 <IconButton

src/hooks/room/useRoomCall.tsx

@@ -36,30 +36,41 @@ import { useGuestAccessInformation } from "./useGuestAccessInformation";
 import SettingsStore from "../../settings/SettingsStore";
 import { UIFeature } from "../../settings/UIFeature";
 import { BetaPill } from "../../components/views/beta/BetaCard";
+import { InteractionName } from "../../PosthogTrackers";
 
 export enum PlatformCallType {
     ElementCall,
     JitsiCall,
     LegacyCall,
 }
-export const getPlatformCallTypeLabel = (platformCallType: PlatformCallType): string => {
+
+export const getPlatformCallTypeProps = (
+    platformCallType: PlatformCallType,
+): {
+    label: string;
+    children?: ReactNode;
+    analyticsName: InteractionName;
+} => {
     switch (platformCallType) {
         case PlatformCallType.ElementCall:
-            return _t("voip|element_call");
+            return {
+                label: _t("voip|element_call"),
+                analyticsName: "WebVoipOptionElementCall",
+                children: <BetaPill />,
+            };
         case PlatformCallType.JitsiCall:
-            return _t("voip|jitsi_call");
+            return {
+                label: _t("voip|jitsi_call"),
+                analyticsName: "WebVoipOptionJitsi",
+            };
         case PlatformCallType.LegacyCall:
-            return _t("voip|legacy_call");
-    }
-};
-export const getPlatformCallTypeChildren = (platformCallType: PlatformCallType): ReactNode => {
-    switch (platformCallType) {
-        case PlatformCallType.ElementCall:
-            return <BetaPill />;
-        default:
-            return null;
+            return {
+                label: _t("voip|legacy_call"),
+                analyticsName: "WebVoipOptionLegacy",
+            };
     }
 };
+
 const enum State {
     NoCall,
     NoOneHere,

src/utils/room/placeCall.ts

@@ -10,10 +10,11 @@ import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import LegacyCallHandler from "../../LegacyCallHandler";
-import { PlatformCallType } from "../../hooks/room/useRoomCall";
+import { getPlatformCallTypeProps, PlatformCallType } from "../../hooks/room/useRoomCall";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../dispatcher/actions";
+import PosthogTrackers from "../../PosthogTrackers";
 
 /**
  * Helper to place a call in a room that works with all the legacy modes
@@ -27,6 +28,9 @@ export const placeCall = async (
     platformCallType: PlatformCallType,
     skipLobby: boolean,
 ): Promise<void> => {
+    const { analyticsName } = getPlatformCallTypeProps(platformCallType);
+    PosthogTrackers.trackInteraction(analyticsName);
+
     if (platformCallType == PlatformCallType.LegacyCall || platformCallType == PlatformCallType.JitsiCall) {
         await LegacyCallHandler.instance.placeCall(room.roomId, callType);
     } else if (platformCallType == PlatformCallType.ElementCall) {