react-modern-audio-player
Version:
<p align="center"> <img width="20%" src="https://user-images.githubusercontent.com/70849655/180391190-2b268d23-c9f3-4e95-9fce-090897842c04.png" alt="rm-audio-player" /> <h1 align="center">React Modern Audio Player</h1> </p>
1,426 lines • 316 kB
JavaScript
import './index.css';
import $k7QOs$react, { useContext, useState, useLayoutEffect, useEffect, useRef, useImperativeHandle, useMemo, createContext, useReducer, forwardRef, useCallback, cloneElement } from "react";
import $k7QOs$reactdom from "react-dom";
import styled, { createGlobalStyle, keyframes, css } from "styled-components";
var main$2 = "";
const $704cf1d3b684cc5c$var$defaultContext = {
prefix: String(Math.round(Math.random() * 1e10)),
current: 0
};
const $704cf1d3b684cc5c$var$SSRContext = /* @__PURE__ */ $k7QOs$react.createContext($704cf1d3b684cc5c$var$defaultContext);
function $704cf1d3b684cc5c$export$535bd6ca7f90a273() {
let cur = useContext($704cf1d3b684cc5c$var$SSRContext);
let isInSSRContext = cur !== $704cf1d3b684cc5c$var$defaultContext;
let [isSSR, setIsSSR] = useState(isInSSRContext);
if (typeof window !== "undefined" && isInSSRContext)
useLayoutEffect(() => {
setIsSSR(false);
}, []);
return isSSR;
}
function r(e) {
var t, f2, n2 = "";
if ("string" == typeof e || "number" == typeof e)
n2 += e;
else if ("object" == typeof e)
if (Array.isArray(e))
for (t = 0; t < e.length; t++)
e[t] && (f2 = r(e[t])) && (n2 && (n2 += " "), n2 += f2);
else
for (t in e)
e[t] && (n2 && (n2 += " "), n2 += t);
return n2;
}
function clsx() {
for (var e, t, f2 = 0, n2 = ""; f2 < arguments.length; )
(e = arguments[f2++]) && (t = r(e)) && (n2 && (n2 += " "), n2 += t);
return n2;
}
typeof window !== "undefined" ? $k7QOs$react.useLayoutEffect : () => {
};
let $bdb11010cef70236$var$idsUpdaterMap = /* @__PURE__ */ new Map();
function $bdb11010cef70236$export$cd8c9cb68f842629(idA, idB) {
if (idA === idB)
return idA;
let setIdA = $bdb11010cef70236$var$idsUpdaterMap.get(idA);
if (setIdA) {
setIdA(idB);
return idB;
}
let setIdB = $bdb11010cef70236$var$idsUpdaterMap.get(idB);
if (setIdB) {
setIdB(idA);
return idA;
}
return idB;
}
function $ff5963eb1fccf552$export$e08e3b67e392101e(...callbacks) {
return (...args) => {
for (let callback of callbacks)
if (typeof callback === "function")
callback(...args);
};
}
function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
let result = {
...args[0]
};
for (let i = 1; i < args.length; i++) {
let props = args[i];
for (let key in props) {
let a = result[key];
let b = props[key];
if (typeof a === "function" && typeof b === "function" && key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90)
result[key] = $ff5963eb1fccf552$export$e08e3b67e392101e(a, b);
else if ((key === "className" || key === "UNSAFE_className") && typeof a === "string" && typeof b === "string")
result[key] = clsx(a, b);
else if (key === "id" && a && b)
result.id = $bdb11010cef70236$export$cd8c9cb68f842629(a, b);
else
result[key] = b !== void 0 ? b : a;
}
}
return result;
}
const $65484d02dcb7eb3e$var$DOMPropNames = /* @__PURE__ */ new Set([
"id"
]);
const $65484d02dcb7eb3e$var$labelablePropNames = /* @__PURE__ */ new Set([
"aria-label",
"aria-labelledby",
"aria-describedby",
"aria-details"
]);
const $65484d02dcb7eb3e$var$propRe = /^(data-.*)$/;
function $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, opts = {}) {
let { labelable, propNames } = opts;
let filteredProps = {};
for (const prop in props)
if (Object.prototype.hasOwnProperty.call(props, prop) && ($65484d02dcb7eb3e$var$DOMPropNames.has(prop) || labelable && $65484d02dcb7eb3e$var$labelablePropNames.has(prop) || (propNames === null || propNames === void 0 ? void 0 : propNames.has(prop)) || $65484d02dcb7eb3e$var$propRe.test(prop)))
filteredProps[prop] = props[prop];
return filteredProps;
}
let $bbed8b41f857bcc0$var$transitionsByElement = /* @__PURE__ */ new Map();
let $bbed8b41f857bcc0$var$transitionCallbacks = /* @__PURE__ */ new Set();
function $bbed8b41f857bcc0$var$setupGlobalEvents() {
if (typeof window === "undefined")
return;
let onTransitionStart = (e) => {
let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
if (!transitions) {
transitions = /* @__PURE__ */ new Set();
$bbed8b41f857bcc0$var$transitionsByElement.set(e.target, transitions);
e.target.addEventListener("transitioncancel", onTransitionEnd);
}
transitions.add(e.propertyName);
};
let onTransitionEnd = (e) => {
let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
if (!properties)
return;
properties.delete(e.propertyName);
if (properties.size === 0) {
e.target.removeEventListener("transitioncancel", onTransitionEnd);
$bbed8b41f857bcc0$var$transitionsByElement.delete(e.target);
}
if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) {
for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks)
cb();
$bbed8b41f857bcc0$var$transitionCallbacks.clear();
}
};
document.body.addEventListener("transitionrun", onTransitionStart);
document.body.addEventListener("transitionend", onTransitionEnd);
}
if (typeof document !== "undefined") {
if (document.readyState !== "loading")
$bbed8b41f857bcc0$var$setupGlobalEvents();
else
document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents);
}
const $148a7a147e38ea7f$var$RTL_SCRIPTS = /* @__PURE__ */ new Set([
"Arab",
"Syrc",
"Samr",
"Mand",
"Thaa",
"Mend",
"Nkoo",
"Adlm",
"Rohg",
"Hebr"
]);
const $148a7a147e38ea7f$var$RTL_LANGS = /* @__PURE__ */ new Set([
"ae",
"ar",
"arc",
"bcc",
"bqi",
"ckb",
"dv",
"fa",
"glk",
"he",
"ku",
"mzn",
"nqo",
"pnb",
"ps",
"sd",
"ug",
"ur",
"yi"
]);
function $148a7a147e38ea7f$export$702d680b21cbd764(locale) {
if (Intl.Locale) {
let script = new Intl.Locale(locale).maximize().script;
return $148a7a147e38ea7f$var$RTL_SCRIPTS.has(script);
}
let lang = locale.split("-")[0];
return $148a7a147e38ea7f$var$RTL_LANGS.has(lang);
}
function $1e5a04cdaf7d1af8$export$f09106e7c6677ec5() {
let locale = typeof navigator !== "undefined" && (navigator.language || navigator.userLanguage) || "en-US";
try {
Intl.DateTimeFormat.supportedLocalesOf([
locale
]);
} catch (_err) {
locale = "en-US";
}
return {
locale,
direction: $148a7a147e38ea7f$export$702d680b21cbd764(locale) ? "rtl" : "ltr"
};
}
let $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
let $1e5a04cdaf7d1af8$var$listeners = /* @__PURE__ */ new Set();
function $1e5a04cdaf7d1af8$var$updateLocale() {
$1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
for (let listener of $1e5a04cdaf7d1af8$var$listeners)
listener($1e5a04cdaf7d1af8$var$currentLocale);
}
function $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a() {
let isSSR = $704cf1d3b684cc5c$export$535bd6ca7f90a273();
let [defaultLocale, setDefaultLocale] = useState($1e5a04cdaf7d1af8$var$currentLocale);
useEffect(() => {
if ($1e5a04cdaf7d1af8$var$listeners.size === 0)
window.addEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
$1e5a04cdaf7d1af8$var$listeners.add(setDefaultLocale);
return () => {
$1e5a04cdaf7d1af8$var$listeners.delete(setDefaultLocale);
if ($1e5a04cdaf7d1af8$var$listeners.size === 0)
window.removeEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
};
}, []);
if (isSSR)
return {
locale: "en-US",
direction: "ltr"
};
return defaultLocale;
}
const $18f2051aff69b9bf$var$I18nContext = /* @__PURE__ */ $k7QOs$react.createContext(null);
function $18f2051aff69b9bf$export$a54013f0d02a8f82(props) {
let { locale, children } = props;
let defaultLocale = $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a();
let value = locale ? {
locale,
direction: $148a7a147e38ea7f$export$702d680b21cbd764(locale) ? "rtl" : "ltr"
} : defaultLocale;
return /* @__PURE__ */ $k7QOs$react.createElement($18f2051aff69b9bf$var$I18nContext.Provider, {
value
}, children);
}
function $18f2051aff69b9bf$export$43bb16f9c6d9e3f7() {
let defaultLocale = $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a();
let context = useContext($18f2051aff69b9bf$var$I18nContext);
return context || defaultLocale;
}
let $fd933927dbac1f15$export$46d604dce8bf8724 = false;
function $fd933927dbac1f15$export$ce4ab0c55987d1ff(cssModule, ...values) {
let classes = [];
for (let value of values) {
if (typeof value === "object" && value) {
let mapped = {};
for (let key in value) {
if (cssModule[key])
mapped[cssModule[key]] = value[key];
if (!cssModule[key])
mapped[key] = value[key];
}
classes.push(mapped);
} else if (typeof value === "string") {
if (cssModule[value])
classes.push(cssModule[value]);
if (!cssModule[value])
classes.push(value);
} else
classes.push(value);
}
return clsx(...classes);
}
function $3df547e395c4522f$export$32d5543ab307c01(query) {
let supportsMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
let [matches, setMatches] = useState(
() => supportsMatchMedia ? window.matchMedia(query).matches : false
);
useEffect(() => {
if (!supportsMatchMedia)
return;
let mq = window.matchMedia(query);
let onChange = (evt) => {
setMatches(evt.matches);
};
mq.addListener(onChange);
return () => {
mq.removeListener(onChange);
};
}, [
supportsMatchMedia,
query
]);
let isSSR = $704cf1d3b684cc5c$export$535bd6ca7f90a273();
return isSSR ? false : matches;
}
function $98e5a8ae0e6415af$export$a5795cc979dfae80(ref) {
return {
UNSAFE_getDOMNode() {
return ref.current;
}
};
}
function $98e5a8ae0e6415af$export$c2c55ef9111cafd8(ref) {
let domRef = useRef(null);
useImperativeHandle(
ref,
() => $98e5a8ae0e6415af$export$a5795cc979dfae80(domRef)
);
return domRef;
}
const $1051245f87c5981d$var$Context = /* @__PURE__ */ $k7QOs$react.createContext(null);
$1051245f87c5981d$var$Context.displayName = "BreakpointContext";
function $1051245f87c5981d$export$8214320346cf5104(props) {
let { children, matchedBreakpoints } = props;
return /* @__PURE__ */ $k7QOs$react.createElement($1051245f87c5981d$var$Context.Provider, {
value: {
matchedBreakpoints
}
}, children);
}
function $1051245f87c5981d$export$140ae7baa51cca23(breakpoints) {
let entries = Object.entries(breakpoints).sort(
([, valueA], [, valueB]) => valueB - valueA
);
let breakpointQueries = entries.map(
([, value]) => `(min-width: ${value}px)`
);
let supportsMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
let getBreakpointHandler = () => {
let matched = [];
for (let i in breakpointQueries) {
let query = breakpointQueries[i];
if (window.matchMedia(query).matches)
matched.push(entries[i][0]);
}
matched.push("base");
return matched;
};
let [breakpoint1, setBreakpoint] = useState(
() => supportsMatchMedia ? getBreakpointHandler() : [
"base"
]
);
useEffect(() => {
if (!supportsMatchMedia)
return;
let onResize = () => {
const breakpointHandler = getBreakpointHandler();
setBreakpoint((previousBreakpointHandler) => {
if (previousBreakpointHandler.length !== breakpointHandler.length || previousBreakpointHandler.some(
(breakpoint, idx) => breakpoint !== breakpointHandler[idx]
))
return [
...breakpointHandler
];
return previousBreakpointHandler;
});
};
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
}, [
supportsMatchMedia
]);
let isSSR = $704cf1d3b684cc5c$export$535bd6ca7f90a273();
return isSSR ? [
"base"
] : breakpoint1;
}
function $1051245f87c5981d$export$199d6754bdf4e1e3() {
return useContext($1051245f87c5981d$var$Context);
}
const $380ed8f3903c3931$export$fe9c6e915565b4e8 = {
margin: [
"margin",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
marginStart: [
$380ed8f3903c3931$var$rtl("marginLeft", "marginRight"),
$380ed8f3903c3931$export$abc24f5b99744ea6
],
marginEnd: [
$380ed8f3903c3931$var$rtl("marginRight", "marginLeft"),
$380ed8f3903c3931$export$abc24f5b99744ea6
],
marginTop: [
"marginTop",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
marginBottom: [
"marginBottom",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
marginX: [
[
"marginLeft",
"marginRight"
],
$380ed8f3903c3931$export$abc24f5b99744ea6
],
marginY: [
[
"marginTop",
"marginBottom"
],
$380ed8f3903c3931$export$abc24f5b99744ea6
],
width: [
"width",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
height: [
"height",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
minWidth: [
"minWidth",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
minHeight: [
"minHeight",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
maxWidth: [
"maxWidth",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
maxHeight: [
"maxHeight",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
isHidden: [
"display",
$380ed8f3903c3931$var$hiddenValue
],
alignSelf: [
"alignSelf",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
justifySelf: [
"justifySelf",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
position: [
"position",
$380ed8f3903c3931$var$anyValue
],
zIndex: [
"zIndex",
$380ed8f3903c3931$var$anyValue
],
top: [
"top",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
bottom: [
"bottom",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
start: [
$380ed8f3903c3931$var$rtl("left", "right"),
$380ed8f3903c3931$export$abc24f5b99744ea6
],
end: [
$380ed8f3903c3931$var$rtl("right", "left"),
$380ed8f3903c3931$export$abc24f5b99744ea6
],
left: [
"left",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
right: [
"right",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
order: [
"order",
$380ed8f3903c3931$var$anyValue
],
flex: [
"flex",
$380ed8f3903c3931$var$flexValue
],
flexGrow: [
"flexGrow",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
flexShrink: [
"flexShrink",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
flexBasis: [
"flexBasis",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
gridArea: [
"gridArea",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
gridColumn: [
"gridColumn",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
gridColumnEnd: [
"gridColumnEnd",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
gridColumnStart: [
"gridColumnStart",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
gridRow: [
"gridRow",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
gridRowEnd: [
"gridRowEnd",
$380ed8f3903c3931$export$46b6c81d11d2c30a
],
gridRowStart: [
"gridRowStart",
$380ed8f3903c3931$export$46b6c81d11d2c30a
]
};
const $380ed8f3903c3931$export$e0705d1a55f297c = {
...$380ed8f3903c3931$export$fe9c6e915565b4e8,
backgroundColor: [
"backgroundColor",
$380ed8f3903c3931$var$backgroundColorValue
],
borderWidth: [
"borderWidth",
$380ed8f3903c3931$var$borderSizeValue
],
borderStartWidth: [
$380ed8f3903c3931$var$rtl("borderLeftWidth", "borderRightWidth"),
$380ed8f3903c3931$var$borderSizeValue
],
borderEndWidth: [
$380ed8f3903c3931$var$rtl("borderRightWidth", "borderLeftWidth"),
$380ed8f3903c3931$var$borderSizeValue
],
borderLeftWidth: [
"borderLeftWidth",
$380ed8f3903c3931$var$borderSizeValue
],
borderRightWidth: [
"borderRightWidth",
$380ed8f3903c3931$var$borderSizeValue
],
borderTopWidth: [
"borderTopWidth",
$380ed8f3903c3931$var$borderSizeValue
],
borderBottomWidth: [
"borderBottomWidth",
$380ed8f3903c3931$var$borderSizeValue
],
borderXWidth: [
[
"borderLeftWidth",
"borderRightWidth"
],
$380ed8f3903c3931$var$borderSizeValue
],
borderYWidth: [
[
"borderTopWidth",
"borderBottomWidth"
],
$380ed8f3903c3931$var$borderSizeValue
],
borderColor: [
"borderColor",
$380ed8f3903c3931$var$borderColorValue
],
borderStartColor: [
$380ed8f3903c3931$var$rtl("borderLeftColor", "borderRightColor"),
$380ed8f3903c3931$var$borderColorValue
],
borderEndColor: [
$380ed8f3903c3931$var$rtl("borderRightColor", "borderLeftColor"),
$380ed8f3903c3931$var$borderColorValue
],
borderLeftColor: [
"borderLeftColor",
$380ed8f3903c3931$var$borderColorValue
],
borderRightColor: [
"borderRightColor",
$380ed8f3903c3931$var$borderColorValue
],
borderTopColor: [
"borderTopColor",
$380ed8f3903c3931$var$borderColorValue
],
borderBottomColor: [
"borderBottomColor",
$380ed8f3903c3931$var$borderColorValue
],
borderXColor: [
[
"borderLeftColor",
"borderRightColor"
],
$380ed8f3903c3931$var$borderColorValue
],
borderYColor: [
[
"borderTopColor",
"borderBottomColor"
],
$380ed8f3903c3931$var$borderColorValue
],
borderRadius: [
"borderRadius",
$380ed8f3903c3931$var$borderRadiusValue
],
borderTopStartRadius: [
$380ed8f3903c3931$var$rtl("borderTopLeftRadius", "borderTopRightRadius"),
$380ed8f3903c3931$var$borderRadiusValue
],
borderTopEndRadius: [
$380ed8f3903c3931$var$rtl("borderTopRightRadius", "borderTopLeftRadius"),
$380ed8f3903c3931$var$borderRadiusValue
],
borderBottomStartRadius: [
$380ed8f3903c3931$var$rtl("borderBottomLeftRadius", "borderBottomRightRadius"),
$380ed8f3903c3931$var$borderRadiusValue
],
borderBottomEndRadius: [
$380ed8f3903c3931$var$rtl("borderBottomRightRadius", "borderBottomLeftRadius"),
$380ed8f3903c3931$var$borderRadiusValue
],
borderTopLeftRadius: [
"borderTopLeftRadius",
$380ed8f3903c3931$var$borderRadiusValue
],
borderTopRightRadius: [
"borderTopRightRadius",
$380ed8f3903c3931$var$borderRadiusValue
],
borderBottomLeftRadius: [
"borderBottomLeftRadius",
$380ed8f3903c3931$var$borderRadiusValue
],
borderBottomRightRadius: [
"borderBottomRightRadius",
$380ed8f3903c3931$var$borderRadiusValue
],
padding: [
"padding",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
paddingStart: [
$380ed8f3903c3931$var$rtl("paddingLeft", "paddingRight"),
$380ed8f3903c3931$export$abc24f5b99744ea6
],
paddingEnd: [
$380ed8f3903c3931$var$rtl("paddingRight", "paddingLeft"),
$380ed8f3903c3931$export$abc24f5b99744ea6
],
paddingLeft: [
"paddingLeft",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
paddingRight: [
"paddingRight",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
paddingTop: [
"paddingTop",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
paddingBottom: [
"paddingBottom",
$380ed8f3903c3931$export$abc24f5b99744ea6
],
paddingX: [
[
"paddingLeft",
"paddingRight"
],
$380ed8f3903c3931$export$abc24f5b99744ea6
],
paddingY: [
[
"paddingTop",
"paddingBottom"
],
$380ed8f3903c3931$export$abc24f5b99744ea6
],
overflow: [
"overflow",
$380ed8f3903c3931$export$46b6c81d11d2c30a
]
};
const $380ed8f3903c3931$var$borderStyleProps = {
borderWidth: "borderStyle",
borderLeftWidth: "borderLeftStyle",
borderRightWidth: "borderRightStyle",
borderTopWidth: "borderTopStyle",
borderBottomWidth: "borderBottomStyle"
};
function $380ed8f3903c3931$var$rtl(ltr, rtl) {
return (direction) => direction === "rtl" ? rtl : ltr;
}
const $380ed8f3903c3931$var$UNIT_RE = /(%|px|em|rem|vw|vh|auto|cm|mm|in|pt|pc|ex|ch|rem|vmin|vmax|fr)$/;
const $380ed8f3903c3931$var$FUNC_RE = /^\s*\w+\(/;
const $380ed8f3903c3931$var$SPECTRUM_VARIABLE_RE = /(static-)?size-\d+|single-line-(height|width)/g;
function $380ed8f3903c3931$export$abc24f5b99744ea6(value) {
if (typeof value === "number")
return value + "px";
if ($380ed8f3903c3931$var$UNIT_RE.test(value))
return value;
if ($380ed8f3903c3931$var$FUNC_RE.test(value))
return value.replace($380ed8f3903c3931$var$SPECTRUM_VARIABLE_RE, "var(--spectrum-global-dimension-$&, var(--spectrum-alias-$&))");
return `var(--spectrum-global-dimension-${value}, var(--spectrum-alias-${value}))`;
}
function $380ed8f3903c3931$export$f348bec194f2e6b5(value, matchedBreakpoints) {
value = $380ed8f3903c3931$export$52dbfdbe1b2c3541(value, matchedBreakpoints);
return $380ed8f3903c3931$export$abc24f5b99744ea6(value);
}
function $380ed8f3903c3931$var$colorValue(value, type = "default") {
return `var(--spectrum-global-color-${value}, var(--spectrum-semantic-${value}-color-${type}))`;
}
function $380ed8f3903c3931$var$backgroundColorValue(value) {
return `var(--spectrum-alias-background-color-${value}, ${$380ed8f3903c3931$var$colorValue(value, "background")})`;
}
function $380ed8f3903c3931$var$borderColorValue(value) {
if (value === "default")
return "var(--spectrum-alias-border-color)";
return `var(--spectrum-alias-border-color-${value}, ${$380ed8f3903c3931$var$colorValue(value, "border")})`;
}
function $380ed8f3903c3931$var$borderSizeValue(value) {
return `var(--spectrum-alias-border-size-${value})`;
}
function $380ed8f3903c3931$var$borderRadiusValue(value) {
return `var(--spectrum-alias-border-radius-${value})`;
}
function $380ed8f3903c3931$var$hiddenValue(value) {
return value ? "none" : void 0;
}
function $380ed8f3903c3931$var$anyValue(value) {
return value;
}
function $380ed8f3903c3931$var$flexValue(value) {
if (typeof value === "boolean")
return value ? "1" : void 0;
return "" + value;
}
function $380ed8f3903c3931$export$f3c39bb9534218d0(props, handlers, direction, matchedBreakpoints) {
let style = {};
for (let key in props) {
let styleProp = handlers[key];
if (!styleProp || props[key] == null)
continue;
let [name, convert] = styleProp;
if (typeof name === "function")
name = name(direction);
let prop = $380ed8f3903c3931$export$52dbfdbe1b2c3541(props[key], matchedBreakpoints);
let value = convert(prop);
if (Array.isArray(name))
for (let k2 of name)
style[k2] = value;
else
style[name] = value;
}
for (let prop in $380ed8f3903c3931$var$borderStyleProps)
if (style[prop]) {
style[$380ed8f3903c3931$var$borderStyleProps[prop]] = "solid";
style.boxSizing = "border-box";
}
return style;
}
function $380ed8f3903c3931$export$b8e6fb9d2dff3f41(props, handlers = $380ed8f3903c3931$export$fe9c6e915565b4e8, options = {}) {
let { UNSAFE_className, UNSAFE_style, ...otherProps } = props;
let breakpointProvider = $1051245f87c5981d$export$199d6754bdf4e1e3();
let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
let { matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
"base"
] } = options;
let styles = $380ed8f3903c3931$export$f3c39bb9534218d0(props, handlers, direction, matchedBreakpoints);
let style = {
...UNSAFE_style,
...styles
};
if (otherProps.className)
console.warn("The className prop is unsafe and is unsupported in React Spectrum v3. Please use style props with Spectrum variables, or UNSAFE_className if you absolutely must do something custom. Note that this may break in future versions due to DOM structure changes.");
if (otherProps.style)
console.warn("The style prop is unsafe and is unsupported in React Spectrum v3. Please use style props with Spectrum variables, or UNSAFE_style if you absolutely must do something custom. Note that this may break in future versions due to DOM structure changes.");
let styleProps = {
style,
className: UNSAFE_className
};
if ($380ed8f3903c3931$export$52dbfdbe1b2c3541(props.isHidden, matchedBreakpoints))
styleProps.hidden = true;
return {
styleProps
};
}
function $380ed8f3903c3931$export$46b6c81d11d2c30a(value) {
return value;
}
function $380ed8f3903c3931$export$52dbfdbe1b2c3541(prop, matchedBreakpoints) {
if (prop && typeof prop === "object" && !Array.isArray(prop)) {
for (let i = 0; i < matchedBreakpoints.length; i++) {
let breakpoint = matchedBreakpoints[i];
if (prop[breakpoint] != null)
return prop[breakpoint];
}
return prop.base;
}
return prop;
}
let $59d09bcc83651bf9$var$SlotContext = /* @__PURE__ */ $k7QOs$react.createContext(null);
function $59d09bcc83651bf9$export$1e5c9e6e4e15efe3(props, defaultSlot) {
let slot = props.slot || defaultSlot;
let { [slot]: slotProps = {} } = useContext($59d09bcc83651bf9$var$SlotContext) || {};
return $3ef42575df84b30b$export$9d1611c77c2fe928(props, $3ef42575df84b30b$export$9d1611c77c2fe928(slotProps, {
id: props.id
}));
}
function $59d09bcc83651bf9$export$ceb145244332b7a2(props) {
let { children, ...otherProps } = props;
let content = children;
if ($k7QOs$react.Children.toArray(children).length <= 1) {
if (typeof children === "function")
content = /* @__PURE__ */ $k7QOs$react.cloneElement($k7QOs$react.Children.only(children), otherProps);
}
return /* @__PURE__ */ $k7QOs$react.createElement($59d09bcc83651bf9$var$SlotContext.Provider, {
value: {}
}, content);
}
const $f57aed4a881a3485$var$Context = /* @__PURE__ */ $k7QOs$react.createContext(null);
function $f57aed4a881a3485$export$178405afcd8c5eb(props) {
let { children } = props;
let parent = useContext($f57aed4a881a3485$var$Context);
let [modalCount, setModalCount] = useState(0);
let context = useMemo(
() => ({
parent,
modalCount,
addModal() {
setModalCount(
(count) => count + 1
);
if (parent)
parent.addModal();
},
removeModal() {
setModalCount(
(count) => count - 1
);
if (parent)
parent.removeModal();
}
}),
[
parent,
modalCount
]
);
return /* @__PURE__ */ $k7QOs$react.createElement($f57aed4a881a3485$var$Context.Provider, {
value: context
}, children);
}
function $f57aed4a881a3485$export$d9aaed4c3ece1bc0() {
let context = useContext($f57aed4a881a3485$var$Context);
return {
modalProviderProps: {
"aria-hidden": context && context.modalCount > 0 ? true : null
}
};
}
function $parcel$interopDefault$2(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export$2(e, n2, v, s) {
Object.defineProperty(e, n2, { get: v, set: s, enumerable: true, configurable: true });
}
var $698974e9dd92c2ec$exports = {};
$parcel$export$2($698974e9dd92c2ec$exports, "spectrum", () => $698974e9dd92c2ec$export$3311ab3a441bc141, (v) => $698974e9dd92c2ec$export$3311ab3a441bc141 = v);
var $698974e9dd92c2ec$export$3311ab3a441bc141;
$698974e9dd92c2ec$export$3311ab3a441bc141 = "spectrum_b37d53";
var $5cac98e4c80e6707$exports = {};
$parcel$export$2($5cac98e4c80e6707$exports, "spectrum", () => $5cac98e4c80e6707$export$3311ab3a441bc141, (v) => $5cac98e4c80e6707$export$3311ab3a441bc141 = v);
$parcel$export$2($5cac98e4c80e6707$exports, "spectrum-Body", () => $5cac98e4c80e6707$export$a30bf7810c8453d1, (v) => $5cac98e4c80e6707$export$a30bf7810c8453d1 = v);
$parcel$export$2($5cac98e4c80e6707$exports, "spectrum-Body--italic", () => $5cac98e4c80e6707$export$7b2dac1166f6ec4c, (v) => $5cac98e4c80e6707$export$7b2dac1166f6ec4c = v);
var $5cac98e4c80e6707$export$3311ab3a441bc141;
var $5cac98e4c80e6707$export$a30bf7810c8453d1;
var $5cac98e4c80e6707$export$7b2dac1166f6ec4c;
$5cac98e4c80e6707$export$3311ab3a441bc141 = "spectrum_2a241c";
$5cac98e4c80e6707$export$a30bf7810c8453d1 = "spectrum-Body_2a241c";
$5cac98e4c80e6707$export$7b2dac1166f6ec4c = "spectrum-Body--italic_2a241c";
function $d8453c5ae7fac713$export$6343629ee1b29116(theme, defaultColorScheme) {
let matchesDark = $3df547e395c4522f$export$32d5543ab307c01("(prefers-color-scheme: dark)");
let matchesLight = $3df547e395c4522f$export$32d5543ab307c01("(prefers-color-scheme: light)");
if (theme.dark && matchesDark)
return "dark";
if (theme.light && matchesLight)
return "light";
if (theme.dark && defaultColorScheme === "dark")
return "dark";
if (theme.light && defaultColorScheme === "light")
return "light";
if (!theme.dark)
return "light";
if (!theme.light)
return "dark";
return "light";
}
function $d8453c5ae7fac713$export$a8d2043b2d807f4d(theme) {
let matchesFine = $3df547e395c4522f$export$32d5543ab307c01("(any-pointer: fine)");
if (matchesFine && theme.medium)
return "medium";
if (theme.large)
return "large";
return "medium";
}
var $7b22e09dddddd7da$exports = {};
$7b22e09dddddd7da$exports = JSON.parse('{"name":"@react-spectrum/provider","version":"3.5.2","description":"Spectrum UI components in React","license":"Apache-2.0","main":"dist/main.js","module":"dist/module.js","types":"dist/types.d.ts","source":"src/index.ts","files":["dist","src"],"sideEffects":["*.css"],"targets":{"main":{"includeNodeModules":["@adobe/spectrum-css-temp"]},"module":{"includeNodeModules":["@adobe/spectrum-css-temp"]}},"repository":{"type":"git","url":"https://github.com/adobe/react-spectrum"},"dependencies":{"@babel/runtime":"^7.6.2","@react-aria/i18n":"^3.6.1","@react-aria/overlays":"^3.11.0","@react-aria/utils":"^3.14.0","@react-spectrum/utils":"^3.7.4","@react-types/provider":"^3.5.4","@react-types/shared":"^3.15.0","clsx":"^1.1.1"},"devDependencies":{"@adobe/spectrum-css-temp":"3.0.0-alpha.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"},"publishConfig":{"access":"public"}}');
const $7167f8da3cce35e4$var$Context = /* @__PURE__ */ $k7QOs$react.createContext(null);
$7167f8da3cce35e4$var$Context.displayName = "ProviderContext";
const $7167f8da3cce35e4$var$DEFAULT_BREAKPOINTS = {
S: 640,
M: 768,
L: 1024,
XL: 1280,
XXL: 1536
};
function $7167f8da3cce35e4$var$Provider(props, ref) {
let prevContext = $7167f8da3cce35e4$export$693cdb10cec23617();
let prevColorScheme = prevContext && prevContext.colorScheme;
let prevBreakpoints = prevContext && prevContext.breakpoints;
let { theme = prevContext && prevContext.theme, defaultColorScheme } = props;
if (!theme)
throw new Error("theme not found, the parent provider must have a theme provided");
let autoColorScheme = $d8453c5ae7fac713$export$6343629ee1b29116(theme, defaultColorScheme);
let autoScale = $d8453c5ae7fac713$export$a8d2043b2d807f4d(theme);
let { locale: prevLocale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
let usePrevColorScheme = !!theme[prevColorScheme];
let { colorScheme = usePrevColorScheme ? prevColorScheme : autoColorScheme, scale = prevContext ? prevContext.scale : autoScale, locale = prevContext ? prevLocale : null, breakpoints = prevContext ? prevBreakpoints : $7167f8da3cce35e4$var$DEFAULT_BREAKPOINTS, children, isQuiet, isEmphasized, isDisabled, isRequired, isReadOnly, validationState, ...otherProps } = props;
let currentProps = {
version: $7b22e09dddddd7da$exports.version,
theme,
breakpoints,
colorScheme,
scale,
isQuiet,
isEmphasized,
isDisabled,
isRequired,
isReadOnly,
validationState
};
let matchedBreakpoints = $1051245f87c5981d$export$140ae7baa51cca23(breakpoints);
let filteredProps = {};
Object.entries(currentProps).forEach(
([key, value]) => value !== void 0 && (filteredProps[key] = value)
);
let context = Object.assign({}, prevContext, filteredProps);
let contents = children;
let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps);
let { styleProps } = $380ed8f3903c3931$export$b8e6fb9d2dff3f41(otherProps, void 0, {
matchedBreakpoints
});
if (!prevContext || props.locale || theme !== prevContext.theme || colorScheme !== prevContext.colorScheme || scale !== prevContext.scale || Object.keys(domProps).length > 0 || otherProps.UNSAFE_className || Object.keys(styleProps.style).length > 0)
contents = /* @__PURE__ */ $k7QOs$react.createElement($7167f8da3cce35e4$var$ProviderWrapper, {
...props,
UNSAFE_style: {
isolation: !prevContext ? "isolate" : void 0,
...styleProps.style
},
ref
}, contents);
return /* @__PURE__ */ $k7QOs$react.createElement($7167f8da3cce35e4$var$Context.Provider, {
value: context
}, /* @__PURE__ */ $k7QOs$react.createElement($18f2051aff69b9bf$export$a54013f0d02a8f82, {
locale
}, /* @__PURE__ */ $k7QOs$react.createElement($1051245f87c5981d$export$8214320346cf5104, {
matchedBreakpoints
}, /* @__PURE__ */ $k7QOs$react.createElement($f57aed4a881a3485$export$178405afcd8c5eb, null, contents))));
}
let $7167f8da3cce35e4$export$2881499e37b75b9a = /* @__PURE__ */ $k7QOs$react.forwardRef($7167f8da3cce35e4$var$Provider);
const $7167f8da3cce35e4$var$ProviderWrapper = /* @__PURE__ */ $k7QOs$react.forwardRef(function ProviderWrapper(props, ref) {
let { children, ...otherProps } = props;
let { locale, direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
let { theme, colorScheme, scale } = $7167f8da3cce35e4$export$693cdb10cec23617();
let { modalProviderProps } = $f57aed4a881a3485$export$d9aaed4c3ece1bc0();
let { styleProps } = $380ed8f3903c3931$export$b8e6fb9d2dff3f41(otherProps);
let domRef = $98e5a8ae0e6415af$export$c2c55ef9111cafd8(ref);
let themeKey = Object.keys(theme[colorScheme])[0];
let scaleKey = Object.keys(theme[scale])[0];
let className = clsx(styleProps.className, (/* @__PURE__ */ $parcel$interopDefault$2($698974e9dd92c2ec$exports))["spectrum"], (/* @__PURE__ */ $parcel$interopDefault$2($5cac98e4c80e6707$exports))["spectrum"], theme[colorScheme][themeKey], theme[scale][scaleKey], theme.global ? Object.values(theme.global) : null, {
"react-spectrum-provider": $fd933927dbac1f15$export$46d604dce8bf8724,
spectrum: $fd933927dbac1f15$export$46d604dce8bf8724,
[themeKey]: $fd933927dbac1f15$export$46d604dce8bf8724,
[scaleKey]: $fd933927dbac1f15$export$46d604dce8bf8724
});
var _colorScheme, ref1;
let style = {
...styleProps.style,
colorScheme: (ref1 = (_colorScheme = props.colorScheme) !== null && _colorScheme !== void 0 ? _colorScheme : colorScheme) !== null && ref1 !== void 0 ? ref1 : Object.keys(theme).filter(
(k2) => k2 === "light" || k2 === "dark"
).join(" ")
};
let hasWarned = useRef(false);
useEffect(() => {
if (direction && domRef.current) {
let closestDir = domRef.current.parentElement.closest("[dir]");
let dir = closestDir && closestDir.getAttribute("dir");
if (dir && dir !== direction && !hasWarned.current) {
console.warn(`Language directions cannot be nested. ${direction} inside ${dir}.`);
hasWarned.current = true;
}
}
}, [
direction,
domRef,
hasWarned
]);
return /* @__PURE__ */ $k7QOs$react.createElement("div", {
...$65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps),
...styleProps,
...modalProviderProps,
className,
style,
lang: locale,
dir: direction,
ref: domRef
}, children);
});
function $7167f8da3cce35e4$export$693cdb10cec23617() {
return useContext($7167f8da3cce35e4$var$Context);
}
var main$1 = "";
function $parcel$interopDefault$1(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export$1(e, n2, v, s) {
Object.defineProperty(e, n2, { get: v, set: s, enumerable: true, configurable: true });
}
var $ea2e8e3460b67692$exports = {};
$parcel$export$1($ea2e8e3460b67692$exports, "spectrum--darkest", () => $ea2e8e3460b67692$export$4ecdba604f5f1f44, (v) => $ea2e8e3460b67692$export$4ecdba604f5f1f44 = v);
var $ea2e8e3460b67692$export$4ecdba604f5f1f44;
$ea2e8e3460b67692$export$4ecdba604f5f1f44 = "spectrum--darkest_256eeb";
var $5b6ea5874ed9af7b$exports = {};
$parcel$export$1($5b6ea5874ed9af7b$exports, "spectrum", () => $5b6ea5874ed9af7b$export$3311ab3a441bc141, (v) => $5b6ea5874ed9af7b$export$3311ab3a441bc141 = v);
$parcel$export$1($5b6ea5874ed9af7b$exports, "spectrum--medium", () => $5b6ea5874ed9af7b$export$4c0c83b3f4303ef8, (v) => $5b6ea5874ed9af7b$export$4c0c83b3f4303ef8 = v);
$parcel$export$1($5b6ea5874ed9af7b$exports, "spectrum--large", () => $5b6ea5874ed9af7b$export$a88a8dbe29386d31, (v) => $5b6ea5874ed9af7b$export$a88a8dbe29386d31 = v);
$parcel$export$1($5b6ea5874ed9af7b$exports, "spectrum--darkest", () => $5b6ea5874ed9af7b$export$4ecdba604f5f1f44, (v) => $5b6ea5874ed9af7b$export$4ecdba604f5f1f44 = v);
$parcel$export$1($5b6ea5874ed9af7b$exports, "spectrum--dark", () => $5b6ea5874ed9af7b$export$68dc111a79481afd, (v) => $5b6ea5874ed9af7b$export$68dc111a79481afd = v);
$parcel$export$1($5b6ea5874ed9af7b$exports, "spectrum--light", () => $5b6ea5874ed9af7b$export$efb37c2f79da8163, (v) => $5b6ea5874ed9af7b$export$efb37c2f79da8163 = v);
$parcel$export$1($5b6ea5874ed9af7b$exports, "spectrum--lightest", () => $5b6ea5874ed9af7b$export$baaa804dc80cce18, (v) => $5b6ea5874ed9af7b$export$baaa804dc80cce18 = v);
var $5b6ea5874ed9af7b$export$3311ab3a441bc141;
var $5b6ea5874ed9af7b$export$4c0c83b3f4303ef8;
var $5b6ea5874ed9af7b$export$a88a8dbe29386d31;
var $5b6ea5874ed9af7b$export$4ecdba604f5f1f44;
var $5b6ea5874ed9af7b$export$68dc111a79481afd;
var $5b6ea5874ed9af7b$export$efb37c2f79da8163;
var $5b6ea5874ed9af7b$export$baaa804dc80cce18;
$5b6ea5874ed9af7b$export$3311ab3a441bc141 = "spectrum_9e130c";
$5b6ea5874ed9af7b$export$4c0c83b3f4303ef8 = "spectrum--medium_9e130c";
$5b6ea5874ed9af7b$export$a88a8dbe29386d31 = "spectrum--large_9e130c";
$5b6ea5874ed9af7b$export$4ecdba604f5f1f44 = "spectrum--darkest_9e130c";
$5b6ea5874ed9af7b$export$68dc111a79481afd = "spectrum--dark_9e130c";
$5b6ea5874ed9af7b$export$efb37c2f79da8163 = "spectrum--light_9e130c";
$5b6ea5874ed9af7b$export$baaa804dc80cce18 = "spectrum--lightest_9e130c";
var $b2eefcc3e5fdb373$exports = {};
$parcel$export$1($b2eefcc3e5fdb373$exports, "spectrum--large", () => $b2eefcc3e5fdb373$export$a88a8dbe29386d31, (v) => $b2eefcc3e5fdb373$export$a88a8dbe29386d31 = v);
var $b2eefcc3e5fdb373$export$a88a8dbe29386d31;
$b2eefcc3e5fdb373$export$a88a8dbe29386d31 = "spectrum--large_c40598";
var $729ae839c55d8d77$exports = {};
$parcel$export$1($729ae839c55d8d77$exports, "spectrum--light", () => $729ae839c55d8d77$export$efb37c2f79da8163, (v) => $729ae839c55d8d77$export$efb37c2f79da8163 = v);
var $729ae839c55d8d77$export$efb37c2f79da8163;
$729ae839c55d8d77$export$efb37c2f79da8163 = "spectrum--light_a40724";
var $b4d117254fac085c$exports = {};
$parcel$export$1($b4d117254fac085c$exports, "spectrum--medium", () => $b4d117254fac085c$export$4c0c83b3f4303ef8, (v) => $b4d117254fac085c$export$4c0c83b3f4303ef8 = v);
var $b4d117254fac085c$export$4c0c83b3f4303ef8;
$b4d117254fac085c$export$4c0c83b3f4303ef8 = "spectrum--medium_4b172c";
let $bf24a13e98395dd3$export$bca14c5b3b88a9c9 = {
global: /* @__PURE__ */ $parcel$interopDefault$1($5b6ea5874ed9af7b$exports),
light: /* @__PURE__ */ $parcel$interopDefault$1($729ae839c55d8d77$exports),
dark: /* @__PURE__ */ $parcel$interopDefault$1($ea2e8e3460b67692$exports),
medium: /* @__PURE__ */ $parcel$interopDefault$1($b4d117254fac085c$exports),
large: /* @__PURE__ */ $parcel$interopDefault$1($b2eefcc3e5fdb373$exports)
};
const useNonNullableContext = (context) => {
const state = useContext(context);
if (!state)
throw new Error(`${context} is not provided or null`);
return state;
};
const defaultInterfacePlacementMaxLength = 10;
const defaultInterfacePlacement = {
templateArea: {
artwork: "row1-1",
trackInfo: "row1-2",
trackTimeCurrent: "row1-3",
trackTimeDuration: "row1-4",
progress: "row1-5",
repeatType: "row1-6",
volume: "row1-7",
playButton: "row1-8",
playList: "row1-9"
}
};
const audioPlayerStateContext = createContext(null);
function getDefaultExportFromCjs(x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
}
var jsxRuntime = { exports: {} };
var reactJsxRuntime_production_min = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var f = $k7QOs$react, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
function q(c, a, g) {
var b, d = {}, e = null, h = null;
void 0 !== g && (e = "" + g);
void 0 !== a.key && (e = "" + a.key);
void 0 !== a.ref && (h = a.ref);
for (b in a)
m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
if (c && c.defaultProps)
for (b in a = c.defaultProps, a)
void 0 === d[b] && (d[b] = a[b]);
return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
}
reactJsxRuntime_production_min.Fragment = l;
reactJsxRuntime_production_min.jsx = q;
reactJsxRuntime_production_min.jsxs = q;
{
jsxRuntime.exports = reactJsxRuntime_production_min;
}
const jsx = jsxRuntime.exports.jsx;
const jsxs = jsxRuntime.exports.jsxs;
const Fragment = jsxRuntime.exports.Fragment;
const SpectrumProvider = ({
children,
rootContainerProps
}) => {
const {
playerPlacement: contextPlayerPlacement
} = useNonNullableContext(audioPlayerStateContext);
const [placementState, setPlacementState] = useState();
useLayoutEffect(() => {
if (contextPlayerPlacement) {
const placementValidation = () => {
switch (contextPlayerPlacement) {
case "bottom":
return {
bottom: 0
};
case "top":
return {
top: 0
};
case "bottom-left":
return {
bottom: 0,
left: 0
};
case "bottom-right":
return {
bottom: 0,
right: 0
};
case "top-left":
return {
top: 0,
left: 0
};
case "top-right":
return {
top: 0,
right: 0
};
}
};
setPlacementState(placementValidation());
}
}, [contextPlayerPlacement]);
return /* @__PURE__ */ jsx($7167f8da3cce35e4$export$2881499e37b75b9a, {
theme: $bf24a13e98395dd3$export$bca14c5b3b88a9c9,
width: "100%",
position: contextPlayerPlacement === "static" || !contextPlayerPlacement ? "static" : "fixed",
UNSAFE_className: "rm-audio-player-provider",
...placementState,
...rootContainerProps,
children
});
};
const audioPlayerDispatchContext = createContext(null);
const getRandomNumber = (min, max) => {
return Math.round(Math.random() * (max - min) + min);
};
const getTimeWithPadStart = (time) => {
const minutes = `${Math.floor(time / 60)}`.padStart(2, "0");
const seconds = `${Math.floor(time % 60)}`.padStart(2, "0");
return `${minutes}:${seconds}`;
};
const resetAudioValues = (elementRefs, duration, restart) => {
if (!elementRefs)
return;
const {
progressHandleEl,
progressValueEl,
trackCurTimeEl,
trackDurationEl,
audioEl
} = elementRefs;
if (restart) {
if (audioEl) {
audioEl.currentTime = 0;
}
}
if (progressHandleEl && progressValueEl) {
progressValueEl.style.transform = `scaleX(0)`;
progressHandleEl.style.transform = `translateX(0px)`;
}
if (trackCurTimeEl && trackDurationEl) {
trackCurTimeEl.innerHTML = "00:00";
if (!restart) {
trackDurationEl.innerHTML = duration ? getTimeWithPadStart(duration) : "00:00";
}
}
};
const getRandomIdx = (curIdx, minNumber, maxNumber) => {
let nextIdx = getRandomNumber(minNumber, maxNumber);
while (nextIdx === curIdx) {
nextIdx = getRandomNumber(minNumber, maxNumber);
}
return nextIdx;
};
const audioPlayerReducer = (state, action) => {
var _a, _b, _c, _d;
switch (action.type) {
case "NEXT_AUDIO": {
resetAudioValues(state.elementRefs, void 0, true);
if (state.curAudioState.repeatType === "NONE" && state.curIdx + 1 === state.playList.length) {
return {
...state,
curAudioState: { ...state.curAudioState, isPlaying: false }
};
}
if (state.curAudioState.repeatType === "SHUFFLE") {
const randomIdx = getRandomIdx(
state.curIdx,
0,
state.playList.length - 1
);
return {
...state,
curPlayId: state.playList[randomIdx].id,
curIdx: randomIdx,
curAudioState: {
...state.curAudioState,
isLoadedMetaData: false
}
};
}
const infiniteLoopNextIdx = (state.curIdx + 1) % state.playList.length;
return {
...state,
curIdx: infiniteLoopNextIdx,
curPlayId: state.playList[infiniteLoopNextIdx].id
};
}
case "PREV_AUDIO": {
if (((_a = state.elementRefs) == null ? void 0 : _a.audioEl) && ((_b = state.elementRefs) == null ? void 0 : _b.audioEl.currentTime) > 1 || ((_c = state.elementRefs) == null ? void 0 : _c.waveformInst) && ((_d = state.elementRefs) == null ? void 0 : _d.waveformInst.getCurrentTime()) > 1 || state.curAudioState.repeatType === "NONE" && state.curIdx === 0) {
resetAudioValues(state.elementRefs, void 0, true);
return state;
}
if (state.curAudioState.repeatType === "SHUFFLE") {
const randomIdx = getRandomIdx(
state.curIdx,
0,
state.playList.length - 1
);
return {
...state,
curPlayId: state.playList[randomIdx].id,
curIdx: randomIdx
};
}
const infiniteLoopPrevIdx = (state.curIdx - 1 + state.playList.length) % state.playList.length;
return {
...state,
curPlayId: state.playList[infiniteLoopPrevIdx].id,
curIdx: infiniteLoopPrevIdx,
curAudioState: {
...state.curAudioState,
isLoadedMetaData: false
}
};
}
case "UPDATE_PLAY_LIST": {
const curPlayListItem = action.playList.find(
(item) => item.id === state.curPlayId
);
if (!curPlayListItem) {
console.error(
"UPDATE_PLAY_LIST ERROR - curPlayId is not found on playList"
);
return state;
}
const curIdx = action.playList.findIndex(
(item) => item.id === state.curPlayId
);
return {
...state,
playList: action.playList,
curIdx
};
}
case "SET_VOLUME":
return {
...state,
curAudioState: {
...state.curAudioState,
volume: action.volume
}
};
case "SET_AUDIO_STATE":
return {
...state,
curAudioState: { ...state.curAudioState, ...action.audioState }
};
case "SET_INITIAL_STATES":
return {
...state,
curAudioState: { ...state.curAudioState, ...action.audioState },
curPlayId: action.curPlayId
};
case "CHANGE_PLAYING_STATE":
if (action.state !== void 0) {
return {
...state,
curAudioState: {
...state.curAudioState,
isPlaying: action.state
}
};
}
return {
...state,
curAudioState: {
...state.curAudioState,
isPlaying: !state.curAudioState.isPlaying
}
};
case "SET_CURRENT_AUDIO":
return {
...state,
curPlayId: action.currentAudioId,
curIdx: action.currentIndex,
curAudioState: {
...state.curAudioState,
isLoadedMetaData: false
}
};
case "SET_REPEAT_TYPE":
return {
...state,
curAudioState: {
...state.curAudioState,
repeatType: action.repeatType
}
};
case "SET_PLACEMENTS":
return {
...state,
playerPlacement: action.playerPlacement || state.playerPlacement,
playListPlacement: action.playListPlacement || state.playListPlacement,
interfacePlacement: action.interfacePlacement,
volumeSliderPlacement: action.volumeSliderPlacement
};
case "SET_MUTED":
return {
...state,
curAudioState: {
...state.curAudioState,
muted: action.muted
}
};
case "SET_ACTIVE_UI":
return {
...state,
activeUI: { ...action.activeUI }
};
case "SET_ELEMENT_REFS":
return {
...state,
elementRefs: { ...state.elementRefs, ...action.elementRefs }
};
case "SET_CUSTOM_ICONS":
return {
...state,
customIcons: { ...state.customIcons, ...action.customIcons }
};
case "SET_COVER_IMGS_CSS":
return {
...state,
coverImgsCss: { ...state.coverImgsCss, ...action.coverImgsCss }
};
default:
throw new Error("Unhandled action");
}
};
const AudioPlayerProvider = ({
children,
...props
}) => {
const {
playList,
audioInitialState,
activeUI: activeUIProp,
placement: placementProp,
...otherProps
} = props;
const curAudioState = {
isPlaying: (audioInitialState == null ? void 0 : audioInitialState.isPlaying) || false,
repeatType: (audioInitialState == null ? void 0 : audioInitialState.repeatType) || "ALL",
volume: (audioInitialState == null ? void 0 : audioInitialState.volume) || 1,
muted: audioInitialState == null ? void 0 : audioInitialState.muted
};
const activeUI = activeUIProp |