diff --git a/packages/react-native-sdk/src/components/Participant/FloatingParticipantView/index.tsx b/packages/react-native-sdk/src/components/Participant/FloatingParticipantView/index.tsx index 6308b201be..9643798646 100644 --- a/packages/react-native-sdk/src/components/Participant/FloatingParticipantView/index.tsx +++ b/packages/react-native-sdk/src/components/Participant/FloatingParticipantView/index.tsx @@ -128,7 +128,6 @@ export const FloatingParticipantView = ({ }>(); const floatingVideoDimensions = useFloatingVideoDimensions( - containerDimensions, participant, 'videoTrack', ); diff --git a/packages/react-native-sdk/src/components/Participant/FloatingParticipantView/useFloatingVideoDimensions.tsx b/packages/react-native-sdk/src/components/Participant/FloatingParticipantView/useFloatingVideoDimensions.tsx index 3972641dc7..033c71d499 100644 --- a/packages/react-native-sdk/src/components/Participant/FloatingParticipantView/useFloatingVideoDimensions.tsx +++ b/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, + }; + } };