react-tunes-player
Version:
A simple .ogg/.mp3 player.
2 lines (1 loc) • 27.7 kB
JavaScript
"use strict";var e=require("react"),n=require("prop-types"),t=require("styled-components");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),l=r(n),i=r(t);function u(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function o(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,l=[],i=!0,u=!1;try{for(t=t.call(e);!(i=(r=t.next()).done)&&(l.push(r.value),!n||l.length!==n);i=!0);}catch(e){u=!0,a=e}finally{try{i||null==t.return||t.return()}finally{if(u)throw a}}return l}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return s(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return s(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var c,d,m,f,p,v,g,E,y,h,k,b,w,x,T,L,C,z,M,N,S,j,P,R={tunes:n.arrayOf(n.exact({tune:n.string.isRequired,name:n.string.isRequired,album:n.string.isRequired})).isRequired,oldPlayer:n.bool,darkMode:n.bool},q={mobileS:0,mobileM:375,mobileL:425,tablet:768,laptop:1024,laptopL:1440,desktop:2560},D=Object.keys(q).reduce((function(e,n){return e[n]="(min-width: ".concat(q[n],"px)"),e}),{}),O=i.default.div(c||(c=u(["\n font-family: sans-serif;\n font-size: 1em;\n position: fixed;\n bottom: -5px;\n visibility: hidden;\n width: 100%;\n -webkit-perspective: 900;\n perspective: 900;\n -webkit-perspective-origin: 80% 100%;\n perspective-origin: 80% 100%;\n"]))),B=i.default.div(d||(d=u(["\n box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.25);\n height: 75px;\n visibility: visible;\n transition: -webkit-transform 200ms ease-out;\n transition: transform 200ms ease-out;\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n\n background-color: #f2f2f2;\n border-top: 1px solid #cecece;\n\n -webkit-transform: translateY(0);\n transform: translateY(0);\n"]))),F=i.default.div(m||(m=u(["\n padding-bottom: 10px;\n visibility: visible;\n position: relative;\n height: 100%;\n"]))),H=i.default.div(f||(f=u(["\n display: flex;\n flex-direction: row;\n height: 100%;\n width: 100%;\n"]))),V=i.default.div(p||(p=u(["\n margin: 0 1em 0 0;\n img {\n display: none;\n\n @media "," {\n display: inline;\n height: 75px;\n }\n }\n"])),D.mobileL),A=i.default.div(v||(v=u(["\n margin: 2em 0 0 0;\n font-size: 0.8em;\n flex-grow: 1;\n flex-basis: 9.3em;\n\n @media "," {\n flex-grow: 1;\n }\n\n @media "," {\n font-size: 1em;\n margin: 1.7em 1em 0 0;\n }\n\n @media "," {\n font-size: 1em;\n margin: 2em 1em 0 0;\n }\n"])),D.mobileL,D.tablet,D.laptop),I=i.default.div(g||(g=u(["\n margin: 1.5em 0 0 0;\n flex-grow: 1;\n\n @media "," {\n margin: 1.7em 0 0 0;\n }\n"])),D.tablet),W=i.default.a(E||(E=u(["\n background-color: transparent;\n color: #231f20;\n font-size: 1em;\n padding: 1em 0.5em 0 0.5em;\n\n @media "," {\n font-size: 1em;\n padding: 0 0.7em 0 0.7em;\n }\n\n @media "," {\n font-size: 1.5em;\n padding: 0 1em 0 1em;\n }\n\n > svg {\n cursor: pointer;\n fill: #594c4f;\n width: 0.7em;\n height: 0.7em;\n\n @media "," {\n width: 0.8em;\n height: 0.8em;\n }\n\n @media "," {\n width: 0.8em;\n height: 0.8em;\n }\n\n &:hover {\n fill: #e93733;\n }\n }\n"])),D.tablet,D.laptop,D.tablet,D.laptop),Y=i.default(W)(y||(y=u([""]))),X=i.default(W)(h||(h=u([""]))),$=i.default(W)(k||(k=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return e.isPlaying?"#E93733":"#594C4F"})),G=i.default(W)(b||(b=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return e.isPlaying?"#594C4F":"#E93733"})),U=i.default.div(w||(w=u(["\n display: none;\n @media "," {\n display: inline;\n margin: 1.7em 0 0 0;\n flex-grow: 2;\n }\n\n @media "," {\n display: inline;\n margin: 2em 0 0 0;\n flex-grow: 2;\n }\n > progress {\n width: 100%;\n\n /* Turns off styling - not usually needed, but good to know. */\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n\n color: #e93733; /* IE 10 */\n\n /* Needs to be in here for Safari polyfill so background images work as expected. */\n background-size: auto;\n\n &::-moz-progress-bar {\n background-color: #e93733;\n }\n\n &::-webkit-progress-value {\n background-color: #e93733;\n }\n }\n"])),D.tablet,D.laptop),Z=i.default.div(x||(x=u(["\n margin: 2em 1em 0 1em;\n font-size: 0.8em;\n flex-basis: 5.5em;\n text-align: center;\n\n @media "," {\n font-size: 1em;\n margin: 1.7em 1em 0 1em;\n }\n\n @media "," {\n font-size: 1em;\n margin: 2em 1em 0 1em;\n }\n"])),D.tablet,D.laptop),J=i.default(I)(T||(T=u(["\n display: none;\n @media "," {\n display: inline;\n }\n"])),D.laptop),K=i.default(W)(L||(L=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return 1===e.volume?"#E93733":"#594C4F"})),Q=i.default(W)(C||(C=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return.5===e.volume?"#E93733":"#594C4F"})),_=i.default(W)(z||(z=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return.3===e.volume?"#E93733":"#594C4F"})),ee=i.default(W)(M||(M=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return 0===e.volume?"#E93733":"#594C4F"})),ne=i.default.div(N||(N=u(["\n margin: 0 auto;\n display: none;\n"]))),te=i.default.div(S||(S=u(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n\n > svg {\n width: 3em;\n height: 3em;\n fill: #e93733;\n }\n"]))),re=i.default.div(j||(j=u(["\n display: flex;\n flex-direction: row;\n justify-content: start;\n align-items: center;\n flex-grow: 2;\n > svg {\n fill: #e93733;\n }\n"]))),ae=i.default.span(P||(P=u(["\n padding: 0.5em 0 0 0;\n font-size: 1em;\n vertical-align: center;\n p {\n padding: 0;\n margin: 0;\n }\n"]))),le=function(){return a.default.createElement(te,null,a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M32 464h448L256 48 32 464zm248-64h-48v-48h48v48zm0-80h-48v-96h48v96z"})),a.default.createElement(ae,null,"Warning! No tunes loaded in player."))},ie=function(e,n){return e&&e.length?e.findIndex((function(e){return e.name===n.name})):-1},ue=function(e,n,t){var r=ie(e,n)-1;t(r<=-1?e[e.length-1]:e[r])},oe=function(e,n,t){var r=ie(e,n)+1;r>=e.length?t(e[0]):t(e[r])},se=function(e){return e>0?(e/60).toFixed(2):0},ce=function(n){var t=n.currentTune,r=n.isPlaying,l=n.volume,i=n.onEnded,u=n.setTuneDuration,o=n.setSeekTimeTune,s=n.seekTimeTune,c=n.triggerCurrentTime,d=n.setTriggerCurrentTime,m=n.setIsLoading,f=n.setOnError,p=e.useRef(),v=function(e){u(Number.isNaN(e.target.duration)?0:e.target.duration),o(e.target.currentTime)},g=function(){m(!1)},E=function(){m(!1),f(!0)},y=function(){m(!1),f(!0)};return e.useEffect((function(){return p.current.addEventListener("timeupdate",v),r?p.current.play():p.current.pause(),p.current.volume=l,p.current.currentTime=s,d(!1),function(){p.current.removeEventListener("timeupdate",v)}}),[t,r,l,c]),e.useEffect((function(){return p.current.addEventListener("ended",i),p.current.addEventListener("loadeddata",g),p.current.addEventListener("stalled",E),p.current.addEventListener("error",y),function(){p.current.removeEventListener("ended",i),p.current.removeEventListener("loadeddata",g),p.current.removeEventListener("stalled",E),p.current.removeEventListener("error",y)}}),[t]),a.default.createElement("audio",{controls:!0,ref:p,src:t.tune,"data-testid":"current-tune-audio"})},de=function(n){var t=n.tuneDuration,r=n.seekTimeTune,l=n.setSeekTimeTune,i=n.setTriggerCurrentTime,u=n.setDrag,o=n.drag,s=e.useRef(null),c=function(e){var n=(e.pageX-e.target.offsetLeft)*e.target.max/e.target.offsetWidth;l(n),i(!0)},d=function(){return u(!1)},m=function(){return u(!0)},f=function(e){return o?c(e):"clicked"};return e.useEffect((function(){return s.current.addEventListener("click",c),s.current.addEventListener("mousedown",d),s.current.addEventListener("mousemove",m),s.current.addEventListener("mouseup",f),function(){s.current.removeEventListener("click",c),s.current.removeEventListener("mousedown",d),s.current.removeEventListener("mousemove",m),s.current.removeEventListener("mouseup",f)}}),[t,o]),a.default.createElement("progress",{ref:s,max:t,value:r,"data-testid":"current-tune-progress-bar"})},me=function(e){var n=e.currentTune;return a.default.createElement(te,null,a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M32 464h448L256 48 32 464zm248-64h-48v-48h48v48zm0-80h-48v-96h48v96z"})),a.default.createElement(ae,null,a.default.createElement("p",null,"Warning! Error while trying to load tune"," ",a.default.createElement("strong",null,n.name),"."),a.default.createElement("p",null,"Is the tune source ",a.default.createElement("strong",null,n.tune)," correct?")))},fe=function(){return a.default.createElement(re,null,a.default.createElement("svg",{width:"120",height:"30",viewBox:"0 0 120 30",xmlns:"http://www.w3.org/2000/svg",fill:"#e93733"},a.default.createElement("circle",{cx:"15",cy:"15",r:"15"},a.default.createElement("animate",{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),a.default.createElement("animate",{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})),a.default.createElement("circle",{cx:"60",cy:"15",r:"9","fill-opacity":"0.3"},a.default.createElement("animate",{attributeName:"r",from:"9",to:"9",begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}),a.default.createElement("animate",{attributeName:"fill-opacity",from:"0.5",to:"0.5",begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"})),a.default.createElement("circle",{cx:"105",cy:"15",r:"15"},a.default.createElement("animate",{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),a.default.createElement("animate",{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"}))))},pe=function(n){var t=n.tunes,r=void 0===t?[]:t,l=o(e.useState(null),2),i=l[0],u=l[1],s=o(e.useState(!1),2),c=s[0],d=s[1],m=o(e.useState(1),2),f=m[0],p=m[1],v=o(e.useState(0),2),g=v[0],E=v[1],y=o(e.useState(0),2),h=y[0],k=y[1],b=o(e.useState(!1),2),w=b[0],x=b[1],T=o(e.useState(!1),2),L=T[0],C=T[1],z=o(e.useState(!0),2),M=z[0],N=z[1],S=o(e.useState(!1),2),j=S[0],P=S[1];e.useEffect((function(){r.length>0&&u(r[0])}),[r]);var R=function(){E(0),k(0)};return 0===r.length?a.default.createElement(O,null,a.default.createElement(B,null,a.default.createElement(le,null))):i?j?a.default.createElement(O,null,a.default.createElement(B,null,a.default.createElement(me,{currentTune:i}))):a.default.createElement(O,null,a.default.createElement(B,null,a.default.createElement(F,null,a.default.createElement(H,null,a.default.createElement(V,null,a.default.createElement("img",{"data-testid":"current-tune-album-art",alt:i.name,src:i.album})),a.default.createElement(A,null,a.default.createElement("span",{"data-testid":"current-tune-name"},i.name)),M?a.default.createElement(fe,null):a.default.createElement(e.Fragment,null,a.default.createElement(I,null,a.default.createElement(Y,{title:"Previous tune",onClick:function(){N(!0),R(),ue(r,i,u)},"data-testid":"previous-tune"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M170.7 256L448 448V64L170.7 256zM64 64h64v384H64z"}))),a.default.createElement($,{isPlaying:c,title:"Play tune",onClick:function(){return d(!0)},"data-testid":"play-tune"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M96 52v408l320-204L96 52z"}))),a.default.createElement(G,{isPlaying:c,title:"Pause tune",onClick:function(){return d(!1)},"data-testid":"pause-tune"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M96 448h106.7V64H96v384zM309.3 64v384H416V64H309.3z"}))),a.default.createElement(X,{title:"Next tune",onClick:function(){N(!0),R(),oe(r,i,u)},"data-testid":"next-tune"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M64 64v384l277.3-192L64 64zM384 64h64v384h-64z"})))),a.default.createElement(U,null,a.default.createElement(de,{seekTimeTune:g,tuneDuration:h,setSeekTimeTune:E,setTriggerCurrentTime:x,drag:L,setDrag:C})),a.default.createElement(Z,null,"".concat(g>0?(g/60).toFixed(2):0," / ").concat(h>0?(h/60).toFixed(2):0)),a.default.createElement(J,null,a.default.createElement(K,{volume:f,onClick:function(){return p(1)},"data-testid":"high-volume"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M64 192v128h85.334L256 431.543V80.458L149.334 192H64zm288 64c0-38.399-21.333-72.407-53.333-88.863v176.636C330.667 328.408 352 294.4 352 256zM298.667 64v44.978C360.531 127.632 405.334 186.882 405.334 256c0 69.119-44.803 128.369-106.667 147.022V448C384 428.254 448 349.257 448 256c0-93.256-64-172.254-149.333-192z"}))),a.default.createElement(Q,{volume:f,onClick:function(){return p(.5)},"data-testid":"medium-volume"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M64 192v128h85.334L256 431.543V80.458L149.334 192H64zm288 64c0-38.399-21.333-72.407-53.333-88.863v176.636C330.667 328.408 352 294.4 352 256z"}))),a.default.createElement(_,{volume:f,onClick:function(){return p(.3)},"data-testid":"low-volume"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M64 192v128h85.334L256 431.543V80.458L149.334 192H64z"}))),a.default.createElement(ee,{volume:f,onClick:function(){return p(0)},"data-testid":"mute-volume"},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},a.default.createElement("path",{d:"M405.5 256c0 22.717-4.883 44.362-13.603 63.855l31.88 31.88C439.283 323.33 448 290.653 448 256c0-93.256-64-172.254-149-192v44.978C361 127.632 405.5 186.882 405.5 256zM256 80.458l-51.021 52.48L256 183.957zM420.842 396.885L91.116 67.157l-24 24 90.499 90.413-8.28 10.43H64v128h85.334L256 431.543V280l94.915 94.686C335.795 387.443 318 397.213 299 403.022V448c31-7.172 58.996-22.163 82.315-42.809l39.61 39.693 24-24.043-24.002-24.039-.081.083z"}),a.default.createElement("path",{d:"M352.188 256c0-38.399-21.188-72.407-53.188-88.863v59.82l50.801 50.801A100.596 100.596 0 0 0 352.188 256z"}))))),a.default.createElement(ne,null,a.default.createElement(ce,{currentTune:i,isPlaying:c,volume:f,onEnded:function(){N(!0),R(),ue(r,i,u)},setTuneDuration:k,setSeekTimeTune:E,seekTimeTune:g,triggerCurrentTime:w,setTriggerCurrentTime:x,setIsLoading:N,setOnError:P})))))):null};pe.propTypes=R;var ve,ge,Ee,ye,he,ke=i.default.div(ve||(ve=u(["\n display: grid;\n grid-template-columns: 1fr;\n\n // tablet\n @media "," {\n display: grid;\n grid-template-columns: 114px 2fr;\n height: calc(100% - 1em);\n }\n"])),D.tablet),be=i.default.div(ge||(ge=u(["\n display: none;\n // tablet\n @media "," {\n display: block;\n margin: 0.5em;\n border: 1px solid ",";\n width: 100px;\n height: calc(90px - 1em);\n }\n"])),D.tablet,"#eef2f7"),we=i.default.img(Ee||(Ee=u(["\n @media "," {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n"])),D.tablet),xe=i.default.div(ye||(ye=u(["\n width: 100%;\n align-self: center;\n"]))),Te=i.default.h2(he||(he=u(["\n margin: 0;\n padding: 0;\n font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;\n font-size: 12px;\n line-height: 1.5;\n @media "," {\n font-size: 16px;\n }\n"])),D.tablet),Le=function(e){var n=e.title,t=void 0===n?"":n,r=e.cover,l=void 0===r?"":r;return a.default.createElement(ke,{className:"album"},a.default.createElement(be,{className:"album-cover"},a.default.createElement(we,{className:"album-img",src:l,alt:t})),a.default.createElement(xe,{className:"album-header"},a.default.createElement(Te,{className:"album-header-font"},t)))};Le.propTypes={title:n.string.isRequired,cover:n.string.isRequired};var Ce={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"},ze=["color","size","strokeWidth","children"];function Me(){return Me=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},Me.apply(this,arguments)}var Ne,Se,je,Pe,Re,qe,De,Oe=function(n,t){var r=e.forwardRef((function(r,a){var l,i=r.color,u=void 0===i?"currentColor":i,o=r.size,s=void 0===o?24:o,c=r.strokeWidth,d=void 0===c?2:c,m=r.children,f=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(r,ze);return e.createElement("svg",Me({ref:a},Ce,{width:s,height:s,stroke:u,strokeWidth:d,className:"lucide lucide-"+(l=n,l.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase())},f),[].concat(t.map((function(n){var t=n[0],r=n[1];return e.createElement(t,r)})),m||[]))}));return r.propTypes={color:l.default.string,size:l.default.oneOfType([l.default.string,l.default.number]),strokeWidth:l.default.oneOfType([l.default.string,l.default.number])},r.displayName=""+n,r},Be=Oe("PauseCircle",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["line",{x1:"10",y1:"15",x2:"10",y2:"9",key:"2cxng6"}],["line",{x1:"14",y1:"15",x2:"14",y2:"9",key:"wsglx2"}]]),Fe=Oe("PlayCircle",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polygon",{points:"10 8 16 12 10 16 10 8",key:"1cimsy"}]]),He=Oe("SkipBack",[["polygon",{points:"19 20 9 12 19 4 19 20",key:"o2sva"}],["line",{x1:"5",y1:"19",x2:"5",y2:"5",key:"1qxvzh"}]]),Ve=Oe("SkipForward",[["polygon",{points:"5 4 15 12 5 20 5 4",key:"16p6eg"}],["line",{x1:"19",y1:"5",x2:"19",y2:"19",key:"5lndli"}]]),Ae=Oe("Volume1",[["polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5",key:"16drj5"}],["path",{d:"M15.54 8.46a5 5 0 0 1 0 7.07",key:"ltjumu"}]]),Ie=Oe("Volume2",[["polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5",key:"16drj5"}],["path",{d:"M15.54 8.46a5 5 0 0 1 0 7.07",key:"ltjumu"}],["path",{d:"M19.07 4.93a10 10 0 0 1 0 14.14",key:"1kegas"}]]),We=Oe("VolumeX",[["polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5",key:"16drj5"}],["line",{x1:"22",y1:"9",x2:"16",y2:"15",key:"3gspht"}],["line",{x1:"16",y1:"9",x2:"22",y2:"15",key:"2tltpt"}]]),Ye=Oe("Volume",[["polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5",key:"16drj5"}]]),Xe=i.default.ul(Ne||(Ne=u(["\n height: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"]))),$e=i.default.li(Se||(Se=u(["\n list-style: none;\n cursor: pointer;\n\n :hover > svg {\n fill: ",";\n }\n"])),"#7b818a"),Ge=i.default($e)(je||(je=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return e.isPlaying?"".concat("#7b818a"):"none"})),Ue=i.default($e)(Pe||(Pe=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return e.isPaused?"".concat("#7b818a"):"none"})),Ze=function(e){var n=e.play,t=e.pause,r=e.skipBack,l=e.skipForward,i=e.isPlaying;return a.default.createElement("div",{className:"player-controls"},a.default.createElement(Xe,{className:"player-controls-list"},a.default.createElement($e,{className:"player-controls-list-skip-back",onClick:function(e){return e.preventDefault(),r()}},a.default.createElement(He,{className:"skip-back",role:"skip-back"})),a.default.createElement(Ge,{className:"player-controls-list-play-circle",onClick:function(e){return e.preventDefault(),n()},isPlaying:i},a.default.createElement(Fe,{className:"play-circle",role:"play-circle"})),a.default.createElement(Ue,{className:"player-controls-list-pause-circle",onClick:function(e){return e.preventDefault(),t()},isPaused:!i},a.default.createElement(Be,{className:"pause-circle",role:"pause-circle"})),a.default.createElement($e,{className:"player-controls-list-skip-forward",onClick:function(e){return e.preventDefault(),l()}},a.default.createElement(Ve,{className:"skip-forward",role:"skip-forward"}))))};Ze.propTypes={skipBack:n.func.isRequired,play:n.func.isRequired,pause:n.func.isRequired,skipForward:n.func.isRequired,isPlaying:n.bool.isRequired};var Je,Ke,Qe,_e,en,nn,tn,rn,an=i.default.div(Re||(Re=u(["\n display: grid;\n grid-template-columns: 1fr 1fr;\n justify-items: center;\n align-items: center;\n\n @media "," {\n grid-template-columns: 2em auto 2em;\n justify-items: center;\n align-items: center;\n }\n"])),D.tablet),ln=i.default.span(qe||(qe=u(["\n font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;\n font-size: 12px;\n line-height: 1.5;\n"]))),un=i.default.progress(De||(De=u(["\n display: none;\n width: calc(100% - 1em);\n height: 0.5em;\n\n /* Reset the default appearance */\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n\n /* Get rid of default border in Firefox. */\n border: none;\n background-size: auto;\n background: ",";\n\n ::-webkit-progress-value {\n background: ",";\n }\n\n ::-moz-progress-bar {\n background: ",";\n }\n\n @media "," {\n display: inline;\n }\n"])),"#7b818a","#ffffff","#ffffff",D.tablet),on=function(n){var t=n.tuneDuration,r=n.seekTimeTune,l=n.setSeekTimeTune,i=n.setTriggerCurrentTime,u=n.setDrag,o=n.drag,s=e.useRef(null),c=function(e){var n=(e.pageX-e.target.offsetLeft)*e.target.max/e.target.offsetWidth;l(n),i(!0)},d=function(){return u(!1)},m=function(){return u(!0)},f=function(e){return o?c(e):"clicked"};return e.useEffect((function(){return s.current.addEventListener("click",c),s.current.addEventListener("mousedown",d),s.current.addEventListener("mousemove",m),s.current.addEventListener("mouseup",f),function(){s.current.removeEventListener("click",c),s.current.removeEventListener("mousedown",d),s.current.removeEventListener("mousemove",m),s.current.removeEventListener("mouseup",f)}}),[t,o]),a.default.createElement(an,{className:"seek-control",role:"seek-control"},a.default.createElement(ln,{className:"seek-control-time-progress",role:"seek-control-time-progress"},se(r)),a.default.createElement(un,{ref:s,max:t,value:r,className:"seek-control-progress"}),a.default.createElement(ln,{className:"seek-control-time-total",role:"seek-control-time-total"},se(t)))},sn=i.default.div(Je||(Je=u(["\n display: none;\n @media "," {\n display: inline;\n }\n"])),D.laptop),cn=i.default.ul(Ke||(Ke=u(["\n height: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"]))),dn=i.default.li(Qe||(Qe=u(["\n list-style: none;\n cursor: pointer;\n :hover > svg {\n fill: ",";\n }\n"])),"#7b818a"),mn=i.default(dn)(_e||(_e=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return 1===e.volume?"".concat("#7b818a"):"none"})),fn=i.default(dn)(en||(en=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return.5===e.volume?"".concat("#7b818a"):"none"})),pn=i.default(dn)(nn||(nn=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return.3===e.volume?"".concat("#7b818a"):"none"})),vn=i.default(dn)(tn||(tn=u(["\n > svg {\n fill: ",";\n }\n"])),(function(e){return 0===e.volume?"".concat("#7b818a"):"none"})),gn=function(e){var n=e.volume,t=e.volumeMute,r=e.volumeLow,l=e.volumeMedium,i=e.volumeHigh;return a.default.createElement(sn,{className:"volume-controls"},a.default.createElement(cn,{className:"volume-controls-list"},a.default.createElement(vn,{volume:n,className:"volume-controls-list-x",onClick:function(e){return e.preventDefault(),t()}},a.default.createElement(We,{className:"volume-x",role:"volume-x"})),a.default.createElement(pn,{volume:n,className:"volume-controls-list-0",onClick:function(e){return e.preventDefault(),r()}},a.default.createElement(Ye,{className:"volume",role:"volume"})),a.default.createElement(fn,{volume:n,className:"volume-controls-list-1",onClick:function(e){return e.preventDefault(),l()}},a.default.createElement(Ae,{className:"volume-1",role:"volume-1"})),a.default.createElement(mn,{volume:n,className:"volume-controls-list-2",onClick:function(e){return e.preventDefault(),i()}},a.default.createElement(Ie,{className:"volume-2",role:"volume-2"}))))};gn.propTypes={volumeMute:n.func.isRequired,volumeLow:n.func.isRequired,volumeMedium:n.func.isRequired,volumeHigh:n.func.isRequired,volume:n.number.isRequired};var En=i.default.div(rn||(rn=u(["\n background: ",";\n display: grid;\n color: ",";\n grid-template-columns: 1fr 2fr 1fr;\n position: fixed;\n bottom: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n height: 90px;\n grid-gap: 0.5em;\n\n // tablet\n @media "," {\n grid-gap: 0.5em;\n grid-template-columns: 2fr 1fr 3fr;\n }\n\n // desktop\n @media "," {\n grid-gap: 2em;\n grid-template-columns: 2fr 1fr 3fr 1fr;\n }\n"])),(function(e){return e.darkMode?"".concat("#181818"):"".concat("#353739")}),"#eef2f7",D.tablet,D.laptop),yn=function(n){var t=n.tunes,r=void 0===t?[]:t,l=n.darkMode,i=void 0===l||l,u=o(e.useState(null),2),s=u[0],c=u[1],d=o(e.useState(!1),2),m=d[0],f=d[1],p=o(e.useState(1),2),v=p[0],g=p[1],E=o(e.useState(0),2),y=E[0],h=E[1],k=o(e.useState(0),2),b=k[0],w=k[1],x=o(e.useState(!1),2),T=x[0],L=x[1],C=o(e.useState(!1),2),z=C[0],M=C[1],N=o(e.useState(!0),2),S=N[0],j=N[1],P=o(e.useState(!1),2),R=P[0],q=P[1];e.useEffect((function(){r.length>0&&c(r[0])}),[r]);var D=function(){h(0),w(0)};return 0===r.length?a.default.createElement(En,{darkMode:i},a.default.createElement(le,null)):s?R?a.default.createElement(En,{darkMode:i},a.default.createElement(me,{currentTune:s})):a.default.createElement(En,{darkMode:i},a.default.createElement(Le,{title:s.name,cover:s.album}),S?a.default.createElement(fe,null):a.default.createElement(a.default.Fragment,null,a.default.createElement(Ze,{pause:function(){f(!1)},play:function(){f(!0)},skipBack:function(){j(!0),D(),ue(r,s,c)},skipForward:function(){j(!0),D(),oe(r,s,c)},isPlaying:m}),a.default.createElement(on,{seekTimeTune:y,tuneDuration:b,setSeekTimeTune:h,setTriggerCurrentTime:L,drag:z,setDrag:M}),a.default.createElement(gn,{volumeMute:function(){g(0)},volumeMedium:function(){g(.5)},volumeHigh:function(){g(1)},volumeLow:function(){g(.3)},volume:v})),a.default.createElement(ne,null,a.default.createElement(ce,{currentTune:s,isPlaying:m,volume:v,onEnded:function(){j(!0),D(),ue(r,s,c)},setTuneDuration:w,setSeekTimeTune:h,seekTimeTune:y,triggerCurrentTime:T,setTriggerCurrentTime:L,setIsLoading:j,setOnError:q}))):a.default.createElement(En,{darkMode:i},a.default.createElement(fe,null))};yn.propTypes=R;var hn=function(e){var n=e.tunes,t=e.oldPlayer,r=void 0!==t&&t,l=e.darkMode,i=void 0===l||l;return r?a.default.createElement(pe,{tunes:n}):a.default.createElement(yn,{tunes:n,darkMode:i})};hn.propTypes=R,module.exports=hn;