在 React-Native FlatList 中播放和暂停视频或仅播放一个视频可见

Question

Hi i am doing video Gallery app like TikTok using React-Native with FlatList , While i am doing the app i got the error with videos play and pause options. When i open the app all videos are playing at a time in the background but i want to play the only one video which is visible one the screen or in the view point. So once check the below code and give me any better suggestions ..

import SegmentedControlTab from 'react-native-segmented-control-tab';
import Video from 'react-native-video';
import VideoPlayer from 'react-native-video-controls';

import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';

import axios from 'axios';

export default class HomeScreen extends Component {
  _isMounted = false;
  constructor(Props) {
    super(Props);
    this.state = {
      error: null,
      isLoading: false,

      playing: false,
      currentTime: 10,
      duration: 0,
      isFullScreen: false,
      isLoading: true,
      paused: true,
      playerState: PLAYER_STATES.PLAYING,
      screenType: 'content',

    };

    this.viewabilityConfig = {
      waitForInteraction: true,
      viewAreaCoveragePercentThreshold: 95
    }


  }
  onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log("Visible items are", viewableItems);
    console.log("Changed in this iteration", changed);
  }




 render() {
    const { duration, paused, overlay } = this.state

    return (
      <View style={styles.container}>        

         <FlatList style={styles.list}
                data={this.state.following_Posts}
                // keyExtractor={(item, index) => index.toString()}
                keyExtractor={(data_Posts, index) => {
                  return data_Posts.id.toString();
                }}
                ItemSeparatorComponent={() => { return (<View style={styles.separator} />) }}

               // viewabilityConfig={{ viewAreaCoveragePercentThreshold: 95 }}
              viewabilityConfig={this.viewabilityConfig}

              onViewableItemsChanged={this.onViewableItemsChanged}
              viewabilityConfig={{
                itemVisiblePercentThreshold: 95
              }}

                refreshing={this.state.isLoading}
                onRefresh={this.getFollowingPosts}
                renderItem={(posts, id) => {
                  const items = posts.item;
                  return (
                    <View style={styles.card}>                    

                      <View style={styles.cardContent}>
                        {items.file_Name.toString().endsWith("mp4") ?
                          <View>
                            <Video
                              onEnd={this.onEnd}
                              onLoad={this.onLoad}
                              onLoadStart={this.onLoadStart}
                              onProgress={this.onProgress}
                              paused={this.state.paused}
                              ref={videoPlayer => (this.videoPlayer = videoPlayer)}
                              onFullScreen={this.state.isFullScreen}
                              resizeMode="cover"
                              volume={10}
                              source={{ uri: "http://192.168.1.3:3200/" + items.file_Name }}
                              style={{ width: '100%', height: '100%', top: 0, left: 0, bottom: 0, right: 0, }}

                            />
                            <MediaControls
                              duration={this.state.duration}
                              isLoading={this.state.isLoading}
                              mainColor="#333"
                              onFullScreen={this.onFullScreen}
                              onPaused={this.onPaused}
                              onReplay={this.onReplay}
                              onSeek={this.onSeek}
                              onSeeking={this.onSeeking}
                              playerState={this.state.playerState}
                              progress={this.state.currentTime}
                              toolbar={this.renderToolbar()}
                            />
                          </View>
                       </View>
      />
   </View>
  )
 }

If anyone find anything wrong in code code please tells me , If anyone better solution please help me with the code ... Thank you to all programmers ...

Answer 1

Well for one, const { duration, paused, overlay } = this.state is declared but you're still accessing state in JSX with this.state .

Your onViewableItemsChanged function doesn't mutate state or do anything besides log stuff out to the console.

And you either left out or didn't finish writing the onLoad, onEnd, onProgress, etc. functions. So, it's kind of impossible to know exactly what's going on. If you just omitted those functions in order to post this question, are you updating the paused state in any of those functions?

Answer 2

import { Viewport } from '@skele/components'

Use this component, it resolved for me, this component helps you track one video at a time and plays only the video that is visible on screen

even, am a newbie in react native, hence this is the easiest solution one could get