shaka-video-element 0.6.10 → 0.6.11

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/dist/cjs/react.js

@@ -0,0 +1,189 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// dist/react.ts
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = __toESM(require("react"), 1);
+var import_shaka_video_element = __toESM(require("./shaka-video-element.js"), 1);
+
+// ../../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;
+      }
+    }
+    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]
+      )
+    });
+  });
+  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);
+  }
+}
+
+// dist/react.ts
+var react_default = createComponent({
+  react: import_react.default,
+  tagName: "shaka-video",
+  elementClass: import_shaka_video_element.default
+});
+/*! Bundled license information:
+
+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/cjs/shaka-video-element.js

@@ -0,0 +1,90 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var shaka_video_element_exports = {};
+__export(shaka_video_element_exports, {
+  default: () => shaka_video_element_default
+});
+module.exports = __toCommonJS(shaka_video_element_exports);
+var import_custom_media_element = require("custom-media-element");
+var import_shaka_player = __toESM(require("shaka-player"), 1);
+function onErrorEvent(event) {
+  onError(event.detail);
+}
+function onError(error) {
+  console.error("Error code", error.code, "object", error);
+}
+class ShakaVideoElement extends import_custom_media_element.CustomVideoElement {
+  static shadowRootOptions = { ...import_custom_media_element.CustomVideoElement.shadowRootOptions };
+  static getTemplateHTML = (attrs) => {
+    const { src, ...rest } = attrs;
+    return import_custom_media_element.CustomVideoElement.getTemplateHTML(rest);
+  };
+  constructor() {
+    super();
+    if (import_shaka_player.default.Player.isBrowserSupported()) {
+      this.api = new import_shaka_player.default.Player();
+      this.api.addEventListener("error", onErrorEvent);
+    } else {
+      console.error("Browser does not support Shaka Player");
+    }
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (attrName !== "src") {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+    }
+    if (attrName === "src" && oldValue != newValue) {
+      this.load();
+    }
+  }
+  get src() {
+    return this.getAttribute("src");
+  }
+  set src(val) {
+    if (val !== this.src) {
+      this.setAttribute("src", val);
+    }
+  }
+  async load() {
+    if (!this.api) return;
+    await Promise.resolve();
+    await this.api.attach(this.nativeEl);
+    if (!this.src) {
+      this.api.unload();
+    } else {
+      try {
+        await this.api.load(this.src);
+      } catch (e) {
+        onError(e);
+      }
+    }
+  }
+}
+if (globalThis.customElements && !globalThis.customElements.get("shaka-video")) {
+  globalThis.customElements.define("shaka-video", ShakaVideoElement);
+}
+var shaka_video_element_default = ShakaVideoElement;

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import CustomMediaElement from '../shaka-video-element.js';
+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>>;
 

package/dist/react.js

@@ -2,7 +2,7 @@
 
 // dist/react.ts
 import React from "react";
-import CustomMediaElement from "../shaka-video-element.js";
+import CustomMediaElement from "./shaka-video-element.js";
 
 // ../../node_modules/ce-la-react/dist/ce-la-react.js
 var reservedReactProps = /* @__PURE__ */ new Set([

package/dist/shaka-video-element.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaka-video-element",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "Custom element (web component) for Shaka Player",
   "author": "@muxinc",
   "license": "MIT",
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "shaka-video-element.js",
-  "types": "shaka-video-element.d.ts",
+  "types": "./dist/shaka-video-element.d.ts",
+  "main": "./dist/shaka-video-element.js",
   "exports": {
-    ".": "./shaka-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/shaka-video-element.d.ts",
+      "import": "./dist/shaka-video-element.js",
+      "require": "./dist/cjs/shaka-video-element.js",
+      "default": "./dist/shaka-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/shaka-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
@@ -36,7 +56,7 @@
     "shaka-player": "~4.8.4"
   },
   "devDependencies": {
-    "build-react-wrapper": "^0.1.7",
+    "build-react-wrapper": "^0.1.8",
     "npm-run-all": "^4.1.5",
     "wet-run": "^1.2.5"
   },

package/shaka-video-element.js

@@ -1,87 +0,0 @@
-import { CustomVideoElement } from 'custom-media-element';
-import shaka from 'shaka-player';
-
-function onErrorEvent(event) {
-  // Extract the shaka.util.Error object from the event.
-  onError(event.detail);
-}
-
-function onError(error) {
-  // Log the error.
-  console.error('Error code', error.code, 'object', error);
-}
-
-class ShakaVideoElement extends CustomVideoElement {
-  static shadowRootOptions = { ...CustomVideoElement.shadowRootOptions };
-
-  static getTemplateHTML = (attrs) => {
-    const { src, ...rest } = attrs; // eslint-disable-line no-unused-vars
-    return CustomVideoElement.getTemplateHTML(rest);
-  };
-
-  constructor() {
-    super();
-
-    if (shaka.Player.isBrowserSupported()) {
-      this.api = new shaka.Player();
-      // Listen for error events.
-      this.api.addEventListener('error', onErrorEvent);
-    } else {
-      // This browser does not have the minimum set of APIs we need.
-      console.error('Browser does not support Shaka Player');
-    }
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (attrName !== 'src') {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
-    }
-
-    if (attrName === 'src' && oldValue != newValue) {
-      this.load();
-    }
-  }
-
-  get src() {
-    // Use the attribute value as the source of truth.
-    // No need to store it in two places.
-    // This avoids needing a to read the attribute initially and update the src.
-    return this.getAttribute('src');
-  }
-
-  set src(val) {
-    // If being set by attributeChangedCallback,
-    // dont' cause an infinite loop
-    if (val !== this.src) {
-      this.setAttribute('src', val);
-    }
-  }
-
-  async load() {
-    if (!this.api) return;
-
-    // Wait 1 tick to allow other attributes to be set.
-    await Promise.resolve();
-
-    await this.api.attach(this.nativeEl);
-
-    if (!this.src) {
-      this.api.unload();
-    } else {
-      // Try to load a manifest.
-      // This is an asynchronous process.
-      try {
-        await this.api.load(this.src);
-      } catch (e) {
-        // onError is executed if the asynchronous load fails.
-        onError(e);
-      }
-    }
-  }
-}
-
-if (globalThis.customElements && !globalThis.customElements.get('shaka-video')) {
-  globalThis.customElements.define('shaka-video', ShakaVideoElement);
-}
-
-export default ShakaVideoElement;