shaka-video-element 0.6.8 → 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/dist/shaka-video-element.js

@@ -25909,7 +25909,12 @@ function CustomMediaMixin(superclass, { tag, is }) {
         if (typeof nativeElTest[prop] === "function") {
           this.prototype[prop] = function(...args) {
             this.#init();
-            return this.nativeEl?.[prop](...args);
+            const fn = () => {
+              if (this.call) return this.call(prop, ...args);
+              const nativeFn = this.nativeEl?.[prop];
+              return nativeFn?.apply(this.nativeEl, args);
+            };
+            return fn();
           };
         } else {
           const config = {
@@ -25920,7 +25925,7 @@ function CustomMediaMixin(superclass, { tag, is }) {
                 const val = this.getAttribute(attr);
                 return val === null ? false : val === "" ? true : val;
               }
-              return this.nativeEl?.[prop];
+              return this.get?.(prop) ?? this.nativeEl?.[prop];
             }
           };
           if (prop !== prop.toUpperCase()) {
@@ -25935,6 +25940,10 @@ function CustomMediaMixin(superclass, { tag, is }) {
                 }
                 return;
               }
+              if (this.set) {
+                this.set(prop, val);
+                return;
+              }
               if (this.nativeEl) {
                 this.nativeEl[prop] = val;
               }
@@ -25949,6 +25958,9 @@ function CustomMediaMixin(superclass, { tag, is }) {
     #nativeEl = null;
     #childMap = /* @__PURE__ */ new Map();
     #childObserver;
+    get;
+    set;
+    call;
     // If the custom element is defined before the custom element's HTML is parsed
     // no attributes will be available in the constructor (construction process).
     // Wait until initializing in the attributeChangedCallback or
@@ -25973,7 +25985,7 @@ function CustomMediaMixin(superclass, { tag, is }) {
       this.setAttribute("src", `${val}`);
     }
     get preload() {
-      return this.getAttribute("preload") ?? this.nativeEl?.getAttribute("preload");
+      return this.getAttribute("preload") ?? this.nativeEl?.preload;
     }
     set preload(val) {
       this.setAttribute("preload", `${val}`);
@@ -25992,11 +26004,14 @@ function CustomMediaMixin(superclass, { tag, is }) {
         this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
       }
       this.nativeEl.muted = this.hasAttribute("muted");
+      for (const prop of nativeElProps) {
+        this.#upgradeProperty(prop);
+      }
       this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));
       this.shadowRoot.addEventListener("slotchange", this);
       this.#syncMediaChildren();
       for (const type of this.constructor.Events) {
-        this.shadowRoot?.addEventListener(type, this.handleEvent.bind(this), true);
+        this.shadowRoot?.addEventListener(type, this, true);
       }
     }
     handleEvent(event) {
@@ -26045,6 +26060,13 @@ function CustomMediaMixin(superclass, { tag, is }) {
         trackEl.track.mode = "hidden";
       }
     }
+    #upgradeProperty(prop) {
+      if (Object.prototype.hasOwnProperty.call(this, prop)) {
+        const value = this[prop];
+        delete this[prop];
+        this[prop] = value;
+      }
+    }
     attributeChangedCallback(attrName, oldValue, newValue) {
       this.#init();
       this.#forwardAttribute(attrName, oldValue, newValue);
@@ -26074,11 +26096,17 @@ function getNativeElProps(nativeElTest) {
   return nativeElProps;
 }
 function serializeAttributes(attrs) {
-  return Object.entries(attrs).map(([key, value]) => value === "" ? ` ${key}` : ` ${key}="${value}"`).join("");
+  let html = "";
+  for (const key in attrs) {
+    const value = attrs[key];
+    if (value === "") html += ` ${key}`;
+    else html += ` ${key}="${value}"`;
+  }
+  return html;
 }
 function namedNodeMapToObject(namedNodeMap) {
   const obj = {};
-  for (const attr of Array.from(namedNodeMap)) {
+  for (const attr of namedNodeMap) {
     obj[attr.name] = attr.value;
   }
   return obj;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaka-video-element",
-  "version": "0.6.8",
+  "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"
@@ -30,13 +32,13 @@
     "build": "run-s build:*"
   },
   "dependencies": {
-    "custom-media-element": "^1.4.0",
+    "custom-media-element": "^1.4.1",
     "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;
+}