Issue with HLS Streaming Quality in React Native Video

[adherb]

I am using React Native Video to stream HLS content, aiming for a setup similar to TikTok. I am facing an issue where, upon navigating away from the video player and returning, the videos remain stuck on the lowest quality and do not upgrade to higher resolutions.

Is there a way to force the player to upgrade to higher qualities?
Can I persist the highest quality a user can utilise and automatically select that for each video?

Here is my current video player configuration:

useEffect(() => {
    if (videoRef.current) {
      setIsPaused(!shouldPlay);
      if (shouldPlay) {
        progress.value = withTiming(0, { duration: 0 });
      }
    }
  }, [shouldPlay]);

 const handleLoadStart = () => {
    setLoading(true);
    setBuffering(true);
    progress.value = withTiming(0, { duration: 0 });
  };

  const handleLoad = () => {
    setLoading(false);
    setBuffering(false);
  };

  const handleEnd = () => {
    progress.value = withTiming(0, { duration: 0 });
  };

       <Video
          key={item.id}
          ref={videoRef}
          source={{ uri: item.video_url }}
          style={{ width: "100%", height: "100%", zIndex: 4 }}
          muted={false}
          volume={1.0}
          resizeMode={"cover"}
          paused={isPaused}
          repeat
          onLoadStart={handleLoadStart}
          onLoad={handleLoad}
          onProgress={handleProgress}
          onEnd={handleEnd}
          ignoreSilentSwitch={"ignore"}
          playInBackground={false}
          disableFocus={true}
          bufferConfig={{
            minBufferMs: 0,
            maxBufferMs: 0, 
            bufferForPlaybackMs: 0,
            bufferForPlaybackAfterRebufferMs: 0,
          }}
          posterResizeMode={"cover"}
          poster={item.thumbnail_url}
          onReadyForDisplay={() => {}}
        />

[freeboub]

In shouldn't be the case ...

I think this line can cause the issue: maxBufferMs: 0,

[vipulbhj]

Hey, we are also facing this, we don't have this prop, our videos are stored on vimeo and we are using HLS, it works correctly on Android, but on ios it starts with super small resolution and only improves once the video has played fully once.

const VideoPlayer = useMemo(() => {
    return (
      <Video
        volume={mainVolume}
        source={{ uri: src }}
        style={styles.video}
        repeat
        controls={controls}
        controlsStyles={{
          hideSeekBar: true,
          hideSettingButton: true,
        }}
        mixWithOthers="mix"
        resizeMode="cover"
        fullscreenAutorotate
        playInBackground
        playWhenInactive
        renderLoader={() => (
          <View style={styles.loaderContainer}>
            <ActivityIndicator animating />
          </View>
        )}
        paused={false}
      />
    );
  }, [src]);

We are experimenting with removing props etc but nothing seems to be helping