fix: add media listeners immediately when using bind:paused

[Rich-Harris]

I'm a little nervous about this because the code I deleted looks like it's doing something useful, and it's basically impossible to test for, but:

• I don't really understand what, and
• Right now, media elements are broken — toggling paused doesn't cause a media element with bind:paused to start playing

This fixes it, as far as I can tell. I've tested mount and hydrate with media elements that are rendered immediately, media elements that are rendered after a state change, and media elements with an artificial network delay that I would expect to trigger whatever canplay timing edge cases we'd encounter.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: a0623d4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dummdidumm]

I vaguely remember having implemented this - have you tested a media element nested inside a component?

[Rich-Harris]

Yep, I took the entire contents of that tutorial exercise, put it in the sandbox, and tested it like so:

<script>
  import App from './App.svelte';

  let show = $state(false);
</script>

<button onclick={() => show = !show}>toggle</button>

{#if show}
  <App />
{/if}

[dummdidumm]

This fails with the described error for me if I set let paused = $state(false), i.e. request the media to play immediately (make sure to have interacted with the document first).

Investigating other solutions

[dummdidumm]

Fixed by making it an effect instead of a render effect (the commit messages is wrong, oops), that way the media element is ensured to be part of the dom.

[ceifa]

Should this be the expected behavior? This can be really annoying to deal with.
For context, that is the situation: https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACqVSwW7bMAz9FUKXJoARNzns4MUBti_oYbd5KByZtoXKpCFSHQrD_z4oStd1wbBDT4QeH98jHrWY3nkUU31fDLUTmsp8mWdTGH2Z00Oe0SuawgjHYBNyFBvcrKeGGvWooG5CqOH-8ysgwUINFL3_Dc1tFOyghr71ggmmRi2TKMy-fYEaNiTBbqE-wZJ6jb6TbfQqKsFegVtJXf_WbWPneJ_U_1ROnc3dqDpLVZatVccku4F58LizPJXCkTopn_dl69swSS6P1rN92vEw3G3_7Xb4uNs5Dh4fNRK-MzuWb8HT8WIGZ0ddZWMISPrNTVgvKbY14zmhesl1hUWCXU_H8jKaVc5RlQmYrHf2qV7eQlsv931Ix8lW-7RB5v9n9nAze7iZDaeGLgQdEXoXRDO1gJY6OGPPAcEpIHVS5D-SmKwjBmBC2MjMzmOoEuun8x6I8xm2r_pfWcfrAmMr8AkELVMnDZnCTNy53mFnKg0R1x_rL2WeCyQJAwAA

[ceifa]

And with the canplay handler, it needs a setTimeout to work via the binded pause

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACqVSwW7bMAz9FUIYkAQw4iaHHdw4wPYFO-y2DIUiM4kQmTREukNg-N8HWUmztih62EEQ9Pj4HilyMAcfUEz1azBkWzSV-dZ1pjB66dJDnjEomsII99ElZCMu-k63O9qpbzuOCgOod2cY4RC5hVnOmSVCOgEV1LcINXwRtYrzh8XjLSDR3XHqQ7iHOtsLNvfowQbBKUw7dUyi0AV7gRrmJNEtoN7CMJnq1e7hMT-zSSJdgRfpSXMCx7e6tm88r5L6v8opMp-dVDupytI69UyyPDIfAy4dt6VwT42Uz6vSBhtbydeTC-zOSz4eZ4uP3db_77bvjwGftCf8wIzJWbr-m5ULudeOgvrTt8i9zl_hb_8so2MBq5vFprwvBm2mfmDvqalcHyPSJFsPaTJjxrNgPeR7hEGiG2F4KXDcbspJJivue1WmVH_w7lwP9xmN0y7-SD1l21WqJvM_yV2_y12_y43bHU0EPSEcfBTN1AIsNbDHA0cEr4DUSJFXMjFZTxiBCWEuHfuAsUqsPz4EIM5TX9z0v7OergWcrMBXEHRMjezIFKblxh88NqbS2OP4e_wLSaRWGrUDAAA=