evoactivity commented 2 years ago

Bug

As discussed https://github.com/react-native-video/react-native-video/issues/2777 v6 displays an issue when two or more video components are being used simultaneously where only one video player will actually play.

Using this PR https://github.com/react-native-video/react-native-video/pull/2795 the issue is not present, all videos play as expected. I would initially assume this is related to the exoplayer version update present in the v6 updates.

Platform

Android

Environment info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 4.20 GB / 64.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.16.0 - ~/.volta/tools/image/node/16.16.0/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 8.11.0 - ~/.volta/tools/image/node/16.16.0/bin/npm
    Watchman: 2022.08.08.00 - /opt/homebrew/bin/watchman
  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:
      API Levels: 31, 33
      Build Tools: 30.0.3, 31.0.0, 33.0.0
      System Images: android-33 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8815526
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 16.0.1 - /Users/liam/.jabba/jdk/openjdk@1.16.0/Contents/Home/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.4 => 0.69.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: v6 Alpha Master Branch

Steps To Reproduce

Try to play two videos side by side
Only one video will play

Expected behaviour

All videos play

Reproducible sample code

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

const App = () => {
  return (
    <>
      <View style={[styles.a]}>
        <Video
          source={{
            uri: 'https://chlivemta1.akamaized.net/hls/live/2008145/mta1/playlist.m3u8',
          }}
          style={styles.fill}
        />
      </View>
      <View style={[styles.b]}>
        <Video
          source={{
            uri: 'https://chlivemta1.akamaized.net/hls/live/2008145/mta2/playlist.m3u8',
          }}
          style={styles.fill}
        />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  a: {
    backgroundColor: '#000',
    position: 'absolute',
    top: 0,
    left: 0,
    right: '50%',
    bottom: 0,
  },
  b: {
    backgroundColor: '#000',
    position: 'absolute',
    top: 0,
    left: '50%',
    right: 0,
    bottom: 0,
  },
  fill: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

export default App;

Video sample

Streams included in sample code are free to broadcast publicly available hls streams. I have also tested with mp4's.

karltaylor commented 2 years ago

Have you tried disableFocus={true}