fix: state issues

muxinc · Apr 29, 2024 · dbc5de7 · dbc5de7
1 parent e5d41eb
commit dbc5de7
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 27 deletions.
diff --git a/packages/cloudflare-video-element/cloudflare-video-element.js b/packages/cloudflare-video-element/cloudflare-video-element.js
@@ -78,7 +78,7 @@ function serializeIframeUrl(attrs) {
 
   const params = {
     // ?controls=true is enabled by default in the iframe
-    controls: attrs.controls === '' ? null : '0',
+    controls: attrs.controls === '' ? null : 0,
     autoplay: attrs.autoplay,
     loop: attrs.loop,
     muted: attrs.muted,
@@ -91,7 +91,7 @@ function serializeIframeUrl(attrs) {
     'ad-url': attrs.adurl,
   };
 
-  return `${EMBED_BASE}/${srcId}?${serialize(removeFalsy(params))}`;
+  return `${EMBED_BASE}/${srcId}?${serialize(params)}`;
 }
 
 class CloudflareVideoElement extends (globalThis.HTMLElement ?? class {}) {
@@ -146,14 +146,23 @@ class CloudflareVideoElement extends (globalThis.HTMLElement ?? class {}) {
     } else {
       this.#isInit = true;
 
+      let serverRendered = this.shadowRoot;
+
       if (!this.shadowRoot) {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));
       }
 
-      let iframe = this.shadowRoot.querySelector('iframe');
-
+      const iframe = this.shadowRoot.querySelector('iframe');
       const Stream = await loadScript(API_URL, API_GLOBAL);
+
+      if (serverRendered) {
+        // The Cloudflare Player API has a bug where it doesn't work with a SSR iframe
+        // because it loads too quickly and the `iframeReady` post message is lost.
+        // To work around this, we need to reload the iframe.
+        iframe.src = `${iframe.src}`;
+      }
+
       this.api = Stream(iframe);
 
       this.api.addEventListener('loadedmetadata', () => {
@@ -394,13 +403,18 @@ function serializeAttributes(attrs) {
 }
 
 function serialize(props) {
-  return String(new URLSearchParams(props));
+  return String(new URLSearchParams(boolToBinary(props)));
 }
 
-function removeFalsy(obj) {
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, v]) => v != null && v !== false)
-  );
+function boolToBinary(props) {
+  let p = {};
+  for (let key in props) {
+    let val = props[key];
+    if (val === true || val === '') p[key] = 1;
+    else if (val === false) p[key] = 0;
+    else if (val != null) p[key] = val;
+  }
+  return p;
 }
 
 function namedNodeMapToObject(namedNodeMap) {

diff --git a/packages/spotify-audio-element/spotify-audio-element.js b/packages/spotify-audio-element/spotify-audio-element.js
@@ -331,8 +331,18 @@ function serializeAttributes(attrs) {
 }
 
 function serialize(props) {
-  Object.keys(props).forEach(key => props[key] == null && delete props[key]);
-  return String(new URLSearchParams(props));
+  return String(new URLSearchParams(boolToBinary(props)));
+}
+
+function boolToBinary(props) {
+  let p = {};
+  for (let key in props) {
+    let val = props[key];
+    if (val === true || val === '') p[key] = 1;
+    else if (val === false) p[key] = 0;
+    else if (val != null) p[key] = val;
+  }
+  return p;
 }
 
 function namedNodeMapToObject(namedNodeMap) {

diff --git a/packages/videojs-video-element/videojs-video-element.js b/packages/videojs-video-element/videojs-video-element.js
@@ -4,7 +4,7 @@ import { MediaTracksMixin } from 'media-tracks';
 
 const templateShadowDOM = globalThis.document?.createElement('template');
 if (templateShadowDOM) {
-  templateShadowDOM.innerHTML = /*html*/ `
+  templateShadowDOM.innerHTML = /*html*/`
   <style>
     :host {
       display: inline-block;

diff --git a/packages/vimeo-video-element/vimeo-video-element.js b/packages/vimeo-video-element/vimeo-video-element.js
@@ -42,7 +42,7 @@ function serializeIframeUrl(attrs) {
 
   const params = {
     // ?controls=true is enabled by default in the iframe
-    controls: attrs.controls === '' ? null : '0',
+    controls: attrs.controls === '' ? null : 0,
     autoplay: attrs.autoplay,
     loop: attrs.loop,
     muted: attrs.muted,
@@ -52,7 +52,7 @@ function serializeIframeUrl(attrs) {
     autopause: attrs.autopause,
   };
 
-  return `${EMBED_BASE}/${srcId}?${serialize(boolToBinary(params))}`;
+  return `${EMBED_BASE}/${srcId}?${serialize(params)}`;
 }
 
 class VimeoVideoElement extends (globalThis.HTMLElement ?? class {}) {
@@ -457,14 +457,15 @@ function serializeAttributes(attrs) {
 }
 
 function serialize(props) {
-  return String(new URLSearchParams(props));
+  return String(new URLSearchParams(boolToBinary(props)));
 }
 
 function boolToBinary(props) {
   let p = {};
   for (let key in props) {
     let val = props[key];
-    if (val === '') p[key] = 1;
+    if (val === true || val === '') p[key] = 1;
+    else if (val === false) p[key] = 0;
     else if (val != null) p[key] = val;
   }
   return p;

diff --git a/packages/wistia-video-element/wistia-video-element.js b/packages/wistia-video-element/wistia-video-element.js
@@ -44,6 +44,9 @@ class WistiaVideoElement extends SuperVideoElement {
       return;
     }
 
+    // Add a small delay here so React doesn't complain about hydration mismatches.
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
     const MATCH_SRC = /(?:wistia\.com|wi\.st)\/(?:medias|embed)\/(.*)$/i;
     const id = this.src.match(MATCH_SRC)[1];
     const options = {

diff --git a/packages/youtube-video-element/youtube-video-element.js b/packages/youtube-video-element/youtube-video-element.js
@@ -43,7 +43,7 @@ function serializeIframeUrl(attrs) {
 
   const params = {
     // ?controls=true is enabled by default in the iframe
-    controls: attrs.controls === '' ? null : '0',
+    controls: attrs.controls === '' ? null : 0,
     autoplay: attrs.autoplay,
     loop: attrs.loop,
     mute: attrs.muted,
@@ -57,7 +57,7 @@ function serializeIframeUrl(attrs) {
     modestbranding: 1,
   };
 
-  return `${EMBED_BASE}/${srcId}?${serialize(boolToBinary(params))}`;
+  return `${EMBED_BASE}/${srcId}?${serialize(params)}`;
 }
 
 class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) {
@@ -90,11 +90,6 @@ class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) {
       this.attachShadow({ mode: 'open' });
     }
 
-    let iframe = this.shadowRoot.querySelector('iframe');
-    let attrs = namedNodeMapToObject(this.attributes);
-
-    if (iframe?.src && iframe.src === serializeIframeUrl(attrs)) return;
-
     if (this.#hasLoaded) {
       this.loadComplete = new PublicPromise();
       this.isLoaded = false;
@@ -119,8 +114,13 @@ class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) {
 
     this.dispatchEvent(new Event('loadstart'));
 
-    this.shadowRoot.innerHTML = getTemplateHTML(attrs);
-    iframe = this.shadowRoot.querySelector('iframe');
+    let iframe = this.shadowRoot.querySelector('iframe');
+    let attrs = namedNodeMapToObject(this.attributes);
+
+    if (!iframe?.src || iframe.src !== serializeIframeUrl(attrs)) {
+      this.shadowRoot.innerHTML = getTemplateHTML(attrs);
+      iframe = this.shadowRoot.querySelector('iframe');
+    }
 
     const YT = await loadScript(API_URL, API_GLOBAL, API_GLOBAL_READY);
     this.api = new YT.Player(iframe, {
@@ -426,14 +426,15 @@ function serializeAttributes(attrs) {
 }
 
 function serialize(props) {
-  return String(new URLSearchParams(props));
+  return String(new URLSearchParams(boolToBinary(props)));
 }
 
 function boolToBinary(props) {
   let p = {};
   for (let key in props) {
     let val = props[key];
-    if (val === '') p[key] = 1;
+    if (val === true || val === '') p[key] = 1;
+    else if (val === false) p[key] = 0;
     else if (val != null) p[key] = val;
   }
   return p;