Regression: Fix iOS video not displaying after switching source

[rafamanzo]

Bug

I've got the same wrong behavior as described in: #1395

Also there are no errors in the console. I just hear the new source audio playing while I see the image of the old source.

If I set controls={false} it works just fine as described in one of the comments of the mentioned PR (the maxBitRate suggestion from there did not work).

The thing is that I need the controls to on because of #2808. The workaround I got for this is to set controls to false in the onLoadStart callback and set it back to true in the onLoad callback.

It is also important to mention this is an issue only in iOS, not Android.

Platform

• iOS

Environment info

React native info output:

info Fetching system and libraries information...
System:
    OS: macOS 12.3.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 29.54 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    Watchman: 2022.01.31.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 31
      Build Tools: 31.0.0
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.2 => 0.68.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 6.0.0.alpha1 (also tested in the top of master commit f32da09)

Steps To Reproduce

1. Have a video playing with a source X
2. Change the source to Y

Expected behavior

1. Have both video and audio from source X
2. When changing to source Y also have its respective video and audio

Reproducible sample code

import React, {useState} from 'react';
import Video from 'react-native-video';

export default ({}) => {
  const [source, setSource] = useState('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');

  setTimeout(() => { setSource('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4') }, 10000);

  return (<Video controls={true} source={source} />);
}

[zavvdev]

Faced the same issue. Any updates?

[wood1986]

@rafamanzo and @zavvdev

https://github.com/react-native-video/react-native-video/blob/8b09cb58dfd55d2a6351965be0de33ced994a136/ios/Video/RCTVideo.swift#L283

I changed this line to

self._player = self._player ?? AVPlayer()

It works. Can you confirm?

[amf-paulinho]

I am having same problem with 0.71.1 and react-native-video: 5.2.1. Does someone has a solution. Is it a use_framework problem ?

[freeboub]

This issue shall be fixed in 6.0.0.
I will close the issue, please let me know if reproduced