shaka-video-element 0.6.9 → 0.6.10

package/dist/react.d.ts

@@ -1,5 +1,6 @@
-// This file is generated by media-elements/scripts/build-react-wrapper!
-declare const VideoComponent: React.ForwardRefExoticComponent<
-  React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
->;
-export default VideoComponent;
+import React from 'react';
+import CustomMediaElement from '../shaka-video-element.js';
+
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<CustomMediaElement>, "disablePictureInPicture" | "height" | "onenterpictureinpicture" | "onleavepictureinpicture" | "playsInline" | "poster" | "videoHeight" | "videoWidth" | "width" | "cancelVideoFrameCallback" | "getVideoPlaybackQuality" | "requestPictureInPicture" | "requestVideoFrameCallback" | "autoplay" | "buffered" | "controls" | "crossOrigin" | "currentSrc" | "currentTime" | "defaultMuted" | "defaultPlaybackRate" | "disableRemotePlayback" | "duration" | "ended" | "error" | "loop" | "mediaKeys" | "muted" | "networkState" | "onencrypted" | "onwaitingforkey" | "paused" | "playbackRate" | "played" | "preload" | "preservesPitch" | "readyState" | "remote" | "seekable" | "seeking" | "sinkId" | "src" | "srcObject" | "textTracks" | "volume" | "addTextTrack" | "canPlayType" | "fastSeek" | "load" | "pause" | "play" | "setMediaKeys" | "setSinkId" | "NETWORK_EMPTY" | "NETWORK_IDLE" | "NETWORK_LOADING" | "NETWORK_NO_SOURCE" | "HAVE_NOTHING" | "HAVE_METADATA" | "HAVE_CURRENT_DATA" | "HAVE_FUTURE_DATA" | "HAVE_ENOUGH_DATA"> & {} & Partial<Omit<CustomMediaElement, keyof HTMLElement | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "adoptedCallback">> & React.RefAttributes<CustomMediaElement>>;
+
+export { _default as default };

package/dist/react.js

@@ -1,95 +1,160 @@
-// This file is generated by media-elements/scripts/build-react-wrapper!
-'use client';
+"use client";
 
-import React from 'react';
-import Element from '../shaka-video-element.js';
+// dist/react.ts
+import React from "react";
+import CustomMediaElement from "../shaka-video-element.js";
 
-export default React.forwardRef((allProps, ref) => {
-  let { children, suppressHydrationWarning, ...props } = allProps;
-  const elementRef = React.useRef(null);
-
-  for (let name in props) {
-    if (name[0] === 'o' && name[1] === 'n') {
-      const useCapture = name.endsWith('Capture');
-      const eventName = name.slice(2, useCapture ? name.length - 7 : undefined).toLowerCase();
-      const callback = props[name];
-
-      React.useEffect(() => {
-        const eventTarget = elementRef?.current;
-        if (!eventTarget || typeof callback !== 'function') return;
-
-        eventTarget.addEventListener(eventName, callback, useCapture);
-
-        return () => {
-          eventTarget.removeEventListener(eventName, callback, useCapture);
-        };
-      }, [elementRef?.current, callback]);
+// ../../node_modules/ce-la-react/dist/ce-la-react.js
+var reservedReactProps = /* @__PURE__ */ new Set([
+  "style",
+  "children",
+  "ref",
+  "key",
+  "suppressContentEditableWarning",
+  "suppressHydrationWarning",
+  "dangerouslySetInnerHTML"
+]);
+var reactPropToAttrNameMap = {
+  className: "class",
+  htmlFor: "for"
+};
+function defaultToAttributeName(propName) {
+  return propName.toLowerCase();
+}
+function defaultToAttributeValue(propValue) {
+  if (typeof propValue === "boolean") return propValue ? "" : void 0;
+  if (typeof propValue === "function") return void 0;
+  if (typeof propValue === "object" && propValue !== null) return void 0;
+  return propValue;
+}
+function createComponent({
+  react: React2,
+  tagName,
+  elementClass,
+  events,
+  displayName,
+  toAttributeName = defaultToAttributeName,
+  toAttributeValue = defaultToAttributeValue
+}) {
+  const IS_REACT_19_OR_NEWER = Number.parseInt(React2.version) >= 19;
+  const ReactComponent = React2.forwardRef((props, ref) => {
+    var _a, _b;
+    const elementRef = React2.useRef(null);
+    const prevElemPropsRef = React2.useRef(/* @__PURE__ */ new Map());
+    const eventProps = {};
+    const attrs = {};
+    const reactProps = {};
+    const elementProps = {};
+    for (const [k, v] of Object.entries(props)) {
+      if (reservedReactProps.has(k)) {
+        reactProps[k] = v;
+        continue;
+      }
+      const attrName = toAttributeName(reactPropToAttrNameMap[k] ?? k);
+      if (k in elementClass.prototype && !(k in (((_a = globalThis.HTMLElement) == null ? void 0 : _a.prototype) ?? {})) && !((_b = elementClass.observedAttributes) == null ? void 0 : _b.some((attr) => attr === attrName))) {
+        elementProps[k] = v;
+        continue;
+      }
+      if (k.startsWith("on")) {
+        eventProps[k] = v;
+        continue;
+      }
+      const attrValue = toAttributeValue(v);
+      if (attrName && attrValue != null) {
+        attrs[attrName] = String(attrValue);
+        if (!IS_REACT_19_OR_NEWER) {
+          reactProps[attrName] = attrValue;
+        }
+      }
+      if (attrName && IS_REACT_19_OR_NEWER) {
+        reactProps[attrName] = v;
+      }
     }
-  }
-
-  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) {
-    const { mode, delegatesFocus } = Element.shadowRootOptions;
-
-    const templateShadowRoot = React.createElement('template', {
-      shadowrootmode: mode,
-      shadowrootdelegatesfocus: delegatesFocus,
-      dangerouslySetInnerHTML: {
-        __html: Element.getTemplateHTML(attrs),
-      },
-    });
-
-    children = [templateShadowRoot, children];
-  }
-
-  return React.createElement('shaka-video', {
-    ...attrs,
-    ref: React.useCallback(
-      (node) => {
-        elementRef.current = node;
-        if (typeof ref === 'function') {
-          ref(node);
-        } else if (ref !== null) {
-          ref.current = node;
+    if (typeof window !== "undefined") {
+      for (const propName in eventProps) {
+        const callback = eventProps[propName];
+        const useCapture = propName.endsWith("Capture");
+        const eventName = ((events == null ? void 0 : events[propName]) ?? propName.slice(2).toLowerCase()).slice(
+          0,
+          useCapture ? -7 : void 0
+        );
+        React2.useLayoutEffect(() => {
+          const eventTarget = elementRef == null ? void 0 : elementRef.current;
+          if (!eventTarget || typeof callback !== "function") return;
+          eventTarget.addEventListener(eventName, callback, useCapture);
+          return () => {
+            eventTarget.removeEventListener(eventName, callback, useCapture);
+          };
+        }, [elementRef == null ? void 0 : elementRef.current, callback]);
+      }
+      React2.useLayoutEffect(() => {
+        if (elementRef.current === null) return;
+        const newElemProps = /* @__PURE__ */ new Map();
+        for (const key in elementProps) {
+          setProperty(elementRef.current, key, elementProps[key]);
+          prevElemPropsRef.current.delete(key);
+          newElemProps.set(key, elementProps[key]);
+        }
+        for (const [key, _value] of prevElemPropsRef.current) {
+          setProperty(elementRef.current, key, void 0);
+        }
+        prevElemPropsRef.current = newElemProps;
+      });
+    }
+    if (typeof window === "undefined" && (elementClass == null ? void 0 : elementClass.getTemplateHTML) && (elementClass == null ? void 0 : elementClass.shadowRootOptions)) {
+      const { mode, delegatesFocus } = elementClass.shadowRootOptions;
+      const templateShadowRoot = React2.createElement("template", {
+        shadowrootmode: mode,
+        shadowrootdelegatesfocus: delegatesFocus,
+        dangerouslySetInnerHTML: {
+          __html: elementClass.getTemplateHTML(attrs)
         }
-      },
-      [ref]
-    ),
-    children,
-    suppressHydrationWarning,
+      });
+      reactProps.children = [templateShadowRoot, reactProps.children];
+    }
+    return React2.createElement(tagName, {
+      ...reactProps,
+      ref: React2.useCallback(
+        (node) => {
+          elementRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref !== null) {
+            ref.current = node;
+          }
+        },
+        [ref]
+      )
+    });
   });
-});
-
-const ReactPropToAttrNameMap = {
-  className: 'class',
-  classname: 'class',
-  htmlFor: 'for',
-  viewBox: 'viewBox',
-};
-
-function propsToAttrs(props = {}) {
-  let attrs = {};
-  for (let [propName, propValue] of Object.entries(props)) {
-    let attrName = toAttrName(propName, propValue);
-    if (attrName) attrs[attrName] = toAttrValue(propValue);
+  ReactComponent.displayName = displayName ?? elementClass.name;
+  return ReactComponent;
+}
+function setProperty(node, name, value) {
+  var _a;
+  node[name] = value;
+  if (value == null && name in (((_a = globalThis.HTMLElement) == null ? void 0 : _a.prototype) ?? {})) {
+    node.removeAttribute(name);
   }
-  return attrs;
 }
 
-function toAttrName(propName, propValue) {
-  if (ReactPropToAttrNameMap[propName]) return ReactPropToAttrNameMap[propName];
-  if (typeof propValue == 'undefined') return undefined;
-  if (typeof propValue === 'boolean' && !propValue) return undefined;
-  if (propName.startsWith('on') && typeof propValue === 'function') return undefined;
-  if (/[A-Z]/.test(propName)) return propName.toLowerCase();
-  return propName;
-}
+// dist/react.ts
+var react_default = createComponent({
+  react: React,
+  tagName: "shaka-video",
+  elementClass: CustomMediaElement
+});
+export {
+  react_default as default
+};
+/*! Bundled license information:
 
-function toAttrValue(propValue) {
-  if (typeof propValue === 'boolean') return '';
-  if (Array.isArray(propValue)) return propValue.join(' ');
-  return propValue;
-}
+ce-la-react/dist/ce-la-react.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *
+   * Modified version of `@lit/react` for vanilla custom elements with support for SSR.
+   *)
+*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaka-video-element",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "description": "Custom element (web component) for Shaka Player",
   "author": "@muxinc",
   "license": "MIT",
@@ -14,10 +14,12 @@
     "directory": "packages/shaka-video-element"
   },
   "files": [
+    "shaka-video-element.d.ts",
     "dist"
   ],
   "type": "module",
   "main": "shaka-video-element.js",
+  "types": "shaka-video-element.d.ts",
   "exports": {
     ".": "./shaka-video-element.js",
     "./react": "./dist/react.js"
@@ -34,9 +36,9 @@
     "shaka-player": "~4.8.4"
   },
   "devDependencies": {
-    "build-react-wrapper": "^0.1.6",
+    "build-react-wrapper": "^0.1.7",
     "npm-run-all": "^4.1.5",
-    "wet-run": "^1.2.2"
+    "wet-run": "^1.2.5"
   },
   "keywords": [
     "shaka",

package/shaka-video-element.d.ts

@@ -0,0 +1,10 @@
+export default class CustomVideoElement extends HTMLVideoElement {
+  static readonly observedAttributes: string[];
+  attributeChangedCallback(
+    attrName: string,
+    oldValue?: string | null,
+    newValue?: string | null
+  ): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}