diff --git a/CHANGELOG.md b/CHANGELOG.md index 52b305bfd..6936c740a 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/example/src/App.tsx b/example/src/App.tsx index f7d84ab91..44ab5e26c 100644 --- a/example/src/App.tsx +++ b/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, }, }); diff --git a/ios/presentationMode/THEOplayerRCTPresentationModeManager.swift b/ios/presentationMode/THEOplayerRCTPresentationModeManager.swift index 7c51f7307..eae6ef39c 100644 --- a/ios/presentationMode/THEOplayerRCTPresentationModeManager.swift +++ b/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) } } diff --git a/src/internal/THEOplayerView.tsx b/src/internal/THEOplayerView.tsx index 2a1011008..7ec47b997 100644 --- a/src/internal/THEOplayerView.tsx +++ b/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 { - this.setState({ screenSize: getFullscreenSize() }); + this.setState({ fullscreenSizeOverride: getFullscreenSize() }); }; private _onDeviceOrientationChanged = () => { @@ -399,10 +401,11 @@ export class THEOplayerView extends PureComponent) => { 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