audiocard
Version:
Opinionated, responsive, audio player compatible with Twitter Cards - Fully RSC compliant
3 lines (2 loc) • 6.36 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).AudioCard={},e.React)}(this,function(e,t){"use strict";function r(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var i,n,o=r(t),s={exports:{}},l={};var a=(n||(n=1,s.exports=function(){if(i)return l;i=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,i){var n=null;if(void 0!==i&&(n=""+i),void 0!==r.key&&(n=""+r.key),"key"in r)for(var o in i={},r)"key"!==o&&(i[o]=r[o]);else i=r;return{$$typeof:e,type:t,key:n,ref:void 0!==(r=i.ref)?r:null,props:i}}return l.Fragment=t,l.jsx=r,l.jsxs=r,l}()),s.exports);const c=({seconds:e,...t})=>a.jsxs("svg",{viewBox:"0 0 71 71",...t,children:[a.jsx("defs",{children:a.jsx("clipPath",{id:"prefix__a",children:a.jsx("path",{d:"M.5 71.5V.5h71v71z"})})}),a.jsxs("g",{clipPath:"url(#prefix__a)",transform:"matrix(-1 0 0 1 71 0)",children:[a.jsx("path",{d:"M61.5 35.5c0 7-2 14-8 20-10 11-28 11-39 0-10-11-10-28 0-39 6-6 14-8 21-8h1",fill:"none",strokeWidth:3,stroke:"currentColor",strokeLinecap:"square"}),a.jsx("path",{d:"M61.5 35.5h-6M12.5 35.5h-6M34.5 57.5v6",fill:"none",strokeWidth:3,stroke:"currentColor"}),a.jsx("path",{d:"M34 1l11 7-11 7v-1V0zM45 1l12 7-12 7v-1V0z",fill:"currentColor"})]}),a.jsx("text",{x:23,y:44,fontSize:23,fill:"currentColor",className:"prefix__svgcentertext",children:e})]}),d=({seconds:e,...t})=>a.jsxs("svg",{viewBox:"0 0 71 71",...t,children:[a.jsx("defs",{children:a.jsx("clipPath",{id:"prefix__a",children:a.jsx("path",{d:"M.5 71.5V.5h71v71z"})})}),a.jsxs("g",{clipPath:"url(#prefix__a)",children:[a.jsx("path",{d:"M61.5 35.5c0 7-2 14-8 20-10 11-28 11-39 0-10-11-10-28 0-39 6-6 14-8 21-8h1",fill:"none",strokeWidth:3,stroke:"currentColor",strokeLinecap:"square"}),a.jsx("path",{d:"M61.5 35.5h-6M12.5 35.5h-6M34.5 57.5v6",fill:"none",strokeWidth:3,stroke:"currentColor"}),a.jsx("path",{d:"M34 1l11 7-11 7v-1V0zM45 1l12 7-12 7v-1V0z",fill:"currentColor"})]}),a.jsx("text",{x:22,y:44,fontSize:23,fill:"currentColor",className:"prefix__svgcentertext",children:e})]}),u=e=>a.jsx("svg",{viewBox:"0 0 1.25 1.25",display:"block",...e,children:a.jsx("path",{fill:"currentColor",d:"M.25.125l1 .5-1 .5z"})}),x=e=>a.jsx("svg",{viewBox:"0 0 1 1",display:"block",...e,children:a.jsx("g",{fill:"currentColor",children:a.jsx("path",{d:"M.15.15h.262v.7H.15zM.588.15H.85v.7H.588z"})})}),p=750;e.default=function({art:e,background:t,className:r,color:i="#666",link:n,linkText:s,progressBarBackground:l="#ddd",progressBarCompleteBackground:h="#aaa",skipBackSeconds:f,skipForwardSeconds:y,source:j,title:v,duration:g=0,currentTime:m=0,width:k=750,autoplay:w=!1,preload:b="auto"}){const M=k/3.3333333333333335,C=e=>e*M/225,S=e=>e*k/p,z=o.useRef(null),[_,F]=o.useState(!1),[P,B]=o.useState(m),[T,H]=o.useState(g||0);o.useEffect(()=>{B(m)},[m,B]),o.useEffect(()=>{w&&z.current&&z.current.play()},[w]);const N=e=>{const t=z.current;t&&(t.currentTime=Math.max(0,Math.min(T||g||0,t.currentTime+e)))},O=(T||g||0)>0?Math.min(100,Math.max(0,P/(T||g||0)*100)):0,W={width:"100%",maxWidth:"100%",display:"flex",flexFlow:"row nowrap",fontFamily:"'San Francisco', 'Helvetica Neue', Helvetica, sans-serif",lineHeight:"1em",height:M,color:i,userSelect:"none"};t&&(W.backgroundColor=t);const A={flex:1,display:"flex",flexFlow:"row nowrap",justifyContent:"space-between",fontSize:C(16)},V={display:"flex",flexFlow:"row nowrap",justifyContent:"space-between",margin:"0 5px 5px 5px",fontSize:C(16)},$={textDecoration:"none",display:"flex",flexFlow:"column nowrap",justifyContent:"center",margin:"5px",width:"15%",color:i,cursor:"pointer"},q={height:M,width:M,minHeight:M,minWidth:M},D={textAlign:"center",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontSize:C(24),width:S(p-(e?225:0)-20),margin:C(12)+"px "+S(10)+"px "+C(12)+"px "+S(10)+"px",minHeight:C(30)},E={display:"block",textAlign:"center",fontSize:C(20),color:i,textDecoration:"none"},L={position:"relative",height:C(20),minHeight:C(20),cursor:"pointer"},R={position:"absolute",top:0,left:0,right:0,bottom:0,width:"100%",height:"100%",backgroundColor:l,boxShadow:"inset 1px 1px 2px rgba(0, 0, 0, 0.3)",WebkitAppearance:"none",MozAppearance:"none"},U={position:"absolute",top:0,left:0,height:"100%",width:O+"%",backgroundColor:h,transition:"width 0.1s ease"},X=e=>{if(!Number.isFinite(e)||e<0)return"0:00";const t=Math.floor(e/60),r=Math.floor(e%60);return t+":"+(r<10?"0"+r:String(r))};return a.jsxs("div",{className:r,style:W,children:[e&&a.jsx("img",{src:e,alt:v||"Audio artwork",style:q}),a.jsxs("div",{style:{flex:1,display:"flex",flexFlow:"column nowrap",padding:0},children:[v&&a.jsx("div",{style:D,children:v}),a.jsx("audio",{ref:z,src:j,preload:String(b),autoPlay:w,onTimeUpdate:()=>{z.current&&B(z.current.currentTime)},onPlay:()=>F(!0),onPause:()=>F(!1),onLoadedMetadata:()=>{z.current&&H(z.current.duration)},style:{display:"none"}}),a.jsxs("div",{style:A,children:[a.jsx("div",void 0!==f?{style:$,onClick:()=>N(-f),title:`Skip Back ${f}s`,children:a.jsx(c,{seconds:f})}:{style:$}),a.jsx("div",{style:$,onClick:()=>{const e=z.current;e&&(_?e.pause():e.play())},title:_?"Pause":"Play",children:a.jsx(_?x:u,{})}),a.jsx("div",void 0!==y?{style:$,onClick:()=>N(y),title:`Skip Forward ${y}s`,children:a.jsx(d,{seconds:y})}:{style:$})]}),n&&s&&a.jsx("a",{href:n,target:"_blank",rel:"noopener noreferrer",style:E,children:s}),a.jsxs("div",{style:V,children:[a.jsx("span",{children:Number.isFinite(P)&&P>=0&&Number.isFinite(T||g||0)&&(T||g||0)>0?X(P):a.jsx("span",{style:{visibility:"hidden"},children:"0:00"})}),a.jsx("span",{children:Number.isFinite(T||g||0)&&(T||g||0)>0?X(T||g||0):a.jsx("span",{style:{visibility:"hidden"},children:"0:00"})})]}),a.jsx("div",{style:L,onClick:e=>{const t=z.current;if(!t)return;const r=e.currentTarget.getBoundingClientRect();t.currentTime=(e.clientX-r.left)/r.width*(T||g||0)},children:a.jsx("div",{style:R,children:a.jsx("div",{style:U})})})]})]})},Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=audiocard.umd.production.js.map