fix: React 19 bool prop to attr value bug

packages/mux-player-react/src/common/utils.ts

@@ -1,3 +1,14 @@
+import React from 'react';
+
+// React 19 supports custom elements and setting properties directly on them,
+// older React versions converted all props to attributes on custom elments.
+// Boolean `true` values should not be converted to empty strings in React 19+
+// because that would result in a `false` value if it was set via a property.
+// React 19+ handles primitive values correctly but we still need to convert
+// the camelCase prop names to kebab-case attribute names for mux-player. (WL)
+
+const IS_REACT_19_OR_NEWER = parseInt(React.version) >= 19;
+
 // NOTE: As a forward-looking implementation, we may want to assume
 // prop names -> attribute names is always a simple name.toLowerCase()
 // and provide a mechanism for passing in per-component overrides for
@@ -27,16 +38,16 @@ export const isKeyOf = <T extends object = any>(k: KeyTypes, o: Maybe<T>): k is
 const toKebabCase = (string: string) => string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 
 export const toNativeAttrName = (propName: string, propValue: any): string | undefined => {
-  if (typeof propValue === 'boolean' && !propValue) return undefined;
+  if (!IS_REACT_19_OR_NEWER && typeof propValue === 'boolean' && !propValue) return undefined;
   if (isKeyOf(propName, ReactPropToAttrNameMap)) return ReactPropToAttrNameMap[propName];
-  if (typeof propValue == 'undefined') return undefined;
+  if (typeof propValue === 'undefined') return undefined;
   if (/[A-Z]/.test(propName)) return toKebabCase(propName);
   return propName;
 };
 export const toStyleAttr = <T>(x: T) => x;
 
 export const toNativeAttrValue = (propValue: any, _propName: string) => {
-  if (typeof propValue === 'boolean') return '';
+  if (!IS_REACT_19_OR_NEWER && typeof propValue === 'boolean') return '';
   return propValue;
 };