Merge branch 'feature_sfu' into feature_simulcast

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/PosthogEvents.ts

@@ -121,13 +121,15 @@ export class LoginTracker {
 interface MuteMicrophone {
   eventName: "MuteMicrophone";
   targetMuteState: "mute" | "unmute";
+  callId: string;
 }
 
 export class MuteMicrophoneTracker {
-  track(targetIsMute: boolean) {
+  track(targetIsMute: boolean, callId: string) {
     PosthogAnalytics.instance.trackEvent<MuteMicrophone>({
       eventName: "MuteMicrophone",
       targetMuteState: targetIsMute ? "mute" : "unmute",
+      callId,
     });
   }
 }
@@ -135,13 +137,15 @@ export class MuteMicrophoneTracker {
 interface MuteCamera {
   eventName: "MuteCamera";
   targetMuteState: "mute" | "unmute";
+  callId: string;
 }
 
 export class MuteCameraTracker {
-  track(targetIsMute: boolean) {
+  track(targetIsMute: boolean, callId: string) {
     PosthogAnalytics.instance.trackEvent<MuteCamera>({
       eventName: "MuteCamera",
       targetMuteState: targetIsMute ? "mute" : "unmute",
+      callId,
     });
   }
 }

src/room/GroupCallView.tsx

@@ -195,11 +195,11 @@ export function GroupCallView({
 
     leave();
     if (widget) {
-      // we need to wait until the callEnded event is tracked. Otherwise the iFrame gets killed before tracking the event.
-      await new Promise((resolve) => window.setTimeout(resolve, 500)); // 500ms
+      // we need to wait until the callEnded event is tracked. Otherwise the iFrame gets killed before the callEnded event got tracked.
+      await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
+      widget.api.setAlwaysOnScreen(false);
       PosthogAnalytics.instance.logout();
       widget.api.transport.send(ElementWidgetActions.HangupCall, {});
-      widget.api.setAlwaysOnScreen(false);
     }
 
     if (!isPasswordlessUser && !isEmbedded) {

src/room/useGroupCall.ts

@@ -359,13 +359,19 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
   const toggleLocalVideoMuted = useCallback(() => {
     const toggleToMute = !groupCall.isLocalVideoMuted();
     groupCall.setLocalVideoMuted(toggleToMute);
-    PosthogAnalytics.instance.eventMuteCamera.track(toggleToMute);
+    PosthogAnalytics.instance.eventMuteCamera.track(
+      toggleToMute,
+      groupCall.groupCallId
+    );
   }, [groupCall]);
 
   const setMicrophoneMuted = useCallback(
     (setMuted) => {
       groupCall.setMicrophoneMuted(setMuted);
-      PosthogAnalytics.instance.eventMuteMicrophone.track(setMuted);
+      PosthogAnalytics.instance.eventMuteMicrophone.track(
+        setMuted,
+        groupCall.groupCallId
+      );
     },
     [groupCall]
   );

src/video-grid/AudioSink.tsx

@@ -31,14 +31,15 @@ export const AudioSink: React.FC<Props> = ({
   tileDescriptor,
   audioOutput,
 }: Props) => {
-  const { audioMuted, localVolume, stream } = useCallFeed(
-    tileDescriptor.callFeed
-  );
+  const { localVolume, stream } = useCallFeed(tileDescriptor.callFeed);
 
   const audioElementRef = useMediaStream(
     stream,
     audioOutput,
-    audioMuted,
+    // We don't compare the audioMuted flag of useCallFeed here, since unmuting
+    // depends on to-device messages which may lag behind the audio actually
+    // starting to flow over the stream
+    tileDescriptor.isLocal,
     localVolume
   );
 

src/video-grid/VideoGrid.tsx

@@ -106,8 +106,8 @@ function isInside([x, y]: number[], targetTile: TilePosition): boolean {
   return true;
 }
 
-const getPipGap = (gridAspectRatio: number): number =>
-  gridAspectRatio < 1 ? 12 : 24;
+const getPipGap = (gridAspectRatio: number, gridWidth: number): number =>
+  gridAspectRatio < 1 || gridWidth < 700 ? 12 : 24;
 
 function getTilePositions(
   tileCount: number,
@@ -155,9 +155,10 @@ function getOneOnOneLayoutTilePositions(
 
   const gridAspectRatio = gridWidth / gridHeight;
 
-  const pipWidth = gridAspectRatio < 1 ? 114 : 230;
-  const pipHeight = gridAspectRatio < 1 ? 163 : 155;
-  const pipGap = getPipGap(gridAspectRatio);
+  const smallPip = gridAspectRatio < 1 || gridWidth < 700;
+  const pipWidth = smallPip ? 114 : 230;
+  const pipHeight = smallPip ? 163 : 155;
+  const pipGap = getPipGap(gridAspectRatio, gridWidth);
 
   const pipMinX = remotePosition.x + pipGap;
   const pipMinY = remotePosition.y + pipGap;
@@ -1045,7 +1046,10 @@ export function VideoGrid({
         if (last) {
           const remotePosition = tilePositions[1];
 
-          const pipGap = getPipGap(gridBounds.width / gridBounds.height);
+          const pipGap = getPipGap(
+            gridBounds.width / gridBounds.height,
+            gridBounds.width
+          );
           const pipMinX = remotePosition.x + pipGap;
           const pipMinY = remotePosition.y + pipGap;
           const pipMaxX =