Pause video in flatlist when out of view

Question

I have a flatlist showing videos. I want that when a video goes out of the view it should be paused. I am maintaining the pause state in each of the Posts component.

class Posts extends React.PureComponent {

constructor() {
 super()
 this.state = {
   pause: true,
 }

 return(){
  <Video
    pause={this.state.pause}
    //other props
  />
 }

}

I am using react-native-video.

I have tried using onViewableItemsChanged prop of Flatlist but it doesn't change the state.

I tried this . But it doesn't seem to work for me.

How should I proceed ?

Answer 1

I finally did this using redux. Not sure whether it is the right way.

Home.js

_renderItem = ({item, index}) => <Posts item={item} />

viewableItemsChanged = (props) => {
    let {changed} = props;
    let changedPostArray = []; 
    changed.map((v,i) => {
      let {isViewable, item} = v;
      if(!isViewable) {
        let {post_id, type} = item;
        if(type === 1)
          changedPostArray.push(post_id);
      }
    });
    if(changedPostArray.length != 0)
      this.props.sendPostToPause(changedPostArray);
  }

render() {
    return(
      <View style={{flex: 1}} >
          <FlatList
            ref={(ref) => this.homeList = ref}
            refreshing={this.state.refreshing}
            onRefresh={async () => {
              await this.setState({refreshing: true, postsId: [0], radiusId: 0, followingId: 0});
              this.getPosts();
            }}
            onEndReached={async () => {
              if(!this.state.isEnd) {
                await this.setState({isPaginate: true})
                this.getPosts()
              }
            }}
            onEndReachedThreshold={0.2}
            removeClippedSubviews={true}
            contentContainerStyle={{paddingBottom: 80}}
            data={this.state.followersRes}            
            renderItem={this._renderItem}
            viewabilityConfig={this.viewabilityConfig}
            onViewableItemsChanged={this.viewableItemsChanged}
          />
        </View>
        <Footer callback={this.scrollToTopAndRefresh} />
      </View>
    )
}
export default connect(null, {sendPostToPause})(Home);

Posts.js

class Posts extends React.PureComponent {

constructor(){
 super()
 this.state: {
  pause: false
 }
}

componentDidUpdate(prevProps) {
    if(prevProps != this.props) {
      this.props.postIdArray.map((v) => {
        if(v === prevProps.item.post_id) {
          this.setState({pause: true})
        }
      })
    }
  }

render(){
 return(
  <Video
    pause={this.state.pause}
    //Other props
  />
 )
}


}

const mapStateToProps = (state) => {
  const {postId} = state.reducers;
  return {
    postIdArray: postId
  }
}

export default connect(mapStateToProps, {sendPostToPause})(withNavigation(Posts));

Whenever the viewableItemsChanged is trigger I am adding the changed posts id in an array and calling the action with the array of post ids. In the Posts component I am checking if the post ids match, if so I am setting the pause state to true.

Answer 2

Here is a possible solution using react-native-inviewport. This dependency is only a single index file that contains a component that has a callback when view is in the viewport. It could easily be modified to suit your needs.

I have constructed a very simple app that has a FlatList. The 11th item in the FlatList is a video. That should mean that the video is off the screen when the App renders so the viddeo won't be playing, once the video comes fully into the viewport it should then start playing.

App.js

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
import VideoPlayer from './VideoPlayer';

export default class App extends React.Component {

  state = {
    data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
  }

  renderItem = ({item, index}) => {
    if (index === 10) {
      return <VideoPlayer />
    } else {
      return (
        <View style={{height: 100, backgroundColor: '#336699', justifyContent: 'center', alignItems: 'center'}}>
          <Text>{index}</Text>
        </View>
      )
    }
  }
  keyExtractor = (item, index) => `${index}`;

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

VideoPlayer.js

This is a component that contains the Video component. The video is wrapped in the InViewPort component that has a callback function. The callback returns true when the component it surrounds is completely in the viewport and false when it is not fully in the viewport. The callback calls this.handlePlaying which in turn calls either this.playVideo or this.pauseVideo depending on the boolean value.

import React, {Component} from 'react';
import { View, StyleSheet } from 'react-native';
import { Video } from 'expo-av';
import InViewPort from './InViewPort';
//import InViewPort from 'react-native-inviewport; // this wouldn't work in the snack so I just copied the file and added it manually.

export default class VideoPlayer extends React.Component {

  pauseVideo = () => {
    if(this.video) {
      this.video.pauseAsync();
    }
  }

  playVideo = () => {
    if(this.video) {
      this.video.playAsync();
    }
  }

  handlePlaying = (isVisible) => {
    isVisible ? this.playVideo() : this.pauseVideo();
  }

  render() {
      return (
        <View style={styles.container}>
         <InViewPort onChange={this.handlePlaying}>
          <Video
            ref={ref => {this.video = ref}}
            source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            shouldPlay
            style={{ width: 300, height: 300 }}
          />
          </InViewPort>
        </View>
      )
  }  
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Here is a snack showing it working https://snack.expo.io/@andypandy/video-only-playing-when-in-viewport

I should point out that if the video is not fully in the viewport then it will not play. I am sure some tweaking could be done to react-native-inviewport so that it would play the video if it was partially in the viewport if that is what you wanted, perhaps by passing the height of the video to the InViewPort component.

Answer 3

here is how i simply did the trick inside my card component that have video

<Video ...
    paused={currentIndex !== currentVisibleIndex}
/>

both currentIndex and currentVisibleIndex are passed the component from the FlatList parent

my FlatList pass the renderItem index as currentIndex

<FlatList
    data={[...]}
    renderItem={({ item, index }) => (
    <GalleryCard
        {...item}
        currentIndex={index}
        currentVisibleIndex={currentVisibleIndex}
        />
        )}
    onViewableItemsChanged={this.onViewableItemsChanged}
    viewabilityConfig={{
        viewAreaCoveragePercentThreshold: 90
    }}

finally my this is how to calculate currentVisibleIndex please make sure to read viewabilityConfig

onViewableItemsChanged = ({ viewableItems, changed }) => {
    if (viewableItems && viewableItems.length > 0) {
        this.setState({ currentVisibleIndex: viewableItems[0].index });
    }
};

please let me know if this is helpful