spotify-audio-element
Version:
A custom element for the Spotify player with an API that aims to match the `<audio>` API
203 lines (198 loc) • 7.36 kB
JavaScript
"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_spotify_audio_element = __toESM(require("./spotify-audio-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,
defaultProps,
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 (elementClass.prototype && 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) {
const attrValueFromDefault = defaultToAttributeValue(v);
if (attrValue !== attrValueFromDefault) {
reactProps[attrName] = attrValue;
} else {
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, props)
},
key: "ce-la-react-ssr-template-shadow-root"
});
reactProps.children = [templateShadowRoot, reactProps.children];
}
return React2.createElement(tagName, {
...defaultProps,
...reactProps,
ref: React2.useCallback(
(node) => {
elementRef.current = node;
if (typeof ref === "function") {
ref(node);
} else if (ref !== null) {
ref.current = node;
}
},
[ref]
)
}, reactProps.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);
}
}
// dist/react.ts
var react_default = createComponent({
react: import_react.default,
tagName: "spotify-audio",
elementClass: import_spotify_audio_element.default,
toAttributeName(propName) {
if (propName === "muted") return "";
if (propName === "defaultMuted") return "muted";
return defaultToAttributeName(propName);
}
});
/*! 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.
*)
*/