fix: missing adaptive floating dimensions for landscape video (#1983)

### 💡 Overview

Follow up to #1969

The current algorithm only handles portrait local video on floating
view. Which is default on mobile.
But we can change it to landscape video from web for example. 

Landscape video needs more width. And this PR fixes it. Again, based on
Android AOSP algorithm here.

Additionally, we use screen dimensions to compute the base dimensions
now. Because, say if integrator wants to constrain the CallContent to
small view, the floating dimensions can become extremely small. Using
screen dimensions make it independent of that. This is consistent with
Android PiP mode also.

| Portrait  video | Landscape video |
| ------------- | ------------- |
| <img width="1080" height="2400" alt="Screenshot_20251106-114806"
src="https://github.com/user-attachments/assets/fbe5845d-d962-4f95-9609-a9da3856413e"
/> | <img width="1080" height="2400" alt="Screenshot_20251106-114758"
src="https://github.com/user-attachments/assets/5ee4143f-f29d-4031-9ae5-b5ae4559fbf2"
/> |


Ticket: https://linear.app/stream/issue/RN-302

Author: santhoshvai

packages/react-native-sdk/src/components/Participant/FloatingParticipantView/index.tsx

@@ -128,7 +128,6 @@ export const FloatingParticipantView = ({
   }>();
 
   const floatingVideoDimensions = useFloatingVideoDimensions(
-    containerDimensions,
     participant,
     'videoTrack',
   );

packages/react-native-sdk/src/components/Participant/FloatingParticipantView/useFloatingVideoDimensions.tsx

@@ -3,34 +3,43 @@ import {
   VideoTrackType,
 } from '@stream-io/video-client';
 import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
+import { useWindowDimensions } from 'react-native';
 
 export const useFloatingVideoDimensions = (
-  containerDimensions:
-    | {
-        width: number;
-        height: number;
-      }
-    | undefined,
   participant: StreamVideoParticipant | undefined,
   trackType: VideoTrackType,
 ) => {
-  const containerWidth = containerDimensions?.width ?? 0;
+  const { width: containerWidth, height: containerHeight } =
+    useWindowDimensions();
   const { width, height } = useTrackDimensions(participant, trackType);
 
-  if (width === 0 || height === 0 || containerWidth === 0) {
+  if (
+    width === 0 ||
+    height === 0 ||
+    containerWidth === 0 ||
+    containerHeight === 0
+  ) {
     return undefined;
   }
 
-  const aspectRatio = width / height;
-
   // based on Android AOSP PiP mode default dimensions algorithm
-  // 23% of the container width
-  const floatingVideoWidth = containerWidth * 0.23;
-  // the height is calculated based on the aspect ratio
-  const floatingVideoHeight = floatingVideoWidth / aspectRatio;
+  // 23% of the shorter container dimension is the base dimension
+  const shorterContainerDimension = Math.min(containerWidth, containerHeight);
+  const baseDimension = shorterContainerDimension * 0.23;
 
-  return {
-    width: floatingVideoWidth,
-    height: floatingVideoHeight,
-  };
+  const aspectRatio = width / height;
+  const isPortraitVideo = aspectRatio < 1;
+
+  // baseDimension is assigned to either height or width based on whether the video is landscape or portrait
+  if (isPortraitVideo) {
+    return {
+      width: baseDimension,
+      height: baseDimension / aspectRatio,
+    };
+  } else {
+    return {
+      width: baseDimension * aspectRatio,
+      height: baseDimension,
+    };
+  }
 };