feat: adaptive floating video dimensions (#1969)

### 💡 Overview

Currently our floating video dimensions are hardcoded. This looks fine
in a iPhone Xs phone. Anything taller or wider, it looks small.

Our dogfood app had a custom implementation based on window dimensions
so we didnt use it. But this is also flawed, as this didnt adapt to
portrait to landscape change.

### 📝 Implementation notes

I implemented the Android AOSP PiP mode algorithm. Which is based on the
video dimensions.

Now it works well on larger devices like iPad too. Looks similar to
Facetime behaviour now. If the video changes to landscape, will adapt to
that as well now.

<img width="820" height="1180" alt="IMG_0016"
src="https://github.com/user-attachments/assets/fa104fc6-e04c-42ef-b071-fd8ef7178818"
/>
<img width="1180" height="820" alt="IMG_0017"
src="https://github.com/user-attachments/assets/5879e7c4-3c86-4fbd-9671-e705cc4035fa"
/>

Author: santhoshvai

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

@@ -6,7 +6,7 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import { FLOATING_VIDEO_VIEW_STYLE, Z_INDEX } from '../../../constants';
+import { Z_INDEX } from '../../../constants';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { VideoSlash } from '../../../icons';
 import FloatingView from './FloatingView';
@@ -21,6 +21,7 @@ import {
   type ParticipantViewProps,
 } from '../ParticipantView';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { useFloatingVideoDimensions } from './useFloatingVideoDimensions';
 import { type StreamVideoParticipant } from '@stream-io/video-client';
 
 export type FloatingParticipantViewAlignment =
@@ -104,7 +105,11 @@ export const FloatingParticipantView = ({
   objectFit,
 }: FloatingParticipantViewProps) => {
   const {
-    theme: { colors, floatingParticipantsView },
+    theme: {
+      colors,
+      floatingParticipantsView,
+      variants: { spacingSizes },
+    },
   } = useTheme();
 
   const floatingAlignmentMap: Record<
@@ -122,6 +127,12 @@ export const FloatingParticipantView = ({
     height: number;
   }>();
 
+  const floatingVideoDimensions = useFloatingVideoDimensions(
+    containerDimensions,
+    participant,
+    'videoTrack',
+  );
+
   const participantViewProps: ParticipantViewComponentProps = {
     ParticipantLabel: null,
     ParticipantNetworkQualityIndicator,
@@ -158,7 +169,7 @@ export const FloatingParticipantView = ({
         });
       }}
     >
-      {containerDimensions && (
+      {containerDimensions && floatingVideoDimensions && (
         <FloatingView
           containerHeight={containerDimensions.height}
           containerWidth={containerDimensions.width}
@@ -171,6 +182,12 @@ export const FloatingParticipantView = ({
                 trackType="videoTrack"
                 style={[
                   styles.participantViewContainer,
+                  {
+                    width: floatingVideoDimensions.width,
+                    height: floatingVideoDimensions.height,
+                    borderRadius: floatingVideoDimensions.width * 0.1,
+                    marginHorizontal: spacingSizes.md,
+                  },
                   participantViewStyle,
                   { shadowColor: colors.sheetPrimary },
                   floatingParticipantsView.participantViewContainer,
@@ -197,9 +214,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   participantViewContainer: {
-    height: FLOATING_VIDEO_VIEW_STYLE.height,
-    width: FLOATING_VIDEO_VIEW_STYLE.width,
-    borderRadius: FLOATING_VIDEO_VIEW_STYLE.borderRadius,
     shadowOffset: {
       width: 0,
       height: 2,

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

@@ -0,0 +1,36 @@
+import {
+  StreamVideoParticipant,
+  VideoTrackType,
+} from '@stream-io/video-client';
+import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
+
+export const useFloatingVideoDimensions = (
+  containerDimensions:
+    | {
+        width: number;
+        height: number;
+      }
+    | undefined,
+  participant: StreamVideoParticipant | undefined,
+  trackType: VideoTrackType,
+) => {
+  const containerWidth = containerDimensions?.width ?? 0;
+  const { width, height } = useTrackDimensions(participant, trackType);
+
+  if (width === 0 || height === 0 || containerWidth === 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;
+
+  return {
+    width: floatingVideoWidth,
+    height: floatingVideoHeight,
+  };
+};

packages/react-native-sdk/src/constants/index.ts

@@ -1,11 +1,5 @@
 import { type StreamReactionType } from '../components';
 
-export const FLOATING_VIDEO_VIEW_STYLE = {
-  height: 140,
-  width: 80,
-  borderRadius: 10,
-};
-
 export const defaultEmojiReactions: StreamReactionType[] = [
   {
     type: 'reaction',

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

@@ -11,10 +11,10 @@ import { NativeEventEmitter, NativeModules } from 'react-native';
  * `tracktype` should be 'videoTrack' for video track and 'screenShareTrack' for screen share track.
  */
 export function useTrackDimensions(
-  participant: StreamVideoParticipant,
+  participant: StreamVideoParticipant | undefined,
   trackType: VideoTrackType,
 ) {
-  const { videoStream, screenShareStream } = participant;
+  const { videoStream, screenShareStream } = participant || {};
   const stream =
     trackType === 'screenShareTrack' ? screenShareStream : videoStream;
   const [track] = stream?.getVideoTracks() ?? [];

sample-apps/react-native/dogfood/src/theme.ts

@@ -52,16 +52,6 @@ export const useCustomTheme = (mode: ThemeMode): DeepPartial<Theme> => {
     container: { paddingTop: 0, paddingBottom: 0, flexDirection: 'column' },
   };
 
-  const { height, width } = Dimensions.get('window');
-  const floatingParticipantsView: DeepPartial<
-    Theme['floatingParticipantsView']
-  > = {
-    participantViewContainer: {
-      height: height * 0.2,
-      width: width * 0.25,
-    },
-  };
-
   const lightThemeColors: DeepPartial<Theme['colors']> = {
     buttonPrimary: '#3399ff',
     buttonSecondary: '#eff0f1',
@@ -82,7 +72,6 @@ export const useCustomTheme = (mode: ThemeMode): DeepPartial<Theme> => {
   const baseTheme: DeepPartial<Theme> = {
     variants,
     callContent,
-    floatingParticipantsView,
   };
 
   if (mode === 'light') {