1

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!
jschuss
  • 645
  • 1
  • 8
  • 21

0 Answers0