jwplayer-video-element - npm Package Compare versions

Comparing version 1.1.7 to 1.2.0

dist/react.d.ts

@@ -1,5 +0,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 '../jwplayer-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 };

dist/react.js

@@ -1,95 +0,160 @@
-// This file is generated by media-elements/scripts/build-react-wrapper!
-'use client';
+"use client";
 
-import React from 'react';
-import Element from '../jwplayer-video-element.js';
+// dist/react.ts
+import React from "react";
+import CustomMediaElement from "../jwplayer-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),
-      },
+    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)
+        }
+      });
+      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]
+      )
     });
-
-    children = [templateShadowRoot, children];
+  });
+  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 React.createElement('jwplayer-video', {
-    ...attrs,
-    ref: React.useCallback(
-      (node) => {
-        elementRef.current = node;
-        if (typeof ref === 'function') {
-          ref(node);
-        } else if (ref !== null) {
-          ref.current = node;
-        }
-      },
-      [ref]
-    ),
-    children,
-    suppressHydrationWarning,
-  });
+// dist/react.ts
+var react_default = createComponent({
+  react: React,
+  tagName: "jwplayer-video",
+  elementClass: CustomMediaElement
 });
-
-const ReactPropToAttrNameMap = {
-  className: 'class',
-  classname: 'class',
-  htmlFor: 'for',
-  viewBox: 'viewBox',
+export {
+  react_default as default
 };
+/*! Bundled license information:
 
-function propsToAttrs(props = {}) {
-  let attrs = {};
-  for (let [propName, propValue] of Object.entries(props)) {
-    let attrName = toAttrName(propName, propValue);
-    if (attrName) attrs[attrName] = toAttrValue(propValue);
-  }
-  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;
-}
-
-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.json

 {
   "name": "jwplayer-video-element",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "description": "A custom element for the JW player with an API that matches the `<video>` API",
@@ -17,2 +17,3 @@ "author": "@muxinc",
   "files": [
+    "jwplayer-video-element.d.ts",
     "dist"
@@ -22,2 +23,3 @@ ],
   "main": "jwplayer-video-element.js",
+  "types": "jwplayer-video-element.d.ts",
   "exports": {
@@ -38,5 +40,5 @@ ".": "./jwplayer-video-element.js",
   "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"
   },
@@ -43,0 +45,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15561

increased by34.03%

Number of package files

6

increased by20%

Lines of code

288

increased by44.72%

No dependency changes