From c3ef96e797d7b15dbab668856076a465c4690b06 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <wesley@mux.com>
Date: Tue, 19 Jul 2022 08:00:11 -0500
Subject: [PATCH] fix: loaded handling

---
 src/vimeo-video-element.js | 42 ++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/vimeo-video-element.js b/src/vimeo-video-element.js
index 3cf44c0..7c86dd8 100644
--- a/src/vimeo-video-element.js
+++ b/src/vimeo-video-element.js
@@ -105,12 +105,30 @@ class VimeoVideoElement extends HTMLElement {
       transparent: false,
     };
 
+    const 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();
+    };
+
     if (this.noInit) {
       this.api = oldApi;
-      this.api.loadVideo({
+      await this.api.loadVideo({
         ...this.#options,
         url: this.src,
       });
+      await onLoaded();
       await this.loadComplete;
       return;
     }
@@ -127,23 +145,11 @@ class VimeoVideoElement extends HTMLElement {
     }
 
     this.api = new VimeoPlayerAPI(iframe);
-
-    this.api.on('loaded', 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();
-    });
+    const onceLoaded = () => {
+      this.api.off('loaded', onceLoaded);
+      onLoaded();
+    }
+    this.api.on('loaded', onceLoaded);
 
     // Make sure a `play` event is fired before the bufferstart event.
     // For example Vimeo's `play` event is delayed decreasing video startup time.