Bottom video starts playing when the before last video is focused

Description

We added a screen similar to TikTok where users can scroll vertically between clips. We use Bitmovin player and when the before last video is focused the last video starts playing as well. Same thing when scrolling to the top when the second video is focused the first video starts playing as well.

 <FlashList
          ref={flashListRef}
          data={series?.allSeries}
          renderItem={({item, index}) => (
            <View
              style={{
                flex: 1,
                height: height,
              }}>
              <ShortVideoPlayerComponent
                item={item}
                index={index}
                currentIndex={currentIndex}
                openRBSheet={openRBSheet}
                isActive={index === currentIndex}
              />
            </View>
          )}
          estimatedItemSize={height}
          keyExtractor={item => item?._id}
          pagingEnabled
          snapToInterval={height}
          //   decelerationRate="fast"
          disableIntervalMomentum={true}
          onViewableItemsChanged={onViewableItemsChanged}
          viewabilityConfig={{
            itemVisiblePercentThreshold: 80, // or 50 for debugging
          }}
          showsVerticalScrollIndicator={false}
          scrollEventThrottle={16}
          snapToAlignment="start"
          extraData={[currentIndex]}
          // style={{flex: 1}}
          //   contentContainerStyle={{flexGrow: 1}}
          //   style={{flex: 1}}
        />

const onViewableItemsChanged = useRef(({viewableItems}) => {
    if (!viewableItems || viewableItems.length === 0) return;

    // Sort by how much of the item is visible (if available)
    const sorted = [...viewableItems].sort(
      (a, b) => (b?.itemVisiblePercent ?? 0) - (a?.itemVisiblePercent ?? 0),
    );

    const mostVisibleItem = sorted[0];

    if (mostVisibleItem && typeof mostVisibleItem.index === 'number') {
      const newIndex = mostVisibleItem.index;

      if (newIndex !== currentIndexRef.current) {
        currentIndexRef.current = newIndex;
        setCurrentIndex(newIndex);
      }
    }
  }).current;

We use the currentIndex and the index to toggle the player:

  useEffect(() => {
    if (index === currentIndex) {
      player?.play();
    } else {
      player?.pause();
    }
  }, [currentIndex, index]);

Platform

• iOS
• Android
• Web (if applicable)

Environment

Paste output here

**FlashList version: 1.8.3

Additional context

• I've searched existing issues and couldn't find a duplicate

Start with the supplied FlashList configuration, onViewableItemsChanged callback, and ShortVideoPlayerComponent effect, then reproduce the boundary scrolling behavior on iOS and Android with React Native 0.73.6 and FlashList 1.8.3. Done means only the currently focused video plays when the second or before-last item is focused, while the adjacent boundary item remains paused.