useMediaBuffered() or ProgressBarBufferedRanges not working as expected.

[jorellmartis-kw]

useMediaBuffered returns null , and ProgressBarBufferedRanges does not fill as im guessing the useMediaBuffered hook does not work.

Currently i have done a custom buffering and it seems to be working fine.
Something like this

function useBufferedRanges() {
  const media = Media.useMediaElement();
  const [ranges, setRanges] = useState<{ start: number; end: number }[]>([]);

  useEffect(() => {
    if (!media) return;

    const updateBuffered = () => {
      const buffered = media.buffered;
      const newRanges = [];
      for (let i = 0; i < buffered.length; i++) {
        newRanges.push({ start: buffered.start(i), end: buffered.end(i) });
      }
      setRanges(newRanges);
    };

    media.addEventListener("progress", updateBuffered);
    media.addEventListener("loadedmetadata", updateBuffered);
    media.addEventListener("timeupdate", updateBuffered);

    updateBuffered(); // initial call

    return () => {
      media.removeEventListener("progress", updateBuffered);
      media.removeEventListener("loadedmetadata", updateBuffered);
      media.removeEventListener("timeupdate", updateBuffered);
    };
  }, [media]);

  return ranges;
}


`````And then im simply using ranges in the progressbar as follows
  <ProgressBarRoot className="grow relative flex items-center select-none touch-none h-4">
            <Slider.Track className="relative bg-gray-700/40 grow rounded-full h-2">
              <BufferedBar />
              <Slider.Range className="absolute h-full rounded-full bg-green-500" />
            </Slider.Track>
            <StyledProgressBarTooltip />
            <Slider.Thumb className="block w-4 h-4 rounded-full bg-green-500 outline-none z-20 -mt-1" />
          </ProgressBarRoot>

[Wykerd]

You are correct. There is an issue in the current useMediaBuffered hook preventing it from updating its state. I can see the issue and will update it soon👍