From 4b2099b6338f0e411880db2d39ffefa519a846b4 Mon Sep 17 00:00:00 2001
From: Santiago Puppo <spuppo@mux.com>
Date: Wed, 21 Oct 2026 11:27:45 -0300
Subject: [PATCH 1/5] fix(vimeo-video-element): update state synchronously
 before load completes on pause.

Also moved event callbacks that modify this.#paused to private methods
---
 .../vimeo-video-element.js                    | 97 +++++++++++--------
 1 file changed, 54 insertions(+), 43 deletions(-)

diff --git a/packages/vimeo-video-element/vimeo-video-element.js b/packages/vimeo-video-element/vimeo-video-element.js
index d528df7a..30e2f8d4 100644
--- a/packages/vimeo-video-element/vimeo-video-element.js
+++ b/packages/vimeo-video-element/vimeo-video-element.js
@@ -261,23 +261,6 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
     super.disconnectedCallback?.();
   }
 
-  #onLoaded = async () => {
-    this.#readyState = 1; // HTMLMediaElement.HAVE_METADATA
-    this.dispatchEvent(new Event('loadedmetadata'));
-
-    if (this.api) {
-      this.#muted = await this.api.getMuted();
-      this.#volume = await this.api.getVolume();
-      this.dispatchEvent(new Event('volumechange'));
-
-      this.#duration = await this.api.getDuration();
-      this.dispatchEvent(new Event('durationchange'));
-    }
-
-    this.dispatchEvent(new Event('loadcomplete'));
-    this.loadComplete.resolve();
-  };
-
   #setupApiListeners() {
     const textTracksVideo = document.createElement('video');
     this.textTracks = textTracksVideo.textTracks;
@@ -310,24 +293,13 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
     // Make sure a `play` event is fired before the bufferstart event.
     // For example Vimeo's `play` event is delayed decreasing video startup time.
     this.api.on('bufferstart', () => {
-      if (this.#paused) {
-        this.#paused = false;
-        this.dispatchEvent(new Event('play'));
-      }
+      this.#onPlay();
       this.dispatchEvent(new Event('waiting'));
     });
 
-    this.api.on('play', () => {
-      if (!this.#paused) return;
-      this.#paused = false;
-      this.dispatchEvent(new Event('play'));
-    });
+    this.api.on('play', () => this.#onPlay());
 
-    this.api.on('playing', () => {
-      this.#readyState = 3; // HTMLMediaElement.HAVE_FUTURE_DATA
-      this.#paused = false;
-      this.dispatchEvent(new Event('playing'));
-    });
+    this.api.on('playing', () => this.#onPlaying());
 
     this.api.on('seeking', () => {
       this.#seeking = true;
@@ -341,15 +313,9 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
       this.dispatchEvent(new Event('seeked'));
     });
 
-    this.api.on('pause', () => {
-      this.#paused = true;
-      this.dispatchEvent(new Event('pause'));
-    });
+    this.api.on('pause', () => this.#onPaused());
 
-    this.api.on('ended', () => {
-      this.#paused = true;
-      this.dispatchEvent(new Event('ended'));
-    });
+    this.api.on('ended', () => this.#onEnded());
 
     this.api.on('ratechange', ({ playbackRate }) => {
       this.#playbackRate = playbackRate;
@@ -412,22 +378,27 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
     }
   }
 
+  /* 
+   * Update state synchronously. If this is called before
+   * load completes, Vimeo never starts playback and won't emit the respective event.
+   */
   async play() {
-    this.#paused = false;
-    this.dispatchEvent(new Event('play'));
+    this.#onPlay();
 
     await this.loadComplete;
 
     try {
       await this.api?.play();
     } catch (error) {
-      this.#paused = true;
-      this.dispatchEvent(new Event('pause'));
+      this.#onPaused();
       throw error;
     }
   }
 
   async pause() {
+    // Update state synchronously. See play().
+    this.#onPaused();
+
     await this.loadComplete;
     return this.api?.pause();
   }
@@ -582,6 +553,46 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
     });
   }
 
+  #onLoaded = async () => {
+    this.#readyState = 1; // HTMLMediaElement.HAVE_METADATA
+    this.dispatchEvent(new Event('loadedmetadata'));
+
+    if (this.api) {
+      this.#muted = await this.api.getMuted();
+      this.#volume = await this.api.getVolume();
+      this.dispatchEvent(new Event('volumechange'));
+
+      this.#duration = await this.api.getDuration();
+      this.dispatchEvent(new Event('durationchange'));
+    }
+
+    this.dispatchEvent(new Event('loadcomplete'));
+    this.loadComplete.resolve();
+  };
+
+  #onPlay() {
+    if (!this.#paused) return;
+    this.#paused = false;
+    this.dispatchEvent(new Event('play'));
+  }
+
+  #onPlaying() {
+    this.#readyState = 3; // HTMLMediaElement.HAVE_FUTURE_DATA
+    this.#paused = false;
+    this.dispatchEvent(new Event('playing'));
+  }
+
+  #onPaused() {
+    if (this.#paused) return;
+    this.#paused = true;
+    this.dispatchEvent(new Event('pause'));
+  }
+
+  #onEnded() {
+    this.#paused = true;
+    this.dispatchEvent(new Event('ended'));
+  }
+
   // This is a pattern to update property values that are set before
   // the custom element is upgraded.
   // https://web.dev/custom-elements-best-practices/#make-properties-lazy

From 9f5b59b4a24921f57f052ca6d2bc4c17fea0fbf3 Mon Sep 17 00:00:00 2001
From: Santiago Puppo <spuppo@mux.com>
Date: Wed, 21 Oct 2026 11:43:22 -0300
Subject: [PATCH 2/5] test: add test for this change and fixed broken tests.

---
 packages/vimeo-video-element/test/index.html |  1 +
 packages/vimeo-video-element/test/test.js    | 33 ++++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/vimeo-video-element/test/index.html b/packages/vimeo-video-element/test/index.html
index 9875449a..845d3002 100644
--- a/packages/vimeo-video-element/test/index.html
+++ b/packages/vimeo-video-element/test/index.html
@@ -3,6 +3,7 @@
 <script type="importmap">
   {
     "imports": {
+      "media-played-ranges-mixin": "https://cdn.jsdelivr.net/npm/media-played-ranges-mixin@0.1.0/+esm",
       "zora": "https://cdn.jsdelivr.net/npm/zora@6.0.0/dist/index.js",
       "@vimeo/player/": "https://cdn.jsdelivr.net/npm/@vimeo/player/"
     }
diff --git a/packages/vimeo-video-element/test/test.js b/packages/vimeo-video-element/test/test.js
index 3427cc71..d2854812 100644
--- a/packages/vimeo-video-element/test/test.js
+++ b/packages/vimeo-video-element/test/test.js
@@ -1,8 +1,8 @@
 import { test } from 'zora';
 
-function createVideoElement() {
+function createVideoElement(src = 'https://vimeo.com/76979871') {
   return fixture(`<vimeo-video
-    src="https://vimeo.com/648359100"
+    src="${src}"
     muted
   ></vimeo-video>`);
 }
@@ -48,7 +48,7 @@ test('duration', async function (t) {
     await promisify(video.addEventListener.bind(video))('durationchange');
   }
 
-  t.equal(Math.round(video.duration), 115, `is 115s long`);
+  t.equal(Math.round(video.duration), 62, `is 62s long`);
 });
 
 test('load promise', async function (t) {
@@ -57,7 +57,7 @@ test('load promise', async function (t) {
 
   const loadComplete = video.loadComplete;
 
-  video.src = 'https://vimeo.com/638371504';
+  video.src = 'https://vimeo.com/22439234';
   await video.loadComplete;
 
   t.ok(
@@ -69,11 +69,12 @@ test('load promise', async function (t) {
     await promisify(video.addEventListener.bind(video))('durationchange');
   }
 
-  t.equal(Math.round(video.duration), 90, `is 90s long`);
+  t.equal(Math.round(video.duration), 185, `is 185s long`);
 });
 
 test('play promise', async function (t) {
-  const video = await createVideoElement();
+  // 76979871 fails to play with a Vimeo PlaybackError, so use a playable video.
+  const video = await createVideoElement('https://vimeo.com/22439234');
   await video.loadComplete;
 
   video.muted = true;
@@ -86,6 +87,26 @@ test('play promise', async function (t) {
   t.ok(!video.paused, 'is playing after video.play()');
 });
 
+test('pause() before load completes keeps paused in sync', async function (t) {
+  const video = await createVideoElement();
+
+  let pauseEvents = 0;
+  video.addEventListener('pause', () => pauseEvents++);
+
+  video.play().catch(() => {});
+  video.pause();
+
+  t.equal(video.paused, true, 'is paused synchronously after pause()');
+  t.equal(pauseEvents, 1, 'dispatches a pause event');
+
+  await video.loadComplete;
+  await delay(1000);
+
+  t.equal(video.paused, true, 'is still paused after load');
+  t.equal(await video.api.getPaused(), true, 'matches the Vimeo player state');
+  t.equal(pauseEvents, 1, 'does not dispatch a duplicate pause event');
+});
+
 test('dispatches an error event when the video does not exist', async function (t) {
   const video = await fixture(`<vimeo-video
     src="https://vimeo.com/585758234/1ef30fd6da"

From f435ae495af2b89c9a16ec1c2a562fd126605b4d Mon Sep 17 00:00:00 2001
From: Santiago Puppo <spuppo@mux.com>
Date: Wed, 21 Oct 2026 12:30:26 -0300
Subject: [PATCH 3/5] fix: don't call api.play if paused while waiting

---
 packages/vimeo-video-element/vimeo-video-element.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/vimeo-video-element/vimeo-video-element.js b/packages/vimeo-video-element/vimeo-video-element.js
index 30e2f8d4..ced879fb 100644
--- a/packages/vimeo-video-element/vimeo-video-element.js
+++ b/packages/vimeo-video-element/vimeo-video-element.js
@@ -387,6 +387,9 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
 
     await this.loadComplete;
 
+    // pause() was called while waiting for load, don't start playback.
+    if (this.#paused) return;
+
     try {
       await this.api?.play();
     } catch (error) {

From 2ae1bb6d4715d433833b11df34a0d242bbf2aa8f Mon Sep 17 00:00:00 2001
From: Santiago Puppo <spuppo@mux.com>
Date: Wed, 21 Oct 2026 12:31:14 -0300
Subject: [PATCH 4/5] test: switched the test to a playable video and added a
 play event count

---
 packages/vimeo-video-element/test/test.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/vimeo-video-element/test/test.js b/packages/vimeo-video-element/test/test.js
index d2854812..e8eca68b 100644
--- a/packages/vimeo-video-element/test/test.js
+++ b/packages/vimeo-video-element/test/test.js
@@ -88,9 +88,11 @@ test('play promise', async function (t) {
 });
 
 test('pause() before load completes keeps paused in sync', async function (t) {
-  const video = await createVideoElement();
+  const video = await createVideoElement('https://vimeo.com/22439234');
 
+  let playEvents = 0;
   let pauseEvents = 0;
+  video.addEventListener('play', () => playEvents++);
   video.addEventListener('pause', () => pauseEvents++);
 
   video.play().catch(() => {});
@@ -100,10 +102,11 @@ test('pause() before load completes keeps paused in sync', async function (t) {
   t.equal(pauseEvents, 1, 'dispatches a pause event');
 
   await video.loadComplete;
-  await delay(1000);
+  await delay(3000);
 
   t.equal(video.paused, true, 'is still paused after load');
   t.equal(await video.api.getPaused(), true, 'matches the Vimeo player state');
+  t.equal(playEvents, 1, 'does not dispatch another play event after load');
   t.equal(pauseEvents, 1, 'does not dispatch a duplicate pause event');
 });
 

From 4b9bdce4bfcefda8d08ea7723e6cd41493dd5875 Mon Sep 17 00:00:00 2001
From: Santiago Puppo <spuppo@mux.com>
Date: Wed, 21 Oct 2026 16:35:45 -0300
Subject: [PATCH 5/5] fix: reverted paused guard on play. Added regression test
 for that case

---
 packages/vimeo-video-element/test/test.js         | 15 +++++++++++++++
 .../vimeo-video-element/vimeo-video-element.js    |  3 ---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/vimeo-video-element/test/test.js b/packages/vimeo-video-element/test/test.js
index e8eca68b..9124ad66 100644
--- a/packages/vimeo-video-element/test/test.js
+++ b/packages/vimeo-video-element/test/test.js
@@ -110,6 +110,21 @@ test('pause() before load completes keeps paused in sync', async function (t) {
   t.equal(pauseEvents, 1, 'does not dispatch a duplicate pause event');
 });
 
+test('play() right after setting src starts playback', async function (t) {
+  const video = document.createElement('vimeo-video');
+  video.setAttribute('muted', '');
+  video.src = 'https://vimeo.com/22439234';
+  document.body.append(video);
+
+  video.play().catch(() => {});
+
+  await video.loadComplete;
+  await delay(3000);
+
+  t.equal(await video.api.getPaused(), false, 'the Vimeo player is playing');
+  t.equal(video.paused, false, 'is not paused');
+});
+
 test('dispatches an error event when the video does not exist', async function (t) {
   const video = await fixture(`<vimeo-video
     src="https://vimeo.com/585758234/1ef30fd6da"
diff --git a/packages/vimeo-video-element/vimeo-video-element.js b/packages/vimeo-video-element/vimeo-video-element.js
index ced879fb..30e2f8d4 100644
--- a/packages/vimeo-video-element/vimeo-video-element.js
+++ b/packages/vimeo-video-element/vimeo-video-element.js
@@ -387,9 +387,6 @@ class VimeoVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement ??
 
     await this.loadComplete;
 
-    // pause() was called while waiting for load, don't start playback.
-    if (this.#paused) return;
-
     try {
       await this.api?.play();
     } catch (error) {