react-lrcplayer
Version:
React 带歌词的简易播放器
32 lines (29 loc) • 16.2 kB
JavaScript
(function(C,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],T):(C=typeof globalThis<"u"?globalThis:C||self,T(C.index={},C.react))})(this,(function(C,T){"use strict";var J={exports:{}},Y={};/**
* @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 se;function Ne(){if(se)return Y;se=1;var S=T,b=Symbol.for("react.element"),_=Symbol.for("react.fragment"),f=Object.prototype.hasOwnProperty,j=S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,y={key:!0,ref:!0,__self:!0,__source:!0};function g(E,s,w){var v,R={},O=null,I=null;w!==void 0&&(O=""+w),s.key!==void 0&&(O=""+s.key),s.ref!==void 0&&(I=s.ref);for(v in s)f.call(s,v)&&!y.hasOwnProperty(v)&&(R[v]=s[v]);if(E&&E.defaultProps)for(v in s=E.defaultProps,s)R[v]===void 0&&(R[v]=s[v]);return{$$typeof:b,type:E,key:O,ref:I,props:R,_owner:j.current}}return Y.Fragment=_,Y.jsx=g,Y.jsxs=g,Y}var M={};/**
* @license React
* react-jsx-runtime.development.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 ue;function We(){return ue||(ue=1,process.env.NODE_ENV!=="production"&&(function(){var S=T,b=Symbol.for("react.element"),_=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),j=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),E=Symbol.for("react.context"),s=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),R=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),I=Symbol.for("react.offscreen"),B=Symbol.iterator,H="@@iterator";function Z(e){if(e===null||typeof e!="object")return null;var r=B&&e[B]||e[H];return typeof r=="function"?r:null}var P=S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function p(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];Q("error",e,t)}}function Q(e,r,t){{var n=P.ReactDebugCurrentFrame,o=n.getStackAddendum();o!==""&&(r+="%s",t=t.concat([o]));var l=t.map(function(i){return String(i)});l.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,l)}}var U=!1,fe=!1,L=!1,K=!1,Ve=!1,de;de=Symbol.for("react.module.reference");function $e(e){return!!(typeof e=="string"||typeof e=="function"||e===f||e===y||Ve||e===j||e===w||e===v||K||e===I||U||fe||L||typeof e=="object"&&e!==null&&(e.$$typeof===O||e.$$typeof===R||e.$$typeof===g||e.$$typeof===E||e.$$typeof===s||e.$$typeof===de||e.getModuleId!==void 0))}function Je(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return o!==""?t+"("+o+")":t}function ve(e){return e.displayName||"Context"}function k(e){if(e==null)return null;if(typeof e.tag=="number"&&p("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case _:return"Portal";case y:return"Profiler";case j:return"StrictMode";case w:return"Suspense";case v:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case E:var r=e;return ve(r)+".Consumer";case g:var t=e;return ve(t._context)+".Provider";case s:return Je(e,e.render,"ForwardRef");case R:var n=e.displayName||null;return n!==null?n:k(e.type)||"Memo";case O:{var o=e,l=o._payload,i=o._init;try{return k(i(l))}catch{return null}}}return null}var A=Object.assign,V=0,pe,ye,he,_e,ge,me,be;function Ee(){}Ee.__reactDisabledLog=!0;function Be(){{if(V===0){pe=console.log,ye=console.info,he=console.warn,_e=console.error,ge=console.group,me=console.groupCollapsed,be=console.groupEnd;var e={configurable:!0,enumerable:!0,value:Ee,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}V++}}function Ke(){{if(V--,V===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:A({},e,{value:pe}),info:A({},e,{value:ye}),warn:A({},e,{value:he}),error:A({},e,{value:_e}),group:A({},e,{value:ge}),groupCollapsed:A({},e,{value:me}),groupEnd:A({},e,{value:be})})}V<0&&p("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var ee=P.ReactCurrentDispatcher,re;function G(e,r,t){{if(re===void 0)try{throw Error()}catch(o){var n=o.stack.trim().match(/\n( *(at )?)/);re=n&&n[1]||""}return`
`+re+e}}var te=!1,q;{var Ge=typeof WeakMap=="function"?WeakMap:Map;q=new Ge}function Re(e,r){if(!e||te)return"";{var t=q.get(e);if(t!==void 0)return t}var n;te=!0;var o=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var l;l=ee.current,ee.current=null,Be();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(m){n=m}Reflect.construct(e,[],i)}else{try{i.call()}catch(m){n=m}e.call(i.prototype)}}else{try{throw Error()}catch(m){n=m}e()}}catch(m){if(m&&n&&typeof m.stack=="string"){for(var a=m.stack.split(`
`),h=n.stack.split(`
`),c=a.length-1,d=h.length-1;c>=1&&d>=0&&a[c]!==h[d];)d--;for(;c>=1&&d>=0;c--,d--)if(a[c]!==h[d]){if(c!==1||d!==1)do if(c--,d--,d<0||a[c]!==h[d]){var x=`
`+a[c].replace(" at new "," at ");return e.displayName&&x.includes("<anonymous>")&&(x=x.replace("<anonymous>",e.displayName)),typeof e=="function"&&q.set(e,x),x}while(c>=1&&d>=0);break}}}finally{te=!1,ee.current=l,Ke(),Error.prepareStackTrace=o}var W=e?e.displayName||e.name:"",D=W?G(W):"";return typeof e=="function"&&q.set(e,D),D}function qe(e,r,t){return Re(e,!1)}function ze(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function z(e,r,t){if(e==null)return"";if(typeof e=="function")return Re(e,ze(e));if(typeof e=="string")return G(e);switch(e){case w:return G("Suspense");case v:return G("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case s:return qe(e.render);case R:return z(e.type,r,t);case O:{var n=e,o=n._payload,l=n._init;try{return z(l(o),r,t)}catch{}}}return""}var $=Object.prototype.hasOwnProperty,xe={},Te=P.ReactDebugCurrentFrame;function X(e){if(e){var r=e._owner,t=z(e.type,e._source,r?r.type:null);Te.setExtraStackFrame(t)}else Te.setExtraStackFrame(null)}function Xe(e,r,t,n,o){{var l=Function.call.bind($);for(var i in e)if(l(e,i)){var a=void 0;try{if(typeof e[i]!="function"){var h=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw h.name="Invariant Violation",h}a=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(c){a=c}a&&!(a instanceof Error)&&(X(o),p("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof a),X(null)),a instanceof Error&&!(a.message in xe)&&(xe[a.message]=!0,X(o),p("Failed %s type: %s",t,a.message),X(null))}}}var He=Array.isArray;function ne(e){return He(e)}function Ze(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function Qe(e){try{return je(e),!1}catch{return!0}}function je(e){return""+e}function we(e){if(Qe(e))return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Ze(e)),je(e)}var Oe=P.ReactCurrentOwner,er={key:!0,ref:!0,__self:!0,__source:!0},Ce,Se;function rr(e){if($.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function tr(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function nr(e,r){typeof e.ref=="string"&&Oe.current}function ar(e,r){{var t=function(){Ce||(Ce=!0,p("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function ir(e,r){{var t=function(){Se||(Se=!0,p("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var or=function(e,r,t,n,o,l,i){var a={$$typeof:b,type:e,key:r,ref:t,props:i,_owner:l};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function lr(e,r,t,n,o){{var l,i={},a=null,h=null;t!==void 0&&(we(t),a=""+t),tr(r)&&(we(r.key),a=""+r.key),rr(r)&&(h=r.ref,nr(r,o));for(l in r)$.call(r,l)&&!er.hasOwnProperty(l)&&(i[l]=r[l]);if(e&&e.defaultProps){var c=e.defaultProps;for(l in c)i[l]===void 0&&(i[l]=c[l])}if(a||h){var d=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&ar(i,d),h&&ir(i,d)}return or(e,a,h,o,n,Oe.current,i)}}var ae=P.ReactCurrentOwner,Pe=P.ReactDebugCurrentFrame;function N(e){if(e){var r=e._owner,t=z(e.type,e._source,r?r.type:null);Pe.setExtraStackFrame(t)}else Pe.setExtraStackFrame(null)}var ie;ie=!1;function oe(e){return typeof e=="object"&&e!==null&&e.$$typeof===b}function ke(){{if(ae.current){var e=k(ae.current.type);if(e)return`
Check the render method of \``+e+"`."}return""}}function sr(e){return""}var Fe={};function ur(e){{var r=ke();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
Check the top-level render call using <`+t+">.")}return r}}function Ae(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=ur(r);if(Fe[t])return;Fe[t]=!0;var n="";e&&e._owner&&e._owner!==ae.current&&(n=" It was passed a child from "+k(e._owner.type)+"."),N(e),p('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),N(null)}}function De(e,r){{if(typeof e!="object")return;if(ne(e))for(var t=0;t<e.length;t++){var n=e[t];oe(n)&&Ae(n,r)}else if(oe(e))e._store&&(e._store.validated=!0);else if(e){var o=Z(e);if(typeof o=="function"&&o!==e.entries)for(var l=o.call(e),i;!(i=l.next()).done;)oe(i.value)&&Ae(i.value,r)}}}function cr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===s||r.$$typeof===R))t=r.propTypes;else return;if(t){var n=k(r);Xe(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!ie){ie=!0;var o=k(r);p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",o||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function fr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){N(e),p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),N(null);break}}e.ref!==null&&(N(e),p("Invalid attribute `ref` supplied to `React.Fragment`."),N(null))}}var Ie={};function Le(e,r,t,n,o,l){{var i=$e(e);if(!i){var a="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var h=sr();h?a+=h:a+=ke();var c;e===null?c="null":ne(e)?c="array":e!==void 0&&e.$$typeof===b?(c="<"+(k(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):c=typeof e,p("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",c,a)}var d=lr(e,r,t,o,l);if(d==null)return d;if(i){var x=r.children;if(x!==void 0)if(n)if(ne(x)){for(var W=0;W<x.length;W++)De(x[W],e);Object.freeze&&Object.freeze(x)}else p("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else De(x,e)}if($.call(r,"key")){var D=k(e),m=Object.keys(r).filter(function(_r){return _r!=="key"}),le=m.length>0?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}";if(!Ie[D+le]){var hr=m.length>0?"{"+m.join(": ..., ")+": ...}":"{}";p(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,le,D,hr,D),Ie[D+le]=!0}}return e===f?fr(d):cr(d),d}}function dr(e,r,t){return Le(e,r,t,!0)}function vr(e,r,t){return Le(e,r,t,!1)}var pr=vr,yr=dr;M.Fragment=f,M.jsx=pr,M.jsxs=yr})()),M}var ce;function Ye(){return ce||(ce=1,process.env.NODE_ENV==="production"?J.exports=Ne():J.exports=We()),J.exports}var u=Ye();const F={"nextlrc-container":"_nextlrc-container_hw62x_26","nextlrc-placeholder":"_nextlrc-placeholder_hw62x_32","lrcplayer-container":"_lrcplayer-container_hw62x_36","lrcplayer-display":"_lrcplayer-display_hw62x_41","lrcplayer-header":"_lrcplayer-header_hw62x_50","lrcplayer-title":"_lrcplayer-title_hw62x_59","lrcplayer-slide":"_lrcplayer-slide_hw62x_1","lrcplayer-fade":"_lrcplayer-fade_hw62x_1","lrcplayer-none":"_lrcplayer-none_hw62x_1"};function Me(S){const{src:b,cover:_,title:f="",subTitle:j="",lrc:y,placeholder:g="空",animate:E={type:"lrcplayer-fade",duration:.5},nextLrc:s={display:!1,number:5},offset:w=0}=S,[v,R]=T.useState(u.jsx(u.Fragment,{})),[O,I]=T.useState(u.jsx(u.Fragment,{})),[B,H]=T.useState(u.jsx(u.Fragment,{}));T.useEffect(()=>{H(u.jsx("div",{className:F["lrcplayer-display"],style:{animationName:F[E.type],"--animate-duration":E.duration+"s"},children:v===""?u.jsx("i",{style:{color:"grey"},children:g}):v},`lrcplayer-lrc_${Math.random()}`))},[v]);const Z=P=>{const{currentTime:p}=P.target;y.forEach((Q,U)=>{p>=y[U].t+w&&(R(Q.c),I(u.jsx("div",{className:F["nextlrc-container"],children:Array.from(new Array(s.number).keys()).map(L=>{const K=U+1+L<y.length?y[U+1+L].c:"";return K===""?u.jsx("span",{className:F["nextlrc-placeholder"],children:g},L):u.jsx("span",{children:K},L)})})))})};return u.jsxs("div",{className:F["lrcplayer-container"],children:[u.jsxs("div",{className:F["lrcplayer-header"],children:[u.jsx("img",{src:_,width:80,alt:"cover"}),u.jsxs("div",{children:[u.jsx("span",{className:F["lrcplayer-title"],children:f}),u.jsx("br",{}),u.jsx("span",{style:{color:"grey"},children:j})]})]}),u.jsxs("div",{style:{textAlign:"center",paddingBlock:15},children:[B,s.display?u.jsx("div",{style:{color:"grey"},children:O}):""]}),u.jsx("audio",{src:b,controls:!0,style:{width:"100%"},onTimeUpdate:Z})]})}function Ue(S){let b=[];if(S.length===0)return[];var _=S.split(`
`);for(var f in _){_[f]=_[f].replace(/(^\s*)|(\s*$)/g,"");var j=_[f].substring(_[f].indexOf("[")+1,_[f].indexOf("]")),y=j.split(":");if(isNaN(parseInt(y[0])))for(var f in b)f!=="ms"&&f===y[0].toLowerCase()&&(b[f]=y[1]);else{var g=_[f].match(/\[(\d+:.+?)\]/g),E=0;for(var s in g)E+=g[s].length;var w=_[f].substring(E);for(var s in g){var j=g[s].substring(1,g[s].length-1),y=j.split(":");b.push({t:parseFloat(y[0])*60+parseFloat(y[1]),c:w})}}}return b.sort(function(v,R){return v.t-R.t}),b}C.LRCPlayer=Me,C.createLrcObj=Ue,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));