fix: fix suppressHydrationWarning & track/source sync (#19)

fix(build-react-wrapper): fix suppressHydrationWarning fix(custom-media-element): fix track/source sync
muxinc · May 24, 2024 · 586d221 · 586d221
1 parent dada41b
commit 586d221
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/examples/nextjs/app/hls-video/page.tsx b/examples/nextjs/app/hls-video/page.tsx
@@ -18,7 +18,15 @@ export default function Page() {
           controls
           crossOrigin=""
           playsInline
-        ></Player>
+          suppressHydrationWarning
+        >
+          <track
+            label="thumbnails"
+            default
+            kind="metadata"
+            src="https://image.mux.com/jtWZbHQ013SLyISc9LbIGn8f4c3lWan00qOkoPMZEXmcU/storyboard.vtt"
+          />
+        </Player>
       </section>
     </>
   );

diff --git a/packages/custom-media-element/custom-media-element.js b/packages/custom-media-element/custom-media-element.js
@@ -220,6 +220,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
     }
 
     get nativeEl() {
+      this.#init();
       return this.#nativeEl
         ?? this.shadowRoot.querySelector(tag)
         ?? this.querySelector(':scope > [slot=media]')
@@ -280,6 +281,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
       }
 
       this.shadowRoot.addEventListener('slotchange', this);
+      this.#syncMediaChildren();
 
       for (let type of this.constructor.Events) {
         this.shadowRoot.addEventListener?.(type, this, true);
@@ -309,7 +311,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
       const removeNativeChildren = new Map(this.#childMap);
 
       this.shadowRoot.querySelector('slot:not([name])')
-        .assignedElements()
+        .assignedElements({ flatten: true })
         .filter((el) => ['track', 'source'].includes(el.localName))
         .forEach((el) => {
           // If the source or track is still in the assigned elements keep it.

diff --git a/scripts/build-react-wrapper/templates/react.js b/scripts/build-react-wrapper/templates/react.js
@@ -3,11 +3,10 @@
 import React, { useRef, useEffect } from 'react';
 import Element from '../{{{file_name}}}.js';
 
-export default React.forwardRef(({ children, ...props }, ref) => {
+export default React.forwardRef((allProps, ref) => {
+  let { children, suppressHydrationWarning, ...props } = allProps;
   ref ??= useRef();
 
-  const attrs = propsToAttrs({ ...props, ref });
-
   for (let name in props) {
     if (name[0] === 'o' && name[1] === 'n') {
       const useCapture = name.endsWith('Capture');
@@ -27,6 +26,8 @@ export default React.forwardRef(({ children, ...props }, ref) => {
     }
   }
 
+  const attrs = propsToAttrs(props);
+
   // Only render the custom element template HTML on the server..
   // The custom element will render itself on the client.
   if (typeof window === 'undefined' && Element?.getTemplateHTML && Element?.shadowRootOptions) {
@@ -43,7 +44,12 @@ export default React.forwardRef(({ children, ...props }, ref) => {
     children = [templateShadowRoot, children];
   }
 
-  return React.createElement('{{{element_name}}}', attrs, ...[].concat(children));
+  return React.createElement('{{{element_name}}}', {
+    ...attrs,
+    ref,
+    children,
+    suppressHydrationWarning,
+  });
 });
 
 const ReactPropToAttrNameMap = {
@@ -66,7 +72,7 @@ function toAttrName(propName, propValue) {
   if (ReactPropToAttrNameMap[propName]) return ReactPropToAttrNameMap[propName];
   if (typeof propValue == 'undefined') return undefined;
   if (typeof propValue === 'boolean' && !propValue) return undefined;
-  if (/^on[A-Z]/.test(propName)) return undefined;
+  if (propName.startsWith('on') && typeof propValue === 'function') return undefined;
   if (/[A-Z]/.test(propName)) return propName.toLowerCase();
   return propName;
 }