I have a video player with a list of video thumbnails beneath it, and I'm accommodating pagination to update that list. When new videos get added to my state and the video is paused, the component re-renders and because autoplay is set by default, the video plays from a paused state.
I've tried using shouldComponentUpdate and manually trying to manage some state as workaround to no avail.
<VideoPlayer
navigator={this.props.navigator}
toggleResizeModeOnFullscreen={false}
repeat
disableFullscreen
ignoreSilentSwitch="ignore"
disableVolume
ref={ref => {
this.videoPlayer = ref;
}}
source={{ uri: downloadUrl }}
rate={1.0}
volume={1.0}
resizeMode="contain"
style={styles.video}
onEnd={this.playNextShortShift}
onVideoError={this.onVideoError}
/>
</View>
{this.state.orientation === 'portrait' && (
<View style={{ flex: 1 }}>
<View style={styles.videoPlayerTextContainer}>
<View style={{ height: 12 }} />
<Text style={styles.videoTitleText}>NOW PLAYING:</Text>
<View style={{ height: 4 }} />
<Text style={styles.videoTitleText}>{title}</Text>
</View>
<FlatList
ref={flatList => {
this.flatList = flatList;
}}
bounces={false}
style={{ flex: 0 }}
getItemLayout={this.getItemLayout}
horizontal={false}
data={data}
initialNumToRender={data.length}
extraData={this.state}
renderItem={({ item, index }) => this.renderEntry(item, index)}
keyExtractor={(item, index) => index}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
onMomentumScrollBegin={() => {
this.onEndReachedCalledDuringMomentum = false;
}}
/>
</View>```
How can update the thumbnail list and maintain the same video player state? Specifically when paused.
Thanks!