shaka-video-element 0.6.1 → 0.6.2

package/dist/react.js

@@ -4,11 +4,10 @@
 import React, { useRef, useEffect } from 'react';
 import Element from '../shaka-video-element.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');
@@ -28,6 +27,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) {
@@ -44,7 +45,12 @@ export default React.forwardRef(({ children, ...props }, ref) => {
     children = [templateShadowRoot, children];
   }
 
-  return React.createElement('shaka-video', attrs, ...[].concat(children));
+  return React.createElement('shaka-video', {
+    ...attrs,
+    ref,
+    children,
+    suppressHydrationWarning,
+  });
 });
 
 const ReactPropToAttrNameMap = {
@@ -67,7 +73,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;
 }

package/dist/shaka-video-element.js

@@ -27841,6 +27841,7 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
       super();
     }
     get nativeEl() {
+      this.#init();
       return this.#nativeEl ?? this.shadowRoot.querySelector(tag) ?? this.querySelector(":scope > [slot=media]") ?? this.querySelector(tag);
     }
     set nativeEl(val) {
@@ -27885,6 +27886,7 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
         this.#upgradeProperty(prop);
       }
       this.shadowRoot.addEventListener("slotchange", this);
+      this.#syncMediaChildren();
       for (let type of this.constructor.Events) {
         this.shadowRoot.addEventListener?.(type, this, true);
       }
@@ -27905,7 +27907,7 @@ var CustomMediaMixin = (superclass, { tag, is }) => {
      */
     #syncMediaChildren() {
       const removeNativeChildren = new Map(this.#childMap);
-      this.shadowRoot.querySelector("slot:not([name])").assignedElements().filter((el) => ["track", "source"].includes(el.localName)).forEach((el) => {
+      this.shadowRoot.querySelector("slot:not([name])").assignedElements({ flatten: true }).filter((el) => ["track", "source"].includes(el.localName)).forEach((el) => {
         removeNativeChildren.delete(el);
         let clone = this.#childMap.get(el);
         if (!clone) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaka-video-element",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Custom element (web component) for Shaka Player",
   "author": "@muxinc",
   "license": "MIT",
@@ -30,11 +30,11 @@
     "build": "run-s build:*"
   },
   "dependencies": {
-    "custom-media-element": "^1.3.0",
+    "custom-media-element": "^1.3.1",
     "shaka-player": "^4.8.4"
   },
   "devDependencies": {
-    "build-react-wrapper": "^0.1.2",
+    "build-react-wrapper": "^0.1.3",
     "npm-run-all": "^4.1.5",
     "wet-run": "^1.2.2"
   },