Приостановка видео на горизонтальном FlatList при перелистывании

Question

Я могу консоль регистрировать видимые элементы при перелистывании при использовании FlatList, но мне было интересно, как я могу сделать паузу в видео. Или, если есть лучший способ сделать это?

Это компонент функции RenderItem

const RenderItem = (props) => {
  const [paused, setPaused] = useState(true);

  const togglePlay = () => setPaused(prev => !prev);

  return (
    <View>
      {props.is_video ? (
        <>
          <Video
            paused={paused}
            repeat
            source={{uri: props.mediaUrl}}
          />
          <TouchableWithoutFeedback onPress={togglePlay}>
            <View>
                {paused ? <Icon
                size={180}
                name="play"
                type="FontAwesome"
                style={{opacity: 0.7, color: '#cccccc'}}
              /> : null}
            </View>
          </TouchableWithoutFeedback>
        </>
      ) : (
        <Image source={{uri: props.mediaUrl}} />
      )}
    </View>
  );
};

Тогда в другой функции у меня есть это:

const Post = (props) => {

  const onViewRef = useRef((viewableItems)=> {console.log(viewableItems)});
  const viewConfigRef = useRef({ viewAreaCoveragePercentThreshold: 50 });

  return (
    <View style={{flex: 1}}>
      <View>
        <FlatList
          onViewableItemsChanged={onViewRef.current}
          viewabilityConfig={viewConfigRef.current}
          data={props.navigation.state.params.media}
          snapToAlignment={'center'}
          horizontal
          decelerationRate={'fast'}
          pagingEnabled
          renderItem={({item}) => <RenderItem {...item} />}
          keyExtractor={item => item.mediaUrl}
        />
      </View>
    </View>
  );
};

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

Answer 1

Вы можете поднять состояние паузы / воспроизведения на родительский компонент (Post). Поскольку в любое время должно воспроизводиться не более 1 видео, штат может просто сохранить идентификатор элемента (или mediaUrl, если вы используете его в качестве ключа / идентификатора), который воспроизводится в данный момент.

В RenderItem :

<Video paused={props.paused} ... />
<TouchableWithoutFeedback onPress={props.onTogglePlay}>

В Post (вы можете использовать useCallback для анонимных функций):

const [activeVideo, setActiveVideo] = useState(null);
...
<FlatList onViewableItemsChanged={() => setActiveVideo(null)} .../>
...
<RenderItem 
  paused={activeVideo !== item.mediaUrl} 
  onTogglePlay={() =>
    setActiveVideo(item.mediaUrl === activeVideo ? null : item.mediaUrl)
  }
  {...item}
/>

Вы также можете сохранить ссылку в активном видео и приостановить видео через эту ссылку.