@microlink/vanilla/dist/microlink.min.mjs

Turn links into beautiful previews.

import React,{useContext,forwardRef,createElement,useRef,useMemo,useCallback,useLayoutEffect,useState,useEffect}from"react";import{css,styled,keyframes}from"styled-components";import{fetchFromApi,getApiUrl as getApiUrl$1}from"@microlink/mql";import{createRoot}from"react-dom";function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toPropertyKey(t){var i=function(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r);if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(e,r,t){return(r=toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _objectWithoutProperties(e,t){if(null==e)return{};var o,r,i=function(r,e){if(null==r)return{};var t={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==e.indexOf(n))continue;t[n]=r[n]}return t}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)o=n[r],-1===t.indexOf(o)&&{}.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}const _excluded$8=["accessibility","debounce","ellipsis","is","lines","text"];function ownKeys$4(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread$4(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys$4(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys$4(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}const i=_ref=>{let{accessibility:i=!0,debounce:u=300,ellipsis:c="…",is:o="div",lines:s=3,text:f}=_ref,d=_objectWithoutProperties(_ref,_excluded$8);const v=useRef(null),a=useRef("."),m=_objectSpread$4(_objectSpread$4({ref:v},i?{title:f}:{}),d),b=useMemo(()=>"string"==typeof f&&f.length>0,[f]),g=useCallback(()=>{if(!b)return;const t=t=>{a.current=t,null!=v.current&&(v.current.textContent=t)},e=()=>{var t,e;return null!==(e=null===(t=v.current)||void 0===t?void 0:t.clientHeight)&&void 0!==e?e:0};t(".");const r=(e()+1)*s+1;if(t(f),e()<=r)return;let n=0,l=0,i=f.length;for(;n<=i;)l=Math.floor((n+i)/2),t(f.slice(0,l).trim()+c),e()<=r?n=l+1:i=l-1;t(f.slice(0,l-1).trim()+c)},[c,b,s,f]);return useLayoutEffect(()=>{if(g(),null==v.current)return;const t=new ResizeObserver(((t,e)=>{let r;const n=()=>{r=void 0,t()};return()=>{const l=null==r;clearTimeout(r),r=setTimeout(n,e),l&&t()}})(g,u));return t.observe(v.current),()=>t.disconnect()},[g,u]),b?createElement(o,m,a.current):null};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,"default")?x.default:x}var hasRequiredIpv4,ipv4={exports:{}};var hasRequiredIpv6,src,hasRequiredSrc,ipv6={exports:{}};var isLocalAddress=getDefaultExportFromCjs(hasRequiredSrc?src:(hasRequiredSrc=1,src=hostname=>function(){if(hasRequiredIpv4)return ipv4.exports;hasRequiredIpv4=1;const regex=new RegExp(`^(${[/^(:{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(re=>re.source).join("|")})$`);return ipv4.exports=regex.test.bind(regex),ipv4.exports.regex=regex,ipv4.exports}()(hostname)||function(){if(hasRequiredIpv6)return ipv6.exports;hasRequiredIpv6=1;const regex=new RegExp(`^(${[/^\[(::1|::)\]$/].map(re=>re.source).join("|")})$`);return ipv6.exports=regex.test.bind(regex),ipv6.exports.regex=regex,ipv6.exports}()(hostname)));const isSSR="undefined"==typeof window,isFunction=fn=>"function"==typeof fn,isObject=obj=>"object"==typeof obj,isNil=value=>null==value,getUrlPath=data=>isObject(data)?data.url:data,media_mobile=function(){return css`
    @media (max-width: 48em) {
      ${css(...arguments)};
    }
  `},isLarge=cardSize=>"large"===cardSize,isSmall=cardSize=>"small"===cardSize,imageProxy=url=>isLocalAddress(new URL(url).hostname)?url:`https://images.weserv.nl/?${new URLSearchParams({url:url,default:url,l:9,af:"",il:"",n:-1}).toString()}`,isLazySupported=!isSSR&&"IntersectionObserver"in window,formatSeconds=secs=>{const secsToNum=parseInt(secs,10);return[Math.floor(secsToNum/3600),Math.floor(secsToNum/60)%60,secsToNum%60].filter((v,i)=>v>0||i>0).map(v=>v>=10?v:`0${v}`).join(":")},clampNumber=(num,min,max)=>{switch(!0){case num<=min:return min;case num>=max:return max;default:return num}},CONTROLS_BASE_CLASSNAME="microlink_card__media__controls",classNames={main:"microlink_card",content:"microlink_card__content",title:"microlink_card__content_title",description:"microlink_card__content_description",url:"microlink_card__content_url",mediaWrapper:"microlink_card__media_wrapper",media:"microlink_card__media",image:"microlink_card__media_image",videoWrapper:"microlink_card__media_video_wrapper",video:"microlink_card__media_video",audioWrapper:"microlink_card__media_audio_wrapper",audio:"microlink_card__media_audio",mediaControls:CONTROLS_BASE_CLASSNAME,playbackControl:`${CONTROLS_BASE_CLASSNAME}_playback`,volumeControl:`${CONTROLS_BASE_CLASSNAME}_volume`,rwControl:`${CONTROLS_BASE_CLASSNAME}_rewind`,ffwControl:`${CONTROLS_BASE_CLASSNAME}_fast_forward`,rateControl:`${CONTROLS_BASE_CLASSNAME}_rate`,progressBar:`${CONTROLS_BASE_CLASSNAME}_progress_bar`,progressTime:`${CONTROLS_BASE_CLASSNAME}_progress_time`,spinner:`${CONTROLS_BASE_CLASSNAME}_spinner`,iframe:"microlink_card__iframe"},_excluded$7=["$useNanoClamp","children"];function ownKeys$3(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread$3(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys$3(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys$3(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}const StyledClamp=styled(_ref=>{let{children:children,className:className,lines:lines}=_ref;return isNil(children)?null:React.createElement(i,{className:className,lines:lines,text:children,is:"p"})})`
  &&& {
    text-align: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    margin: 0;

    ${_ref2=>{let{$useNanoClamp:$useNanoClamp}=_ref2;return!$useNanoClamp&&css`
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      `}}
  }
`,CardText=_ref3=>{let{$useNanoClamp:$useNanoClamp=!0,children:children}=_ref3,props=_objectWithoutProperties(_ref3,_excluded$7);const textProps=$useNanoClamp?props:_objectSpread$3(_objectSpread$3({},props),{},{as:"p",title:children});return React.createElement(StyledClamp,_extends({$useNanoClamp:$useNanoClamp},textProps),children)},speed={short:"100ms",medium:"150ms",long:"300ms"},animation={short:"cubic-bezier(.25,.8,.25,1)",medium:"cubic-bezier(.25,.8,.25,1)",long:"cubic-bezier(.4, 0, .2, 1)"},createTransition=(properties,s)=>{const suffix=`${speed[s]} ${animation[s]}`;return properties.map(property=>`${property} ${suffix}`).join(", ")},transition_short=function(){for(var _len=arguments.length,properties=new Array(_len),_key=0;_key<_len;_key++)properties[_key]=arguments[_key];return createTransition(properties,"short")},transition_medium=function(){for(var _len2=arguments.length,properties=new Array(_len2),_key2=0;_key2<_len2;_key2++)properties[_key2]=arguments[_key2];return createTransition(properties,"medium")},transition_long=function(){for(var _len3=arguments.length,properties=new Array(_len3),_key3=0;_key3<_len3;_key3++)properties[_key3]=arguments[_key3];return createTransition(properties,"long")},font_sans="InterUI, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif",font_mono="'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",_excluded$6=["autoPlay","children","controls","loop","mediaRef","muted","playsInline","size"];function ownKeys$2(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread$2(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys$2(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys$2(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}const initialState={},GlobalContext=React.createContext(initialState),GlobalState=_ref=>{let{autoPlay:autoPlay,children:children,controls:controls,loop:loop,mediaRef:mediaRef,muted:muted,playsInline:playsInline,size:size}=_ref,rest=_objectWithoutProperties(_ref,_excluded$6);const[state,setState]=useState(initialState),updateState=useCallback(newState=>setState(currentState=>_objectSpread$2(_objectSpread$2({},currentState),newState)),[]),props=useMemo(()=>({autoPlay:autoPlay,controls:controls,loop:loop,mediaRef:mediaRef,muted:muted,playsInline:playsInline,size:size}),[autoPlay,controls,loop,mediaRef,muted,playsInline,size]),values=useMemo(()=>({props:props,state:state,updateState:updateState}),[props,state,updateState]);return React.createElement(GlobalContext.Provider,{value:values},children(rest))},REGEX_STRIP_WWW=/^www\./,mobileDescriptionStyle=css`
  ${media_mobile`
    > p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  `};
`,Content=styled("div").attrs({className:classNames.content})`
  display: flex;
  padding: 10px 15px;
  min-width: 0;
  box-sizing: border-box;
  ${_ref=>{let{$cardSize:$cardSize}=_ref;return css`
    flex: ${isLarge($cardSize)?"0 0 125px":1};
    justify-content: ${isSmall($cardSize)?"space-between":"space-around"};
    flex-direction: ${isSmall($cardSize)?"row":"column"};
    align-items: ${isSmall($cardSize)?"center":"stretch"};
  `}};
`,Header=styled("header").attrs({className:classNames.title})`
  text-align: left;
  font-weight: bold;
  margin: 0;
  width: 100%;
  ${_ref2=>{let{$cardSize:$cardSize}=_ref2;return css`
    flex-grow: ${isSmall($cardSize)?.8:1.2};
    font-size: ${isSmall($cardSize)?"15px":"16px"};

    ${isSmall($cardSize)&&css`
      min-width: 0;
      padding-right: 14px;
    `}
  `}}
`,Description=styled("div").attrs({className:classNames.description})`
  text-align: left;
  font-size: 14px;
  flex-grow: 2;
  margin: auto 0;
  line-height: 18px;
  font-weight: normal;
  ${_ref3=>{let{$cardSize:$cardSize}=_ref3;return!isLarge($cardSize)&&mobileDescriptionStyle}};
`,Footer=styled("footer").attrs({className:classNames.url})`
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  margin: 0;
  flex-grow: 0;
  font-weight: normal;
  ${_ref4=>{let{$cardSize:$cardSize}=_ref4;return css`
    font-size: ${isSmall($cardSize)?"10px":"12px"};
    ${!isSmall($cardSize)&&"width: 100%;"}
  `}};
`,Author=styled(CardText)`
  opacity: 0.75;
  transition: ${transition_medium("opacity")};
  will-change: opacity;

  .${classNames.main}:hover & {
    opacity: 1;
  }
`,PoweredBy=styled("span").attrs({title:"microlink.io"})`
  background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center
    center;
  display: block;
  margin-left: 15px;
  transition: ${transition_medium("filter","opacity")};
  will-change: filter, opacity;
  &:not(:hover) {
    filter: grayscale(100%);
    opacity: 0.75;
  }

  min-width: ${"16px"};
  width: ${"16px"};
  background-size: ${"16px"};
  height: ${"12px"};
`,CardContent=()=>{const{state:{description:description,title:title,url:url},props:{size:size}}=useContext(GlobalContext),isSmallCard=isSmall(size),formattedUrl=useMemo(()=>(href=>{if(isNil(href))return"";const{hostname:hostname}=new URL(href);return hostname.replace(REGEX_STRIP_WWW,"")})(url),[url]),handleOnClick=useCallback(e=>{e.preventDefault(),window.open("https://www.microlink.io","_blank")},[]);return React.createElement(Content,{$cardSize:size},React.createElement(Header,{$cardSize:size},React.createElement(CardText,{$useNanoClamp:!1},title)),!isSmallCard&&React.createElement(Description,{$cardSize:size},React.createElement(CardText,{lines:2},description)),React.createElement(Footer,{$cardSize:size},React.createElement(Author,{$useNanoClamp:!1},formattedUrl),React.createElement(PoweredBy,{onClick:handleOnClick})))},emptyStatePulse=keyframes`
  0% {
    background: #e1e8ed;
  }
  70% {
    background: #cdd4d8;
  }
  100% {
    background: #e1e8ed;
  }
`,emptyStateImagePulse=keyframes`
  0% {
    background: #e1e8ed;
  }
  70% {
    background: #dce3e8;
  }
  100% {
    background: #e1e8ed;
  }
`,emptyStateAnimation=css`
  animation: ${emptyStatePulse} .75s linear infinite;
`,emptyStateImageAnimation=css`
  animation: ${emptyStateImagePulse} 1.25s linear infinite;
`,ImageLoadCatcher=styled("img")`
  height: 1px;
  width: 1px;
  position: absolute;
  z-index: -1;
`,loadingOverlay=css`
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #e1e8ed;
    z-index: 1;
    transition: ${transition_medium("opacity","visibility")};
    will-change: opacity;

    ${_ref=>{let{$isLoading:$isLoading}=_ref;return css`
      opacity: ${$isLoading?1:0};
      visibility: ${$isLoading?"$visible":"hidden"};
    `}};
  }
`,mediaSizeStyles={small:css`
    flex: 0 0 48px;
  `,normal:css`
    flex: 0 0 125px;

    ${media_mobile`
      flex: 0 0 92px;
    `}
  `,large:css`
    flex: 1;

    &::before {
      padding-bottom: 0;
    }
  `},StyledWrap=styled("div")`
  background: transparent no-repeat center center / cover;
  display: block;
  overflow: hidden;
  height: auto;
  position: relative;

  &::before {
    content: '';
    padding-bottom: 100%;
    display: block;
  }

  ${_ref=>{let{$cardSize:$cardSize}=_ref;return mediaSizeStyles[$cardSize]}};

  ${loadingOverlay};
`,Wrap$1=props=>{const{props:{size:size}}=useContext(GlobalContext);return React.createElement(StyledWrap,_extends({$cardSize:size},props))},ImageWrap=styled(Wrap$1).attrs({className:`${classNames.media} ${classNames.image}`})`
  background-image: ${_ref=>{let{$url:$url}=_ref;return $url?`url('${imageProxy($url)}')`:""}};
`,ImageComponent=props=>{const{state:{imageUrl:imageUrl}}=useContext(GlobalContext);return React.createElement(ImageWrap,_extends({$url:imageUrl},props))};var _FooterEmpty;const MediaEmpty=styled(ImageComponent)`
  ${emptyStateImageAnimation};
`,HeaderEmpty=styled("span")`
  opacity: 0.8;
  height: 16px;
  width: ${_ref=>{let{$cardSize:$cardSize}=_ref;return isSmall($cardSize)?"75%":"60%"}};
  display: block;
  background: #e1e8ed;
  margin: ${_ref2=>{let{$cardSize:$cardSize}=_ref2;return isSmall($cardSize)?"0 20px 0 0":"2px 0 8px"}};
  ${emptyStateAnimation};

  ${_ref3=>{let{$cardSize:$cardSize}=_ref3;return!isLarge($cardSize)&&"\n    height: 15px;\n  "}};
`,DescriptionEmpty=styled("span")`
  opacity: 0.8;
  height: 14px;
  width: 95%;
  display: block;
  position: relative;
  ${emptyStateAnimation};
  animation-delay: 0.125s;
`,FooterEmpty=styled("span")`
  opacity: 0.8;
  height: 12px;
  width: 30%;
  display: block;
  ${emptyStateAnimation} animation-delay: .25s;

  ${_ref4=>{let{$cardSize:$cardSize}=_ref4;return!isLarge($cardSize)&&"\n    height: 10px;\n  "}};
`,CardEmptyState=()=>{const{props:{size:size}}=useContext(GlobalContext),isSmallCard=isSmall(size);return React.createElement(React.Fragment,null,React.createElement(MediaEmpty,{$cardSize:size}),React.createElement(Content,{$cardSize:size},React.createElement(HeaderEmpty,{$cardSize:size}),isSmallCard?null:React.createElement(React.Fragment,null,React.createElement(DescriptionEmpty,{$cardSize:size}),React.createElement(DescriptionEmpty,{$cardSize:size,style:{marginBottom:"12px"}})),_FooterEmpty||(_FooterEmpty=React.createElement(FooterEmpty,null))))},MediaButton=styled("div")`
  backface-visibility: hidden;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: ${transition_short("transform")};
  will-change: transform;

  > svg {
    display: block;
  }

  &:active:not(:focus) {
    transform: scale(0.9);
  }
`;var _path$2,_path2$2;const VolumeMute=props=>React.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14"},props),_path$2||(_path$2=React.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)"}))),VolumeUp=props=>React.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14"},props),_path2$2||(_path2$2=React.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)"}))),BottomControls=styled("div")`
  z-index: 2;
  position: absolute;
  bottom: ${_ref=>{let{$cardSize:$cardSize}=_ref;return isLarge($cardSize)?18:14}}px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: ${transition_medium("opacity")};
  will-change: opacity;
`,VolumeIcon=styled("svg")`
  stroke: #fff;
`,VolumeButton=styled(MediaButton).attrs({className:classNames.volumeControl})`
  ${VolumeIcon} {
    width: ${_ref2=>{let{$cardSize:$cardSize}=_ref2;return isLarge($cardSize)?16:14}}px;
    height: ${_ref3=>{let{$cardSize:$cardSize}=_ref3;return isLarge($cardSize)?16:14}}px;

    ${_ref4=>{let{$cardSize:$cardSize}=_ref4;return!isLarge($cardSize)&&media_mobile`
      width: 12px;
      height: 12px;
    `}}
  }
`,PlaybackRateButton=styled(MediaButton).attrs({className:classNames.rateControl})`
  font-size: ${_ref5=>{let{$cardSize:$cardSize}=_ref5;return isLarge($cardSize)?12:10}}px;
  min-width: ${_ref6=>{let{$cardSize:$cardSize}=_ref6;return isLarge($cardSize)?33:28}}px;
  line-height: 1;
  font-weight: bold;
  border: 1.5px solid #fff;
  border-radius: 9999px;
  padding: 1px 5px;
  text-align: center;
  color: #fff;
  margin-left: 10px;

  ${_ref7=>{let{$cardSize:$cardSize}=_ref7;return!isLarge($cardSize)&&media_mobile`
    font-size: 8px;
    margin-left: 8px;
    min-width: 23px;
  `}}
`,TimeLabel=styled("span").attrs({className:classNames.progressTime})`
  margin: ${_ref8=>{let{$right:$right}=_ref8;return $right?"0 0 0 auto":"0 auto 0 0"}};
  font-family: ${font_mono};
  font-size: 12px;
  padding: 0 16px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
`,FooterControls=_ref9=>{let{$cardSize:$cardSize,currentTime:currentTime,endTime:endTime,isMuted:isMuted,onMuteClick:onMuteClick,onPlaybackRateClick:onPlaybackRateClick,playbackRate:playbackRate}=_ref9;const VolumeComponent=useMemo(()=>isMuted?VolumeMute:VolumeUp,[isMuted]),isLargeCard=useMemo(()=>isLarge($cardSize),[$cardSize]);return React.createElement(BottomControls,{$cardSize:$cardSize},isLargeCard&&React.createElement(TimeLabel,null,currentTime),React.createElement(VolumeButton,{title:isMuted?"Unmute":"Mute",$cardSize:$cardSize,onClick:onMuteClick},React.createElement(VolumeIcon,{as:VolumeComponent})),React.createElement(PlaybackRateButton,{title:"Playback Rate",$cardSize:$cardSize,onClick:onPlaybackRateClick},React.createElement("span",null,playbackRate,"x")),isLargeCard&&React.createElement(TimeLabel,{$right:!0},endTime))},_excluded$5=["$isPlaying"];var _path$1,_path2$1;const Pause=props=>React.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 20"},props),_path$1||(_path$1=React.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)"}))),Play=props=>React.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 21 24"},props),_path2$1||(_path2$1=React.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)"}))),iconSizes={large:"50px",normal:"35px",small:"20px"},PlaybackIcon=styled("svg")`
  stroke: #fff;
`,PlaybackButtonWrap=styled(MediaButton).attrs({className:classNames.playbackControl})`
  ${PlaybackIcon} {
    ${_ref=>{let{$cardSize:$cardSize}=_ref;return css`
      width: ${iconSizes[$cardSize]};
      height: ${iconSizes[$cardSize]};
      padding: ${isLarge($cardSize)?0:"8px"};

      ${!isLarge($cardSize)&&!isSmall($cardSize)&&media_mobile`
        width: calc(${iconSizes.small} * 1.2);
        height: calc(${iconSizes.small} * 1.2);
      `}
    `}}
  }
`,PlaybackButton=_ref2=>{let{$isPlaying:$isPlaying}=_ref2,props=_objectWithoutProperties(_ref2,_excluded$5);const PlaybackComponent=useMemo(()=>$isPlaying?Pause:Play,[$isPlaying]);return React.createElement(PlaybackButtonWrap,_extends({title:$isPlaying?"Pause":"Play"},props),React.createElement(PlaybackIcon,{as:PlaybackComponent}))},scrubberSizeScales={normal:.8,small:.9},Scrubber=styled("div").attrs(_ref=>{let{$isVisible:$isVisible,$positionX:$positionX}=_ref;return{style:{left:$positionX,transform:`scale(${$isVisible?1:.5}) translate(-50%, -50%)`,opacity:$isVisible?1:0,visibility:$isVisible?"$visible":"hidden"}}})`
  position: absolute;
  top: 50%;
  background: #ffffff;
  border-radius: 50%;
  transform-origin: center center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: ${transition_short("transform","opacity","visibility")};
  will-change: left, transform, opacity, visibility;
  backface-visibility: hidden;
  z-index: 3;

  ${_ref2=>{let{$cardSize:$cardSize}=_ref2;const scrubberSize=(size=$cardSize,Math.floor(12*(scrubberSizeScales[size]||1)));var size;return css`
      height: ${scrubberSize}px;
      width: ${scrubberSize}px;
    `}}
`,_excluded$4=["$isDragging","$isVisible","label","$positionX","size"],sizeScales$1={normal:.8},TooltipBase=styled("span").attrs(_ref=>{let{$position:$position,$isDragging:$isDragging,$visible:$visible}=_ref;return{style:{left:`${$position}px`,top:$visible?"-4px":"0px",visibility:$visible?"$visible":"hidden",opacity:$visible?1:0,transform:`translate(-50%, ${$isDragging?-110:-100}%)`}}})`
  position: absolute;
  background: rgba(24, 25, 25, 0.75);
  color: #fff;
  text-shadow: 0 1px 2px rgba(24, 25, 25, 0.15);
  padding: 2px 3px;
  border-radius: 4px;
  font-family: ${font_mono};
  font-size: ${_ref2=>{let{$cardSize:$cardSize}=_ref2;return 11*(sizeScales$1[$cardSize]||1)}}px;
  line-height: 1;
  transition: ${transition_medium("opacity","visibility","transform")},
    ${transition_long("top")};
  will-change: top, left, visibility, opacity, transform;
  backface-visibility: hidden;
`,Tooltip=forwardRef((_ref3,ref)=>{let{$isDragging:$isDragging,$isVisible:$isVisible,label:label,$positionX:$positionX,size:size}=_ref3,props=_objectWithoutProperties(_ref3,_excluded$4);return React.createElement(React.Fragment,null,React.createElement(TooltipBase,_extends({$visible:$isVisible,$position:$positionX,$cardSize:size,ref:ref,$isDragging:$isDragging},props),label))});Tooltip.displayName="Tooltip";const _excluded$3=["key"],heightScales={normal:.7,small:.6},activeHeightScales={small:.9,large:1.4},getProgressBarActiveHeight=size=>Math.floor(6*(activeHeightScales[size]||1)),OuterWrap$1=styled("div").attrs(()=>({className:classNames.progressBar}))`
  position: relative;
  padding: ${6}px ${3}px ${3}px;
  z-index: 2;
  backface-visibility: hidden;
`,BarsWrap=styled("div").attrs(_ref=>{let{$cardSize:$cardSize,$isDragging:$isDragging}=_ref;if($isDragging){return{style:{height:`${getProgressBarActiveHeight($cardSize)}px`}}}return{}})`
  background: transparent;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.15);
  transition: ${transition_short("height")};
  will-change: height;
  pointer-events: none;
  position: relative;

  ${_ref2=>{let{$cardSize:$cardSize}=_ref2;const height=(size=$cardSize,Math.floor(6*(heightScales[size]||1)));var size;const activeHeight=getProgressBarActiveHeight($cardSize);return css`
      height: ${height}px;

      ${OuterWrap$1}:hover & {
        height: ${activeHeight}px;
      }
    `}}
`,ProgressLine=styled("div")`
  border-radius: inherit;
  height: 100%;
  position: relative;
  overflow: hidden;
`,ProgressMask=styled("div").attrs(_ref3=>{let{$maskScale:$maskScale}=_ref3;return{style:{transform:`scaleX(${$maskScale})`}}})`
  position: absolute;
  left: 0;
  top: -50%;
  height: 200%;
  width: 100%;
  background: #ffffff;
  transform-origin: left center;
  will-change: transform;
`,ProgressHover=styled("div").attrs(_ref4=>{let{$cursorRatio:$cursorRatio,$isHovering:$isHovering,$progressPercent:$progressPercent}=_ref4;return{style:{left:$progressPercent,transform:`scaleX(${$cursorRatio})`,opacity:$isHovering?1:0,visibility:$isHovering?"$visible":"hidden"}}})`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  transform-origin: left center;
  transition: ${transition_short("opacity","visibility")};
  will-change: left, transform, opacity, $visible;
`,BufferedChunk=styled("div").attrs(_ref5=>{let{start:start,end:end}=_ref5;return{style:{left:`${start}px`,right:`${end}px`}}})`
  background: rgba(255, 255, 255, 0.35);
  position: absolute;
  top: 0;
  bottom: 0;
`,ProgressBar=_ref6=>{let{bufferedMedia:bufferedMedia,cursorX:cursorX,duration:duration,hoveredTime:hoveredTime,$isDragging:$isDragging,$isHovering:$isHovering,onClick:onClick,onMouseDown:onMouseDown,onMouseOver:onMouseOver,progress:progress,showTooltip:showTooltip}=_ref6;const{props:{size:size}}=useContext(GlobalContext),wrapRef=useRef(),tooltipRef=useRef(),isSmallCard=useMemo(()=>isSmall(size),[size]),getWrapWidth=useCallback(()=>wrapRef.current?wrapRef.current.getBoundingClientRect().width-6:0,[]),progressRatio=useMemo(()=>clampNumber(progress/duration,0,1),[duration,progress]),$progressPercent=useMemo(()=>`${clampNumber(100*progressRatio,1,99)}%`,[progressRatio]),$cursorRatio=useMemo(()=>{if(wrapRef.current){const wrapWidth=getWrapWidth(),startPoint=progressRatio*wrapWidth,cursorPosition=cursorX-startPoint;if(cursorPosition>0)return clampNumber((cursorPosition/(wrapWidth-startPoint)).toFixed(3),0,.99)}return 0},[cursorX,getWrapWidth,progressRatio]),bufferedMediaChunks=useMemo(()=>{const wrapWidth=getWrapWidth();return bufferedMedia.map((chunk,key)=>({key:key,start:chunk.start*wrapWidth,end:wrapWidth-chunk.end*wrapWidth}))},[bufferedMedia,getWrapWidth]),tooltipLabel=useMemo(()=>formatSeconds(hoveredTime),[hoveredTime]),tooltipPositionX=useMemo(()=>{if(wrapRef.current&&tooltipRef.current){const wrapWidth=getWrapWidth(),tooltipHalf=tooltipRef.current.getBoundingClientRect().width/2;return clampNumber(cursorX,tooltipHalf,wrapWidth-tooltipHalf)}return 0},[cursorX,getWrapWidth]),mouseEvents=useMemo(()=>({onClick:onClick,onMouseDown:onMouseDown,onMouseOver:onMouseOver}),[onClick,onMouseDown,onMouseOver]),showAccessories=useMemo(()=>$isDragging||$isHovering,[$isDragging,$isHovering]);return React.createElement(OuterWrap$1,_extends({$cardSize:size,ref:wrapRef},mouseEvents),React.createElement(BarsWrap,{$cardSize:size,$isDragging:$isDragging},React.createElement(ProgressLine,null,React.createElement(ProgressHover,{$cursorRatio:$cursorRatio,$isHovering:$isHovering,$progressPercent:$progressPercent}),bufferedMediaChunks.map(_ref7=>{let{key:key}=_ref7,chunk=_objectWithoutProperties(_ref7,_excluded$3);return React.createElement(BufferedChunk,_extends({key:key},chunk))}),React.createElement(ProgressMask,{$maskScale:progressRatio})),React.createElement(Scrubber,{$cardSize:size,$isVisible:showAccessories,$positionX:$progressPercent}),!isSmallCard&&React.createElement(Tooltip,{$isDragging:$isDragging,$isVisible:showAccessories,label:tooltipLabel,$positionX:tooltipPositionX,ref:tooltipRef,size:size})))};var _path,_path2;const _excluded$2=["$cardSize"],_excluded2$2=["$cardSize"],_excluded3=["type","$cardSize"],Backward=_ref=>{let{$cardSize:$cardSize}=_ref,props=_objectWithoutProperties(_ref,_excluded$2);return React.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 29"},props),_path||(_path=React.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)"})))},Forward=_ref2=>{let{$cardSize:$cardSize}=_ref2,props=_objectWithoutProperties(_ref2,_excluded2$2);return React.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 29"},props),_path2||(_path2=React.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)"})))},SeekIcon=styled("svg")`
  stroke: #fff;
  width: ${_ref3=>{let{$cardSize:$cardSize}=_ref3;return isLarge($cardSize)?30:24}}px;
  height: ${_ref4=>{let{$cardSize:$cardSize}=_ref4;return isLarge($cardSize)?30:24}}px;

  ${_ref5=>{let{$cardSize:$cardSize}=_ref5;return!isLarge($cardSize)&&media_mobile`
    width: 0;
    height: 0;
  `}}
`,SeekButtonWrap=styled(MediaButton)`
  margin: 0 ${_ref6=>{let{$cardSize:$cardSize}=_ref6;return isLarge($cardSize)?"28px":"3px"}};
`,SeekButton=_ref7=>{let{type:type="rewind",$cardSize:$cardSize}=_ref7,props=_objectWithoutProperties(_ref7,_excluded3);const IconComponent=useMemo(()=>"rewind"===type?Backward:Forward,[type]);return React.createElement(SeekButtonWrap,_extends({title:"rewind"===type?"Rewind":"Forward",$cardSize:$cardSize},props),React.createElement(SeekIcon,{as:IconComponent,$cardSize:$cardSize}))};var _Svg;const offsetScales={normal:.8,small:.6},sizeScales={normal:.9,small:.8},rotate=keyframes`
  100% {
    transform: rotate(360deg);
  }
`,dash=keyframes`
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
`,Wrap=styled(MediaButton).attrs(_ref=>{let{$isVisible:$isVisible}=_ref;return{style:{opacity:$isVisible?1:0,visibility:$isVisible?"$visible":"hidden"}}})(_ref2=>{let{$cardSize:$cardSize}=_ref2;const size=`${(size=>Math.floor(12*(sizeScales[size]||1)))($cardSize)}px`,offset=`${(size=>Math.floor(6*(offsetScales[size]||1)))($cardSize)}px`;return css`
    position: absolute;
    width: ${size};
    right: ${offset};
    top: ${offset};
    transition: ${transition_medium("opacity","visibility")};
    will-change: opacity, visibility;
    pointer-events: none;
  `}),Svg=styled("svg")`
  width: 100%;
  animation: ${rotate} 2s linear infinite;
  will-change: transform;
`,Circle=styled("circle")`
  stroke: #fff;
  stroke-linecap: round;
  stroke-width: 7;
  fill: none;
  animation: ${dash} 1.5s ease-in-out infinite;
  will-change: stroke-dasharray, stroke-dashoffset;
`,Spinner=_ref3=>{let{size:size,$isVisible:$isVisible}=_ref3;return React.createElement(Wrap,{$cardSize:size,className:classNames.spinner,$isVisible:$isVisible},_Svg||(_Svg=React.createElement(Svg,{viewBox:"0 0 50 50"},React.createElement(Circle,{cx:"25",cy:"25",r:"20"}))))},SPACE_KEY=32,L_ARROW_KEY=37,R_ARROW_KEY=39,M_KEY=77,OuterWrap=styled("div").attrs({className:classNames.mediaControls})`
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: ${transition_long("background")}, ${transition_medium("opacity")};
  will-change: background;
  display: flex;
  flex-direction: column;
  pointer-events: auto;

  ${_ref=>{let{$hasInteracted:$hasInteracted,$isDragging:$isDragging,$isPlaying:$isPlaying}=_ref;const bg="rgba(0, 0, 0, 0.35)",isPaused=$hasInteracted&&!$isPlaying;return css`
      .${classNames.main}:hover & {
        background: ${$isDragging?"rgba(0, 0, 0, 0.2)":bg};
      }

      .${classNames.main}:not(:hover) & {
        opacity: ${!$hasInteracted||isPaused?1:0};
        ${isPaused&&`background: ${bg}`};
      }
    `}}
`,InnerWrap=styled("div")`
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
`,ControlsTop=styled("div")`
  flex: 1;

  ${_ref2=>{let{$isVisible:$isVisible}=_ref2;return!$isVisible&&css`
      *[class*='${classNames.mediaControls}']:not(.${classNames.progressTime}) {
        transition: ${transition_medium("opacity","visibility")};
        opacity: 0;
        visibility: hidden;
      }
    `}}
`,Controls=_ref3=>{let{MediaComponent:MediaComponent,mediaProps:mediaProps}=_ref3;const{props:{autoPlay:autoPlay,controls:controls,mediaRef:propRef,muted:muted,loop:loop,size:size}}=useContext(GlobalContext),[duration,setDuration]=useState(0),[progress,setProgress]=useState(0),[buffered,setBuffered]=useState([]),[cursorX,setCursorX]=useState(0),[hoveredTime,setHoveredTime]=useState(0),[$isPlaying,setIsPlaying]=useState(autoPlay),[isMuted,setIsMuted]=useState(muted),[isBuffering,setIsBuffering]=useState(!1),[$isHovering,setIsHovering]=useState(!1),[$isDragging,setIsDragging]=useState(!1),[playbackRate,setPlaybackRate]=useState(1),[$hasInteracted,setHasInteracted]=useState(autoPlay),[pausedByDrag,setPausedByDrag]=useState(!1),mediaRef=useRef(),setRefs=useCallback(node=>{mediaRef.current=node,propRef&&(isFunction(propRef)?propRef(node):propRef.current=node)},[propRef]),isNotSmall=useMemo(()=>!isSmall(size),[size]),mediaEvents=useMemo(()=>({onCanPlay:()=>setIsBuffering(!1),onLoadedMetadata:e=>setDuration(e.currentTarget.duration),onPause:()=>setIsPlaying(!1),onPlay:()=>setIsPlaying(!0),onPlaying:()=>setIsBuffering(!1),onProgress:e=>setBuffered(e.currentTarget.buffered),onRateChange:e=>setPlaybackRate(e.currentTarget.playbackRate),onTimeUpdate:e=>setProgress(e.currentTarget.currentTime),onVolumeChange:e=>setIsMuted(e.currentTarget.muted),onWaiting:e=>setIsBuffering(!0)}),[]),evaluateCursorPosition=useCallback(event=>{if(mediaRef.current){const bounds=event.currentTarget.getBoundingClientRect(),cursor=clampNumber(Math.floor(event.clientX-bounds.left),0,bounds.width);return{cursor:cursor,time:cursor/bounds.width*mediaRef.current.duration}}return{cursor:0,time:0}},[]),togglePlayback=useCallback(()=>{mediaRef.current&&(mediaRef.current.paused?($hasInteracted||setHasInteracted(!0),mediaRef.current.play()):mediaRef.current.pause())},[$hasInteracted]),jumpTo=useCallback(time=>{if(mediaRef.current){const t=clampNumber(time,0,mediaRef.current.duration);mediaRef.current.currentTime=t,setProgress(t)}},[]),onSeekClick=useCallback((event,type)=>{if(event.preventDefault(),event.stopPropagation(),mediaRef.current){const{currentTime:currentTime}=mediaRef.current;jumpTo("rewind"===type?currentTime-10:currentTime+30)}},[jumpTo]),onMuteClick=useCallback(event=>{event.preventDefault(),event.stopPropagation(),mediaRef.current&&(mediaRef.current.muted=!mediaRef.current.muted)},[]),onPlaybackRateClick=useCallback(event=>{event.preventDefault(),event.stopPropagation(),mediaRef.current&&(mediaRef.current.playbackRate=(rate=>{switch(rate){case 1:return 1.25;case 1.25:return 1.5;case 1.5:return 2;default:return 1}})(mediaRef.current.playbackRate))},[]),onProgressBarClick=useCallback(event=>{event.preventDefault(),event.stopPropagation(),setIsDragging(!1)},[]),onProgressBarMouseDown=useCallback(event=>{event.preventDefault(),event.stopPropagation(),setIsDragging(!0);const{time:time}=evaluateCursorPosition(event);jumpTo(time)},[evaluateCursorPosition,jumpTo]),onProgressBarMouseOver=useCallback(()=>setIsHovering(!0),[]),onWrapClick=useCallback(event=>{event.preventDefault(),event.stopPropagation(),$isDragging?setIsDragging(!1):togglePlayback()},[$isDragging,togglePlayback]),onWrapMouseMove=useCallback(event=>{if(($isDragging||$isHovering)&&mediaRef.current){event.preventDefault();const{cursor:cursor,time:time}=evaluateCursorPosition(event);setHoveredTime(time),setCursorX(cursor),$isDragging&&(mediaRef.current.paused||(mediaRef.current.pause(),setPausedByDrag(!0)),jumpTo(time))}},[evaluateCursorPosition,$isDragging,$isHovering,jumpTo]),onWrapMouseOver=useCallback(event=>{$isDragging&&0===event.buttons&&setIsDragging(!1)},[$isDragging]),onWrapKeyDown=useCallback(event=>{if($isDragging)return;const{keyCode:keyCode}=event;if([SPACE_KEY,L_ARROW_KEY,R_ARROW_KEY,M_KEY].includes(keyCode)&&mediaRef.current)switch(event.preventDefault(),keyCode){case SPACE_KEY:togglePlayback();break;case L_ARROW_KEY:jumpTo(mediaRef.current.currentTime-5);break;case R_ARROW_KEY:jumpTo(mediaRef.current.currentTime+5);break;case M_KEY:mediaRef.current.muted=!mediaRef.current.muted}},[$isDragging,jumpTo,togglePlayback]),outerWrapEvents=useMemo(()=>({onClick:onWrapClick,onKeyDown:onWrapKeyDown,onMouseMove:onWrapMouseMove,onMouseOut:()=>setIsHovering(!1),onMouseOver:onWrapMouseOver}),[onWrapClick,onWrapKeyDown,onWrapMouseMove,onWrapMouseOver]),outerWrapTitle=useMemo(()=>$hasInteracted?{title:""}:{},[$hasInteracted]),bufferedMedia=useMemo(()=>buffered&&buffered.length&&mediaRef.current?[...Array(buffered.length).keys()].map(index=>({start:buffered.start(index)/mediaRef.current.duration,end:buffered.end(index)/mediaRef.current.duration})):[],[buffered]),currentTime=useMemo(()=>formatSeconds(progress||0),[progress]),endTime=useMemo(()=>formatSeconds(duration||0),[duration]),footerControlsProps=useMemo(()=>({$cardSize:size,currentTime:currentTime,endTime:endTime,isMuted:isMuted,onMuteClick:onMuteClick,onPlaybackRateClick:onPlaybackRateClick,playbackRate:playbackRate}),[currentTime,endTime,isMuted,onMuteClick,onPlaybackRateClick,playbackRate,size]),progressBarProps=useMemo(()=>({bufferedMedia:bufferedMedia,cursorX:cursorX,duration:duration,hoveredTime:hoveredTime,$isDragging:$isDragging,$isHovering:$isHovering,onClick:onProgressBarClick,onMouseDown:onProgressBarMouseDown,onMouseOver:onProgressBarMouseOver,progress:progress,showTooltip:$isDragging||$isHovering}),[bufferedMedia,cursorX,duration,hoveredTime,$isDragging,$isHovering,onProgressBarClick,onProgressBarMouseDown,onProgressBarMouseOver,progress]);return useEffect(()=>{!$isDragging&&pausedByDrag&&mediaRef.current&&mediaRef.current.paused&&(mediaRef.current.play(),setPausedByDrag(!1))},[pausedByDrag,$isDragging]),React.createElement(React.Fragment,null,React.createElement(MediaComponent,_extends({},mediaProps,mediaEvents,{ref:setRefs,autoPlay:autoPlay,loop:loop,muted:muted})),controls&&React.createElement(OuterWrap,_extends({},outerWrapTitle,{tabIndex:0,$hasInteracted:$hasInteracted,$isDragging:$isDragging,$isPlaying:$isPlaying},outerWrapEvents),React.createElement(Spinner,{size:size,$isVisible:isBuffering}),$hasInteracted?React.createElement(React.Fragment,null,React.createElement(ControlsTop,{$isVisible:!$isDragging},React.createElement(InnerWrap,null,isNotSmall&&React.createElement(SeekButton,{className:classNames.rwControl,type:"rewind",$cardSize:size,onClick:event=>onSeekClick(event,"rewind")}),React.createElement(PlaybackButton,{$cardSize:size,$isPlaying:$isPlaying}),isNotSmall&&React.createElement(SeekButton,{className:classNames.ffwControl,type:"fastforward",$cardSize:size,onClick:event=>onSeekClick(event,"fastforward")})),isNotSmall&&React.createElement(FooterControls,footerControlsProps)),React.createElement(ProgressBar,progressBarProps)):React.createElement(InnerWrap,null,React.createElement(PlaybackButton,{$cardSize:size}))))},VideoDOM=styled("video")`
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  &::media-controls-start-playback-button {
    display: none;
    appearance: none;
  }
`,MEDIA_COMPONENT={video:props=>{const{state:{imageUrl:imageUrl,playsInline:playsInline,videoUrl:videoUrl}}=useContext(GlobalContext),mediaProps=useMemo(()=>{const mediaProps={className:`${classNames.media} ${classNames.video}`,src:videoUrl,playsInline:playsInline};return imageUrl&&(mediaProps.poster=imageProxy(imageUrl)),mediaProps},[imageUrl,playsInline,videoUrl]);return React.createElement(Wrap$1,_extends({className:`${classNames.mediaWrapper} ${classNames.videoWrapper}`},props),React.createElement(Controls,{MediaComponent:VideoDOM,mediaProps:mediaProps}))},image:ImageComponent,audio:props=>{const{state:{audioUrl:audioUrl}}=useContext(GlobalContext),mediaProps=useMemo(()=>({className:`${classNames.media} ${classNames.audio}`,src:audioUrl}),[audioUrl]);return React.createElement(ImageComponent,_extends({className:`${classNames.mediaWrapper} ${classNames.audioWrapper}`},props),React.createElement(Controls,{MediaComponent:"audio",mediaProps:mediaProps}))}},CardMedia=()=>{const{state:{imageUrl:imageUrl,isAudio:isAudio,isVideo:isVideo}}=useContext(GlobalContext),[isLoading,setIsLoading]=useState(null!==getUrlPath(imageUrl));const mediaType=((isAudio,isVideo)=>isAudio?"audio":isVideo?"video":"image")(isAudio,isVideo),MediaComponent=MEDIA_COMPONENT[mediaType];return React.createElement(React.Fragment,null,React.createElement(MediaComponent,{$isLoading:isLoading}),isLoading&&React.createElement(ImageLoadCatcher,{src:imageUrl,onLoad:()=>setIsLoading(!1)}))},_excluded$1=["href","rel","target","as"],_excluded2$1=["contrast","direction"];function ownKeys$1(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread$1(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys$1(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys$1(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}const contrastStyle=_ref=>{let{$backgroundColor:$backgroundColor,$color:$color}=_ref;return css`
  background-color: ${$backgroundColor};
  border-color: ${$color};
  transition-property: filter;
  will-change: filter;

  &&& {
    color: ${$color};
  }

  &:hover {
    filter: brightness(90%);
  }
`},largeStyle=css`
  flex-direction: column;
  height: ${"382px"};
  ${media_mobile`
    height: calc(${"382px"} * 7/9);
  `};
`,hoverStyle=css`
  transition-property: background, border-color;
  will-change: background, border-color;
  &:hover {
    background-color: var(--microlink-hover-background-color, #f5f8fa);
    border-color: var(--microlink-hover-border-color, #8899a680);
  }
`,rtlStyle=_ref2=>{let{$cardSize:$cardSize}=_ref2;return css`
  flex-direction: ${isLarge($cardSize)?"column-reverse":"row-reverse"};
`},baseStyle=css(()=>`\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: ${font_sans};\n  display: flex;\n  text-decoration: none;\n  opacity: 1;\n  position: relative;\n  transition-duration: ${speed.medium};\n  transition-timing-function: ${animation.medium};\n\n  &:active,\n  &:hover {\n    outline: 0;\n  }\n`),Element=styled("a")(baseStyle,_ref3=>{let{$isLoading:$isLoading,$contrast:$contrast}=_ref3;return!$isLoading&&!$contrast&&hoverStyle},_ref4=>{let{$cardSize:$cardSize}=_ref4;return isLarge($cardSize)&&largeStyle},_ref5=>{let{$direction:$direction}=_ref5;return"rtl"===$direction&&rtlStyle},_ref6=>{let{$backgroundColor:$backgroundColor,$color:$color,$contrast:$contrast}=_ref6;return $contrast&&$color&&$backgroundColor&&contrastStyle},_ref7=>{let{$backgroundColor:$backgroundColor,$color:$color,$contrast:$contrast}=_ref7;return $contrast&&(!$color||!$backgroundColor)&&hoverStyle}),CardWrap=forwardRef((_ref8,ref)=>{let{href:href,rel:rel="noopener noreferrer",target:target="_blank",as:as="a"}=_ref8,restProps=_objectWithoutProperties(_ref8,_excluded$1);const{state:{$backgroundColor:$backgroundColor,color:$color,title:title},props:{size:$cardSize}}=useContext(GlobalContext),{contrast:$contrast,direction:$direction}=restProps,props=_objectWithoutProperties(restProps,_excluded2$1);return createElement(Element,_objectSpread$1(_objectSpread$1(_objectSpread$1({},"a"===as?{href:href,rel:rel,target:target}:void 0),props),{},{$backgroundColor:$backgroundColor,$cardSize:$cardSize,$color:$color,$contrast:$contrast,$direction:$direction,ref:ref,title:title}))});CardWrap.displayName="CardWrap";var _CardEmpty,_Fragment;const _excluded=["className","fetchData","lazy","loading","media","setData","url","apiKey"],_excluded2=["className","apiKey","autoPlay","controls","direction","lazy","loop","media","fetchData","muted","playsInline","size"];function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}const Card=props=>{const{className:className,fetchData:fetchData,lazy:lazy,loading:loading,media:mediaProp,setData:setData,url:url,apiKey:apiKey}=props,restProps=_objectWithoutProperties(props,_excluded),mediaProps=useMemo(()=>[].concat(mediaProp),[mediaProp]),{updateState:updateState}=useContext(GlobalContext),[loadingState,setLoading]=useState(!0),[iframeMedia,setIframeMedia]=useState(null),[isError,setIsError]=useState(!1),isLoadingUndefined=useMemo(()=>void 0===loading,[loading]),[apiUrl,apiUrlProps]=useMemo(()=>(_ref=>{let{apiKey:apiKey,contrast:contrast=!1,data:data,endpoint:endpoint,force:force,headers:headers,media:media,prerender:prerender,proxy:proxy,ttl:ttl,url:url}=_ref;return getApiUrl$1(url,{apiKey:apiKey,audio:media.includes("audio"),data:data,endpoint:endpoint,force:force,headers:headers,iframe:media.includes("iframe"),palette:contrast,prerender:prerender,proxy:proxy,screenshot:media.includes("screenshot"),ttl:ttl,video:media.includes("video")})})(_objectSpread(_objectSpread({},props),{},{media:mediaProps})),[mediaProps,props]),isLazyEnabled=u