Приостановить видео в плоский список, когда вне поля зрения - PullRequest
Новая
       41

Приостановить видео в плоский список, когда вне поля зрения

0 голосов
/ 23 февраля 2019

У меня есть плоский список, показывающий видео.Я хочу, чтобы, когда видео выходит из поля зрения, оно должно быть приостановлено.Я поддерживаю состояние паузы в каждом компоненте Posts. 

class Posts extends React.PureComponent {

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

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

}

Я использую react-native-video.

Я пытался использовать onViewableItemsChanged проп Flatlist, носостояние не меняется.

Я пытался это .Но, похоже, это не работает для меня.

Как мне поступить?

Ответы [ 3 ]

0 голосов
/ 23 февраля 2019

Вот возможное решение, использующее реагировать-родной-inviewport .Эта зависимость представляет собой только один индексный файл, который содержит компонент, имеющий обратный вызов, когда представление находится в области просмотра.Его можно легко изменить в соответствии с вашими потребностями.

Я создал очень простое приложение с FlatList.11-й пункт в FlatList - это видео.Это должно означать, что видео выводится за пределы экрана при рендеринге приложения, поэтому видео не будет воспроизводиться, как только видео полностью войдет в область просмотра, оно должно начать воспроизведение.

App.js

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Constants } from 'expo';
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

Этот компонент содержит компонент Video.Видео обернуто в компоненте InViewPort, который имеет функцию обратного вызова.Обратный вызов возвращает true, если компонент, который он окружает, равен полностью в области просмотра, и false, если он не полностью находится в области просмотра.Обратный вызов вызывает this.handlePlaying, что, в свою очередь, вызывает либо this.playVideo, либо this.pauseVideo в зависимости от логического значения. 

import React, {Component} from 'react';
import { View, StyleSheet } from 'react-native';
import { Video } from 'expo';
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'
  }
});

Вот закуска, показывающая, как он работает https://snack.expo.io/@andypandy/video-only-playing-when-in-viewport

IСледует отметить, что если видео не полностью в окне просмотра, оно не будет воспроизводиться.Я уверен, что можно сделать некоторые настройки для react-native-inviewport, чтобы оно воспроизводило видео, если оно было частично в окне просмотра, если это то, что вам нужно, возможно, путем передачи высоты видео компоненту InViewPort.

0 голосов
/ 13 августа 2019

вот как я просто выполнил трюк внутри компонента моей карты, у которого video 

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

и currentIndex, и currentVisibleIndex передаются компоненту из FlatList parent

мой FlatList передает индекс renderItem как currentIndex 

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

наконец, вот как это вычислить currentVisibleIndex пожалуйста, не забудьте прочитать viewabilityConfig 

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

Пожалуйста, дайте мне знать, если это полезно

0 голосов
/ 23 февраля 2019

Я наконец-то сделал это, используя редуксНе уверен, что это правильный путь.

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));

Когда срабатывает viewableItemsChanged, я добавляю измененный идентификатор сообщения в массив и вызываю действие с массивом идентификаторов сообщения.В компоненте Posts я проверяю, совпадают ли идентификаторы записей, если да, я устанавливаю состояние паузы в true.

...