@microlink/vanilla
Version:
Turn links into beautiful previews.
489 lines (462 loc) • 56.1 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),styledComponents=require("styled-components"),mql=require("@microlink/mql"),reactDom=require("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=React.useRef(null),a=React.useRef("."),m=_objectSpread$4(_objectSpread$4({ref:v},i?{title:f}:{}),d),b=React.useMemo(()=>"string"==typeof f&&f.length>0,[f]),g=React.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 React.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?React.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 styledComponents.css`
@media (max-width: 48em) {
${styledComponents.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=styledComponents(_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&&styledComponents.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]=React.useState(initialState),updateState=React.useCallback(newState=>setState(currentState=>_objectSpread$2(_objectSpread$2({},currentState),newState)),[]),props=React.useMemo(()=>({autoPlay:autoPlay,controls:controls,loop:loop,mediaRef:mediaRef,muted:muted,playsInline:playsInline,size:size}),[autoPlay,controls,loop,mediaRef,muted,playsInline,size]),values=React.useMemo(()=>({props:props,state:state,updateState:updateState}),[props,state,updateState]);return React.createElement(GlobalContext.Provider,{value:values},children(rest))},REGEX_STRIP_WWW=/^www\./,mobileDescriptionStyle=styledComponents.css`
${media_mobile`
> p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`};
`,Content=styledComponents("div").attrs({className:classNames.content})`
display: flex;
padding: 10px 15px;
min-width: 0;
box-sizing: border-box;
${_ref=>{let{$cardSize:$cardSize}=_ref;return styledComponents.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=styledComponents("header").attrs({className:classNames.title})`
text-align: left;
font-weight: bold;
margin: 0;
width: 100%;
${_ref2=>{let{$cardSize:$cardSize}=_ref2;return styledComponents.css`
flex-grow: ${isSmall($cardSize)?.8:1.2};
font-size: ${isSmall($cardSize)?"15px":"16px"};
${isSmall($cardSize)&&styledComponents.css`
min-width: 0;
padding-right: 14px;
`}
`}}
`,Description=styledComponents("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=styledComponents("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 styledComponents.css`
font-size: ${isSmall($cardSize)?"10px":"12px"};
${!isSmall($cardSize)&&"width: 100%;"}
`}};
`,Author=styledComponents(CardText)`
opacity: 0.75;
transition: ${transition_medium("opacity")};
will-change: opacity;
.${classNames.main}:hover & {
opacity: 1;
}
`,PoweredBy=styledComponents("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}}=React.useContext(GlobalContext),isSmallCard=isSmall(size),formattedUrl=React.useMemo(()=>(href=>{if(isNil(href))return"";const{hostname:hostname}=new URL(href);return hostname.replace(REGEX_STRIP_WWW,"")})(url),[url]),handleOnClick=React.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=styledComponents.keyframes`
0% {
background: #e1e8ed;
}
70% {
background: #cdd4d8;
}
100% {
background: #e1e8ed;
}
`,emptyStateImagePulse=styledComponents.keyframes`
0% {
background: #e1e8ed;
}
70% {
background: #dce3e8;
}
100% {
background: #e1e8ed;
}
`,emptyStateAnimation=styledComponents.css`
animation: ${emptyStatePulse} .75s linear infinite;
`,emptyStateImageAnimation=styledComponents.css`
animation: ${emptyStateImagePulse} 1.25s linear infinite;
`,ImageLoadCatcher=styledComponents("img")`
height: 1px;
width: 1px;
position: absolute;
z-index: -1;
`,loadingOverlay=styledComponents.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 styledComponents.css`
opacity: ${$isLoading?1:0};
visibility: ${$isLoading?"$visible":"hidden"};
`}};
}
`,mediaSizeStyles={small:styledComponents.css`
flex: 0 0 48px;
`,normal:styledComponents.css`
flex: 0 0 125px;
${media_mobile`
flex: 0 0 92px;
`}
`,large:styledComponents.css`
flex: 1;
&::before {
padding-bottom: 0;
}
`},StyledWrap=styledComponents("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}}=React.useContext(GlobalContext);return React.createElement(StyledWrap,_extends({$cardSize:size},props))},ImageWrap=styledComponents(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}}=React.useContext(GlobalContext);return React.createElement(ImageWrap,_extends({$url:imageUrl},props))};var _FooterEmpty;const MediaEmpty=styledComponents(ImageComponent)`
${emptyStateImageAnimation};
`,HeaderEmpty=styledComponents("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=styledComponents("span")`
opacity: 0.8;
height: 14px;
width: 95%;
display: block;
position: relative;
${emptyStateAnimation};
animation-delay: 0.125s;
`,FooterEmpty=styledComponents("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}}=React.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=styledComponents("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=styledComponents("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=styledComponents("svg")`
stroke: #fff;
`,VolumeButton=styledComponents(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=styledComponents(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=styledComponents("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=React.useMemo(()=>isMuted?VolumeMute:VolumeUp,[isMuted]),isLargeCard=React.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=styledComponents("svg")`
stroke: #fff;
`,PlaybackButtonWrap=styledComponents(MediaButton).attrs({className:classNames.playbackControl})`
${PlaybackIcon} {
${_ref=>{let{$cardSize:$cardSize}=_ref;return styledComponents.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=React.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=styledComponents("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 styledComponents.css`
height: ${scrubberSize}px;
width: ${scrubberSize}px;
`}}
`,_excluded$4=["$isDragging","$isVisible","label","$positionX","size"],sizeScales$1={normal:.8},TooltipBase=styledComponents("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=React.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=styledComponents("div").attrs(()=>({className:classNames.progressBar}))`
position: relative;
padding: ${6}px ${3}px ${3}px;
z-index: 2;
backface-visibility: hidden;
`,BarsWrap=styledComponents("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 styledComponents.css`
height: ${height}px;
${OuterWrap$1}:hover & {
height: ${activeHeight}px;
}
`}}
`,ProgressLine=styledComponents("div")`
border-radius: inherit;
height: 100%;
position: relative;
overflow: hidden;
`,ProgressMask=styledComponents("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=styledComponents("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=styledComponents("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}}=React.useContext(GlobalContext),wrapRef=React.useRef(),tooltipRef=React.useRef(),isSmallCard=React.useMemo(()=>isSmall(size),[size]),getWrapWidth=React.useCallback(()=>wrapRef.current?wrapRef.current.getBoundingClientRect().width-6:0,[]),progressRatio=React.useMemo(()=>clampNumber(progress/duration,0,1),[duration,progress]),$progressPercent=React.useMemo(()=>`${clampNumber(100*progressRatio,1,99)}%`,[progressRatio]),$cursorRatio=React.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=React.useMemo(()=>{const wrapWidth=getWrapWidth();return bufferedMedia.map((chunk,key)=>({key:key,start:chunk.start*wrapWidth,end:wrapWidth-chunk.end*wrapWidth}))},[bufferedMedia,getWrapWidth]),tooltipLabel=React.useMemo(()=>formatSeconds(hoveredTime),[hoveredTime]),tooltipPositionX=React.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=React.useMemo(()=>({onClick:onClick,onMouseDown:onMouseDown,onMouseOver:onMouseOver}),[onClick,onMouseDown,onMouseOver]),showAccessories=React.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=styledComponents("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=styledComponents(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=React.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=styledComponents.keyframes`
100% {
transform: rotate(360deg);
}
`,dash=styledComponents.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=styledComponents(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 styledComponents.css`
position: absolute;
width: ${size};
right: ${offset};
top: ${offset};
transition: ${transition_medium("opacity","visibility")};
will-change: opacity, visibility;
pointer-events: none;
`}),Svg=styledComponents("svg")`
width: 100%;
animation: ${rotate} 2s linear infinite;
will-change: transform;
`,Circle=styledComponents("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=styledComponents("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 styledComponents.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=styledComponents("div")`
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
`,ControlsTop=styledComponents("div")`
flex: 1;
${_ref2=>{let{$isVisible:$isVisible}=_ref2;return!$isVisible&&styledComponents.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}}=React.useContext(GlobalContext),[duration,setDuration]=React.useState(0),[progress,setProgress]=React.useState(0),[buffered,setBuffered]=React.useState([]),[cursorX,setCursorX]=React.useState(0),[hoveredTime,setHoveredTime]=React.useState(0),[$isPlaying,setIsPlaying]=React.useState(autoPlay),[isMuted,setIsMuted]=React.useState(muted),[isBuffering,setIsBuffering]=React.useState(!1),[$isHovering,setIsHovering]=React.useState(!1),[$isDragging,setIsDragging]=React.useState(!1),[playbackRate,setPlaybackRate]=React.useState(1),[$hasInteracted,setHasInteracted]=React.useState(autoPlay),[pausedByDrag,setPausedByDrag]=React.useState(!1),mediaRef=React.useRef(),setRefs=React.useCallback(node=>{mediaRef.current=node,propRef&&(isFunction(propRef)?propRef(node):propRef.current=node)},[propRef]),isNotSmall=React.useMemo(()=>!isSmall(size),[size]),mediaEvents=React.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=React.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=React.useCallback(()=>{mediaRef.current&&(mediaRef.current.paused?($hasInteracted||setHasInteracted(!0),mediaRef.current.play()):mediaRef.current.pause())},[$hasInteracted]),jumpTo=React.useCallback(time=>{if(mediaRef.current){const t=clampNumber(time,0,mediaRef.current.duration);mediaRef.current.currentTime=t,setProgress(t)}},[]),onSeekClick=React.useCallback((event,type)=>{if(event.preventDefault(),event.stopPropagation(),mediaRef.current){const{currentTime:currentTime}=mediaRef.current;jumpTo("rewind"===type?currentTime-10:currentTime+30)}},[jumpTo]),onMuteClick=React.useCallback(event=>{event.preventDefault(),event.stopPropagation(),mediaRef.current&&(mediaRef.current.muted=!mediaRef.current.muted)},[]),onPlaybackRateClick=React.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=React.useCallback(event=>{event.preventDefault(),event.stopPropagation(),setIsDragging(!1)},[]),onProgressBarMouseDown=React.useCallback(event=>{event.preventDefault(),event.stopPropagation(),setIsDragging(!0);const{time:time}=evaluateCursorPosition(event);jumpTo(time)},[evaluateCursorPosition,jumpTo]),onProgressBarMouseOver=React.useCallback(()=>setIsHovering(!0),[]),onWrapClick=React.useCallback(event=>{event.preventDefault(),event.stopPropagation(),$isDragging?setIsDragging(!1):togglePlayback()},[$isDragging,togglePlayback]),onWrapMouseMove=React.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=React.useCallback(event=>{$isDragging&&0===event.buttons&&setIsDragging(!1)},[$isDragging]),onWrapKeyDown=React.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=React.useMemo(()=>({onClick:onWrapClick,onKeyDown:onWrapKeyDown,onMouseMove:onWrapMouseMove,onMouseOut:()=>setIsHovering(!1),onMouseOver:onWrapMouseOver}),[onWrapClick,onWrapKeyDown,onWrapMouseMove,onWrapMouseOver]),outerWrapTitle=React.useMemo(()=>$hasInteracted?{title:""}:{},[$hasInteracted]),bufferedMedia=React.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=React.useMemo(()=>formatSeconds(progress||0),[progress]),endTime=React.useMemo(()=>formatSeconds(duration||0),[duration]),footerControlsProps=React.useMemo(()=>({$cardSize:size,currentTime:currentTime,endTime:endTime,isMuted:isMuted,onMuteClick:onMuteClick,onPlaybackRateClick:onPlaybackRateClick,playbackRate:playbackRate}),[currentTime,endTime,isMuted,onMuteClick,onPlaybackRateClick,playbackRate,size]),progressBarProps=React.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 React.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=styledComponents("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}}=React.useContext(GlobalContext),mediaProps=React.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}}=React.useContext(GlobalContext),mediaProps=React.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}}=React.useContext(GlobalContext),[isLoading,setIsLoading]=React.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 styledComponents.css`
background-color: ${$backgroundColor};
border-color: ${$color};
transition-property: filter;
will-change: filter;
&&& {
color: ${$color};
}
&:hover {
filter: brightness(90%);
}
`},largeStyle=styledComponents.css`
flex-direction: column;
height: ${"382px"};
${media_mobile`
height: calc(${"382px"} * 7/9);
`};
`,hoverStyle=styledComponents.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 styledComponents.css`
flex-direction: ${isLarge($cardSize)?"column-reverse":"row-reverse"};
`},baseStyle=styledComponents.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=styledComponents("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=React.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}}=React.useContext(GlobalContext),{contrast:$contrast,direction:$direction}=restProps,props=_objectWithoutProperties(restProps,_excluded2$1);return React.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).forEac