TheWidlarzGroup / react-native-video

A <Video /> component for react-native
https://docs.thewidlarzgroup.com/react-native-video/
MIT License
7.21k stars 2.9k forks source link

react-native-video repeat is interrupted on iOS #2817

Open MitoMonkey opened 2 years ago

MitoMonkey commented 2 years ago

Bug

In my react native project I use this library to play audio files. Some of the are loops. Generally the looping works fine. However on iOS there is a small silence "break" before the files is played again. On Android its a perfectly smooth transition and no one could hear where the file starts over again.

I am using the

<Video
                    ref='mainAudio'
                    source={typeof this.props.audio === 'string' ? { uri: this.props.audio } : this.props.audio}
                    posterResizeMode='cover'
                    audioOnly
                    disableFocus
                    playInBackground
                    style={styles.video}
                    paused={this.state.paused}
                    resizeMode='cover'
                    onProgress={this.onProgress}
                    onEnd={this.videoEnded}
                    onLoad={this.onLoad}
                    ignoreSilentSwitch='ignore'
                    repeat={!!this.props.repeat}
                />

With the methods

onLoad: (data: any) => void = (data: Object) => {
        this.setState({ duration: data.duration });
    };

onProgress: (data: any) => void = (data: Object) => {
        this.setState({ currentTime: data.currentTime });
    };

togglePausePlay: () => void = () => {
        this.setState({ paused: !this.state.paused });
    };

videoEnded: () => void = () => {
        if (this.props.audioType === 'loop') {
            return;
        }
        // more code for other cases
}

Platform

I tested it on the XCode iOS Simulator on an iPhone 12, with iOS 15.5. , as well as on a physical iPhone SE running iOS 15.5 with the production version of the app (= not emulated).

As mentioned on an OnePlus 6 (Android 11) with the same production version of the app there is no problem with the loops.

Environment info

From package.json: "react-native-video": "5.2.0",

React native info output:

System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M1
    Memory: 107.48 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: Not Found
    npm: 8.13.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8815526
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.1 => 0.64.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 5.2.0

johnylawrence1987 commented 2 years ago

Facing same issue, when repeat enable the transition is not smooth on iOS

johnylawrence1987 commented 2 years ago

@freeboub any way we can improve this?

freeboub commented 2 years ago

Repeat is implemented with a seek which seems to be a good way to proceed...

You can try to change implementation and use avplayerlooper it may be better: https://developer.apple.com/documentation/avfoundation/avplayerlooper