Media API rough edges

[prsdta]

Hi, trying to play around Svelte, I'm having an issue with the media elements bindings, specifically buffered.

REPL repro: https://svelte.dev/repl/021f1c1d512e49248347bfe746f037ad?version=3.4.3

Basically my issue is that I'm trying to setup a reactive variable that depends on the buffered property, but that fails on load, because buffered is not yet instantiated? (maybe?)

Like this (variables initialized outside the block):

  $: {
    progressBarPercent = (currentTime / duration) * 100;
    loadedPercent = buffered.end(buffered.length - 1) / duration;
  }

On my machine I'm getting a: proxy.js:135 TypeError: Cannot read property 'end' of undefined with this kind of output:

$$self.$$.update = ($$dirty = { currentTime: 1, duration: 1, buffered: 1 }) => {
  if ($$dirty.currentTime || $$dirty.duration || $$dirty.buffered) { {
  $$invalidate('progressBarPercent', progressBarPercent = (currentTime / duration) * 100);
  $$invalidate('loadedPercent', loadedPercent = buffered.end / duration);
  } }
};

I've been able to find a workaround that is simply wrapping the loadedPercent assignment in an if block and then, the updating behavior seems correct.

Looking in the repo I've found this #832 but this TimeRanges modification doesn't seem to happen in the current version, and if I were, an update to the docs would probably be nice.

Am I doing something wrong or it is a bug?

[timeshift92]

hello maybe help you =)
https://svelte.dev/repl/17cfcbdb48a449349791f51872d50758?version=3.29.7

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Rich-Harris]

The REPL appears to work in Svelte 5, but in general bound values should be treated as potentially undefined in a $: ... statement. In idiomatic Svelte 5 code, this would use $effect which won't run until after bindings have settled.