React-native-video: Version 4.4.4 IOS14 has the wrong video screen size.

[foxempire]

Issue:

 _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
 _playerLayer.frame = self.bounds;
 _playerLayer.needsDisplayOnBoundsChange = YES;

"_playerLayer" is slow to create, causing the video screen to deform.

I fixed the problem temporarily with code.

append：

 -(void)touchPlayerLayer{
      if(!_player)return;
      if(_playerLayer)return;

      _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
      _playerLayer.frame = self.bounds;
      _playerLayer.needsDisplayOnBoundsChange = YES;

      [self.layer addSublayer:_playerLayer];
      self.layer.needsDisplayOnBoundsChange=YES;
  }

modify:

- (void)usePlayerLayer
{
  if( _player )
  {
    [self touchPlayerLayer];  ++++++


    // to prevent video from being animated when resizeMode is 'cover'
    // resize mode must be set before layer is added
    [self setResizeMode:_resizeMode];
    [_playerLayer addObserver:self forKeyPath:readyForDisplayKeyPath options:NSKeyValueObservingOptionNew context:nil];
    _playerLayerObserverSet = YES;

    [self.layer addSublayer:_playerLayer];
    self.layer.needsDisplayOnBoundsChange = YES;
    #if TARGET_OS_IOS
    [self setupPipController];
    #endif
  }
}

modify:

 _player = [AVPlayer playerWithPlayerItem:_playerItem];
[self touchPlayerLayer]; +++++
_player.actionAtItemEnd = AVPlayerActionAtItemEndNone;

We hope to fix it as soon as possible.
Thanks.

[dylan-westbury]

Is this the issue you are referring to? @foxempire

https://github.com/react-native-community/react-native-video/issues/2158

[2xSamurai]

@foxempire when I apply this fix. I can't see the controls anymore. But the aspect ratio is fixed.
The play button in the beginning was not showing up before as well. But the controls while playing the video were there.
But after applying this patch, I am unable to see the controls while playing as well.

I am grateful for the fix. Can you also do something for the controls as well?

Thanks in advance.

P.S: - iOS 14

[coschmit]

@foxempire

Hi ! Which file did you modify ?

[cristianoccazinsp]

I can confirm that the above patch works with 5.0.2. Any chance this is merged into the 5.x branch?

[dackom]

This is working as a temporary solution. But if you have poster, you will not see the video, poster will go on top of the video. 🙁 I guess something similar is happening with controls as well.

[adamawang]

@coschmit RCTVideo.m

Also confirming the patch is working with latest v5.1.0-alpha8

[meizhou0228]

@foxempire
How can you think of making such a change? It's awesome

[funkju]

I'm not an Objective C developer so I'm sure I'm missing something but when I implement the above patch, XCode is complaining: Cannot increment value of type 'void'

Edit: error occurs on:
[self touchPlayerLayer]; ++++++

Could someone post their RCTVideo.m with the patch properly implemented?

[adamawang]

@funkju remove the +++++, that just there to show what lines were added

[funkju]

@adamawang Thank you! That makes sense. I was trying to piece together that ObjC syntax and 5 plus symbols didn't make any sense to me.

[vrgimael]

This works and I don't need controls, but this also makes the video animate to position kinda "springing" into place, which is not desirable. Any ideas?

[sammarks]

From react-native-camera, mentioning some other issue threads here stating this might be a bug with iOS 14 (as it seems to be fixed in 14.2 beta): https://github.com/react-native-community/react-native-camera/issues/2979#issuecomment-696264917

I just tested iOS 14.2 Beta as pointed out by some users in the react-native-video issues and this ratio problem is gone. Strange, but good I guess

[cristianoccazinsp]

Update: Although it fixed video dimensions, if you were using a poster/loading placeholder, it won't go away after the video starts :(

[sammarks]

I actually just noticed the poster issue myself.

Removing the poster resolves it, which is good enough for me until 14.2 comes out and is adopted (or this gets fixed another way).

[jpmazza]

The fix is working, but it breaks the callback onReadyForDisplay and it may also be breaking other callbacks.

[hamzaouhssain1993]

IOS 14.2 Beta fixes the issue

[FathomSamadhan]

@foxempire In which file did you modify?

[lluis-sancho]

@foxempire In which file did you modify?

node_modules/react-native-video/ios/video/RCTVideo.m

[ghasemikasra39]

@foxempire In which file did you modify?

node_modules/react-native-video/ios/video/RCTVideo.m

Not working on react native 0.63.3, ios 14.0.1. It just shows the loading indicator and does not play the video.

[antoarva]

Yesterday iOS 14.1 released, the video is fixed now. Just update.

[ghasemikasra39]

Is fixed on ios 14.1.0. Just update to latest version.

[lluis-sancho]

I have updated XCODE to 12.1, and in the simulators it works, but when i upload the application to testflight, and test it in a real device with 14.1 the aspect ratio is not the good one..

Do you have applied the patch on this thread? I tested with and without it, and nothing.

"react": "16.13.1",
"react-native": "0.63.2",
"react-native-video": "^5.1.0-alpha8",

[kmcmanimen]

@lluis-sancho - This patch works for us:

diff --git a/node_modules/react-native-video/ios/Video/RCTVideo.m b/node_modules/react-native-video/ios/Video/RCTVideo.m
index 8780f48..806a706 100644
--- a/node_modules/react-native-video/ios/Video/RCTVideo.m
+++ b/node_modules/react-native-video/ios/Video/RCTVideo.m
@@ -383,6 +383,7 @@ - (void)setSrc:(NSDictionary *)source
       }

       self->_player = [AVPlayer playerWithPlayerItem:self->_playerItem];
+      [self touchPlayerLayer];
       self->_player.actionAtItemEnd = AVPlayerActionAtItemEndNone;

       [self->_player addObserver:self forKeyPath:playbackRate options:0 context:nil];
@@ -1410,13 +1411,23 @@ - (void)usePlayerViewController
   }
 }

+-(void)touchPlayerLayer{
+    if(!_player)return;
+    if(_playerLayer)return;
+    
+    _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
+    _playerLayer.frame = self.bounds;
+    _playerLayer.needsDisplayOnBoundsChange = YES;
+    
+    [self.layer addSublayer:_playerLayer];
+    self.layer.needsDisplayOnBoundsChange=YES;
+}
+
 - (void)usePlayerLayer
 {
   if( _player )
   {
-    _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
-    _playerLayer.frame = self.bounds;
-    _playerLayer.needsDisplayOnBoundsChange = YES;
+    [self touchPlayerLayer];

     // to prevent video from being animated when resizeMode is 'cover'
     // resize mode must be set before layer is added

[lluis-sancho]

@kmcmanimen after archiving and uploading to testflight?

I just put your changes, and in simulator ok, but in real device with 14.1, still the same..

[cristianoccazinsp]

Tried with a real device, XCode for 14.1 (iOS still 14.0.1), same bug. Does the device also need to update to 14.1?

[hamzaouhssain1993]

@cristianoccazinsp yes the device has to be 14.1

[cristianoccazinsp]

That's unfortunate, people tend to be very slow in the upgrade process, especially a major version.

[luisfuertes]

iOS 14.1 fixed for me. (iPhone XS Max with 14.1 and iPhone XR with 14.1)

[summonerriftofficial]

not working yet

[manjuy124]

@summonerriftofficial did you get any workaround?