Media element's buffered binding doesn't update frequently enough to match native TimeRange object

[fartinmartin]

Describe the bug

It seems that the current buffered binding relies on the progress event to update its TimeRange object (or rather, its "array of {start, end} objects").

In my experience, however, the progress event doesn't actually fire frequently enough to reflect the state of the native HTMLMediaElement.buffered's TimeRange object.

Reproduction

https://svelte.dev/repl/a7c0417e5a204ef8b3a295e5c7881645?version=3.46.4

Note: swapping line 11 for line 10 is actually a more accurate representation of the native players buffer state. In line 11 the reactive statement has buffered as a dependency as well.

Logs

No response

System Info

System:
  OS: macOS 12.3
  CPU: (8) arm64 Apple M1
  Memory: 820.17 MB / 16.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
  Yarn: 1.22.17 - /opt/homebrew/bin/yarn
  npm: 8.5.2 - ~/.nvm/versions/node/v16.13.0/bin/npm
Browsers:
  Chrome: 99.0.4844.84
  Firefox: 98.0.2
  Safari: 15.4
npmPackages:
  rollup: ^2.3.4 => 2.70.1 
  svelte: ^3.0.0 => 3.46.4

Severity

annoyance

[Conduitry]

Is there another event that we could be listening to instead that would provide better updates? If not, we're probably stuck, unfortunately.

[fartinmartin]

Perhaps a combination of loadeddata and timeupdate, would that work? Without loadeddata you don't get the initial buffered state. It looks like loadeddata really only fires once, so its not too much redundancy to depend on both.

https://svelte.dev/repl/7135667f84a24d469440d30cfc814245?version=3.46.4