Update js-sdk

package.json

@@ -53,7 +53,7 @@
     "i18next-browser-languagedetector": "^6.1.8",
     "i18next-http-backend": "^1.4.4",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#64197bf4db6486d77708125d7fb2e8d7fe001f14",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#23837266fca5ee799b51a722f7b8eefb2f5ac140",
     "matrix-widget-api": "^1.0.0",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",

src/otel/OTelGroupCallMembership.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import opentelemetry, { Span, Attributes } from "@opentelemetry/api";
+import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
 import {
   GroupCall,
   MatrixClient,
@@ -23,7 +24,7 @@ import {
 } from "matrix-js-sdk";
 import { VoipEvent } from "matrix-js-sdk/src/webrtc/call";
 
-import { tracer } from "./otel";
+import { provider, tracer } from "./otel";
 
 /**
  * Flattens out an object into a single layer with components
@@ -78,15 +79,15 @@ export class OTelGroupCallMembership {
   constructor(private groupCall: GroupCall, client: MatrixClient) {
     this.myUserId = client.getUserId();
     this.myMember = groupCall.room.getMember(client.getUserId());
+
+    provider.resource.attributes[
+      SemanticResourceAttributes.SERVICE_NAME
+    ] = `element-call-${this.myUserId}-${client.getDeviceId()}`;
   }
 
   public onJoinCall() {
-    // Create a new call based on the callIdContext. This context also has a span assigned to it.
-    // Other spans can use this context to extract the parent span.
-    // (When passing this context to startSpan the started span will use the span set in the context (in this case the callSpan) as the parent)
-
     // Create the main span that tracks the time we intend to be in the call
-    this.callMembershipSpan = tracer.startSpan("otel_groupCallMembershipSpan");
+    this.callMembershipSpan = tracer.startSpan("matrix.groupCallMembership");
     this.callMembershipSpan.setAttribute(
       "matrix.confId",
       this.groupCall.groupCallId
@@ -143,4 +144,34 @@ export class OTelGroupCallMembership {
       );
     }
   }
+
+  public onToggleMicrophoneMuted(newValue: boolean) {
+    this.callMembershipSpan.addEvent("matrix.toggleMicMuted", {
+      "matrix.microphone.muted": newValue,
+    });
+  }
+
+  public onSetMicrophoneMuted(setMuted: boolean) {
+    this.callMembershipSpan.addEvent("matrix.setMicMuted", {
+      "matrix.microphone.muted": setMuted,
+    });
+  }
+
+  public onToggleLocalVideoMuted(newValue: boolean) {
+    this.callMembershipSpan.addEvent("matrix.toggleVidMuted", {
+      "matrix.video.muted": newValue,
+    });
+  }
+
+  public onSetLocalVideoMuted(setMuted: boolean) {
+    this.callMembershipSpan.addEvent("matrix.setVidMuted", {
+      "matrix.video.muted": setMuted,
+    });
+  }
+
+  public onToggleScreensharing(newValue: boolean) {
+    this.callMembershipSpan.addEvent("matrix.setVidMuted", {
+      "matrix.screensharing.enabled": newValue,
+    });
+  }
 }

src/otel/otel.ts

@@ -38,7 +38,7 @@ const providerConfig = {
     [SemanticResourceAttributes.SERVICE_NAME]: SERVICE_NAME,
   }),
 };
-const provider = new WebTracerProvider(providerConfig);
+export const provider = new WebTracerProvider(providerConfig);
 
 provider.addSpanProcessor(new SimpleSpanProcessor(otlpExporter));
 provider.addSpanProcessor(new SimpleSpanProcessor(posthogExporter));
@@ -49,65 +49,3 @@ opentelemetry.trace.setGlobalTracerProvider(provider);
 export const tracer = opentelemetry.trace.getTracer(
   "my-element-call-otl-tracer"
 );
-
-/*
-class CallTracer {
-  // We create one tracer class for each main context.
-  // Even if differnt tracer classes overlap in time space, we might want to visulaize them seperately.
-  // The Call Tracer should only contain spans/events that are relevant to understand the procedure of the individual candidates.
-  // Another Tracer Class (for example a ConnectionTracer) can contain a very granular list of all steps to connect to a call.
-
-  private callSpan;
-  private callContext;
-  private muteSpan?;
-
-  public startGroupCall(groupCallId: string) {}
-
-  public startCall(callId: string) {
-    // The main context will be set when initiating the main/parent span.
-
-    // Create an initial context with the callId param
-    const callIdContext = opentelemetry.context
-      .active()
-      .setValue(Symbol("callId"), callId);
-
-    // Create the main span that tracks the whole call
-    this.callSpan = tracer.startSpan("otel_callSpan", undefined, callIdContext);
-
-    // Create a new call based on the callIdContext. This context also has a span assigned to it.
-    // Other spans can use this context to extract the parent span.
-    // (When passing this context to startSpan the started span will use the span set in the context (in this case the callSpan) as the parent)
-    this.callContext = opentelemetry.trace.setSpan(
-      opentelemetry.context.active(),
-      this.callSpan
-    );
-
-    // Here we start a very short span. This is a hack to trigger the posthog exporter.
-    // Only ended spans are processed by the exporter.
-    // We want the exporter to know that a call has started
-    const startCallSpan = tracer.startSpan(
-      "otel_startCallSpan",
-      undefined,
-      this.callContext
-    );
-    startCallSpan.end();
-  }
-  public muteMic(muteState: boolean) {
-    if (muteState) {
-      this.muteSpan = tracer.startSpan(
-        "otel_muteSpan",
-        undefined,
-        this.callContext
-      );
-    } else if (this.muteSpan) {
-      this.muteSpan.end();
-      this.muteSpan = null;
-    }
-  }
-  public endCall() {
-    this.callSpan?.end();
-  }
-}
-
-export const callTracer = new CallTracer();
-*/

src/room/useGroupCall.ts

@@ -413,6 +413,8 @@ export function useGroupCall(
   const toggleLocalVideoMuted = useCallback(() => {
     const toggleToMute = !groupCall.isLocalVideoMuted();
     groupCall.setLocalVideoMuted(toggleToMute);
+    groupCallOTelMembership.onToggleLocalVideoMuted(toggleToMute);
+    // TODO: These explict posthog calls should be unnecessary now with the posthog otel exporter?
     PosthogAnalytics.instance.eventMuteCamera.track(
       toggleToMute,
       groupCall.groupCallId
@@ -422,6 +424,7 @@ export function useGroupCall(
   const setMicrophoneMuted = useCallback(
     (setMuted) => {
       groupCall.setMicrophoneMuted(setMuted);
+      groupCallOTelMembership.onSetMicrophoneMuted(setMuted);
       PosthogAnalytics.instance.eventMuteMicrophone.track(
         setMuted,
         groupCall.groupCallId
@@ -432,10 +435,13 @@ export function useGroupCall(
 
   const toggleMicrophoneMuted = useCallback(() => {
     const toggleToMute = !groupCall.isMicrophoneMuted();
+    groupCallOTelMembership.onToggleMicrophoneMuted(toggleToMute);
     setMicrophoneMuted(toggleToMute);
   }, [groupCall, setMicrophoneMuted]);
 
   const toggleScreensharing = useCallback(async () => {
+    groupCallOTelMembership.onToggleScreensharing(!groupCall.isScreensharing);
+
     if (!groupCall.isScreensharing()) {
       // toggling on
       updateState({ requestingScreenshare: true });

yarn.lock

@@ -1821,10 +1821,10 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
   integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
 
-"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.2":
+"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.3":
-  version "0.1.0-alpha.2"
+  version "0.1.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.5.tgz#60ede2c43b9d808ba8cf46085a3b347b290d9658"
-  integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA==
+  integrity sha512-2KjAgWNGfuGLNjJwsrs6gGX157vmcTfNrA4u249utgnMPbJl7QwuUqh1bGxQ0PpK06yvZjgPlkna0lTbuwtuQw==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz":
   version "3.2.14"
@@ -10545,12 +10545,12 @@ matrix-events-sdk@0.0.1:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
   integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#64197bf4db6486d77708125d7fb2e8d7fe001f14":
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#23837266fca5ee799b51a722f7b8eefb2f5ac140":
-  version "23.1.1"
+  version "23.5.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/64197bf4db6486d77708125d7fb2e8d7fe001f14"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/23837266fca5ee799b51a722f7b8eefb2f5ac140"
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.2"
+    "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.3"
     another-json "^0.2.0"
     bs58 "^5.0.0"
     content-type "^1.0.4"