@microlink/vanilla
Version:
Turn links into beautiful previews.
1 lines • 115 kB
Source Map (JSON)
{"version":3,"file":"microlink.min.mjs","sources":["../../../node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/esm/extends.js","../../../node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/esm/typeof.js","../../../node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/esm/toPropertyKey.js","../../../node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/esm/toPrimitive.js","../../../node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/esm/defineProperty.js","../../../node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js","../../../node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js","../../../node_modules/.pnpm/@microlink+react@5.5.24_react-dom@18.3.1_react@18.3.1__react@18.3.1_styled-components@6_be1851483edfcc258a07544e4f2f0cf6/node_modules/@microlink/react/dist/microlink.mjs","../src/index.js"],"sourcesContent":["function _extends() {\n return _extends = Object.assign ? Object.assign.bind() : function (n) {\n for (var e = 1; e < arguments.length; e++) {\n var t = arguments[e];\n for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);\n }\n return n;\n }, _extends.apply(null, arguments);\n}\nexport { _extends as default };","function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n}\nexport { _typeof as default };","import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nfunction toPropertyKey(t) {\n var i = toPrimitive(t, \"string\");\n return \"symbol\" == _typeof(i) ? i : i + \"\";\n}\nexport { toPropertyKey as default };","import _typeof from \"./typeof.js\";\nfunction toPrimitive(t, r) {\n if (\"object\" != _typeof(t) || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r || \"default\");\n if (\"object\" != _typeof(i)) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}\nexport { toPrimitive as default };","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperty(e, r, t) {\n return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {\n value: t,\n enumerable: !0,\n configurable: !0,\n writable: !0\n }) : e[r] = t, e;\n}\nexport { _defineProperty as default };","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nfunction _objectWithoutProperties(e, t) {\n if (null == e) return {};\n var o,\n r,\n i = objectWithoutPropertiesLoose(e, t);\n if (Object.getOwnPropertySymbols) {\n var n = Object.getOwnPropertySymbols(e);\n for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);\n }\n return i;\n}\nexport { _objectWithoutProperties as default };","function _objectWithoutPropertiesLoose(r, e) {\n if (null == r) return {};\n var t = {};\n for (var n in r) if ({}.hasOwnProperty.call(r, n)) {\n if (-1 !== e.indexOf(n)) continue;\n t[n] = r[n];\n }\n return t;\n}\nexport { _objectWithoutPropertiesLoose as default };","import _extends from '@babel/runtime/helpers/extends';\nimport _defineProperty from '@babel/runtime/helpers/defineProperty';\nimport _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';\nimport React, { useRef, useMemo, useCallback, createElement, useLayoutEffect, useState, useContext, forwardRef, useEffect } from 'react';\nimport { css, styled, keyframes } from 'styled-components';\nimport { getApiUrl as getApiUrl$1, fetchFromApi } from '@microlink/mql';\nexport { fetchFromApi } from '@microlink/mql';\n\nconst _excluded$8 = [\"accessibility\", \"debounce\", \"ellipsis\", \"is\", \"lines\", \"text\"];\nfunction 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; }\nfunction _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).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; }\nconst i = _ref => {\n let {\n accessibility: i = true,\n debounce: u = 300,\n ellipsis: c = \"…\",\n is: o = \"div\",\n lines: s = 3,\n text: f\n } = _ref,\n d = _objectWithoutProperties(_ref, _excluded$8);\n const v = useRef(null),\n a = useRef(\".\"),\n m = _objectSpread$4(_objectSpread$4({\n ref: v\n }, i ? {\n title: f\n } : {}), d),\n b = useMemo(() => \"string\" == typeof f && f.length > 0, [f]),\n g = useCallback(() => {\n if (!b) return;\n const t = t => {\n a.current = t, null != v.current && (v.current.textContent = t);\n },\n e = () => {\n var t, e;\n return null !== (e = null === (t = v.current) || void 0 === t ? void 0 : t.clientHeight) && void 0 !== e ? e : 0;\n };\n t(\".\");\n const r = (e() + 1) * s + 1;\n if (t(f), e() <= r) return;\n let n = 0,\n l = 0,\n i = f.length;\n for (; n <= i;) {\n l = Math.floor((n + i) / 2);\n t(f.slice(0, l).trim() + c), e() <= r ? n = l + 1 : i = l - 1;\n }\n t(f.slice(0, l - 1).trim() + c);\n }, [c, b, s, f]);\n return useLayoutEffect(() => {\n if (g(), null == v.current) return;\n const t = new ResizeObserver(((t, e) => {\n let r;\n const n = () => {\n r = void 0, t();\n };\n return () => {\n const l = null == r;\n clearTimeout(r), r = setTimeout(n, e), l && t();\n };\n })(g, u));\n return t.observe(v.current), () => t.disconnect();\n }, [g, u]), b ? /*#__PURE__*/createElement(o, m, a.current) : null;\n};\n\nfunction getDefaultExportFromCjs (x) {\n\treturn x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;\n}\n\nvar ipv4 = {exports: {}};\n\nvar hasRequiredIpv4;\n\nfunction requireIpv4 () {\n\tif (hasRequiredIpv4) return ipv4.exports;\n\thasRequiredIpv4 = 1;\n\n\tconst IP_RANGES = [\n\t// 10.0.0.0 - 10.255.255.255\n\t/^(:{2}f{4}:)?10(?:\\.\\d{1,3}){3}$/,\n\t// 127.0.0.0 - 127.255.255.255\n\t/^(:{2}f{4}:)?127(?:\\.\\d{1,3}){3}$/,\n\t// 169.254.1.0 - 169.254.254.255\n\t/^(::f{4}:)?169\\.254\\.([1-9]|1?\\d\\d|2[0-4]\\d|25[0-4])\\.\\d{1,3}$/,\n\t// 172.16.0.0 - 172.31.255.255\n\t/^(:{2}f{4}:)?(172\\.1[6-9]|172\\.2\\d|172\\.3[01])(?:\\.\\d{1,3}){2}$/,\n\t// 192.168.0.0 - 192.168.255.255\n\t/^(:{2}f{4}:)?192\\.168(?:\\.\\d{1,3}){2}$/,\n\t// fc00::/7\n\t/^f[cd][\\da-f]{2}(::1$|:[\\da-f]{1,4}){1,7}$/,\n\t// fe80::/10s\n\t/^fe[89ab][\\da-f](::1$|:[\\da-f]{1,4}){1,7}$/,\n\t// localhost in IPv4\n\t/^localhost$|^0\\.0\\.0\\.0$/];\n\tconst regex = new RegExp(`^(${IP_RANGES.map(re => re.source).join('|')})$`);\n\tipv4.exports = regex.test.bind(regex);\n\tipv4.exports.regex = regex;\n\treturn ipv4.exports;\n}\n\nvar ipv6 = {exports: {}};\n\nvar hasRequiredIpv6;\n\nfunction requireIpv6 () {\n\tif (hasRequiredIpv6) return ipv6.exports;\n\thasRequiredIpv6 = 1;\n\n\tconst IP_RANGES = [\n\t// localhost in IPv6\n\t/^\\[(::1|::)\\]$/];\n\tconst regex = new RegExp(`^(${IP_RANGES.map(re => re.source).join('|')})$`);\n\tipv6.exports = regex.test.bind(regex);\n\tipv6.exports.regex = regex;\n\treturn ipv6.exports;\n}\n\nvar src;\nvar hasRequiredSrc;\n\nfunction requireSrc () {\n\tif (hasRequiredSrc) return src;\n\thasRequiredSrc = 1;\n\n\tsrc = hostname => requireIpv4()(hostname) || requireIpv6()(hostname);\n\treturn src;\n}\n\nvar srcExports = requireSrc();\nvar isLocalAddress = /*@__PURE__*/getDefaultExportFromCjs(srcExports);\n\nconst isSSR = typeof window === 'undefined';\nconst castArray = value => [].concat(value);\nconst getPreferredMedia = (data, mediaProps) => {\n let prefer;\n for (let index = 0; index < mediaProps.length; index++) {\n const key = mediaProps[index];\n const value = data[key];\n if (!isNil(value)) {\n prefer = key;\n break;\n }\n }\n return prefer;\n};\nconst isFunction = fn => typeof fn === 'function';\nconst isObject = obj => typeof obj === 'object';\nconst isNil = value => value == null;\nconst getUrlPath = data => isObject(data) ? data.url : data;\nconst someProp = (data, props) => data[props.find(prop => !isNil(data[prop]))];\nconst media = {\n mobile: function () {\n return css`\n @media (max-width: 48em) {\n ${css(...arguments)};\n }\n `;\n },\n desktop: function () {\n return css`\n @media (min-width: 48em) {\n ${css(...arguments)};\n }\n `;\n }\n};\nconst getApiUrl = _ref => {\n let {\n apiKey,\n contrast = false,\n data,\n endpoint,\n force,\n headers,\n media,\n prerender,\n proxy,\n ttl,\n url\n } = _ref;\n return getApiUrl$1(url, {\n apiKey,\n audio: media.includes('audio'),\n data,\n endpoint,\n force,\n headers,\n iframe: media.includes('iframe'),\n palette: contrast,\n prerender,\n proxy,\n screenshot: media.includes('screenshot'),\n ttl,\n video: media.includes('video')\n });\n};\nconst isLarge = cardSize => cardSize === 'large';\nconst isSmall = cardSize => cardSize === 'small';\nconst imageProxy = url => isLocalAddress(new URL(url).hostname) ? url : `https://images.weserv.nl/?${new URLSearchParams({\n url,\n default: url,\n l: 9,\n af: '',\n il: '',\n n: -1\n}).toString()}`;\nconst isLazySupported = !isSSR && 'IntersectionObserver' in window;\nconst formatSeconds = secs => {\n const secsToNum = parseInt(secs, 10);\n const hours = Math.floor(secsToNum / 3600);\n const minutes = Math.floor(secsToNum / 60) % 60;\n const seconds = secsToNum % 60;\n return [hours, minutes, seconds].filter((v, i) => v > 0 || i > 0).map(v => v >= 10 ? v : `0${v}`).join(':');\n};\nconst clampNumber = (num, min, max) => {\n switch (true) {\n case num <= min:\n return min;\n case num >= max:\n return max;\n default:\n return num;\n }\n};\nconst BASE_CLASSNAME = 'microlink_card';\nconst CONTENT_BASE_CLASSNAME = `${BASE_CLASSNAME}__content`;\nconst MEDIA_BASE_CLASSNAME = `${BASE_CLASSNAME}__media`;\nconst CONTROLS_BASE_CLASSNAME = `${MEDIA_BASE_CLASSNAME}__controls`;\nconst classNames = {\n main: BASE_CLASSNAME,\n content: CONTENT_BASE_CLASSNAME,\n title: `${CONTENT_BASE_CLASSNAME}_title`,\n description: `${CONTENT_BASE_CLASSNAME}_description`,\n url: `${CONTENT_BASE_CLASSNAME}_url`,\n mediaWrapper: `${MEDIA_BASE_CLASSNAME}_wrapper`,\n media: MEDIA_BASE_CLASSNAME,\n image: `${MEDIA_BASE_CLASSNAME}_image`,\n videoWrapper: `${MEDIA_BASE_CLASSNAME}_video_wrapper`,\n video: `${MEDIA_BASE_CLASSNAME}_video`,\n audioWrapper: `${MEDIA_BASE_CLASSNAME}_audio_wrapper`,\n audio: `${MEDIA_BASE_CLASSNAME}_audio`,\n mediaControls: CONTROLS_BASE_CLASSNAME,\n playbackControl: `${CONTROLS_BASE_CLASSNAME}_playback`,\n volumeControl: `${CONTROLS_BASE_CLASSNAME}_volume`,\n rwControl: `${CONTROLS_BASE_CLASSNAME}_rewind`,\n ffwControl: `${CONTROLS_BASE_CLASSNAME}_fast_forward`,\n rateControl: `${CONTROLS_BASE_CLASSNAME}_rate`,\n progressBar: `${CONTROLS_BASE_CLASSNAME}_progress_bar`,\n progressTime: `${CONTROLS_BASE_CLASSNAME}_progress_time`,\n spinner: `${CONTROLS_BASE_CLASSNAME}_spinner`,\n iframe: `${BASE_CLASSNAME}__iframe`\n};\n\nconst _excluded$7 = [\"$useNanoClamp\", \"children\"];\nfunction 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; }\nfunction _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).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; }\nconst Clamp = _ref => {\n let {\n children,\n className,\n lines\n } = _ref;\n return isNil(children) ? null : /*#__PURE__*/React.createElement(i, {\n className: className,\n lines: lines,\n text: children,\n is: \"p\"\n });\n};\nconst StyledClamp = styled(Clamp)`\n &&& {\n text-align: inherit;\n font-weight: inherit;\n font-family: inherit;\n color: inherit;\n margin: 0;\n\n ${_ref2 => {\n let {\n $useNanoClamp\n } = _ref2;\n return !$useNanoClamp && css`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n `;\n}}\n }\n`;\nconst CardText = _ref3 => {\n let {\n $useNanoClamp = true,\n children\n } = _ref3,\n props = _objectWithoutProperties(_ref3, _excluded$7);\n const textProps = $useNanoClamp ? props : _objectSpread$3(_objectSpread$3({}, props), {}, {\n as: 'p',\n title: children\n });\n return /*#__PURE__*/React.createElement(StyledClamp, _extends({\n $useNanoClamp: $useNanoClamp\n }, textProps), children);\n};\n\nconst speed = {\n short: '100ms',\n medium: '150ms',\n long: '300ms'\n};\nconst animation = {\n short: 'cubic-bezier(.25,.8,.25,1)',\n medium: 'cubic-bezier(.25,.8,.25,1)',\n long: 'cubic-bezier(.4, 0, .2, 1)'\n};\nconst createTransition = (properties, s) => {\n const suffix = `${speed[s]} ${animation[s]}`;\n return properties.map(property => `${property} ${suffix}`).join(', ');\n};\nconst transition = {\n short: function () {\n for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {\n properties[_key] = arguments[_key];\n }\n return createTransition(properties, 'short');\n },\n medium: function () {\n for (var _len2 = arguments.length, properties = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n properties[_key2] = arguments[_key2];\n }\n return createTransition(properties, 'medium');\n },\n long: function () {\n for (var _len3 = arguments.length, properties = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n properties[_key3] = arguments[_key3];\n }\n return createTransition(properties, 'long');\n }\n};\n\n// https://primer.style/design/foundations/typography\nconst font = {\n sans: \"InterUI, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif\",\n mono: \"'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace\"\n};\n\nconst _excluded$6 = [\"autoPlay\", \"children\", \"controls\", \"loop\", \"mediaRef\", \"muted\", \"playsInline\", \"size\"];\nfunction 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; }\nfunction _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).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; }\nconst initialState = {};\nconst GlobalContext = /*#__PURE__*/React.createContext(initialState);\nconst GlobalState = _ref => {\n let {\n autoPlay,\n children,\n controls,\n loop,\n mediaRef,\n muted,\n playsInline,\n size\n } = _ref,\n rest = _objectWithoutProperties(_ref, _excluded$6);\n const [state, setState] = useState(initialState);\n const updateState = useCallback(newState => setState(currentState => _objectSpread$2(_objectSpread$2({}, currentState), newState)), []);\n const props = useMemo(() => ({\n autoPlay,\n controls,\n loop,\n mediaRef,\n muted,\n playsInline,\n size\n }), [autoPlay, controls, loop, mediaRef, muted, playsInline, size]);\n const values = useMemo(() => ({\n props,\n state,\n updateState\n }), [props, state, updateState]);\n return /*#__PURE__*/React.createElement(GlobalContext.Provider, {\n value: values\n }, children(rest));\n};\n\n/* global URL */\n\nconst REGEX_STRIP_WWW = /^www\\./;\nconst BADGE_WIDTH = '16px';\nconst BADGE_HEIGHT = '12px';\nconst getHostname = href => {\n if (isNil(href)) return '';\n const {\n hostname\n } = new URL(href);\n return hostname.replace(REGEX_STRIP_WWW, '');\n};\nconst mobileDescriptionStyle = css`\n ${media.mobile`\n > p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n `};\n`;\nconst Content = styled('div').attrs({\n className: classNames.content\n})`\n display: flex;\n padding: 10px 15px;\n min-width: 0;\n box-sizing: border-box;\n ${_ref => {\n let {\n $cardSize\n } = _ref;\n return css`\n flex: ${!isLarge($cardSize) ? 1 : '0 0 125px'};\n justify-content: ${!isSmall($cardSize) ? 'space-around' : 'space-between'};\n flex-direction: ${!isSmall($cardSize) ? 'column' : 'row'};\n align-items: ${!isSmall($cardSize) ? 'stretch' : 'center'};\n `;\n}};\n`;\nconst Header = styled('header').attrs({\n className: classNames.title\n})`\n text-align: left;\n font-weight: bold;\n margin: 0;\n width: 100%;\n ${_ref2 => {\n let {\n $cardSize\n } = _ref2;\n return css`\n flex-grow: ${!isSmall($cardSize) ? 1.2 : 0.8};\n font-size: ${!isSmall($cardSize) ? '16px' : '15px'};\n\n ${isSmall($cardSize) && css`\n min-width: 0;\n padding-right: 14px;\n `}\n `;\n}}\n`;\nconst Description = styled('div').attrs({\n className: classNames.description\n})`\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 ${_ref3 => {\n let {\n $cardSize\n } = _ref3;\n return !isLarge($cardSize) && mobileDescriptionStyle;\n}};\n`;\nconst Footer = styled('footer').attrs({\n className: classNames.url\n})`\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 ${_ref4 => {\n let {\n $cardSize\n } = _ref4;\n return css`\n font-size: ${!isSmall($cardSize) ? '12px' : '10px'};\n ${!isSmall($cardSize) && 'width: 100%;'}\n `;\n}};\n`;\nconst Author = styled(CardText)`\n opacity: 0.75;\n transition: ${transition.medium('opacity')};\n will-change: opacity;\n\n .${classNames.main}:hover & {\n opacity: 1;\n }\n`;\nconst PoweredBy = styled('span').attrs({\n title: 'microlink.io'\n})`\n background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center\n center;\n display: block;\n margin-left: 15px;\n transition: ${transition.medium('filter', 'opacity')};\n will-change: filter, opacity;\n &:not(:hover) {\n filter: grayscale(100%);\n opacity: 0.75;\n }\n\n min-width: ${BADGE_WIDTH};\n width: ${BADGE_WIDTH};\n background-size: ${BADGE_WIDTH};\n height: ${BADGE_HEIGHT};\n`;\nconst CardContent = () => {\n const {\n state: {\n description,\n title,\n url\n },\n props: {\n size\n }\n } = useContext(GlobalContext);\n const isSmallCard = isSmall(size);\n const formattedUrl = useMemo(() => getHostname(url), [url]);\n const handleOnClick = useCallback(e => {\n e.preventDefault();\n window.open('https://www.microlink.io', '_blank');\n }, []);\n return /*#__PURE__*/React.createElement(Content, {\n $cardSize: size\n }, /*#__PURE__*/React.createElement(Header, {\n $cardSize: size\n }, /*#__PURE__*/React.createElement(CardText, {\n $useNanoClamp: false\n }, title)), !isSmallCard && /*#__PURE__*/React.createElement(Description, {\n $cardSize: size\n }, /*#__PURE__*/React.createElement(CardText, {\n lines: 2\n }, description)), /*#__PURE__*/React.createElement(Footer, {\n $cardSize: size\n }, /*#__PURE__*/React.createElement(Author, {\n $useNanoClamp: false\n }, formattedUrl), /*#__PURE__*/React.createElement(PoweredBy, {\n onClick: handleOnClick\n })));\n};\n\nconst emptyStatePulse = keyframes`\n 0% {\n background: #e1e8ed;\n }\n 70% {\n background: #cdd4d8;\n }\n 100% {\n background: #e1e8ed;\n }\n`;\nconst emptyStateImagePulse = keyframes`\n 0% {\n background: #e1e8ed;\n }\n 70% {\n background: #dce3e8;\n }\n 100% {\n background: #e1e8ed;\n }\n`;\nconst emptyStateAnimation = css`\n animation: ${emptyStatePulse} .75s linear infinite;\n`;\nconst emptyStateImageAnimation = css`\n animation: ${emptyStateImagePulse} 1.25s linear infinite;\n`;\n\nconst ImageLoadCatcher = styled('img')`\n height: 1px;\n width: 1px;\n position: absolute;\n z-index: -1;\n`;\nconst loadingOverlay = css`\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: ${transition.medium('opacity', 'visibility')};\n will-change: opacity;\n\n ${_ref => {\n let {\n $isLoading\n } = _ref;\n return css`\n opacity: ${$isLoading ? 1 : 0};\n visibility: ${$isLoading ? '$visible' : 'hidden'};\n `;\n}};\n }\n`;\n\nconst mediaSizeStyles = {\n small: css`\n flex: 0 0 48px;\n `,\n normal: css`\n flex: 0 0 125px;\n\n ${media.mobile`\n flex: 0 0 92px;\n `}\n `,\n large: css`\n flex: 1;\n\n &::before {\n padding-bottom: 0;\n }\n `\n};\nconst StyledWrap = styled('div')`\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 ${_ref => {\n let {\n $cardSize\n } = _ref;\n return mediaSizeStyles[$cardSize];\n}};\n\n ${loadingOverlay};\n`;\nconst Wrap$1 = props => {\n const {\n props: {\n size\n }\n } = useContext(GlobalContext);\n return /*#__PURE__*/React.createElement(StyledWrap, _extends({\n $cardSize: size\n }, props));\n};\n\nconst ImageWrap = styled(Wrap$1).attrs({\n className: `${classNames.media} ${classNames.image}`\n})`\n background-image: ${_ref => {\n let {\n $url\n } = _ref;\n return $url ? `url('${imageProxy($url)}')` : '';\n}};\n`;\nconst ImageComponent = props => {\n const {\n state: {\n imageUrl\n }\n } = useContext(GlobalContext);\n return /*#__PURE__*/React.createElement(ImageWrap, _extends({\n $url: imageUrl\n }, props));\n};\n\nvar _FooterEmpty;\nconst MediaEmpty = styled(ImageComponent)`\n ${emptyStateImageAnimation};\n`;\nconst HeaderEmpty = styled('span')`\n opacity: 0.8;\n height: 16px;\n width: ${_ref => {\n let {\n $cardSize\n } = _ref;\n return !isSmall($cardSize) ? '60%' : '75%';\n}};\n display: block;\n background: #e1e8ed;\n margin: ${_ref2 => {\n let {\n $cardSize\n } = _ref2;\n return !isSmall($cardSize) ? '2px 0 8px' : '0 20px 0 0';\n}};\n ${emptyStateAnimation};\n\n ${_ref3 => {\n let {\n $cardSize\n } = _ref3;\n return !isLarge($cardSize) && `\n height: 15px;\n `;\n}};\n`;\nconst DescriptionEmpty = styled('span')`\n opacity: 0.8;\n height: 14px;\n width: 95%;\n display: block;\n position: relative;\n ${emptyStateAnimation};\n animation-delay: 0.125s;\n`;\nconst FooterEmpty = styled('span')`\n opacity: 0.8;\n height: 12px;\n width: 30%;\n display: block;\n ${emptyStateAnimation} animation-delay: .25s;\n\n ${_ref4 => {\n let {\n $cardSize\n } = _ref4;\n return !isLarge($cardSize) && `\n height: 10px;\n `;\n}};\n`;\nconst CardEmptyState = () => {\n const {\n props: {\n size\n }\n } = useContext(GlobalContext);\n const isSmallCard = isSmall(size);\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaEmpty, {\n $cardSize: size\n }), /*#__PURE__*/React.createElement(Content, {\n $cardSize: size\n }, /*#__PURE__*/React.createElement(HeaderEmpty, {\n $cardSize: size\n }), !isSmallCard ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DescriptionEmpty, {\n $cardSize: size\n }), /*#__PURE__*/React.createElement(DescriptionEmpty, {\n $cardSize: size,\n style: {\n marginBottom: '12px'\n }\n })) : null, _FooterEmpty || (_FooterEmpty = /*#__PURE__*/React.createElement(FooterEmpty, null))));\n};\n\nconst MediaButton = styled('div')`\n backface-visibility: hidden;\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n transition: ${transition.short('transform')};\n will-change: transform;\n\n > svg {\n display: block;\n }\n\n &:active:not(:focus) {\n transform: scale(0.9);\n }\n`;\n\nvar _path$2, _path2$2;\nconst VolumeMute = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 14 14\"\n}, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFF\",\n fillRule: \"evenodd\",\n stroke: \"none\",\n strokeWidth: \"1\",\n 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\",\n transform: \"translate(-1 -1)\"\n})));\nconst VolumeUp = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 14 14\"\n}, props), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFF\",\n fillRule: \"evenodd\",\n stroke: \"none\",\n strokeWidth: \"1\",\n 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\",\n transform: \"translate(-1 -1)\"\n})));\nconst BottomControls = styled('div')`\n z-index: 2;\n position: absolute;\n bottom: ${_ref => {\n let {\n $cardSize\n } = _ref;\n return isLarge($cardSize) ? 18 : 14;\n}}px;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: ${transition.medium('opacity')};\n will-change: opacity;\n`;\nconst VolumeIcon = styled('svg')`\n stroke: #fff;\n`;\nconst VolumeButton = styled(MediaButton).attrs({\n className: classNames.volumeControl\n})`\n ${VolumeIcon} {\n width: ${_ref2 => {\n let {\n $cardSize\n } = _ref2;\n return isLarge($cardSize) ? 16 : 14;\n}}px;\n height: ${_ref3 => {\n let {\n $cardSize\n } = _ref3;\n return isLarge($cardSize) ? 16 : 14;\n}}px;\n\n ${_ref4 => {\n let {\n $cardSize\n } = _ref4;\n return !isLarge($cardSize) && media.mobile`\n width: 12px;\n height: 12px;\n `;\n}}\n }\n`;\nconst PlaybackRateButton = styled(MediaButton).attrs({\n className: classNames.rateControl\n})`\n font-size: ${_ref5 => {\n let {\n $cardSize\n } = _ref5;\n return isLarge($cardSize) ? 12 : 10;\n}}px;\n min-width: ${_ref6 => {\n let {\n $cardSize\n } = _ref6;\n return isLarge($cardSize) ? 33 : 28;\n}}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 ${_ref7 => {\n let {\n $cardSize\n } = _ref7;\n return !isLarge($cardSize) && media.mobile`\n font-size: 8px;\n margin-left: 8px;\n min-width: 23px;\n `;\n}}\n`;\nconst TimeLabel = styled('span').attrs({\n className: classNames.progressTime\n})`\n margin: ${_ref8 => {\n let {\n $right\n } = _ref8;\n return !$right ? '0 auto 0 0' : '0 0 0 auto';\n}};\n font-family: ${font.mono};\n font-size: 12px;\n padding: 0 16px;\n color: #fff;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n`;\nconst FooterControls = _ref9 => {\n let {\n $cardSize,\n currentTime,\n endTime,\n isMuted,\n onMuteClick,\n onPlaybackRateClick,\n playbackRate\n } = _ref9;\n const VolumeComponent = useMemo(() => isMuted ? VolumeMute : VolumeUp, [isMuted]);\n const isLargeCard = useMemo(() => isLarge($cardSize), [$cardSize]);\n return /*#__PURE__*/React.createElement(BottomControls, {\n $cardSize: $cardSize\n }, isLargeCard && /*#__PURE__*/React.createElement(TimeLabel, null, currentTime), /*#__PURE__*/React.createElement(VolumeButton, {\n title: isMuted ? 'Unmute' : 'Mute',\n $cardSize: $cardSize,\n onClick: onMuteClick\n }, /*#__PURE__*/React.createElement(VolumeIcon, {\n as: VolumeComponent\n })), /*#__PURE__*/React.createElement(PlaybackRateButton, {\n title: \"Playback Rate\",\n $cardSize: $cardSize,\n onClick: onPlaybackRateClick\n }, /*#__PURE__*/React.createElement(\"span\", null, playbackRate, \"x\")), isLargeCard && /*#__PURE__*/React.createElement(TimeLabel, {\n $right: true\n }, endTime));\n};\n\nconst _excluded$5 = [\"$isPlaying\"];\nvar _path$1, _path2$1;\nconst Pause = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 16 20\"\n}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFF\",\n fillRule: \"evenodd\",\n stroke: \"none\",\n strokeWidth: \"1\",\n 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\",\n transform: \"translate(-8 -6)\"\n})));\nconst Play = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 21 24\"\n}, props), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFF\",\n fillRule: \"evenodd\",\n stroke: \"none\",\n strokeWidth: \"1\",\n 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\",\n transform: \"translate(-6 -4)\"\n})));\nconst iconSizes = {\n large: '50px',\n normal: '35px',\n small: '20px'\n};\nconst PlaybackIcon = styled('svg')`\n stroke: #fff;\n`;\nconst PlaybackButtonWrap = styled(MediaButton).attrs({\n className: classNames.playbackControl\n})`\n ${PlaybackIcon} {\n ${_ref => {\n let {\n $cardSize\n } = _ref;\n return css`\n width: ${iconSizes[$cardSize]};\n height: ${iconSizes[$cardSize]};\n padding: ${isLarge($cardSize) ? 0 : '8px'};\n\n ${!isLarge($cardSize) && !isSmall($cardSize) && media.mobile`\n width: calc(${iconSizes.small} * 1.2);\n height: calc(${iconSizes.small} * 1.2);\n `}\n `;\n}}\n }\n`;\nconst PlaybackButton = _ref2 => {\n let {\n $isPlaying\n } = _ref2,\n props = _objectWithoutProperties(_ref2, _excluded$5);\n const PlaybackComponent = useMemo(() => $isPlaying ? Pause : Play, [$isPlaying]);\n return /*#__PURE__*/React.createElement(PlaybackButtonWrap, _extends({\n title: $isPlaying ? 'Pause' : 'Play'\n }, props), /*#__PURE__*/React.createElement(PlaybackIcon, {\n as: PlaybackComponent\n }));\n};\n\nconst SCRUBBER_SIZE = 12;\nconst scrubberSizeScales = {\n normal: 0.8,\n small: 0.9\n};\nconst getScrubberSize = size => Math.floor(SCRUBBER_SIZE * (scrubberSizeScales[size] || 1));\nconst Scrubber = styled('div').attrs(_ref => {\n let {\n $isVisible,\n $positionX\n } = _ref;\n return {\n style: {\n left: $positionX,\n transform: `scale(${$isVisible ? 1 : 0.5}) translate(-50%, -50%)`,\n opacity: $isVisible ? 1 : 0,\n visibility: $isVisible ? '$visible' : 'hidden'\n }\n };\n})`\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: ${transition.short('transform', 'opacity', 'visibility')};\n will-change: left, transform, opacity, visibility;\n backface-visibility: hidden;\n z-index: 3;\n\n ${_ref2 => {\n let {\n $cardSize\n } = _ref2;\n const scrubberSize = getScrubberSize($cardSize);\n return css`\n height: ${scrubberSize}px;\n width: ${scrubberSize}px;\n `;\n}}\n`;\n\nconst _excluded$4 = [\"$isDragging\", \"$isVisible\", \"label\", \"$positionX\", \"size\"];\nconst BASE_FONT_SIZE = 11;\nconst sizeScales$1 = {\n normal: 0.8\n};\nconst getMarkerFontSize = size => BASE_FONT_SIZE * (sizeScales$1[size] || 1);\nconst TooltipBase = styled('span').attrs(_ref => {\n let {\n $position,\n $isDragging,\n $visible\n } = _ref;\n return {\n style: {\n left: `${$position}px`,\n top: $visible ? '-4px' : '0px',\n visibility: $visible ? '$visible' : 'hidden',\n opacity: $visible ? 1 : 0,\n transform: `translate(-50%, ${!$isDragging ? -100 : -110}%)`\n }\n };\n})`\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: ${font.mono};\n font-size: ${_ref2 => {\n let {\n $cardSize\n } = _ref2;\n return getMarkerFontSize($cardSize);\n}}px;\n line-height: 1;\n transition: ${transition.medium('opacity', 'visibility', 'transform')},\n ${transition.long('top')};\n will-change: top, left, visibility, opacity, transform;\n backface-visibility: hidden;\n`;\nconst Tooltip = /*#__PURE__*/forwardRef((_ref3, ref) => {\n let {\n $isDragging,\n $isVisible,\n label,\n $positionX,\n size\n } = _ref3,\n props = _objectWithoutProperties(_ref3, _excluded$4);\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipBase, _extends({\n $visible: $isVisible,\n $position: $positionX,\n $cardSize: size,\n ref: ref,\n $isDragging: $isDragging\n }, props), label));\n});\nTooltip.displayName = 'Tooltip';\n\nconst _excluded$3 = [\"key\"];\nconst HEIGHT$1 = 6;\nconst PADDING = 6;\nconst heightScales = {\n normal: 0.7,\n small: 0.6\n};\nconst activeHeightScales = {\n small: 0.9,\n large: 1.4\n};\nconst getProgressBarHeight = size => Math.floor(HEIGHT$1 * (heightScales[size] || 1));\nconst getProgressBarActiveHeight = size => Math.floor(HEIGHT$1 * (activeHeightScales[size] || 1));\nconst OuterWrap$1 = styled('div').attrs(() => ({\n className: classNames.progressBar\n}))`\n position: relative;\n padding: ${PADDING}px ${PADDING / 2}px ${PADDING / 2}px;\n z-index: 2;\n backface-visibility: hidden;\n`;\nconst BarsWrap = styled('div').attrs(_ref => {\n let {\n $cardSize,\n $isDragging\n } = _ref;\n if ($isDragging) {\n const activeHeight = getProgressBarActiveHeight($cardSize);\n return {\n style: {\n height: `${activeHeight}px`\n }\n };\n }\n return {};\n})`\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: ${transition.short('height')};\n will-change: height;\n pointer-events: none;\n position: relative;\n\n ${_ref2 => {\n let {\n $cardSize\n } = _ref2;\n const height = getProgressBarHeight($cardSize);\n const activeHeight = getProgressBarActiveHeight($cardSize);\n return css`\n height: ${height}px;\n\n ${OuterWrap$1}:hover & {\n height: ${activeHeight}px;\n }\n `;\n}}\n`;\nconst ProgressLine = styled('div')`\n border-radius: inherit;\n height: 100%;\n position: relative;\n overflow: hidden;\n`;\nconst ProgressMask = styled('div').attrs(_ref3 => {\n let {\n $maskScale\n } = _ref3;\n return {\n style: {\n transform: `scaleX(${$maskScale})`\n }\n };\n})`\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`;\nconst ProgressHover = styled('div').attrs(_ref4 => {\n let {\n $cursorRatio,\n $isHovering,\n $progressPercent\n } = _ref4;\n return {\n style: {\n left: $progressPercent,\n transform: `scaleX(${$cursorRatio})`,\n opacity: $isHovering ? 1 : 0,\n visibility: $isHovering ? '$visible' : 'hidden'\n }\n };\n})`\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: ${transition.short('opacity', 'visibility')};\n will-change: left, transform, opacity, $visible;\n`;\nconst BufferedChunk = styled('div').attrs(_ref5 => {\n let {\n start,\n end\n } = _ref5;\n return {\n style: {\n left: `${start}px`,\n right: `${end}px`\n }\n };\n})`\n background: rgba(255, 255, 255, 0.35);\n position: absolute;\n top: 0;\n bottom: 0;\n`;\nconst ProgressBar = _ref6 => {\n let {\n bufferedMedia,\n cursorX,\n duration,\n hoveredTime,\n $isDragging,\n $isHovering,\n onClick,\n onMouseDown,\n onMouseOver,\n progress,\n showTooltip\n } = _ref6;\n const {\n props: {\n size\n }\n } = useContext(GlobalContext);\n const wrapRef = useRef();\n const tooltipRef = useRef();\n const isSmallCard = useMemo(() => isSmall(size), [size]);\n const getWrapWidth = useCallback(() => {\n if (wrapRef.current) {\n return wrapRef.current.getBoundingClientRect().width - PADDING;\n }\n return 0;\n }, []);\n const progressRatio = useMemo(() => clampNumber(progress / duration, 0, 1), [duration, progress]);\n const $progressPercent = useMemo(() => `${clampNumber(progressRatio * 100, 1, 99)}%`, [progressRatio]);\n const $cursorRatio = useMemo(() => {\n if (wrapRef.current) {\n const wrapWidth = getWrapWidth();\n const startPoint = progressRatio * wrapWidth;\n const cursorPosition = cursorX - startPoint;\n const width = wrapWidth - startPoint;\n if (cursorPosition > 0) {\n return clampNumber((cursorPosition / width).toFixed(3), 0, 0.99);\n }\n }\n return 0;\n }, [cursorX, getWrapWidth, progressRatio]);\n const bufferedMediaChunks = useMemo(() => {\n const wrapWidth = getWrapWidth();\n return bufferedMedia.map((chunk, key) => {\n const start = chunk.start * wrapWidth;\n const end = wrapWidth - chunk.end * wrapWidth;\n return {\n key,\n start,\n end\n };\n });\n }, [bufferedMedia, getWrapWidth]);\n const tooltipLabel = useMemo(() => formatSeconds(hoveredTime), [hoveredTime]);\n const tooltipPositionX = useMemo(() => {\n if (wrapRef.current && tooltipRef.current) {\n const wrapWidth = getWrapWidth();\n const tooltipWidth = tooltipRef.current.getBoundingClientRect().width;\n const tooltipHalf = tooltipWidth / 2;\n return clampNumber(cursorX, tooltipHalf, wrapWidth - tooltipHalf);\n }\n return 0;\n }, [cursorX, getWrapWidth]);\n const mouseEvents = useMemo(() => ({\n onClick,\n onMouseDown,\n onMouseOver\n }), [onClick, onMouseDown, onMouseOver]);\n const showAccessories = useMemo(() => $isDragging || $isHovering, [$isDragging, $isHovering]);\n return /*#__PURE__*/React.createElement(OuterWrap$1, _extends({\n $cardSize: size,\n ref: wrapRef\n }, mouseEvents), /*#__PURE__*/React.createElement(BarsWrap, {\n $cardSize: size,\n $isDragging: $isDragging\n }, /*#__PURE__*/React.createElement(ProgressLine, null, /*#__PURE__*/React.createElement(ProgressHover, {\n $cursorRatio: $cursorRatio,\n $isHovering: $isHovering,\n $progressPercent: $progressPercent\n }), bufferedMediaChunks.map(_ref7 => {\n let {\n key\n } = _ref7,\n chunk = _objectWithoutProperties(_ref7, _excluded$3);\n return /*#__PURE__*/React.createElement(BufferedChunk, _extends({\n key: key\n }, chunk));\n }), /*#__PURE__*/React.createElement(ProgressMask, {\n $maskScale: progressRatio\n })), /*#__PURE__*/React.createElement(Scrubber, {\n $cardSize: size,\n $isVisible: showAccessories,\n $positionX: $progressPercent\n }), !isSmallCard && /*#__PURE__*/React.createElement(Tooltip, {\n $isDragging: $isDragging,\n $isVisible: showAccessories,\n label: tooltipLabel,\n $positionX: tooltipPositionX,\n ref: tooltipRef,\n size: size\n })));\n};\n\nvar _path, _path2;\nconst _excluded$2 = [\"$cardSize\"],\n _excluded2$2 = [\"$cardSize\"],\n _excluded3 = [\"type\", \"$cardSize\"];\nconst Backward = _ref => {\n let {\n $cardSize\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded$2);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 29\"\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFF\",\n fillRule: \"evenodd\",\n stroke: \"none\",\n strokeWidth: \"1\",\n 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\",\n transform: \"translate(-4 -1)\"\n })));\n};\nconst Forward = _ref2 => {\n let {\n $cardSize\n } = _ref2,\n props = _objectWithoutProperties(_ref2, _excluded2$2);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 29\"\n }, props), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFF\",\n fillRule: \"evenodd\",\n stroke: \"none\",\n strokeWidth: \"1\",\n 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\",\n transform: \"translate(-4 -1)\"\n })));\n};\nconst SeekIcon = styled('svg')`\n stroke: #fff;\n width: ${_ref3 => {\n let {\n $cardSize\n } = _ref3;\n return isLarge($cardSize) ? 30 : 24;\n}}px;\n height: ${_ref4 => {\n let {\n $cardSize\n } = _ref4;\n return isLarge($cardSize) ? 30 : 24;\n}}px;\n\n ${_ref5 => {\n let {\n $cardSize\n } = _ref5;\n return !isLarge($cardSize) && media.mobile`\n width: 0;\n height: 0;\n `;\n}}\n`;\nconst SeekButtonWrap = styled(MediaButton)`\n margin: 0 ${_ref6 => {\n let {\n $cardSize\n } = _ref6;\n return isLarge($cardSize) ? '28px' : '3px';\n}};\n`;\nconst SeekButton = _ref7 => {\n let {\n type = 'rewind',\n $cardSize\n } = _ref7,\n props = _objectWithoutProperties(_ref7, _excluded3);\n const IconComponent = useMemo(() => type === 'rewind' ? Backward : Forward, [type]);\n return /*#__PURE__*/React.createElement(SeekButtonWrap, _extends({\n title: type === 'rewind' ? 'Rewind' : 'Forward',\n $cardSize: $cardSize\n }, props), /*#__PURE__*/React.createElement(SeekIcon, {\n as: IconComponent,\n $cardSize: $cardSize\n }));\n};\n\nvar _Svg;\nconst BASE_SIZE = 12;\nconst BASE_OFFSET = 6;\nconst offsetScales = {\n normal: 0.8,\n small: 0.6\n};\nconst sizeScales = {\n normal: 0.9,\n small: 0.8\n};\nconst getSpinnerOffset = size => Math.floor(BASE_OFFSET * (offsetScales[size] || 1));\nconst getSpinnerSize = size => Math.floor(BASE_SIZE * (sizeScales[size] || 1));\nconst rotate = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`;\nconst dash = keyframes`\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`;\nconst Wrap = styled(MediaButton).attrs(_ref => {\n let {\n $isVisible\n } = _ref;\n return {\n style: {\n opacity: $isVisible ? 1 : 0,\n visibility: $isVisible ? '$visible' : 'hidden'\n }\n };\n})(_ref2 => {\n let {\n $cardSize\n } = _ref2;\n const size = `${getSpinnerSize($cardSize)}px`;\n const offset = `${getSpinnerOffset($cardSize)}px`;\n return css`\n position: absolute;\n width: ${size};\n right: ${offset};\n top: ${offset};\n transition: ${transition.medium('opacity', 'visibility')};\n will-change: opacity, visibility;\n pointer-events: none;\n `;\n});\nconst Svg = styled('svg')`\n width: 100%;\n animation: ${rotate} 2s linear infinite;\n will-change: transform;\n`;\nconst Circle = styled('circle')`\n stroke: #fff;\n stroke-linecap: round;\n stroke-width: 7;\n fill: none;\n animation: ${dash} 1.5s ease-in-out infinite;\n will-change: stroke-dasharray, stroke-dashoffset;\n`;\nconst Spinner = _ref3 => {\n let {\n size,\n $isVisible\n } = _ref3;\n return /*#__PURE__*/React.createElement(Wrap, {\n $cardSize: size,\n className: classNames.spinner,\n $isVisible: $isVisible\n }, _Svg || (_Svg = /*#__PURE__*/React.createElement(Svg, {\n viewBox: \"0 0 50 50\"\n }, /*#__PURE__*/React.createElement(Circle, {\n cx: \"25\",\n cy: \"25\",\n r: \"20\"\n }))));\n};\n\nconst SPACE_KEY = 32;\nconst L_ARROW_KEY = 37;\nconst R_ARROW_KEY = 39;\nconst M_KEY = 77;\nconst OuterWrap = styled('div').attrs({\n className: classNames.mediaControls\n})`\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n transition: ${transition.long('background')}, ${transition.medium('opacity')};\n will-change: background;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n\n ${_ref => {\n let {\n $hasInteracted,\n $isDragging,\n $isPlaying\n } = _ref;\n const bg = 'rgba(0, 0, 0, 0.35)';\n const dragBg = 'rgba(0, 0, 0, 0.2)';\n const isPaused = $hasInteracted && !$isPlaying;\n return css`\n .${classNames.main}:hover & {\n background: ${!$isDragging ? bg : dragBg};\n }\n\n .${classNames.main}:not(:hover) & {\n opacity: ${!$hasInteracted || isPaused ? 1 : 0};\n ${isPaused && `background: ${bg}`};\n }\n `;\n}}\n`;\nconst InnerWrap = styled('div')`\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`;\nconst ControlsTop = styled('div')`\n flex: 1;\n\n ${_ref2 => {\n let {\n $isVisible\n } = _ref2;\n return !$isVisible && css`\n *[class*='${classNames.mediaControls}']:not(.${classNames.progressTime}) {\n transition: ${transition.medium('opacity', 'visibility')};\n opacity: 0;\n visibility: hidden;\n }\n `;\n}}\n`;\nconst getNextPlaybackRate = rate => {\n switch (rate) {\n case 1:\n return 1.25;\n case 1.25:\n return 1.5;\n case 1.5:\n return 2;\n default:\n return 1;\n }\n};\nconst Controls = _ref3 => {\n let {\n MediaComponent,\n mediaProps\n } = _ref3;\n const {\n props: {\n autoPlay,\n controls,\n mediaRef: propRef,\n muted,\n loop,\n size\n }\n } = useContext(GlobalContext);\n const [duration, setDuration] = useState(0);\n const [progress, setProgress] = useState(0);\n const [buffered, setBuffered] = useState([]);\n const [cursorX, setCursorX] = useState(0);\n const [hoveredTime, setHoveredTime] = useState(0);\n const [$isPlaying, setIsPlaying] = useState(autoPlay);\n const [isMuted, setIsMuted] = useState(muted);\n const [isBuffering, setIsBuffering] = useState(false);\n const [$isHovering, setIsHovering] = useState(false);\n const [$isDragging, setIsDragging] = useState(false);\n const [playbackRate, setPlaybackRat