react-audio-control-z/dist/index.esm.js

React simple control for record (audio).

import{__assign as e,__spreadArray as t}from"tslib";import n,{useRef as r,useState as i,useEffect as l,useLayoutEffect as o}from"react";import{makeStyles as a,Box as c,IconButton as m}from"@material-ui/core";import s from"clsx";var d=function(t){return n.createElement("svg",e({version:"1.0",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",preserveAspectRatio:"xMidYMid meet"},t),n.createElement("path",{d:"M16.001 8.666a2 2 0 0 0-2 2v5.333a2 2 0 1 0 4 0v-5.333a2 2 0 0 0-2-2Z",fill:t.fill||"#2196f3",stroke:t.fill||"#2196f3",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),n.createElement("path",{d:"M20.667 14.668v1.333a4.666 4.666 0 1 1-9.333 0v-1.333M16.002 20.664v2.667M13.334 23.332h5.333",stroke:t.fill||"#2196f3",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),n.createElement("path",{d:"M16 30.118C8.203 30.118 1.882 23.797 1.882 16H0c0 8.837 7.163 16 16 16v-1.882ZM30.118 16c0 7.797-6.321 14.118-14.118 14.118V32c8.837 0 16-7.163 16-16h-1.882ZM16 1.882c7.797 0 14.118 6.321 14.118 14.118H32c0-8.837-7.163-16-16-16v1.882ZM16 0C7.163 0 0 7.163 0 16h1.882C1.882 8.203 8.203 1.882 16 1.882V0Z",fill:t.fill||"#2196f3"}))},f=function(t){return n.createElement("svg",e({version:"1.0",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",preserveAspectRatio:"xMidYMid meet"},t),n.createElement("path",{d:"M3.2 16C3.2 8.93 8.93 3.2 16 3.2S28.8 8.93 28.8 16 23.07 28.8 16 28.8 3.2 23.07 3.2 16Z",fill:t.fill||"#2196f3"}),n.createElement("path",{opacity:.2,d:"M16 31.466c8.542 0 15.467-6.925 15.467-15.467C31.467 7.457 24.542.533 16 .533 7.458.533.534 7.457.534 15.999c0 8.542 6.924 15.467 15.466 15.467Z",fill:t.fill||"#2196f3"}),n.createElement("path",{d:"M19.455 11.8h-6.91a.745.745 0 0 0-.745.745v6.91c0 .411.334.745.745.745h6.91a.746.746 0 0 0 .745-.745v-6.91a.745.745 0 0 0-.745-.745Z",fill:"#fff"}))},u=function(t){return n.createElement("svg",e({version:"1.0",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",preserveAspectRatio:"xMidYMid meet"},t),n.createElement("g",{transform:"translate(0, 32) scale(0.1,-0.1)",fill:t.fill||"#2196f3",stroke:"none"},n.createElement("path",{d:"M92 280 c-87 -53 -95 -157 -17 -230 22 -21 36 -25 86 -25 54 0 61 3\r\n95 37 30 29 38 45 41 85 10 112 -110 190 -205 133z m128 -16 c105 -63 62 -224\r\n-60 -224 -90 0 -149 102 -104 179 34 58 108 78 164 45z"}),n.createElement("path",{d:"M120 160 l0 -81 55 38 c30 21 54 40 54 43 0 3 -24 22 -54 43 l-55 38\r\n0 -81z m42 -12 c-9 -9 -12 -7 -12 12 0 19 3 21 12 12 9 -9 9 -15 0 -24z"})))},v=function(t){return n.createElement("svg",e({version:"1.0",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",preserveAspectRatio:"xMidYMid meet"},t),n.createElement("g",{transform:"translate(0, 32) scale(0.1, -0.1)",fill:t.fill||"#2196f3",stroke:"none"},n.createElement("path",{d:"M105 291 c-11 -5 -33 -23 -50 -41 -26 -27 -30 -38 -30 -90 0 -55 3\r\n-62 36 -96 63 -62 163 -56 214 14 15 20 20 43 20 84 0 53 -3 61 -37 94 -30 30\r\n-45 37 -85 40 -26 2 -57 0 -68 -5z m115 -27 c79 -47 79 -161 0 -208 -58 -34\r\n-136 -10 -165 50 -19 40 -19 68 0 108 29 61 106 84 165 50z"}),n.createElement("path",{d:"M100 160 c0 -63 2 -70 20 -70 18 0 20 7 20 70 0 63 -2 70 -20 70 -18\r\n0 -20 -7 -20 -70z"}),n.createElement("path",{d:"M180 160 c0 -63 2 -70 20 -70 18 0 20 7 20 70 0 63 -2 70 -20 70 -18\r\n0 -20 -7 -20 -70z"})))},E=function(e){return n.createElement("svg",{version:"1.0",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",preserveAspectRatio:"xMidYMid meet"},n.createElement("metadata",null,"Created by potrace 1.10, written by Peter Selinger 2001-2011"),n.createElement("g",{transform:"translate(0, 32) scale(0.1, -0.1)",fill:e.fill||"#2196f3",stroke:"none"},n.createElement("path",{d:"M100 305 c0 -8 -17 -30 -37 -49 -36 -33 -38 -38 -38 -95 0 -56 3 -63\r\n35 -95 37 -36 70 -49 77 -29 2 6 -9 19 -26 28 -33 16 -61 61 -61 95 0 30 27\r\n77 50 90 16 9 20 8 20 -5 0 -23 23 -13 37 16 11 21 10 26 -8 42 -26 21 -49 22\r\n-49 2z"}),n.createElement("path",{d:"M184 288 c-4 -6 -2 -14 5 -16 8 -3 28 -17 45 -32 26 -24 31 -36 31\r\n-74 0 -36 -6 -51 -28 -73 -15 -15 -27 -22 -27 -15 0 22 -26 13 -41 -14 -12\r\n-24 -12 -28 10 -45 27 -22 46 -20 46 4 0 9 10 24 23 32 72 51 66 178 -10 225\r\n-38 23 -44 24 -54 8z"})))},p=a((function(){return{recordAudio:{position:"relative",borderRadius:"8px",cursor:"pointer",width:"300px",minWidth:"120px",minHeight:"24px",background:"rgba(8, 35, 70, 0.75)",overflow:"hidden",userSelect:"none"},recordAnimation:{position:"absolute",display:"flex",flexDirection:"row",alignItems:"center",top:0,bottom:0,backgroundColor:"gray",paddingRight:2},recordAnimationItem:{borderRadius:"4px",backgroundColor:"#C89F65"},recordAnimationNav:{display:"flex",flexDirection:"row",gap:4}}})),h=function(a){var h,g,w,M,x=a.lengthTime,k=void 0===x?0:x,C=a.className,b=a.style,y=a.isStarted,A=void 0!==y&&y,R=a.isPaused,z=void 0!==R&&R,N=a.isReset,S=void 0!==N&&N,B=a.isStopped,Z=void 0!==B&&B,I=a.durationTick,P=void 0===I?1e3:I,F=a.iconStartColor,D=void 0===F?"#2196f3":F,Y=a.iconPlayColor,H=void 0===Y?"#2196f3":Y,L=a.iconStopColor,W=void 0===L?"#E11800":L,V=a.iconPauseColor,j=void 0===V?"#2196f3":V,T=a.iconResetColor,O=void 0===T?"#2196f3":T,q=a.iconDisabledColor,G=void 0===q?"#EEEEEE":q,J=a.pauseOnStop,K=void 0!==J&&J,Q=a.showButtonNavigation,U=void 0===Q||Q,X=a.showButtonReset,$=void 0===X||X,_=a.showButtonPlayPause,ee=void 0===_||_,te=a.setValue,ne=a.onStarting,re=void 0===ne?function(){}:ne,ie=a.onPausing,le=void 0===ie?function(){}:ie,oe=a.onCompleted,ae=void 0===oe?function(){}:oe,ce=a.onReset,me=void 0===ce?function(){}:ce,se=p(),de=r(null),fe=i([]),ue=fe[0],ve=fe[1],Ee=i(0),pe=Ee[0],he=Ee[1],ge=i([]),we=ge[0],Me=ge[1],xe=i(0),ke=xe[0],Ce=xe[1],be=i(1),ye=be[0],Ae=be[1],Re=i(P),ze=Re[0],Ne=Re[1],Se=i(A),Be=Se[0],Ze=Se[1],Ie=i(z),Pe=Ie[0],Fe=Ie[1],De=i(!1),Ye=De[0],He=De[1];l((function(){return Ze(A)}),[A]),l((function(){return Fe(z)}),[z]),l((function(){S&&Te()}),[S]),l((function(){Z&&We()}),[Z]),l((function(){te&&te(Math.floor(ke/ye))}),[ke]),l((function(){Ye&&ae&&ae()}),[Ye]),h=function(){if(!Pe&&k){var e,n,r=t(t([],ue,!0),[(e=we[0],n=we[1],Math.floor(Math.random()*(n-e+1)+e))],!1);ve(r),Ce((function(e){var t=e+1;return t>=k*ye&&He(!0),t}))}},g=Pe||Ye,w=Be?ze:void 0,M=n.useRef(null),l((function(){M.current=h}),[h]),l((function(){var e;return w&&!g?(e=setInterval((function(){return!g&&M.current()}),w),function(){return clearInterval(e)}):(clearInterval(e),function(){return clearInterval(e)})}),[w,g]),o((function(){if(de.current&&k){var e=de.current,t=e.clientWidth,n=e.clientHeight,r=Math.floor(t/k),i=1;r>500?i=10:r>3&&(i=2),r=Math.floor(t/(k*i)),Ne(P/i),Ae(i),he(r),Me([n/6,4*n/6])}}),[de.current,k]);var Le=function(){Fe(!1),Ze(!0),He(!1),re&&re(!0)},We=function(){Ze(!1),re&&re(!1),Ce(0),ve([]),te&&te(0)},Ve=function(){Fe(!0),le&&le(!0)},je=function(){Fe(!1),le&&le(!1)},Te=function(){Ce(0),ve([]),Fe(!1),Ze(!0),He(!1),te&&te(0),me&&me()},Oe=function(){Ze(!0),Fe(!1),re&&re(!0),le&&le(!1)},qe=function(){Ze(!1),Fe(!0),re&&re(!1),le&&le(!0)},Ge=Ye||!Pe,Je=Ye||Pe;return n.createElement(c,{position:"relative",display:"inline-flex",flexDirection:"column",className:"record-audio-animation"},n.createElement(c,e({},{ref:de},{className:s(se.recordAudio,C,"record-audio-animation-item"),style:b,onDoubleClick:function(){K?Pe?Oe():qe():Be?Pe?je():Ve():Le()}}),n.createElement("div",{className:se.recordAnimation},ue.map((function(e,t){return n.createElement("span",{key:t,className:se.recordAnimationItem,style:{width:pe,height:e}})})))),U&&n.createElement(c,{className:s(se.recordAnimationNav,"record-sound-animation-nav")},K?n.createElement(n.Fragment,null,Be?n.createElement("span",{onClick:qe},n.createElement(m,null,n.createElement(f,{fill:W}))):n.createElement("span",{onClick:Oe},n.createElement(m,null,n.createElement(d,{fill:D}))),$&&n.createElement("span",{onClick:function(){return Be&&Te()}},n.createElement(m,{disabled:!Be},n.createElement(E,{fill:Be?O:G})))):Be?n.createElement(n.Fragment,null,n.createElement("span",{onClick:We},n.createElement(m,null,n.createElement(f,{fill:W}))),ee&&n.createElement(n.Fragment,null,n.createElement("span",{onClick:function(){return!Je&&Ve()}},n.createElement(m,{disabled:Je},n.createElement(v,{fill:Je?G:j}))),n.createElement("span",{onClick:function(){return!Ge&&je()}},n.createElement(m,{disabled:Ge},n.createElement(u,{fill:Ge?G:H})))),$&&n.createElement("span",{onClick:Te},n.createElement(m,null,n.createElement(E,{fill:O})))):n.createElement(n.Fragment,null,n.createElement("span",{onClick:Le},n.createElement(m,null,n.createElement(d,{fill:D}))),ee&&n.createElement(n.Fragment,null,n.createElement(m,{disabled:!0},n.createElement(v,{fill:G})),n.createElement(m,{disabled:!0},n.createElement(u,{fill:G}))),$&&n.createElement(m,{disabled:!0},n.createElement(E,{fill:G})))))};export{d as KeyboardVoiceIcon,v as PauseIcon,u as PlayIcon,f as StopCircleIcon,h as default};