feat: adaptive floating video dimensions

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) {
+    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') {