@microlink/react
Version:
Turn links into beautiful previews.
3 lines (2 loc) • 40.9 kB
JavaScript
import e from"@babel/runtime/helpers/extends";import n from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/slicedToArray";import r from"@babel/runtime/helpers/objectWithoutProperties";import o,{useRef as a,useMemo as i,useCallback as c,useLayoutEffect as l,createElement as s,useState as d,useContext as p,forwardRef as u,useEffect as m}from"react";import f from"@babel/runtime/helpers/taggedTemplateLiteral";import{css as g,styled as h,keyframes as b}from"styled-components";import{getApiUrl as v,fetchFromApi as y}from"@microlink/mql";export{fetchFromApi}from"@microlink/mql";const w=["accessibility","debounce","ellipsis","is","lines","text"];function x(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function $(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?x(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}const k=e=>{let n=e.accessibility,t=void 0===n||n,o=e.debounce,d=void 0===o?300:o,p=e.ellipsis,u=void 0===p?"…":p,m=e.is,f=void 0===m?"div":m,g=e.lines,h=void 0===g?3:g,b=e.text,v=r(e,w);const y=a(null),x=a("."),k=$($({ref:y},t?{title:b}:{}),v),z=i(()=>"string"==typeof b&&b.length>0,[b]),E=c(()=>{if(!z)return;const e=e=>{x.current=e,null!=y.current&&(y.current.textContent=e)},n=()=>{var e,n;return null!==(n=null===(e=y.current)||void 0===e?void 0:e.clientHeight)&&void 0!==n?n:0};e(".");const t=(n()+1)*h+1;if(e(b),n()<=t)return;let r=0,o=0,a=b.length;for(;r<=a;)o=Math.floor((r+a)/2),e(b.slice(0,o).trim()+u),n()<=t?r=o+1:a=o-1;e(b.slice(0,o-1).trim()+u)},[u,z,h,b]);return l(()=>{if(E(),null==y.current)return;const e=new ResizeObserver(((e,n)=>{let t;const r=()=>{t=void 0,e()};return()=>{const o=null==t;clearTimeout(t),t=setTimeout(r,n),o&&e()}})(E,d));return e.observe(y.current),()=>e.disconnect()},[E,d]),z?s(f,k,x.current):null};function z(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var E,O={exports:{}};var S,P,j,C={exports:{}};var D,M=z(j?P:(j=1,P=e=>function(){if(E)return O.exports;E=1;const e=new RegExp("^(".concat([/^(:{2}f{4}:)?10(?:\.\d{1,3}){3}$/,/^(:{2}f{4}:)?127(?:\.\d{1,3}){3}$/,/^(::f{4}:)?169\.254\.([1-9]|1?\d\d|2[0-4]\d|25[0-4])\.\d{1,3}$/,/^(:{2}f{4}:)?(172\.1[6-9]|172\.2\d|172\.3[01])(?:\.\d{1,3}){2}$/,/^(:{2}f{4}:)?192\.168(?:\.\d{1,3}){2}$/,/^f[cd][\da-f]{2}(::1$|:[\da-f]{1,4}){1,7}$/,/^fe[89ab][\da-f](::1$|:[\da-f]{1,4}){1,7}$/,/^localhost$|^0\.0\.0\.0$/].map(e=>e.source).join("|"),")$"));return O.exports=e.test.bind(e),O.exports.regex=e,O.exports}()(e)||function(){if(S)return C.exports;S=1;const e=new RegExp("^(".concat([/^\[(::1|::)\]$/].map(e=>e.source).join("|"),")$"));return C.exports=e.test.bind(e),C.exports.regex=e,C.exports}()(e)));const _="undefined"==typeof window,N=e=>"function"==typeof e,R=e=>"object"==typeof e,F=e=>null==e,T=e=>R(e)?e.url:e,L=function(){return g(D||(D=f(["\n @media (max-width: 48em) {\n ",";\n }\n "])),g(...arguments))},V=e=>{let n=e.apiKey,t=e.contrast,r=void 0!==t&&t,o=e.data,a=e.endpoint,i=e.force,c=e.headers,l=e.media,s=e.prerender,d=e.proxy,p=e.ttl,u=e.url;return v(u,{apiKey:n,audio:l.includes("audio"),data:o,endpoint:a,force:i,headers:c,iframe:l.includes("iframe"),palette:r,prerender:s,proxy:d,screenshot:l.includes("screenshot"),ttl:p,video:l.includes("video")})},I=e=>"large"===e,U=e=>"small"===e,W=e=>M(new URL(e).hostname)?e:"https://images.weserv.nl/?".concat(new URLSearchParams({url:e,default:e,l:9,af:"",il:"",n:-1}).toString()),B=!_&&"IntersectionObserver"in window,H=e=>{const n=parseInt(e,10);return[Math.floor(n/3600),Math.floor(n/60)%60,n%60].filter((e,n)=>e>0||n>0).map(e=>e>=10?e:"0".concat(e)).join(":")},A=(e,n,t)=>{switch(!0){case e<=n:return n;case e>=t:return t;default:return e}},X="microlink_card",K="".concat(X,"__content"),q="".concat(X,"__media"),J="".concat(q,"__controls"),G={main:X,content:K,title:"".concat(K,"_title"),description:"".concat(K,"_description"),url:"".concat(K,"_url"),mediaWrapper:"".concat(q,"_wrapper"),media:q,image:"".concat(q,"_image"),videoWrapper:"".concat(q,"_video_wrapper"),video:"".concat(q,"_video"),audioWrapper:"".concat(q,"_audio_wrapper"),audio:"".concat(q,"_audio"),mediaControls:J,playbackControl:"".concat(J,"_playback"),volumeControl:"".concat(J,"_volume"),rwControl:"".concat(J,"_rewind"),ffwControl:"".concat(J,"_fast_forward"),rateControl:"".concat(J,"_rate"),progressBar:"".concat(J,"_progress_bar"),progressTime:"".concat(J,"_progress_time"),spinner:"".concat(J,"_spinner"),iframe:"".concat(X,"__iframe")},Q=["$useNanoClamp","children"];var Y,Z;function ee(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function ne(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ee(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ee(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}const te=h(e=>{let n=e.children,t=e.className,r=e.lines;return F(n)?null:o.createElement(k,{className:t,lines:r,text:n,is:"p"})})(Y||(Y=f(["\n &&& {\n text-align: inherit;\n font-weight: inherit;\n font-family: inherit;\n color: inherit;\n margin: 0;\n\n ","\n }\n"])),e=>!e.$useNanoClamp&&g(Z||(Z=f(["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "])))),re=n=>{let t=n.$useNanoClamp,a=void 0===t||t,i=n.children,c=r(n,Q);const l=a?c:ne(ne({},c),{},{as:"p",title:i});return o.createElement(te,e({$useNanoClamp:a},l),i)},oe={short:"100ms",medium:"150ms",long:"300ms"},ae={short:"cubic-bezier(.25,.8,.25,1)",medium:"cubic-bezier(.25,.8,.25,1)",long:"cubic-bezier(.4, 0, .2, 1)"},ie=(e,n)=>{const t="".concat(oe[n]," ").concat(ae[n]);return e.map(e=>"".concat(e," ").concat(t)).join(", ")},ce=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return ie(n,"short")},le=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return ie(n,"medium")},se=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return ie(n,"long")},de="InterUI, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif",pe="'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",ue=["autoPlay","children","controls","loop","mediaRef","muted","playsInline","size"];function me(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function fe(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?me(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):me(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}const ge={},he=o.createContext(ge),be=e=>{let n=e.autoPlay,a=e.children,l=e.controls,s=e.loop,p=e.mediaRef,u=e.muted,m=e.playsInline,f=e.size,g=r(e,ue);const h=d(ge),b=t(h,2),v=b[0],y=b[1],w=c(e=>y(n=>fe(fe({},n),e)),[]),x=i(()=>({autoPlay:n,controls:l,loop:s,mediaRef:p,muted:u,playsInline:m,size:f}),[n,l,s,p,u,m,f]),$=i(()=>({props:x,state:v,updateState:w}),[x,v,w]);return o.createElement(he.Provider,{value:$},a(g))};var ve,ye,we,xe,$e,ke,ze,Ee,Oe,Se,Pe,je;const Ce=/^www\./,De="16px",Me=g(ve||(ve=f(["\n ",";\n"])),L(ye||(ye=f(["\n > p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n "])))),_e=h("div").attrs({className:G.content})(we||(we=f(["\n display: flex;\n padding: 10px 15px;\n min-width: 0;\n box-sizing: border-box;\n ",";\n"])),e=>{let n=e.$cardSize;return g(xe||(xe=f(["\n flex: ",";\n justify-content: ",";\n flex-direction: ",";\n align-items: ",";\n "])),I(n)?"0 0 125px":1,U(n)?"space-between":"space-around",U(n)?"row":"column",U(n)?"center":"stretch")}),Ne=h("header").attrs({className:G.title})($e||($e=f(["\n text-align: left;\n font-weight: bold;\n margin: 0;\n width: 100%;\n ","\n"])),e=>{let n=e.$cardSize;return g(ke||(ke=f(["\n flex-grow: ",";\n font-size: ",";\n\n ","\n "])),U(n)?.8:1.2,U(n)?"15px":"16px",U(n)&&g(ze||(ze=f(["\n min-width: 0;\n padding-right: 14px;\n "]))))}),Re=h("div").attrs({className:G.description})(Ee||(Ee=f(["\n text-align: left;\n font-size: 14px;\n flex-grow: 2;\n margin: auto 0;\n line-height: 18px;\n font-weight: normal;\n ",";\n"])),e=>{let n=e.$cardSize;return!I(n)&&Me}),Fe=h("footer").attrs({className:G.url})(Oe||(Oe=f(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: left;\n margin: 0;\n flex-grow: 0;\n font-weight: normal;\n ",";\n"])),e=>{let n=e.$cardSize;return g(Se||(Se=f(["\n font-size: ",";\n ","\n "])),U(n)?"10px":"12px",!U(n)&&"width: 100%;")}),Te=h(re)(Pe||(Pe=f(["\n opacity: 0.75;\n transition: ",";\n will-change: opacity;\n\n .",":hover & {\n opacity: 1;\n }\n"])),le("opacity"),G.main),Le=h("span").attrs({title:"microlink.io"})(je||(je=f(["\n background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center\n center;\n display: block;\n margin-left: 15px;\n transition: ",";\n will-change: filter, opacity;\n &:not(:hover) {\n filter: grayscale(100%);\n opacity: 0.75;\n }\n\n min-width: ",";\n width: ",";\n background-size: ",";\n height: ",";\n"])),le("filter","opacity"),De,De,De,"12px"),Ve=()=>{const e=p(he),n=e.state,t=n.description,r=n.title,a=n.url,l=e.props.size,s=U(l),d=i(()=>{return F(e=a)?"":new URL(e).hostname.replace(Ce,"");var e},[a]),u=c(e=>{e.preventDefault(),window.open("https://www.microlink.io","_blank")},[]);return o.createElement(_e,{$cardSize:l},o.createElement(Ne,{$cardSize:l},o.createElement(re,{$useNanoClamp:!1},r)),!s&&o.createElement(Re,{$cardSize:l},o.createElement(re,{lines:2},t)),o.createElement(Fe,{$cardSize:l},o.createElement(Te,{$useNanoClamp:!1},d),o.createElement(Le,{onClick:u})))};var Ie,Ue,We,Be;const He=b(Ie||(Ie=f(["\n 0% {\n background: #e1e8ed;\n }\n 70% {\n background: #cdd4d8;\n }\n 100% {\n background: #e1e8ed;\n }\n"]))),Ae=b(Ue||(Ue=f(["\n 0% {\n background: #e1e8ed;\n }\n 70% {\n background: #dce3e8;\n }\n 100% {\n background: #e1e8ed;\n }\n"]))),Xe=g(We||(We=f(["\n animation: "," .75s linear infinite;\n"])),He),Ke=g(Be||(Be=f(["\n animation: "," 1.25s linear infinite;\n"])),Ae);var qe,Je,Ge;const Qe=h("img")(qe||(qe=f(["\n height: 1px;\n width: 1px;\n position: absolute;\n z-index: -1;\n"]))),Ye=g(Je||(Je=f(["\n &::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: #e1e8ed;\n z-index: 1;\n transition: ",";\n will-change: opacity;\n\n ",";\n }\n"])),le("opacity","visibility"),e=>{let n=e.$isLoading;return g(Ge||(Ge=f(["\n opacity: ",";\n visibility: ",";\n "])),n?1:0,n?"$visible":"hidden")});var Ze,en,nn,tn,rn;const on={small:g(Ze||(Ze=f(["\n flex: 0 0 48px;\n "]))),normal:g(en||(en=f(["\n flex: 0 0 125px;\n\n ","\n "])),L(nn||(nn=f(["\n flex: 0 0 92px;\n "])))),large:g(tn||(tn=f(["\n flex: 1;\n\n &::before {\n padding-bottom: 0;\n }\n "])))},an=h("div")(rn||(rn=f(["\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n background-size: cover;\n display: block;\n overflow: hidden;\n height: auto;\n position: relative;\n\n &::before {\n content: '';\n padding-bottom: 100%;\n display: block;\n }\n\n ",";\n\n ",";\n"])),e=>{let n=e.$cardSize;return on[n]},Ye),cn=n=>{const t=p(he).props.size;return o.createElement(an,e({$cardSize:t},n))};var ln;const sn=h(cn).attrs({className:"".concat(G.media," ").concat(G.image)})(ln||(ln=f(["\n background-image: ",";\n"])),e=>{let n=e.$url;return n?"url('".concat(W(n),"')"):""}),dn=n=>{const t=p(he).state.imageUrl;return o.createElement(sn,e({$url:t},n))};var pn,un,mn,fn,gn;const hn=h(dn)(pn||(pn=f(["\n ",";\n"])),Ke),bn=h("span")(un||(un=f(["\n opacity: 0.8;\n height: 16px;\n width: ",";\n display: block;\n background: #e1e8ed;\n margin: ",";\n ",";\n\n ",";\n"])),e=>{let n=e.$cardSize;return U(n)?"75%":"60%"},e=>{let n=e.$cardSize;return U(n)?"0 20px 0 0":"2px 0 8px"},Xe,e=>{let n=e.$cardSize;return!I(n)&&"\n height: 15px;\n "}),vn=h("span")(mn||(mn=f(["\n opacity: 0.8;\n height: 14px;\n width: 95%;\n display: block;\n position: relative;\n ",";\n animation-delay: 0.125s;\n"])),Xe),yn=h("span")(fn||(fn=f(["\n opacity: 0.8;\n height: 12px;\n width: 30%;\n display: block;\n "," animation-delay: .25s;\n\n ",";\n"])),Xe,e=>{let n=e.$cardSize;return!I(n)&&"\n height: 10px;\n "}),wn=()=>{const e=p(he).props.size,n=U(e);return o.createElement(o.Fragment,null,o.createElement(hn,{$cardSize:e}),o.createElement(_e,{$cardSize:e},o.createElement(bn,{$cardSize:e}),n?null:o.createElement(o.Fragment,null,o.createElement(vn,{$cardSize:e}),o.createElement(vn,{$cardSize:e,style:{marginBottom:"12px"}})),gn||(gn=o.createElement(yn,null))))};var xn;const $n=h("div")(xn||(xn=f(["\n backface-visibility: hidden;\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n transition: ",";\n will-change: transform;\n\n > svg {\n display: block;\n }\n\n &:active:not(:focus) {\n transform: scale(0.9);\n }\n"])),ce("transform"));var kn,zn,En,On,Sn,Pn,jn,Cn,Dn;const Mn=n=>o.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14"},n),kn||(kn=o.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M15.5 6.205l-.705-.705L13 7.295 11.205 5.5l-.705.705L12.295 8 10.5 9.795l.705.705L13 8.705l1.795 1.795.705-.705L13.705 8 15.5 6.205zM9 15a.5.5 0 01-.355-.15L4.835 11H1.5a.5.5 0 01-.5-.5v-5a.5.5 0 01.5-.5h3.335l3.81-3.85a.5.5 0 01.705 0 .5.5 0 01.15.35v13a.5.5 0 01-.5.5z",transform:"translate(-1 -1)"}))),_n=n=>o.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14"},n),zn||(zn=o.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M13.58 4.04l-.765.645a5 5 0 01-.145 6.615l.735.7a6 6 0 00.175-7.94v-.02zM10.79 6a3 3 0 01-.09 3.97l.735.68a4 4 0 00.115-5.295L10.79 6zM9 15a.5.5 0 01-.355-.15L4.835 11H1.5a.5.5 0 01-.5-.5v-5a.5.5 0 01.5-.5h3.335l3.81-3.85a.5.5 0 01.705 0 .5.5 0 01.15.35v13a.5.5 0 01-.5.5z",transform:"translate(-1 -1)"}))),Nn=h("div")(En||(En=f(["\n z-index: 2;\n position: absolute;\n bottom: ","px;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: ",";\n will-change: opacity;\n"])),e=>{let n=e.$cardSize;return I(n)?18:14},le("opacity")),Rn=h("svg")(On||(On=f(["\n stroke: #fff;\n"]))),Fn=h($n).attrs({className:G.volumeControl})(Sn||(Sn=f(["\n "," {\n width: ","px;\n height: ","px;\n\n ","\n }\n"])),Rn,e=>{let n=e.$cardSize;return I(n)?16:14},e=>{let n=e.$cardSize;return I(n)?16:14},e=>{let n=e.$cardSize;return!I(n)&&L(Pn||(Pn=f(["\n width: 12px;\n height: 12px;\n "])))}),Tn=h($n).attrs({className:G.rateControl})(jn||(jn=f(["\n font-size: ","px;\n min-width: ","px;\n line-height: 1;\n font-weight: bold;\n border: 1.5px solid #fff;\n border-radius: 9999px;\n padding: 1px 5px;\n text-align: center;\n color: #fff;\n margin-left: 10px;\n\n ","\n"])),e=>{let n=e.$cardSize;return I(n)?12:10},e=>{let n=e.$cardSize;return I(n)?33:28},e=>{let n=e.$cardSize;return!I(n)&&L(Cn||(Cn=f(["\n font-size: 8px;\n margin-left: 8px;\n min-width: 23px;\n "])))}),Ln=h("span").attrs({className:G.progressTime})(Dn||(Dn=f(["\n margin: ",";\n font-family: ",";\n font-size: 12px;\n padding: 0 16px;\n color: #fff;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n"])),e=>e.$right?"0 0 0 auto":"0 auto 0 0",pe),Vn=e=>{let n=e.$cardSize,t=e.currentTime,r=e.endTime,a=e.isMuted,c=e.onMuteClick,l=e.onPlaybackRateClick,s=e.playbackRate;const d=i(()=>a?Mn:_n,[a]),p=i(()=>I(n),[n]);return o.createElement(Nn,{$cardSize:n},p&&o.createElement(Ln,null,t),o.createElement(Fn,{title:a?"Unmute":"Mute",$cardSize:n,onClick:c},o.createElement(Rn,{as:d})),o.createElement(Tn,{title:"Playback Rate",$cardSize:n,onClick:l},o.createElement("span",null,s,"x")),p&&o.createElement(Ln,{$right:!0},r))},In=["$isPlaying"];var Un,Wn,Bn,Hn,An,Xn;const Kn=n=>o.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 20"},n),Un||(Un=o.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M12 6h-2a2 2 0 00-2 2v16a2 2 0 002 2h2a2 2 0 002-2V8a2 2 0 00-2-2zm10 0h-2a2 2 0 00-2 2v16a2 2 0 002 2h2a2 2 0 002-2V8a2 2 0 00-2-2z",transform:"translate(-8 -6)"}))),qn=n=>o.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 21 24"},n),Wn||(Wn=o.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M7 28a1 1 0 01-1-1V5a1 1 0 011.501-.865l19 11a1 1 0 010 1.73l-19 11A.998.998 0 017 28z",transform:"translate(-6 -4)"}))),Jn={large:"50px",normal:"35px",small:"20px"},Gn=h("svg")(Bn||(Bn=f(["\n stroke: #fff;\n"]))),Qn=h($n).attrs({className:G.playbackControl})(Hn||(Hn=f(["\n "," {\n ","\n }\n"])),Gn,e=>{let n=e.$cardSize;return g(An||(An=f(["\n width: ",";\n height: ",";\n padding: ",";\n\n ","\n "])),Jn[n],Jn[n],I(n)?0:"8px",!I(n)&&!U(n)&&L(Xn||(Xn=f(["\n width: calc("," * 1.2);\n height: calc("," * 1.2);\n "])),Jn.small,Jn.small))}),Yn=n=>{let t=n.$isPlaying,a=r(n,In);const c=i(()=>t?Kn:qn,[t]);return o.createElement(Qn,e({title:t?"Pause":"Play"},a),o.createElement(Gn,{as:c}))};var Zn,et;const nt={normal:.8,small:.9},tt=h("div").attrs(e=>{let n=e.$isVisible;return{style:{left:e.$positionX,transform:"scale(".concat(n?1:.5,") translate(-50%, -50%)"),opacity:n?1:0,visibility:n?"$visible":"hidden"}}})(Zn||(Zn=f(["\n position: absolute;\n top: 50%;\n background: #ffffff;\n border-radius: 50%;\n transform-origin: center center;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);\n transition: ",";\n will-change: left, transform, opacity, visibility;\n backface-visibility: hidden;\n z-index: 3;\n\n ","\n"])),ce("transform","opacity","visibility"),e=>{let n=e.$cardSize;const t=(r=n,Math.floor(12*(nt[r]||1)));var r;return g(et||(et=f(["\n height: ","px;\n width: ","px;\n "])),t,t)}),rt=["$isDragging","$isVisible","label","$positionX","size"];var ot;const at={normal:.8},it=h("span").attrs(e=>{let n=e.$position,t=e.$isDragging,r=e.$visible;return{style:{left:"".concat(n,"px"),top:r?"-4px":"0px",visibility:r?"$visible":"hidden",opacity:r?1:0,transform:"translate(-50%, ".concat(t?-110:-100,"%)")}}})(ot||(ot=f(["\n position: absolute;\n background: rgba(24, 25, 25, 0.75);\n color: #fff;\n text-shadow: 0 1px 2px rgba(24, 25, 25, 0.15);\n padding: 2px 3px;\n border-radius: 4px;\n font-family: ",";\n font-size: ","px;\n line-height: 1;\n transition: ",",\n ",";\n will-change: top, left, visibility, opacity, transform;\n backface-visibility: hidden;\n"])),pe,e=>{let n=e.$cardSize;return 11*(at[n]||1)},le("opacity","visibility","transform"),se("top")),ct=u((n,t)=>{let a=n.$isDragging,i=n.$isVisible,c=n.label,l=n.$positionX,s=n.size,d=r(n,rt);return o.createElement(o.Fragment,null,o.createElement(it,e({$visible:i,$position:l,$cardSize:s,ref:t,$isDragging:a},d),c))});ct.displayName="Tooltip";const lt=["key"];var st,dt,pt,ut,mt,ft,gt;const ht={normal:.7,small:.6},bt={small:.9,large:1.4},vt=e=>Math.floor(6*(bt[e]||1)),yt=h("div").attrs(()=>({className:G.progressBar}))(st||(st=f(["\n position: relative;\n padding: ","px ","px ","px;\n z-index: 2;\n backface-visibility: hidden;\n"])),6,3,3),wt=h("div").attrs(e=>{let n=e.$cardSize;if(e.$isDragging){const e=vt(n);return{style:{height:"".concat(e,"px")}}}return{}})(dt||(dt=f(["\n background: transparent;\n border-radius: 9999px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n background: rgba(255, 255, 255, 0.15);\n transition: ",";\n will-change: height;\n pointer-events: none;\n position: relative;\n\n ","\n"])),ce("height"),e=>{let n=e.$cardSize;const t=(r=n,Math.floor(6*(ht[r]||1)));var r;const o=vt(n);return g(pt||(pt=f(["\n height: ","px;\n\n ",":hover & {\n height: ","px;\n }\n "])),t,yt,o)}),xt=h("div")(ut||(ut=f(["\n border-radius: inherit;\n height: 100%;\n position: relative;\n overflow: hidden;\n"]))),$t=h("div").attrs(e=>{let n=e.$maskScale;return{style:{transform:"scaleX(".concat(n,")")}}})(mt||(mt=f(["\n position: absolute;\n left: 0;\n top: -50%;\n height: 200%;\n width: 100%;\n background: #ffffff;\n transform-origin: left center;\n will-change: transform;\n"]))),kt=h("div").attrs(e=>{let n=e.$cursorRatio,t=e.$isHovering;return{style:{left:e.$progressPercent,transform:"scaleX(".concat(n,")"),opacity:t?1:0,visibility:t?"$visible":"hidden"}}})(ft||(ft=f(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.4);\n transform-origin: left center;\n transition: ",";\n will-change: left, transform, opacity, $visible;\n"])),ce("opacity","visibility")),zt=h("div").attrs(e=>{let n=e.start,t=e.end;return{style:{left:"".concat(n,"px"),right:"".concat(t,"px")}}})(gt||(gt=f(["\n background: rgba(255, 255, 255, 0.35);\n position: absolute;\n top: 0;\n bottom: 0;\n"]))),Et=n=>{let t=n.bufferedMedia,l=n.cursorX,s=n.duration,d=n.hoveredTime,u=n.$isDragging,m=n.$isHovering,f=n.onClick,g=n.onMouseDown,h=n.onMouseOver,b=n.progress;n.showTooltip;const v=p(he).props.size,y=a(),w=a(),x=i(()=>U(v),[v]),$=c(()=>y.current?y.current.getBoundingClientRect().width-6:0,[]),k=i(()=>A(b/s,0,1),[s,b]),z=i(()=>"".concat(A(100*k,1,99),"%"),[k]),E=i(()=>{if(y.current){const e=$(),n=k*e,t=l-n;if(t>0)return A((t/(e-n)).toFixed(3),0,.99)}return 0},[l,$,k]),O=i(()=>{const e=$();return t.map((n,t)=>({key:t,start:n.start*e,end:e-n.end*e}))},[t,$]),S=i(()=>H(d),[d]),P=i(()=>{if(y.current&&w.current){const e=$(),n=w.current.getBoundingClientRect().width/2;return A(l,n,e-n)}return 0},[l,$]),j=i(()=>({onClick:f,onMouseDown:g,onMouseOver:h}),[f,g,h]),C=i(()=>u||m,[u,m]);return o.createElement(yt,e({$cardSize:v,ref:y},j),o.createElement(wt,{$cardSize:v,$isDragging:u},o.createElement(xt,null,o.createElement(kt,{$cursorRatio:E,$isHovering:m,$progressPercent:z}),O.map(n=>{let t=n.key,a=r(n,lt);return o.createElement(zt,e({key:t},a))}),o.createElement($t,{$maskScale:k})),o.createElement(tt,{$cardSize:v,$isVisible:C,$positionX:z}),!x&&o.createElement(ct,{$isDragging:u,$isVisible:C,label:S,$positionX:P,ref:w,size:v})))};var Ot,St,Pt,jt,Ct;const Dt=["$cardSize"],Mt=["$cardSize"],_t=["type","$cardSize"],Nt=n=>{n.$cardSize;let t=r(n,Dt);return o.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 29"},t),Ot||(Ot=o.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M4 18c0 6.627 5.373 12 12 12s12-5.373 12-12S22.627 6 16 6h-4V1L6 7l6 6V8h4c5.523 0 10 4.477 10 10s-4.477 10-10 10S6 23.523 6 18H4zm15.63 4.13a2.84 2.84 0 01-1.28-.27 2.44 2.44 0 01-.89-.77 3.57 3.57 0 01-.52-1.25 7.69 7.69 0 01-.17-1.68 7.83 7.83 0 01.17-1.68c.094-.445.27-.87.52-1.25.23-.325.535-.59.89-.77.4-.188.838-.28 1.28-.27a2.44 2.44 0 012.16 1 5.23 5.23 0 01.7 2.93 5.23 5.23 0 01-.7 2.93 2.44 2.44 0 01-2.16 1.08zm0-1.22c.411.025.8-.19 1-.55a3.38 3.38 0 00.37-1.51v-1.38a3.31 3.31 0 00-.29-1.5 1.23 1.23 0 00-2.06 0 3.31 3.31 0 00-.29 1.5v1.38a3.38 3.38 0 00.29 1.51c.195.356.575.57.98.55zm-9 1.09v-1.18h2v-5.19l-1.86 1-.55-1.06 2.32-1.3H14v6.5h1.78V22h-5.15z",transform:"translate(-4 -1)"})))},Rt=n=>{n.$cardSize;let t=r(n,Mt);return o.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 29"},t),St||(St=o.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M26 18c0 5.523-4.477 10-10 10S6 23.523 6 18 10.477 8 16 8h4v5l6-6-6-6v5h-4C9.373 6 4 11.373 4 18s5.373 12 12 12 12-5.373 12-12h-2zm-6.36 4.13a2.81 2.81 0 01-1.28-.27 2.36 2.36 0 01-.89-.77 3.39 3.39 0 01-.47-1.25 7.12 7.12 0 01-.17-1.68 7.24 7.24 0 01.17-1.68 3.46 3.46 0 01.52-1.25 2.36 2.36 0 01.89-.77c.4-.19.838-.282 1.28-.27a2.44 2.44 0 012.16 1 5.31 5.31 0 01.7 2.93 5.31 5.31 0 01-.7 2.93 2.44 2.44 0 01-2.21 1.08zm0-1.22a1 1 0 001-.55c.22-.472.323-.99.3-1.51v-1.38a3.17 3.17 0 00-.3-1.5 1.22 1.22 0 00-2.05 0 3.18 3.18 0 00-.29 1.5v1.38a3.25 3.25 0 00.29 1.51 1 1 0 001.05.55zm-7.02-3.49c.355.035.71-.06 1-.27a.84.84 0 00.31-.68v-.08a.94.94 0 00-.3-.74 1.2 1.2 0 00-.83-.27 1.65 1.65 0 00-.89.24 2.1 2.1 0 00-.68.68l-.93-.83a5.37 5.37 0 01.44-.51 2.7 2.7 0 01.54-.4 2.55 2.55 0 01.7-.27 3.25 3.25 0 01.87-.1 3.94 3.94 0 011.06.14c.297.078.576.214.82.4.224.168.408.383.54.63.123.26.184.543.18.83a2 2 0 01-.11.67 1.82 1.82 0 01-.32.52 1.79 1.79 0 01-.47.36 2.27 2.27 0 01-.57.2V18c.219.04.431.11.63.21a1.7 1.7 0 01.85.93c.084.234.124.481.12.73a2 2 0 01-.2.92 2 2 0 01-.58.72 2.66 2.66 0 01-.89.45 3.76 3.76 0 01-1.15.16 4.1 4.1 0 01-1-.11 3.1 3.1 0 01-.76-.31 2.76 2.76 0 01-.56-.45 4.22 4.22 0 01-.44-.55l1.07-.81c.082.147.175.288.28.42.105.128.226.243.36.34.137.097.29.171.45.22a2 2 0 00.57.07 1.45 1.45 0 001-.3 1.12 1.12 0 00.34-.85v-.08a1 1 0 00-.37-.8 1.78 1.78 0 00-1.06-.28h-.76v-1.21h.74z",transform:"translate(-4 -1)"})))},Ft=h("svg")(Pt||(Pt=f(["\n stroke: #fff;\n width: ","px;\n height: ","px;\n\n ","\n"])),e=>{let n=e.$cardSize;return I(n)?30:24},e=>{let n=e.$cardSize;return I(n)?30:24},e=>{let n=e.$cardSize;return!I(n)&&L(jt||(jt=f(["\n width: 0;\n height: 0;\n "])))}),Tt=h($n)(Ct||(Ct=f(["\n margin: 0 ",";\n"])),e=>{let n=e.$cardSize;return I(n)?"28px":"3px"}),Lt=n=>{let t=n.type,a=void 0===t?"rewind":t,c=n.$cardSize,l=r(n,_t);const s=i(()=>"rewind"===a?Nt:Rt,[a]);return o.createElement(Tt,e({title:"rewind"===a?"Rewind":"Forward",$cardSize:c},l),o.createElement(Ft,{as:s,$cardSize:c}))};var Vt,It,Ut,Wt,Bt,Ht;const At={normal:.8,small:.6},Xt={normal:.9,small:.8},Kt=b(Vt||(Vt=f(["\n 100% {\n transform: rotate(360deg);\n }\n"]))),qt=b(It||(It=f(["\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n"]))),Jt=h($n).attrs(e=>{let n=e.$isVisible;return{style:{opacity:n?1:0,visibility:n?"$visible":"hidden"}}})(e=>{let n=e.$cardSize;const t="".concat((e=>Math.floor(12*(Xt[e]||1)))(n),"px"),r="".concat((e=>Math.floor(6*(At[e]||1)))(n),"px");return g(Ut||(Ut=f(["\n position: absolute;\n width: ",";\n right: ",";\n top: ",";\n transition: ",";\n will-change: opacity, visibility;\n pointer-events: none;\n "])),t,r,r,le("opacity","visibility"))}),Gt=h("svg")(Wt||(Wt=f(["\n width: 100%;\n animation: "," 2s linear infinite;\n will-change: transform;\n"])),Kt),Qt=h("circle")(Bt||(Bt=f(["\n stroke: #fff;\n stroke-linecap: round;\n stroke-width: 7;\n fill: none;\n animation: "," 1.5s ease-in-out infinite;\n will-change: stroke-dasharray, stroke-dashoffset;\n"])),qt),Yt=e=>{let n=e.size,t=e.$isVisible;return o.createElement(Jt,{$cardSize:n,className:G.spinner,$isVisible:t},Ht||(Ht=o.createElement(Gt,{viewBox:"0 0 50 50"},o.createElement(Qt,{cx:"25",cy:"25",r:"20"}))))};var Zt,er,nr,tr,rr;const or=32,ar=37,ir=39,cr=77,lr=h("div").attrs({className:G.mediaControls})(Zt||(Zt=f(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n transition: ",", ",";\n will-change: background;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n\n ","\n"])),se("background"),le("opacity"),e=>{let n=e.$hasInteracted,t=e.$isDragging,r=e.$isPlaying;const o="rgba(0, 0, 0, 0.35)",a=n&&!r;return g(er||(er=f(["\n .",":hover & {\n background: ",";\n }\n\n .",":not(:hover) & {\n opacity: ",";\n ",";\n }\n "])),G.main,t?"rgba(0, 0, 0, 0.2)":o,G.main,!n||a?1:0,a&&"background: ".concat(o))}),sr=h("div")(nr||(nr=f(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n"]))),dr=h("div")(tr||(tr=f(["\n flex: 1;\n\n ","\n"])),e=>!e.$isVisible&&g(rr||(rr=f(["\n *[class*='","']:not(.",") {\n transition: ",";\n opacity: 0;\n visibility: hidden;\n }\n "])),G.mediaControls,G.progressTime,le("opacity","visibility"))),pr=n=>{let r=n.MediaComponent,l=n.mediaProps;const s=p(he).props,u=s.autoPlay,f=s.controls,g=s.mediaRef,h=s.muted,b=s.loop,v=s.size,y=d(0),w=t(y,2),x=w[0],$=w[1],k=d(0),z=t(k,2),E=z[0],O=z[1],S=d([]),P=t(S,2),j=P[0],C=P[1],D=d(0),M=t(D,2),_=M[0],R=M[1],F=d(0),T=t(F,2),L=T[0],V=T[1],I=d(u),W=t(I,2),B=W[0],X=W[1],K=d(h),q=t(K,2),J=q[0],Q=q[1],Y=d(!1),Z=t(Y,2),ee=Z[0],ne=Z[1],te=d(!1),re=t(te,2),oe=re[0],ae=re[1],ie=d(!1),ce=t(ie,2),le=ce[0],se=ce[1],de=d(1),pe=t(de,2),ue=pe[0],me=pe[1],fe=d(u),ge=t(fe,2),be=ge[0],ve=ge[1],ye=d(!1),we=t(ye,2),xe=we[0],$e=we[1],ke=a(),ze=c(e=>{ke.current=e,g&&(N(g)?g(e):g.current=e)},[g]),Ee=i(()=>!U(v),[v]),Oe=i(()=>({onCanPlay:()=>ne(!1),onLoadedMetadata:e=>$(e.currentTarget.duration),onPause:()=>X(!1),onPlay:()=>X(!0),onPlaying:()=>ne(!1),onProgress:e=>C(e.currentTarget.buffered),onRateChange:e=>me(e.currentTarget.playbackRate),onTimeUpdate:e=>O(e.currentTarget.currentTime),onVolumeChange:e=>Q(e.currentTarget.muted),onWaiting:e=>ne(!0)}),[]),Se=c(e=>{if(ke.current){const n=e.currentTarget.getBoundingClientRect(),t=A(Math.floor(e.clientX-n.left),0,n.width);return{cursor:t,time:t/n.width*ke.current.duration}}return{cursor:0,time:0}},[]),Pe=c(()=>{ke.current&&(ke.current.paused?(be||ve(!0),ke.current.play()):ke.current.pause())},[be]),je=c(e=>{if(ke.current){const n=A(e,0,ke.current.duration);ke.current.currentTime=n,O(n)}},[]),Ce=c((e,n)=>{if(e.preventDefault(),e.stopPropagation(),ke.current){const e=ke.current.currentTime;je("rewind"===n?e-10:e+30)}},[je]),De=c(e=>{e.preventDefault(),e.stopPropagation(),ke.current&&(ke.current.muted=!ke.current.muted)},[]),Me=c(e=>{e.preventDefault(),e.stopPropagation(),ke.current&&(ke.current.playbackRate=(e=>{switch(e){case 1:return 1.25;case 1.25:return 1.5;case 1.5:return 2;default:return 1}})(ke.current.playbackRate))},[]),_e=c(e=>{e.preventDefault(),e.stopPropagation(),se(!1)},[]),Ne=c(e=>{e.preventDefault(),e.stopPropagation(),se(!0);const n=Se(e).time;je(n)},[Se,je]),Re=c(()=>ae(!0),[]),Fe=c(e=>{e.preventDefault(),e.stopPropagation(),le?se(!1):Pe()},[le,Pe]),Te=c(e=>{if((le||oe)&&ke.current){e.preventDefault();const n=Se(e),t=n.cursor,r=n.time;V(r),R(t),le&&(ke.current.paused||(ke.current.pause(),$e(!0)),je(r))}},[Se,le,oe,je]),Le=c(e=>{le&&0===e.buttons&&se(!1)},[le]),Ve=c(e=>{if(le)return;const n=e.keyCode;if([or,ar,ir,cr].includes(n)&&ke.current)switch(e.preventDefault(),n){case or:Pe();break;case ar:je(ke.current.currentTime-5);break;case ir:je(ke.current.currentTime+5);break;case cr:ke.current.muted=!ke.current.muted}},[le,je,Pe]),Ie=i(()=>({onClick:Fe,onKeyDown:Ve,onMouseMove:Te,onMouseOut:()=>ae(!1),onMouseOver:Le}),[Fe,Ve,Te,Le]),Ue=i(()=>be?{title:""}:{},[be]),We=i(()=>j&&j.length&&ke.current?[...Array(j.length).keys()].map(e=>({start:j.start(e)/ke.current.duration,end:j.end(e)/ke.current.duration})):[],[j]),Be=i(()=>H(E||0),[E]),He=i(()=>H(x||0),[x]),Ae=i(()=>({$cardSize:v,currentTime:Be,endTime:He,isMuted:J,onMuteClick:De,onPlaybackRateClick:Me,playbackRate:ue}),[Be,He,J,De,Me,ue,v]),Xe=i(()=>({bufferedMedia:We,cursorX:_,duration:x,hoveredTime:L,$isDragging:le,$isHovering:oe,onClick:_e,onMouseDown:Ne,onMouseOver:Re,progress:E,showTooltip:le||oe}),[We,_,x,L,le,oe,_e,Ne,Re,E]);return m(()=>{!le&&xe&&ke.current&&ke.current.paused&&(ke.current.play(),$e(!1))},[xe,le]),o.createElement(o.Fragment,null,o.createElement(r,e({},l,Oe,{ref:ze,autoPlay:u,loop:b,muted:h})),f&&o.createElement(lr,e({},Ue,{tabIndex:0,$hasInteracted:be,$isDragging:le,$isPlaying:B},Ie),o.createElement(Yt,{size:v,$isVisible:ee}),be?o.createElement(o.Fragment,null,o.createElement(dr,{$isVisible:!le},o.createElement(sr,null,Ee&&o.createElement(Lt,{className:G.rwControl,type:"rewind",$cardSize:v,onClick:e=>Ce(e,"rewind")}),o.createElement(Yn,{$cardSize:v,$isPlaying:B}),Ee&&o.createElement(Lt,{className:G.ffwControl,type:"fastforward",$cardSize:v,onClick:e=>Ce(e,"fastforward")})),Ee&&o.createElement(Vn,Ae)),o.createElement(Et,Xe)):o.createElement(sr,null,o.createElement(Yn,{$cardSize:v}))))};var ur;const mr=h("video")(ur||(ur=f(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n &::media-controls-start-playback-button {\n display: none;\n appearance: none;\n }\n"]))),fr={video:n=>{const t=p(he).state,r=t.imageUrl,a=t.playsInline,c=t.videoUrl,l=i(()=>{const e={className:"".concat(G.media," ").concat(G.video),src:c,playsInline:a};return r&&(e.poster=W(r)),e},[r,a,c]);return o.createElement(cn,e({className:"".concat(G.mediaWrapper," ").concat(G.videoWrapper)},n),o.createElement(pr,{MediaComponent:mr,mediaProps:l}))},image:dn,audio:n=>{const t=p(he).state.audioUrl,r=i(()=>({className:"".concat(G.media," ").concat(G.audio),src:t}),[t]);return o.createElement(dn,e({className:"".concat(G.mediaWrapper," ").concat(G.audioWrapper)},n),o.createElement(pr,{MediaComponent:"audio",mediaProps:r}))}},gr=()=>{const e=p(he).state,n=e.imageUrl,r=e.isAudio,a=e.isVideo,i=d(null!==T(n)),c=t(i,2),l=c[0],s=c[1];const u=((e,n)=>e?"audio":n?"video":"image")(r,a),m=fr[u];return o.createElement(o.Fragment,null,o.createElement(m,{$isLoading:l}),l&&o.createElement(Qe,{src:n,onLoad:()=>s(!1)}))},hr=["href","rel","target","as"],br=["contrast","direction"];var vr,yr,wr,xr,$r;function kr(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function zr(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?kr(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):kr(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}const Er="382px",Or=e=>{let n=e.$backgroundColor,t=e.$color;return g(vr||(vr=f(["\n background-color: ",";\n border-color: ",";\n transition-property: filter;\n will-change: filter;\n\n &&& {\n color: ",";\n }\n\n &:hover {\n filter: brightness(90%);\n }\n"])),n,t,t)},Sr=g(yr||(yr=f(["\n flex-direction: column;\n height: ",";\n ",";\n"])),Er,L(wr||(wr=f(["\n height: calc("," * 7/9);\n "])),Er)),Pr=g(xr||(xr=f(["\n transition-property: background, border-color;\n will-change: background, border-color;\n &:hover {\n background-color: var(--microlink-hover-background-color, #f5f8fa);\n border-color: var(--microlink-hover-border-color, #8899a680);\n }\n"]))),jr=e=>{let n=e.$cardSize;return g($r||($r=f(["\n flex-direction: ",";\n"])),I(n)?"column-reverse":"row-reverse")},Cr=g(()=>"\n max-width: var(--microlink-max-width, 500px);\n background-color: var(--microlink-background-color, #fff);\n border-width: var(--microlink-border-width, 1px);\n border-style: var(--microlink-border-style, solid);\n border-color: var(--microlink-border-color, #e1e8ed);\n color: var(--microlink-color, #181919);\n overflow: hidden;\n font-family: ".concat(de,";\n display: flex;\n text-decoration: none;\n opacity: 1;\n position: relative;\n transition-duration: ").concat(oe.medium,";\n transition-timing-function: ").concat(ae.medium,";\n\n &:active,\n &:hover {\n outline: 0;\n }\n")),Dr=h("a")(Cr,e=>{let n=e.$isLoading,t=e.$contrast;return!n&&!t&&Pr},e=>{let n=e.$cardSize;return I(n)&&Sr},e=>"rtl"===e.$direction&&jr,e=>{let n=e.$backgroundColor,t=e.$color;return e.$contrast&&t&&n&&Or},e=>{let n=e.$backgroundColor,t=e.$color;return e.$contrast&&(!t||!n)&&Pr}),Mr=u((e,n)=>{let t=e.href,o=e.rel,a=void 0===o?"noopener noreferrer":o,i=e.target,c=void 0===i?"_blank":i,l=e.as,d=void 0===l?"a":l,u=r(e,hr);const m=p(he),f=m.state,g=f.$backgroundColor,h=f.color,b=f.title,v=m.props.size,y=u.contrast,w=u.direction,x=r(u,br);return s(Dr,zr(zr(zr({},"a"===d?{href:t,rel:a,target:c}:void 0),x),{},{$backgroundColor:g,$cardSize:v,$color:h,$contrast:y,$direction:w,ref:n,title:b}))});Mr.displayName="CardWrap";var _r,Nr;const Rr=["className","fetchData","lazy","loading","media","setData","url","apiKey"],Fr=["className","apiKey","autoPlay","controls","direction","lazy","loop","media","fetchData","muted","playsInline","size"];function Tr(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function Lr(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?Tr(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Tr(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}const Vr=n=>{const a=n.className,l=n.fetchData,s=n.lazy,u=n.loading,f=n.media,g=n.setData,h=n.url;n.apiKey;const b=r(n,Rr),v=i(()=>[].concat(f),[f]),w=p(he).updateState,x=d(!0),$=t(x,2),k=$[0],z=$[1],E=d(null),O=t(E,2),S=O[0],P=O[1],j=d(!1),C=t(j,2),D=C[0],M=C[1],L=i(()=>void 0===u,[u]),I=i(()=>V(Lr(Lr({},n),{},{media:v})),[v,n]),U=t(I,2),W=U[0],H=U[1],A=i(()=>B&&(!0===s||R(s)),[s]),X=i(()=>R(s)?s:void 0,[s]),K=((e,n)=>{const r=d(!1),o=t(r,2),a=o[0],i=o[1];return[a,c(r=>{if(e){const e=new IntersectionObserver((e,n)=>{let r=t(e,1)[0];r.isIntersecting&&(i(!0),n.unobserve(r.target))},n);null!==r&&e.observe(r)}else i(!0)},[e,n])]})(A,X),q=t(K,2),J=q[0],Q=q[1],Y=i(()=>!A||A&&J,[A,J]),Z=c(e=>{const n=N(g)?g(e):Lr(Lr({},e),g),t=n.title,r=n.description,o=n.url,a=n.video,i=n.audio,c=n.image,l=n.logo,s=n.iframe,d=c||l||{};let p,u,m=d,f=!1,h=!1;const b=((e,n)=>{let t;for(let r=0;r<n.length;r++){const o=n[r],a=e[o];if(!F(a)){t=o;break}}return t})(n,v);switch(b){case"audio":h=!0,u=T(i);break;case"video":f=!0,p=T(a);break;case"iframe":P(s);break;default:m=((e,n)=>e[n.find(n=>!F(e[n]))])(n,v)||d}const y=T(m),x=m,$=x.color,k=x.background_color;w({url:o,color:$,title:t,description:r,imageUrl:y,videoUrl:p,audioUrl:u,isVideo:f,isAudio:h,$backgroundColor:k}),z(!1)},[w,v,g]),ee=c(()=>{if(Y){z(!0);(l?y(W,H):Promise.resolve({})).then(e=>{let n=e.data;return Z(n)}).catch(e=>{z(!1),M(!0),console.error("\n┌───────────────┐\n│ Microlink SDK │\n└───────────────┘\n\n".concat(e.description,"\n\n").concat(JSON.stringify(e.data),"\n\nid ").concat(e.headers["x-request-id"],"\nuri ").concat(e.url,"\ncode ").concat(e.code," (").concat(e.statusCode,")\n\nmicrolink.io/").concat(e.code.toLowerCase(),"\n"))})}},[H,l,W,Z,Y]);m(ee,[h,g,J]);const ne=L?k:u;return D?o.createElement("a",e({href:h},b),h):S?(_||S.scripts.forEach(e=>{if(!document.querySelector('script[src="'.concat(e.src,'"]'))){const n=document.createElement("script");Object.keys(e).forEach(t=>n[t]=e[t]),document.body.appendChild(n)}}),o.createElement("div",e({className:G.iframe,dangerouslySetInnerHTML:{__html:S.html}},b))):o.createElement(Mr,e({className:"".concat(G.main," ").concat(a).trim(),href:h,$isLoading:ne,ref:Q},b),ne?_r||(_r=o.createElement(wn,null)):Nr||(Nr=o.createElement(o.Fragment,null,o.createElement(gr,null),o.createElement(Ve,null))))},Ir=n=>{let t=n.className,a=void 0===t?"":t,i=n.apiKey,c=void 0===i?void 0:i,l=n.autoPlay,s=void 0===l||l,d=n.controls,p=void 0===d||d,u=n.direction,m=void 0===u?"ltr":u,f=n.lazy,g=void 0===f||f,h=n.loop,b=void 0===h||h,v=n.media,y=void 0===v?["iframe","video","audio","image","logo"]:v,w=n.fetchData,x=void 0===w||w,$=n.muted,k=void 0===$||$,z=n.playsInline,E=void 0===z||z,O=n.size,S=void 0===O?"normal":O,P=r(n,Fr);return o.createElement(be,e({className:a,apiKey:c,autoPlay:s,controls:p,direction:m,lazy:g,loop:b,media:y,fetchData:x,muted:k,playsInline:E,size:S},P),e=>o.createElement(Vr,e))};export{Ir as default,V as getApiUrl,W as imageProxy};
//# sourceMappingURL=microlink.min.mjs.map