diff --git a/example/src/ParticipantView.tsx b/example/src/ParticipantView.tsx index dbb1dc13..2ee147f0 100644 --- a/example/src/ParticipantView.tsx +++ b/example/src/ParticipantView.tsx @@ -44,8 +44,8 @@ export const ParticipantView = forwardRef( enabled: useIOSPIP, startAutomatically: true, preferredSize: { - width: 800, - height: 800, + width: 1, + height: 1, }, }} /> diff --git a/src/components/VideoTrack.tsx b/src/components/VideoTrack.tsx index a9d0a4f7..b966651d 100644 --- a/src/components/VideoTrack.tsx +++ b/src/components/VideoTrack.tsx @@ -81,10 +81,14 @@ export type VideoTrackProps = { * * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability. * - * If `iosPIP.enabled` is true, startIOSPIP and stopIOSPIP can be used to manually - * trigger the PIP mode. `iosPIP.startAutomatically` can be used to automatically + * If `iosPIP.enabled` is true, the methods `startIOSPIP` and `stopIOSPIP` + * can be used to manually trigger the PIP mode. + * + * `iosPIP.startAutomatically` can be used to automatically * enter PIP when backgrounding the app. * + * `iosPIP.preferredSize` is used to provide a suggested aspect ratio. + * * @example * ```tsx * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc'; @@ -98,8 +102,8 @@ export type VideoTrackProps = { * enabled: true, * startAutomatically: true, * preferredSize: { - * width: 800, - * height: 800, + * width: 9, + * height: 16, * }, * }} * ... @@ -151,9 +155,12 @@ export const VideoTrack = forwardRef( (event: LayoutChangeEvent) => elementInfo.onLayout(event), [elementInfo] ); + + const iosPIPEnabled = iosPIP?.enabled ?? false; const visibilityOnChange = useCallback( - (isVisible: boolean) => elementInfo.onVisibility(isVisible), - [elementInfo] + (isVisible: boolean) => + elementInfo.onVisibility(isVisible || iosPIPEnabled), + [elementInfo, iosPIPEnabled] ); const videoTrack = trackRef?.publication.track;