Bugfix/ios pip to fullscreen transistion

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 - Fixed an issue on Android where the Ads API would sometimes return an empty map instead of an array when querying the list of current ads or scheduled ad breaks.
+- Fixed an issue on iOS where the transition from PiP to fullscreen was not smooth.
 
 ## [10.12.1] - 26-03-19
 

example/src/App.tsx

@@ -99,7 +99,10 @@ export default function App() {
 
   // In PiP presentation mode on NewArch Android, there is an issue where SafeAreayView does not update the edges in time,
   // so explicitly disable them here.
-  const edges: Edges = useMemo(() => (presentationMode === PresentationMode.pip ? [] : ['left', 'top', 'right', 'bottom']), [presentationMode]);
+  const edges: Edges = useMemo(
+    () => (Platform.OS === 'android' && presentationMode === PresentationMode.pip ? [] : ['left', 'top', 'right', 'bottom']),
+    [presentationMode],
+  );
 
   const onTheoAdsEvent = (event: TheoAdsEvent) => {
     console.log(event);
@@ -242,5 +245,7 @@ const styles = StyleSheet.create({
     marginHorizontal: Platform.select({ ios: 2, default: 0 }),
     alignItems: 'center',
     justifyContent: 'center',
+    borderColor: '#333',
+    borderWidth: 1,
   },
 });

ios/presentationMode/THEOplayerRCTPresentationModeManager.swift

@@ -39,9 +39,10 @@ public class THEOplayerRCTPresentationModeManager {
     }
 
     func validateLayout() {
-        if self.presentationMode == .fullscreen,
+        if self.presentationMode == .fullscreen || (self.presentationMode == .pictureInPicture && self.rnInlineMode == .fullscreen),
            let containerView = self.containerView {
-            // When in fullscreen, assure the moved view has a (0, 0) origin.
+            // When in fullscreen or when in Pip, coming from fullscreen (i.e playerView should remain in fullscreen),
+            // assure the moved view has a (0, 0) origin.
             containerView.frame = CGRect(x: 0, y: 0, width: containerView.frame.width, height: containerView.frame.height)
         }
     }

src/internal/THEOplayerView.tsx

@@ -124,7 +124,8 @@ interface THEOplayerRCTViewProps {
 interface THEOplayerRCTViewState {
   error?: PlayerError;
   presentationMode?: PresentationMode | undefined;
-  screenSize: ScaledSize;
+  previousPresentationMode?: PresentationMode | undefined;
+  fullscreenSizeOverride: ScaledSize;
   posterActive: boolean;
   poster: string | undefined;
 }
@@ -139,7 +140,8 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   private static initialState: THEOplayerRCTViewState = {
     error: undefined,
     presentationMode: PresentationMode.inline,
-    screenSize: getFullscreenSize(),
+    previousPresentationMode: undefined,
+    fullscreenSizeOverride: getFullscreenSize(),
     posterActive: false,
     poster: undefined,
   };
@@ -186,7 +188,7 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   }
 
   private _onDimensionsChanged = () => {
-    this.setState({ screenSize: getFullscreenSize() });
+    this.setState({ fullscreenSizeOverride: getFullscreenSize() });
   };
 
   private _onDeviceOrientationChanged = () => {
@@ -399,10 +401,11 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
 
   private _onPresentationModeChange = (event: NativeSyntheticEvent<NativePresentationModeChangeEvent>) => {
     const presentationMode = event.nativeEvent.presentationMode;
-    this.setState({ presentationMode }, () => {
+    const previousPresentationMode = event.nativeEvent.previousPresentationMode;
+    this.setState({ presentationMode, previousPresentationMode }, () => {
       // Re-measure screen size after transitioning to fullscreen.
       if (presentationMode === PresentationMode.fullscreen) {
-        this.setState({ screenSize: getFullscreenSize() });
+        this.setState({ fullscreenSizeOverride: getFullscreenSize() });
       }
     });
     this._facade?.dispatchEvent(
@@ -438,11 +441,25 @@ export class THEOplayerView extends PureComponent<React.PropsWithChildren<THEOpl
   };
 
   private styleOverride() {
-    const { presentationMode, screenSize: fullscreenSize } = this.state;
-    return presentationMode === PresentationMode.fullscreen ||
-      (Platform.OS === 'android' && presentationMode === PresentationMode.pip && this._facade?.pipConfiguration?.reparentPip == true)
-      ? fullscreenSize
-      : {};
+    const { presentationMode, previousPresentationMode, fullscreenSizeOverride: fullscreenOverride } = this.state;
+
+    // When in fullscreen, we need to apply an override to make sure the player fills the entire screen
+    if (presentationMode === PresentationMode.fullscreen) {
+      return fullscreenOverride;
+    }
+
+    // When in PiP, we need to apply the same override if the PiP configuration specifies reparenting, or when coming from fullscreen.
+    if (presentationMode === PresentationMode.pip) {
+      if (
+        (Platform.OS === 'android' && this._facade?.pipConfiguration?.reparentPip === true) ||
+        previousPresentationMode === PresentationMode.fullscreen
+      ) {
+        return fullscreenOverride;
+      }
+    }
+
+    // otherwise, no override is needed
+    return {};
   }
 
   public render(): React.JSX.Element {