audiocard
Version:
Opinionated, responsive, audio player compatible with Twitter Cards - Fully RSC compliant
3 lines (2 loc) • 5.68 kB
JavaScript
"use strict";var e=require("react/jsx-runtime");function t(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 r=t(require("react"));const i=({seconds:t,...r})=>e.jsxs("svg",{viewBox:"0 0 71 71",...r,children:[e.jsx("defs",{children:e.jsx("clipPath",{id:"prefix__a",children:e.jsx("path",{d:"M.5 71.5V.5h71v71z"})})}),e.jsxs("g",{clipPath:"url(#prefix__a)",transform:"matrix(-1 0 0 1 71 0)",children:[e.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"}),e.jsx("path",{d:"M61.5 35.5h-6M12.5 35.5h-6M34.5 57.5v6",fill:"none",strokeWidth:3,stroke:"currentColor"}),e.jsx("path",{d:"M34 1l11 7-11 7v-1V0zM45 1l12 7-12 7v-1V0z",fill:"currentColor"})]}),e.jsx("text",{x:23,y:44,fontSize:23,fill:"currentColor",className:"prefix__svgcentertext",children:t})]}),n=({seconds:t,...r})=>e.jsxs("svg",{viewBox:"0 0 71 71",...r,children:[e.jsx("defs",{children:e.jsx("clipPath",{id:"prefix__a",children:e.jsx("path",{d:"M.5 71.5V.5h71v71z"})})}),e.jsxs("g",{clipPath:"url(#prefix__a)",children:[e.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"}),e.jsx("path",{d:"M61.5 35.5h-6M12.5 35.5h-6M34.5 57.5v6",fill:"none",strokeWidth:3,stroke:"currentColor"}),e.jsx("path",{d:"M34 1l11 7-11 7v-1V0zM45 1l12 7-12 7v-1V0z",fill:"currentColor"})]}),e.jsx("text",{x:22,y:44,fontSize:23,fill:"currentColor",className:"prefix__svgcentertext",children:t})]}),s=t=>e.jsx("svg",{viewBox:"0 0 1.25 1.25",display:"block",...t,children:e.jsx("path",{fill:"currentColor",d:"M.25.125l1 .5-1 .5z"})}),l=t=>e.jsx("svg",{viewBox:"0 0 1 1",display:"block",...t,children:e.jsx("g",{fill:"currentColor",children:e.jsx("path",{d:"M.15.15h.262v.7H.15zM.588.15H.85v.7H.588z"})})}),o=750;module.exports=function({art:t,background:a,className:c,color:d="#666",link:x,linkText:h,progressBarBackground:u="#ddd",progressBarCompleteBackground:p="#aaa",skipBackSeconds:f,skipForwardSeconds:j,source:g,title:v,duration:y=0,currentTime:m=0,width:w=750,autoplay:k=!1,preload:b="auto"}){const M=w/3.3333333333333335,C=e=>e*M/225,S=e=>e*w/o,z=r.useRef(null),[F,_]=r.useState(!1),[B,P]=r.useState(m),[H,N]=r.useState(y||0);r.useEffect(()=>{P(m)},[m,P]),r.useEffect(()=>{k&&z.current&&z.current.play()},[k]);const T=e=>{const t=z.current;t&&(t.currentTime=Math.max(0,Math.min(H||y||0,t.currentTime+e)))},O=(H||y||0)>0?Math.min(100,Math.max(0,B/(H||y||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:d,userSelect:"none"};a&&(W.backgroundColor=a);const V={flex:1,display:"flex",flexFlow:"row nowrap",justifyContent:"space-between",fontSize:C(16)},A={display:"flex",flexFlow:"row nowrap",justifyContent:"space-between",margin:"0 5px 5px 5px",fontSize:C(16)},q={textDecoration:"none",display:"flex",flexFlow:"column nowrap",justifyContent:"center",margin:"5px",width:"15%",color:d,cursor:"pointer"},D={height:M,width:M,minHeight:M,minWidth:M},E={textAlign:"center",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontSize:C(24),width:S(o-(t?225:0)-20),margin:C(12)+"px "+S(10)+"px "+C(12)+"px "+S(10)+"px",minHeight:C(30)},L={display:"block",textAlign:"center",fontSize:C(20),color:d,textDecoration:"none"},R={position:"relative",height:C(20),minHeight:C(20),cursor:"pointer"},$={position:"absolute",top:0,left:0,right:0,bottom:0,width:"100%",height:"100%",backgroundColor:u,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:p,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 e.jsxs("div",{className:c,style:W,children:[t&&e.jsx("img",{src:t,alt:v||"Audio artwork",style:D}),e.jsxs("div",{style:{flex:1,display:"flex",flexFlow:"column nowrap",padding:0},children:[v&&e.jsx("div",{style:E,children:v}),e.jsx("audio",{ref:z,src:g,preload:String(b),autoPlay:k,onTimeUpdate:()=>{z.current&&P(z.current.currentTime)},onPlay:()=>_(!0),onPause:()=>_(!1),onLoadedMetadata:()=>{z.current&&N(z.current.duration)},style:{display:"none"}}),e.jsxs("div",{style:V,children:[e.jsx("div",void 0!==f?{style:q,onClick:()=>T(-f),title:`Skip Back ${f}s`,children:e.jsx(i,{seconds:f})}:{style:q}),e.jsx("div",{style:q,onClick:()=>{const e=z.current;e&&(F?e.pause():e.play())},title:F?"Pause":"Play",children:e.jsx(F?l:s,{})}),e.jsx("div",void 0!==j?{style:q,onClick:()=>T(j),title:`Skip Forward ${j}s`,children:e.jsx(n,{seconds:j})}:{style:q})]}),x&&h&&e.jsx("a",{href:x,target:"_blank",rel:"noopener noreferrer",style:L,children:h}),e.jsxs("div",{style:A,children:[e.jsx("span",{children:Number.isFinite(B)&&B>=0&&Number.isFinite(H||y||0)&&(H||y||0)>0?X(B):e.jsx("span",{style:{visibility:"hidden"},children:"0:00"})}),e.jsx("span",{children:Number.isFinite(H||y||0)&&(H||y||0)>0?X(H||y||0):e.jsx("span",{style:{visibility:"hidden"},children:"0:00"})})]}),e.jsx("div",{style:R,onClick:e=>{const t=z.current;if(!t)return;const r=e.currentTarget.getBoundingClientRect();t.currentTime=(e.clientX-r.left)/r.width*(H||y||0)},children:e.jsx("div",{style:$,children:e.jsx("div",{style:U})})})]})]})};
//# sourceMappingURL=audiocard.cjs.production.js.map