vimeo-video-element: paused stays false forever when pause() is called before load completes #267

Version: vimeo-video-element 1.7.4 (latest), same code on main @ 5421514
Browsers: Chrome, Edge (macOS). Deterministic, 5/5 runs.

Summary

play() sets #paused = false and dispatches play synchronously, before awaiting loadComplete. pause() does neither: it waits for loadComplete, calls api.pause(), and relies on Vimeo's pause event to set #paused = true.

If pause() is called while play() is still waiting on loadComplete, both commands reach Vimeo back to back (api.play(), then api.pause()). Vimeo ends up paused, but playback never actually started, so Vimeo emits no pause event. play() resolves normally, so its catch doesn't reset the state either.

Result: el.paused === false while await el.api.getPaused() === true, permanently. Any consumer that only calls play() when el.paused is true never calls it again. react-player's Player does exactly that (if (paused && playing) play()), and so does any media-chrome play button that reads paused.

Minimal reproduction

<!doctype html>
<script type="module" src="https://cdn.jsdelivr.net/npm/vimeo-video-element@1.7.4/+esm"></script>
<vimeo-video id="v" src="https://vimeo.com/76979871" muted></vimeo-video>
<pre id="out"></pre>
<script type="module">
  await customElements.whenDefined('vimeo-video');
  const v = document.getElementById('v');
  const log = (m) => (document.getElementById('out').textContent += m + '\n');
  for (const e of ['play', 'playing', 'pause']) v.addEventListener(e, () => log(`event: ${e}`));

  v.play();
  v.pause();
  log(`after play()+pause(): v.paused = ${v.paused}`);

  await v.loadComplete;
  await new Promise((r) => setTimeout(r, 3000));
  log(`3s after load: v.paused = ${v.paused}, api.getPaused() = ${await v.api.getPaused()}`);
</script>

Actual:

event: play
after play()+pause(): v.paused = false
3s after load: v.paused = false, api.getPaused() = true

Expected: v.paused === true (it matches the player), and a pause event, just as an HTMLVideoElement behaves when pause() follows play().

How this shows up in practice

It hit us with autoplaying, muted videos that are paused by an IntersectionObserver when off-screen (react-player 3 + <vimeo-video>). On mount, the observer's initial state briefly says "visible", so playing flips to true → play(), and then within a few ms to false → pause(), all before the Vimeo iframe has loaded. After that the video never autoplays when scrolled into view. In our app this happened in about 7 of 10 page loads with the video below the fold, and it also happens when a user scrolls past a video while it's still loading.

Proposed fix

Mirror play(): update state and dispatch pause synchronously in pause(), and guard the Vimeo pause listener the same way the play listener is already guarded, so a normal pause still fires exactly one event.

--- a/packages/vimeo-video-element/vimeo-video-element.js
+++ b/packages/vimeo-video-element/vimeo-video-element.js
@@ -344,4 +344,5 @@
     this.api.on('pause', () => {
+      if (this.#paused) return;
       this.#paused = true;
       this.dispatchEvent(new Event('pause'));
     });
@@ -430,4 +431,8 @@
   async pause() {
+    if (!this.#paused) {
+      this.#paused = true;
+      this.dispatchEvent(new Event('pause'));
+    }
     await this.loadComplete;
     return this.api?.pause();
   }

I verified this against the repro above with a patched 1.7.4 build, 5/5 runs:

event: play
event: pause
after play()+pause(): v.paused = true
3s after load: v.paused = true, api.getPaused() = true
-- later: call play() as a consumer would
event: play
event: playing
after play(): v.paused = false, api.getPaused() = false
-- pause while playing
event: pause                      <- single event, no duplicate from Vimeo's listener
after pause(): v.paused = true, api.getPaused() = true

Pausing from the Vimeo UI still works: #paused is false while playing, so the guard lets that event through.