fix: keep objectfit as cover for floating video view (#1849)

### 💡 Overview

In this PR, 

- we make sure that floating participant view is always cover, because
its always a small view
- we also remove usage of track.getSettings() for local participant as
it was incorrect

### ⏩  Next iteration - TODO

Next, We should wait for dimensions to be valid to render the video
element.

If we wait now, the delay is 2 seconds for rtc stats to appear, this
makes the video component render after an unnecessary delay.

We will next add a native event listener webrtc level to send dimensions
change update. Then add this mechanism.

---------

Co-authored-by: Copilot <[email protected]>

Author: santhoshvai

packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx

@@ -221,6 +221,7 @@ export const CallContent = ({
                 }
                 onPressHandler={handleFloatingViewParticipantSwitch}
                 supportedReactions={supportedReactions}
+                objectFit="cover"
                 {...participantViewProps}
               />
             )}

packages/react-native-sdk/src/components/Participant/ParticipantView/VideoRenderer.tsx

@@ -72,7 +72,8 @@ export const VideoRenderer = ({
     deregister: deregisterIosScreenshot,
   } = useScreenshotIosContext();
 
-  const videoDimensions = useTrackDimensions(participant, trackType);
+  const videoDimensions = useTrackDimensions(participant);
+
   const {
     isLocalParticipant,
     sessionId,

packages/react-native-sdk/src/hooks/useTrackDimensions.ts

@@ -1,7 +1,4 @@
-import {
-  type StreamVideoParticipant,
-  type VideoTrackType,
-} from '@stream-io/video-client';
+import { type StreamVideoParticipant } from '@stream-io/video-client';
 import { useCall } from '@stream-io/video-react-bindings';
 import { useEffect, useState } from 'react';
 
@@ -10,48 +7,25 @@ import { useEffect, useState } from 'react';
  * Note: the `tracktype` is used only for local participants.
  * `tracktype` should be 'videoTrack' for video track and 'screenShareTrack' for screen share track.
  */
-export function useTrackDimensions(
-  participant: StreamVideoParticipant,
-  trackType: VideoTrackType,
-) {
+export function useTrackDimensions(participant: StreamVideoParticipant) {
   const [trackDimensions, setTrackDimensions] = useState({
     width: 0,
     height: 0,
   });
   const call = useCall();
-  const { isLocalParticipant, sessionId, videoStream, screenShareStream } =
-    participant;
+  const { sessionId } = participant;
 
-  // for local participant we can get from track.getSettings()
-  useEffect(() => {
-    if (call && isLocalParticipant) {
-      const stream =
-        trackType === 'screenShareTrack' ? screenShareStream : videoStream;
-      if (!stream) return;
-      const [track] = stream.getVideoTracks();
-      if (!track) return;
-      const { width = 0, height = 0 } = track.getSettings();
-      setTrackDimensions((prev) => {
-        if (prev.width !== width || prev.height !== height) {
-          return { width, height };
-        }
-        return prev;
-      });
-    }
-  }, [call, isLocalParticipant, screenShareStream, trackType, videoStream]);
-
-  // start reporting stats for the remote participant
   useEffect(() => {
     if (!call) return;
-    if (isLocalParticipant) return;
     call.startReportingStatsFor(sessionId);
     return () => {
       call.stopReportingStatsFor(sessionId);
     };
-  }, [call, sessionId, isLocalParticipant]);
+  }, [call, sessionId]);
 
   // for remote participants track.getSettings() is not supported it returns an empty object
-  // so we need to rely on call stats to get the dimensions
+  // and for local participants we can get from track.getSettings() but it reports the wrong dimensions as it sends the constraints
+  // so we need to rely on call stats for all participants to get the dimensions
   useEffect(() => {
     if (!call) return;
     const sub = call.state.callStatsReport$.subscribe((report) => {