@microlink/vanilla
Version:
Turn links into beautiful previews.
1 lines • 62.1 kB
JavaScript
import React,{useContext,forwardRef,createElement,useRef,useMemo,useCallback,useEffect,useState}from"react";import{styled,css,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(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,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||"default");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(obj,key,value){return(key=toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function(source,excluded){if(null==source)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}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 l=_ref=>{let{accessibility:l=!0,debounce:o=300,ellipsis:u="…",is:c="div",lines:s=3,text:d}=_ref,v=_objectWithoutProperties(_ref,_excluded$8);const a=useRef(null),f=useRef("."),h=_objectSpread$4(_objectSpread$4({ref:a},l?{title:d}:{}),v),g=useMemo((()=>"string"==typeof d&&d.length>0),[d]),m=useCallback((()=>{var e,t,n,r;if(!g)return;const i=e=>{f.current=e,null!=a.current&&(a.current.innerText=e)};i(".");const l=((null!==(t=null===(e=a.current)||void 0===e?void 0:e.clientHeight)&&void 0!==t?t:0)+1)*s+1,o="…"===u?5:1.2*u.length;let c=0,v=0,h=d.length;for(;c<=h;){if(v=Math.floor((c+h)/2),i(d.slice(0,v)),v===d.length)return;(null!==(r=null===(n=a.current)||void 0===n?void 0:n.clientHeight)&&void 0!==r?r:0)<=l?c=v+1:h=v-1}i(d.slice(0,Math.max(v-o,0)).trim()+u)}),[u,g,s,d]);return useEffect((()=>{m();const e=((e,t)=>{let n;const r=()=>{n=void 0,e()};return()=>{const i=null==n;clearTimeout(n),n=setTimeout(r,t),i&&e()}})(m,o);return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[m,o]),g?createElement(c,h,f.current):null};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,"default")?x.default:x}var _templateObject$i,localhostUrl=getDefaultExportFromCjs((()=>/^https?:\/\/(localhost|0|10|127|192(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}|\[::1?\])/gi));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(_templateObject$i||(_templateObject$i=_taggedTemplateLiteral(["\n @media (max-width: 48em) {\n ",";\n }\n "])),css(...arguments))},isLarge=cardSize=>"large"===cardSize,isSmall=cardSize=>"small"===cardSize,imageProxy=url=>localhostUrl().test(url)?url:"https://images.weserv.nl/?".concat(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".concat(v))).join(":")},clampNumber=(num,min,max)=>{switch(!0){case num<=min:return min;case num>=max:return max;default:return num}},CONTENT_BASE_CLASSNAME="".concat("microlink_card","__content"),MEDIA_BASE_CLASSNAME="".concat("microlink_card","__media"),CONTROLS_BASE_CLASSNAME="".concat(MEDIA_BASE_CLASSNAME,"__controls"),classNames={main:"microlink_card",content:CONTENT_BASE_CLASSNAME,title:"".concat(CONTENT_BASE_CLASSNAME,"_title"),description:"".concat(CONTENT_BASE_CLASSNAME,"_description"),url:"".concat(CONTENT_BASE_CLASSNAME,"_url"),mediaWrapper:"".concat(MEDIA_BASE_CLASSNAME,"_wrapper"),media:MEDIA_BASE_CLASSNAME,image:"".concat(MEDIA_BASE_CLASSNAME,"_image"),videoWrapper:"".concat(MEDIA_BASE_CLASSNAME,"_video_wrapper"),video:"".concat(MEDIA_BASE_CLASSNAME,"_video"),audioWrapper:"".concat(MEDIA_BASE_CLASSNAME,"_audio_wrapper"),audio:"".concat(MEDIA_BASE_CLASSNAME,"_audio"),mediaControls:CONTROLS_BASE_CLASSNAME,playbackControl:"".concat(CONTROLS_BASE_CLASSNAME,"_playback"),volumeControl:"".concat(CONTROLS_BASE_CLASSNAME,"_volume"),rwControl:"".concat(CONTROLS_BASE_CLASSNAME,"_rewind"),ffwControl:"".concat(CONTROLS_BASE_CLASSNAME,"_fast_forward"),rateControl:"".concat(CONTROLS_BASE_CLASSNAME,"_rate"),progressBar:"".concat(CONTROLS_BASE_CLASSNAME,"_progress_bar"),progressTime:"".concat(CONTROLS_BASE_CLASSNAME,"_progress_time"),spinner:"".concat(CONTROLS_BASE_CLASSNAME,"_spinner"),iframe:"".concat("microlink_card","__iframe")},_excluded$7=["useNanoClamp","children"];var _templateObject$h,_templateObject2$d;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(l,{className:className,lines:lines,text:children,is:"p"})}))(_templateObject$h||(_templateObject$h=_taggedTemplateLiteral(["\n &&& {\n text-align: inherit;\n font-weight: inherit;\n font-family: inherit;\n color: inherit;\n margin: 0;\n\n ","\n }\n"])),(_ref2=>{let{$useNanoClamp:$useNanoClamp}=_ref2;return!$useNanoClamp&&css(_templateObject2$d||(_templateObject2$d=_taggedTemplateLiteral(["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "])))})),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="".concat(speed[s]," ").concat(animation[s]);return properties.map((property=>"".concat(property," ").concat(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))};var _templateObject$g,_templateObject2$c,_templateObject3$b,_templateObject4$9,_templateObject5$6,_templateObject6$2,_templateObject7$2,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12;const REGEX_STRIP_WWW=/^www\./,mobileDescriptionStyle=css(_templateObject$g||(_templateObject$g=_taggedTemplateLiteral(["\n ",";\n"])),media_mobile(_templateObject2$c||(_templateObject2$c=_taggedTemplateLiteral(["\n > p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n "])))),Content=styled("div").attrs({className:classNames.content})(_templateObject3$b||(_templateObject3$b=_taggedTemplateLiteral(["\n display: flex;\n padding: 10px 15px;\n min-width: 0;\n box-sizing: border-box;\n ",";\n"])),(_ref=>{let{$cardSize:$cardSize}=_ref;return css(_templateObject4$9||(_templateObject4$9=_taggedTemplateLiteral(["\n flex: ",";\n justify-content: ",";\n flex-direction: ",";\n align-items: ",";\n "])),isLarge($cardSize)?"0 0 125px":1,isSmall($cardSize)?"space-between":"space-around",isSmall($cardSize)?"row":"column",isSmall($cardSize)?"center":"stretch")})),Header=styled("header").attrs({className:classNames.title})(_templateObject5$6||(_templateObject5$6=_taggedTemplateLiteral(["\n text-align: left;\n font-weight: bold;\n margin: 0;\n width: 100%;\n ","\n"])),(_ref2=>{let{$cardSize:$cardSize}=_ref2;return css(_templateObject6$2||(_templateObject6$2=_taggedTemplateLiteral(["\n flex-grow: ",";\n font-size: ",";\n\n ","\n "])),isSmall($cardSize)?.8:1.2,isSmall($cardSize)?"15px":"16px",isSmall($cardSize)&&css(_templateObject7$2||(_templateObject7$2=_taggedTemplateLiteral(["\n min-width: 0;\n padding-right: 14px;\n "]))))})),Description=styled("div").attrs({className:classNames.description})(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n text-align: left;\n font-size: 14px;\n flex-grow: 2;\n margin: auto 0;\n line-height: 18px;\n font-weight: normal;\n ",";\n"])),(_ref3=>{let{$cardSize:$cardSize}=_ref3;return!isLarge($cardSize)&&mobileDescriptionStyle})),Footer=styled("footer").attrs({className:classNames.url})(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: left;\n margin: 0;\n flex-grow: 0;\n font-weight: normal;\n ",";\n"])),(_ref4=>{let{$cardSize:$cardSize}=_ref4;return css(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n font-size: ",";\n ","\n "])),isSmall($cardSize)?"10px":"12px",!isSmall($cardSize)&&"width: 100%;")})),Author=styled(CardText)(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n opacity: 0.75;\n transition: ",";\n will-change: opacity;\n\n .",":hover & {\n opacity: 1;\n }\n"])),transition_medium("opacity"),classNames.main),PoweredBy=styled("span").attrs({title:"microlink.io"})(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["\n background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center\n center;\n display: block;\n margin-left: 15px;\n transition: ",";\n will-change: filter, opacity;\n &:not(:hover) {\n filter: grayscale(100%);\n opacity: 0.75;\n }\n\n min-width: ",";\n width: ",";\n background-size: ",";\n height: ",";\n"])),transition_medium("filter","opacity"),"16px","16px","16px","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})))};var _templateObject$f,_templateObject2$b,_templateObject3$a,_templateObject4$8;const emptyStatePulse=keyframes(_templateObject$f||(_templateObject$f=_taggedTemplateLiteral(["\n 0% {\n background: #e1e8ed;\n }\n 70% {\n background: #cdd4d8;\n }\n 100% {\n background: #e1e8ed;\n }\n"]))),emptyStateImagePulse=keyframes(_templateObject2$b||(_templateObject2$b=_taggedTemplateLiteral(["\n 0% {\n background: #e1e8ed;\n }\n 70% {\n background: #dce3e8;\n }\n 100% {\n background: #e1e8ed;\n }\n"]))),emptyStateAnimation=css(_templateObject3$a||(_templateObject3$a=_taggedTemplateLiteral(["\n animation: "," .75s linear infinite;\n"])),emptyStatePulse),emptyStateImageAnimation=css(_templateObject4$8||(_templateObject4$8=_taggedTemplateLiteral(["\n animation: "," 1.25s linear infinite;\n"])),emptyStateImagePulse);var _templateObject$e,_templateObject2$a,_templateObject3$9;const ImageLoadCatcher=styled("img")(_templateObject$e||(_templateObject$e=_taggedTemplateLiteral(["\n height: 1px;\n width: 1px;\n position: absolute;\n z-index: -1;\n"]))),loadingOverlay=css(_templateObject2$a||(_templateObject2$a=_taggedTemplateLiteral(["\n &::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: #e1e8ed;\n z-index: 1;\n transition: ",";\n will-change: opacity;\n\n ",";\n }\n"])),transition_medium("opacity","visibility"),(_ref=>{let{$isLoading:$isLoading}=_ref;return css(_templateObject3$9||(_templateObject3$9=_taggedTemplateLiteral(["\n opacity: ",";\n visibility: ",";\n "])),$isLoading?1:0,$isLoading?"$visible":"hidden")}));var _templateObject$d,_templateObject2$9,_templateObject3$8,_templateObject4$7,_templateObject5$5;const mediaSizeStyles={small:css(_templateObject$d||(_templateObject$d=_taggedTemplateLiteral(["\n flex: 0 0 48px;\n "]))),normal:css(_templateObject2$9||(_templateObject2$9=_taggedTemplateLiteral(["\n flex: 0 0 125px;\n\n ","\n "])),media_mobile(_templateObject3$8||(_templateObject3$8=_taggedTemplateLiteral(["\n flex: 0 0 92px;\n "])))),large:css(_templateObject4$7||(_templateObject4$7=_taggedTemplateLiteral(["\n flex: 1;\n\n &::before {\n padding-bottom: 0;\n }\n "])))},StyledWrap=styled("div")(_templateObject5$5||(_templateObject5$5=_taggedTemplateLiteral(["\n background: transparent no-repeat center center / cover;\n display: block;\n overflow: hidden;\n height: auto;\n position: relative;\n\n &::before {\n content: '';\n padding-bottom: 100%;\n display: block;\n }\n\n ",";\n\n ",";\n"])),(_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))};var _templateObject$c;const ImageWrap=styled(Wrap$1).attrs({className:"".concat(classNames.media," ").concat(classNames.image)})(_templateObject$c||(_templateObject$c=_taggedTemplateLiteral(["\n background-image: ",";\n"])),(_ref=>{let{url:url}=_ref;return url?"url('".concat(imageProxy(url),"')"):""})),ImageComponent=props=>{const{state:{imageUrl:imageUrl}}=useContext(GlobalContext);return React.createElement(ImageWrap,_extends({url:imageUrl},props))};var _templateObject$b,_templateObject2$8,_templateObject3$7,_templateObject4$6,_FooterEmpty;const MediaEmpty=styled(ImageComponent)(_templateObject$b||(_templateObject$b=_taggedTemplateLiteral(["\n ",";\n"])),emptyStateImageAnimation),HeaderEmpty=styled("span")(_templateObject2$8||(_templateObject2$8=_taggedTemplateLiteral(["\n opacity: 0.8;\n height: 16px;\n width: ",";\n display: block;\n background: #e1e8ed;\n margin: ",";\n ",";\n\n ",";\n"])),(_ref=>{let{$cardSize:$cardSize}=_ref;return isSmall($cardSize)?"75%":"60%"}),(_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")(_templateObject3$7||(_templateObject3$7=_taggedTemplateLiteral(["\n opacity: 0.8;\n height: 14px;\n width: 95%;\n display: block;\n position: relative;\n ",";\n animation-delay: 0.125s;\n"])),emptyStateAnimation),FooterEmpty=styled("span")(_templateObject4$6||(_templateObject4$6=_taggedTemplateLiteral(["\n opacity: 0.8;\n height: 12px;\n width: 30%;\n display: block;\n "," animation-delay: .25s;\n\n ",";\n"])),emptyStateAnimation,(_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))))};var _templateObject$a;const MediaButton=styled("div")(_templateObject$a||(_templateObject$a=_taggedTemplateLiteral(["\n backface-visibility: hidden;\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n transition: ",";\n will-change: transform;\n\n > svg {\n display: block;\n }\n\n &:active:not(:focus) {\n transform: scale(0.9);\n }\n"])),transition_short("transform"));var _path$2,_path2$2,_templateObject$9,_templateObject2$7,_templateObject3$6,_templateObject4$5,_templateObject5$4,_templateObject6$1,_templateObject7$1;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")(_templateObject$9||(_templateObject$9=_taggedTemplateLiteral(["\n z-index: 2;\n position: absolute;\n bottom: ","px;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: ",";\n will-change: opacity;\n"])),(_ref=>{let{$cardSize:$cardSize}=_ref;return isLarge($cardSize)?18:14}),transition_medium("opacity")),VolumeIcon=styled("svg")(_templateObject2$7||(_templateObject2$7=_taggedTemplateLiteral(["\n stroke: #fff;\n"]))),VolumeButton=styled(MediaButton).attrs({className:classNames.volumeControl})(_templateObject3$6||(_templateObject3$6=_taggedTemplateLiteral(["\n "," {\n width: ","px;\n height: ","px;\n\n ","\n }\n"])),VolumeIcon,(_ref2=>{let{$cardSize:$cardSize}=_ref2;return isLarge($cardSize)?16:14}),(_ref3=>{let{$cardSize:$cardSize}=_ref3;return isLarge($cardSize)?16:14}),(_ref4=>{let{$cardSize:$cardSize}=_ref4;return!isLarge($cardSize)&&media_mobile(_templateObject4$5||(_templateObject4$5=_taggedTemplateLiteral(["\n width: 12px;\n height: 12px;\n "])))})),PlaybackRateButton=styled(MediaButton).attrs({className:classNames.rateControl})(_templateObject5$4||(_templateObject5$4=_taggedTemplateLiteral(["\n font-size: ","px;\n min-width: ","px;\n line-height: 1;\n font-weight: bold;\n border: 1.5px solid #fff;\n border-radius: 9999px;\n padding: 1px 5px;\n text-align: center;\n color: #fff;\n margin-left: 10px;\n\n ","\n"])),(_ref5=>{let{$cardSize:$cardSize}=_ref5;return isLarge($cardSize)?12:10}),(_ref6=>{let{$cardSize:$cardSize}=_ref6;return isLarge($cardSize)?33:28}),(_ref7=>{let{$cardSize:$cardSize}=_ref7;return!isLarge($cardSize)&&media_mobile(_templateObject6$1||(_templateObject6$1=_taggedTemplateLiteral(["\n font-size: 8px;\n margin-left: 8px;\n min-width: 23px;\n "])))})),TimeLabel=styled("span").attrs({className:classNames.progressTime})(_templateObject7$1||(_templateObject7$1=_taggedTemplateLiteral(["\n margin: ",";\n font-family: ",";\n font-size: 12px;\n padding: 0 16px;\n color: #fff;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n"])),(_ref8=>{let{$right:$right}=_ref8;return $right?"0 0 0 auto":"0 auto 0 0"}),font_mono),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,_templateObject$8,_templateObject2$6,_templateObject3$5,_templateObject4$4;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")(_templateObject$8||(_templateObject$8=_taggedTemplateLiteral(["\n stroke: #fff;\n"]))),PlaybackButtonWrap=styled(MediaButton).attrs({className:classNames.playbackControl})(_templateObject2$6||(_templateObject2$6=_taggedTemplateLiteral(["\n "," {\n ","\n }\n"])),PlaybackIcon,(_ref=>{let{$cardSize:$cardSize}=_ref;return css(_templateObject3$5||(_templateObject3$5=_taggedTemplateLiteral(["\n width: ",";\n height: ",";\n padding: ",";\n\n ","\n "])),iconSizes[$cardSize],iconSizes[$cardSize],isLarge($cardSize)?0:"8px",!isLarge($cardSize)&&!isSmall($cardSize)&&media_mobile(_templateObject4$4||(_templateObject4$4=_taggedTemplateLiteral(["\n width: calc("," * 1.2);\n height: calc("," * 1.2);\n "])),iconSizes.small,iconSizes.small))})),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}))};var _templateObject$7,_templateObject2$5;const scrubberSizeScales={normal:.8,small:.9},Scrubber=styled("div").attrs((_ref=>{let{$isVisible:$isVisible,$positionX:$positionX}=_ref;return{style:{left:$positionX,transform:"scale(".concat($isVisible?1:.5,") translate(-50%, -50%)"),opacity:$isVisible?1:0,visibility:$isVisible?"$visible":"hidden"}}}))(_templateObject$7||(_templateObject$7=_taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n background: #ffffff;\n border-radius: 50%;\n transform-origin: center center;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);\n transition: ",";\n will-change: left, transform, opacity, visibility;\n backface-visibility: hidden;\n z-index: 3;\n\n ","\n"])),transition_short("transform","opacity","visibility"),(_ref2=>{let{$cardSize:$cardSize}=_ref2;const scrubberSize=(size=$cardSize,Math.floor(12*(scrubberSizeScales[size]||1)));var size;return css(_templateObject2$5||(_templateObject2$5=_taggedTemplateLiteral(["\n height: ","px;\n width: ","px;\n "])),scrubberSize,scrubberSize)})),_excluded$4=["$isDragging","$isVisible","label","$positionX","size"];var _templateObject$6;const sizeScales$1={normal:.8},TooltipBase=styled("span").attrs((_ref=>{let{$position:$position,$isDragging:$isDragging,$visible:$visible}=_ref;return{style:{left:"".concat($position,"px"),top:$visible?"-4px":"0px",visibility:$visible?"$visible":"hidden",opacity:$visible?1:0,transform:"translate(-50%, ".concat($isDragging?-110:-100,"%)")}}}))(_templateObject$6||(_templateObject$6=_taggedTemplateLiteral(["\n position: absolute;\n background: rgba(24, 25, 25, 0.75);\n color: #fff;\n text-shadow: 0 1px 2px rgba(24, 25, 25, 0.15);\n padding: 2px 3px;\n border-radius: 4px;\n font-family: ",";\n font-size: ","px;\n line-height: 1;\n transition: ",",\n ",";\n will-change: top, left, visibility, opacity, transform;\n backface-visibility: hidden;\n"])),font_mono,(_ref2=>{let{$cardSize:$cardSize}=_ref2;return 11*(sizeScales$1[$cardSize]||1)}),transition_medium("opacity","visibility","transform"),transition_long("top")),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"];var _templateObject$5,_templateObject2$4,_templateObject3$4,_templateObject4$3,_templateObject5$3,_templateObject6,_templateObject7;const 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})))(_templateObject$5||(_templateObject$5=_taggedTemplateLiteral(["\n position: relative;\n padding: ","px ","px ","px;\n z-index: 2;\n backface-visibility: hidden;\n"])),6,3,3),BarsWrap=styled("div").attrs((_ref=>{let{$cardSize:$cardSize,$isDragging:$isDragging}=_ref;if($isDragging){const activeHeight=getProgressBarActiveHeight($cardSize);return{style:{height:"".concat(activeHeight,"px")}}}return{}}))(_templateObject2$4||(_templateObject2$4=_taggedTemplateLiteral(["\n background: transparent;\n border-radius: 9999px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n background: rgba(255, 255, 255, 0.15);\n transition: ",";\n will-change: height;\n pointer-events: none;\n position: relative;\n\n ","\n"])),transition_short("height"),(_ref2=>{let{$cardSize:$cardSize}=_ref2;const height=(size=$cardSize,Math.floor(6*(heightScales[size]||1)));var size;const activeHeight=getProgressBarActiveHeight($cardSize);return css(_templateObject3$4||(_templateObject3$4=_taggedTemplateLiteral(["\n height: ","px;\n\n ",":hover & {\n height: ","px;\n }\n "])),height,OuterWrap$1,activeHeight)})),ProgressLine=styled("div")(_templateObject4$3||(_templateObject4$3=_taggedTemplateLiteral(["\n border-radius: inherit;\n height: 100%;\n position: relative;\n overflow: hidden;\n"]))),ProgressMask=styled("div").attrs((_ref3=>{let{$maskScale:$maskScale}=_ref3;return{style:{transform:"scaleX(".concat($maskScale,")")}}}))(_templateObject5$3||(_templateObject5$3=_taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: -50%;\n height: 200%;\n width: 100%;\n background: #ffffff;\n transform-origin: left center;\n will-change: transform;\n"]))),ProgressHover=styled("div").attrs((_ref4=>{let{$cursorRatio:$cursorRatio,$isHovering:$isHovering,$progressPercent:$progressPercent}=_ref4;return{style:{left:$progressPercent,transform:"scaleX(".concat($cursorRatio,")"),opacity:$isHovering?1:0,visibility:$isHovering?"$visible":"hidden"}}}))(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.4);\n transform-origin: left center;\n transition: ",";\n will-change: left, transform, opacity, $visible;\n"])),transition_short("opacity","visibility")),BufferedChunk=styled("div").attrs((_ref5=>{let{start:start,end:end}=_ref5;return{style:{left:"".concat(start,"px"),right:"".concat(end,"px")}}}))(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n background: rgba(255, 255, 255, 0.35);\n position: absolute;\n top: 0;\n bottom: 0;\n"]))),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((()=>"".concat(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,_templateObject$4,_templateObject2$3,_templateObject3$3;const _excluded$2=["$cardSize"],_excluded2$1=["$cardSize"],_excluded3=["type","$cardSize"],Backward=_ref=>{let 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 props=_objectWithoutProperties(_ref2,_excluded2$1);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")(_templateObject$4||(_templateObject$4=_taggedTemplateLiteral(["\n stroke: #fff;\n width: ","px;\n height: ","px;\n\n ","\n"])),(_ref3=>{let{$cardSize:$cardSize}=_ref3;return isLarge($cardSize)?30:24}),(_ref4=>{let{$cardSize:$cardSize}=_ref4;return isLarge($cardSize)?30:24}),(_ref5=>{let{$cardSize:$cardSize}=_ref5;return!isLarge($cardSize)&&media_mobile(_templateObject2$3||(_templateObject2$3=_taggedTemplateLiteral(["\n width: 0;\n height: 0;\n "])))})),SeekButtonWrap=styled(MediaButton)(_templateObject3$3||(_templateObject3$3=_taggedTemplateLiteral(["\n margin: 0 ",";\n"])),(_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 _templateObject$3,_templateObject2$2,_templateObject3$2,_templateObject4$2,_templateObject5$2,_Svg;const offsetScales={normal:.8,small:.6},sizeScales={normal:.9,small:.8},rotate=keyframes(_templateObject$3||(_templateObject$3=_taggedTemplateLiteral(["\n 100% {\n transform: rotate(360deg);\n }\n"]))),dash=keyframes(_templateObject2$2||(_templateObject2$2=_taggedTemplateLiteral(["\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n"]))),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="".concat((size=>Math.floor(12*(sizeScales[size]||1)))($cardSize),"px"),offset="".concat((size=>Math.floor(6*(offsetScales[size]||1)))($cardSize),"px");return css(_templateObject3$2||(_templateObject3$2=_taggedTemplateLiteral(["\n position: absolute;\n width: ",";\n right: ",";\n top: ",";\n transition: ",";\n will-change: opacity, visibility;\n pointer-events: none;\n "])),size,offset,offset,transition_medium("opacity","visibility"))})),Svg=styled("svg")(_templateObject4$2||(_templateObject4$2=_taggedTemplateLiteral(["\n width: 100%;\n animation: "," 2s linear infinite;\n will-change: transform;\n"])),rotate),Circle=styled("circle")(_templateObject5$2||(_templateObject5$2=_taggedTemplateLiteral(["\n stroke: #fff;\n stroke-linecap: round;\n stroke-width: 7;\n fill: none;\n animation: "," 1.5s ease-in-out infinite;\n will-change: stroke-dasharray, stroke-dashoffset;\n"])),dash),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"}))))};var _templateObject$2,_templateObject2$1,_templateObject3$1,_templateObject4$1,_templateObject5$1;const SPACE_KEY=32,L_ARROW_KEY=37,R_ARROW_KEY=39,M_KEY=77,OuterWrap=styled("div").attrs({className:classNames.mediaControls})(_templateObject$2||(_templateObject$2=_taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n transition: ",", ",";\n will-change: background;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n\n ","\n"])),transition_long("background"),transition_medium("opacity"),(_ref=>{let{$hasInteracted:$hasInteracted,$isDragging:$isDragging,$isPlaying:$isPlaying}=_ref;const bg="rgba(0, 0, 0, 0.35)",isPaused=$hasInteracted&&!$isPlaying;return css(_templateObject2$1||(_templateObject2$1=_taggedTemplateLiteral(["\n .",":hover & {\n background: ",";\n }\n\n .",":not(:hover) & {\n opacity: ",";\n ",";\n }\n "])),classNames.main,$isDragging?"rgba(0, 0, 0, 0.2)":bg,classNames.main,!$hasInteracted||isPaused?1:0,isPaused&&"background: ".concat(bg))})),InnerWrap=styled("div")(_templateObject3$1||(_templateObject3$1=_taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n"]))),ControlsTop=styled("div")(_templateObject4$1||(_templateObject4$1=_taggedTemplateLiteral(["\n flex: 1;\n\n ","\n"])),(_ref2=>{let{$isVisible:$isVisible}=_ref2;return!$isVisible&&css(_templateObject5$1||(_templateObject5$1=_taggedTemplateLiteral(["\n *[class*='","']:not(.",") {\n transition: ",";\n opacity: 0;\n visibility: hidden;\n }\n "])),classNames.mediaControls,classNames.progressTime,transition_medium("opacity","visibility"))})),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}))))};var _templateObject$1;const VideoDOM=styled("video")(_templateObject$1||(_templateObject$1=_taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n &::media-controls-start-playback-button {\n display: none;\n a