@microlink/hover-react/dist/microlink.cjs

Turn links into beautiful previews.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var _extends = require('@babel/runtime/helpers/extends');
var React = require('react');
var styled = require('styled-components');
var mql = require('@microlink/mql');

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 = React.useRef(null),
    f = React.useRef("."),
    h = _objectSpread$4(_objectSpread$4({
      ref: a
    }, l ? {
      title: d
    } : {}), v),
    g = React.useMemo(() => "string" == typeof d && d.length > 0, [d]),
    m = React.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;) {
        v = Math.floor((c + h) / 2);
        if (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 React.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 ? /*#__PURE__*/React.createElement(c, h, f.current) : null;
};
function getDefaultExportFromCjs(x) {
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var src = () => /^https?:\/\/(localhost|0|10|127|192(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}|\[::1?\])/gi;
var localhostUrl = /*@__PURE__*/getDefaultExportFromCjs(src);
var _templateObject$i, _templateObject2$e;
const isSSR = typeof window === 'undefined';
const castArray = value => [].concat(value);
const getPreferredMedia = (data, mediaProps) => {
  let prefer;
  for (let index = 0; index < mediaProps.length; index++) {
    const key = mediaProps[index];
    const value = data[key];
    if (!isNil(value)) {
      prefer = key;
      break;
    }
  }
  return prefer;
};
const isFunction = fn => typeof fn === 'function';
const isObject = obj => typeof obj === 'object';
const isNil = value => value == null;
const getUrlPath = data => isObject(data) ? data.url : data;
const someProp = (data, props) => data[props.find(prop => !isNil(data[prop]))];
const media = {
  mobile: function () {
    return styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n    @media (max-width: 48em) {\n      ", ";\n    }\n  "])), styled.css(...arguments));
  },
  desktop: function () {
    return styled.css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n    @media (min-width: 48em) {\n      ", ";\n    }\n  "])), styled.css(...arguments));
  }
};
const getApiUrl = _ref => {
  let {
    apiKey,
    contrast = false,
    data,
    endpoint,
    force,
    headers,
    media,
    prerender,
    proxy,
    ttl,
    url
  } = _ref;
  return mql.getApiUrl(url, {
    apiKey,
    audio: media.includes('audio'),
    data,
    endpoint,
    force,
    headers,
    iframe: media.includes('iframe'),
    palette: contrast,
    prerender,
    proxy,
    screenshot: media.includes('screenshot'),
    ttl,
    video: media.includes('video')
  });
};
const isLarge = cardSize => cardSize === 'large';
const isSmall = cardSize => cardSize === 'small';
const imageProxy = url => localhostUrl().test(url) ? url : "https://images.weserv.nl/?".concat(new URLSearchParams({
  url,
  default: url,
  l: 9,
  af: '',
  il: '',
  n: -1
}).toString());
const isLazySupported = !isSSR && 'IntersectionObserver' in window;
const formatSeconds = secs => {
  const secsToNum = parseInt(secs, 10);
  const hours = Math.floor(secsToNum / 3600);
  const minutes = Math.floor(secsToNum / 60) % 60;
  const seconds = secsToNum % 60;
  return [hours, minutes, seconds].filter((v, i) => v > 0 || i > 0).map(v => v >= 10 ? v : "0".concat(v)).join(':');
};
const clampNumber = (num, min, max) => {
  switch (true) {
    case num <= min:
      return min;
    case num >= max:
      return max;
    default:
      return num;
  }
};
const BASE_CLASSNAME = 'microlink_card';
const CONTENT_BASE_CLASSNAME = "".concat(BASE_CLASSNAME, "__content");
const MEDIA_BASE_CLASSNAME = "".concat(BASE_CLASSNAME, "__media");
const CONTROLS_BASE_CLASSNAME = "".concat(MEDIA_BASE_CLASSNAME, "__controls");
const classNames = {
  main: BASE_CLASSNAME,
  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(BASE_CLASSNAME, "__iframe")
};
const _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 Clamp = _ref => {
  let {
    children,
    className,
    lines
  } = _ref;
  return isNil(children) ? null : /*#__PURE__*/React.createElement(l, {
    className: className,
    lines: lines,
    text: children,
    is: "p"
  });
};
const StyledClamp = styled.styled(Clamp)(_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
  } = _ref2;
  return !$useNanoClamp && styled.css(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      "])));
});
const CardText = _ref3 => {
  let {
      useNanoClamp = true,
      children
    } = _ref3,
    props = _objectWithoutProperties(_ref3, _excluded$7);
  const textProps = useNanoClamp ? props : _objectSpread$3(_objectSpread$3({}, props), {}, {
    as: 'p',
    title: children
  });
  return /*#__PURE__*/React.createElement(StyledClamp, _extends({
    $useNanoClamp: useNanoClamp
  }, textProps), children);
};
const speed = {
  short: '100ms',
  medium: '150ms',
  long: '300ms'
};
const animation = {
  short: 'cubic-bezier(.25,.8,.25,1)',
  medium: 'cubic-bezier(.25,.8,.25,1)',
  long: 'cubic-bezier(.4, 0, .2, 1)'
};
const createTransition = (properties, s) => {
  const suffix = "".concat(speed[s], " ").concat(animation[s]);
  return properties.map(property => "".concat(property, " ").concat(suffix)).join(', ');
};
const 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');
  },
  medium: function () {
    for (var _len2 = arguments.length, properties = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      properties[_key2] = arguments[_key2];
    }
    return createTransition(properties, 'medium');
  },
  long: function () {
    for (var _len3 = arguments.length, properties = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
      properties[_key3] = arguments[_key3];
    }
    return createTransition(properties, 'long');
  }
};

// https://primer.style/design/foundations/typography
const font = {
  sans: "InterUI, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif",
  mono: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace"
};
const _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 = {};
const GlobalContext = /*#__PURE__*/React.createContext(initialState);
const GlobalState = _ref => {
  let {
      autoPlay,
      children,
      controls,
      loop,
      mediaRef,
      muted,
      playsInline,
      size
    } = _ref,
    rest = _objectWithoutProperties(_ref, _excluded$6);
  const [state, setState] = React.useState(initialState);
  const updateState = React.useCallback(newState => setState(currentState => _objectSpread$2(_objectSpread$2({}, currentState), newState)), []);
  const props = React.useMemo(() => ({
    autoPlay,
    controls,
    loop,
    mediaRef,
    muted,
    playsInline,
    size
  }), [autoPlay, controls, loop, mediaRef, muted, playsInline, size]);
  const values = React.useMemo(() => ({
    props,
    state,
    updateState
  }), [props, state, updateState]);
  return /*#__PURE__*/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\./;
const BADGE_WIDTH = '16px';
const BADGE_HEIGHT = '12px';
const getHostname = href => {
  if (isNil(href)) return '';
  const {
    hostname
  } = new URL(href);
  return hostname.replace(REGEX_STRIP_WWW, '');
};
const mobileDescriptionStyle = styled.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  "]))));
const Content = styled.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
  } = _ref;
  return styled.css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral(["\n    flex: ", ";\n    justify-content: ", ";\n    flex-direction: ", ";\n    align-items: ", ";\n  "])), !isLarge($cardSize) ? 1 : '0 0 125px', !isSmall($cardSize) ? 'space-around' : 'space-between', !isSmall($cardSize) ? 'column' : 'row', !isSmall($cardSize) ? 'stretch' : 'center');
});
const Header = styled.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
  } = _ref2;
  return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n    flex-grow: ", ";\n    font-size: ", ";\n\n    ", "\n  "])), !isSmall($cardSize) ? 1.2 : 0.8, !isSmall($cardSize) ? '16px' : '15px', isSmall($cardSize) && styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n      min-width: 0;\n      padding-right: 14px;\n    "]))));
});
const Description = styled.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
  } = _ref3;
  return !isLarge($cardSize) && mobileDescriptionStyle;
});
const Footer = styled.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
  } = _ref4;
  return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    ", "\n  "])), !isSmall($cardSize) ? '12px' : '10px', !isSmall($cardSize) && 'width: 100%;');
});
const Author = styled.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);
const PoweredBy = styled.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'), BADGE_WIDTH, BADGE_WIDTH, BADGE_WIDTH, BADGE_HEIGHT);
const CardContent = () => {
  const {
    state: {
      description,
      title,
      url
    },
    props: {
      size
    }
  } = React.useContext(GlobalContext);
  const isSmallCard = isSmall(size);
  const formattedUrl = React.useMemo(() => getHostname(url), [url]);
  const handleOnClick = React.useCallback(e => {
    e.preventDefault();
    window.open('https://www.microlink.io', '_blank');
  }, []);
  return /*#__PURE__*/React.createElement(Content, {
    $cardSize: size
  }, /*#__PURE__*/React.createElement(Header, {
    $cardSize: size
  }, /*#__PURE__*/React.createElement(CardText, {
    $useNanoClamp: false
  }, title)), !isSmallCard && /*#__PURE__*/React.createElement(Description, {
    $cardSize: size
  }, /*#__PURE__*/React.createElement(CardText, {
    lines: 2
  }, description)), /*#__PURE__*/React.createElement(Footer, {
    $cardSize: size
  }, /*#__PURE__*/React.createElement(Author, {
    $useNanoClamp: false
  }, formattedUrl), /*#__PURE__*/React.createElement(PoweredBy, {
    onClick: handleOnClick
  })));
};
var _templateObject$f, _templateObject2$b, _templateObject3$a, _templateObject4$8;
const emptyStatePulse = styled.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"])));
const emptyStateImagePulse = styled.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"])));
const emptyStateAnimation = styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n  animation: ", " .75s linear infinite;\n"])), emptyStatePulse);
const emptyStateImageAnimation = styled.css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n  animation: ", " 1.25s linear infinite;\n"])), emptyStateImagePulse);
var _templateObject$e, _templateObject2$a, _templateObject3$9;
const ImageLoadCatcher = styled.styled('img')(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  height: 1px;\n  width: 1px;\n  position: absolute;\n  z-index: -1;\n"])));
const loadingOverlay = styled.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
  } = _ref;
  return styled.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: styled.css(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n    flex: 0 0 48px;\n  "]))),
  normal: styled.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: styled.css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n    flex: 1;\n\n    &::before {\n      padding-bottom: 0;\n    }\n  "])))
};
const StyledWrap = styled.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
  } = _ref;
  return mediaSizeStyles[$cardSize];
}, loadingOverlay);
const Wrap$1 = props => {
  const {
    props: {
      size
    }
  } = React.useContext(GlobalContext);
  return /*#__PURE__*/React.createElement(StyledWrap, _extends({
    $cardSize: size
  }, props));
};
var _templateObject$c;
const ImageWrap = styled.styled(Wrap$1).attrs({
  className: "".concat(classNames.media, " ").concat(classNames.image)
})(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  background-image: ", ";\n"])), _ref => {
  let {
    url
  } = _ref;
  return url ? "url('".concat(imageProxy(url), "')") : '';
});
const ImageComponent = props => {
  const {
    state: {
      imageUrl
    }
  } = React.useContext(GlobalContext);
  return /*#__PURE__*/React.createElement(ImageWrap, _extends({
    url: imageUrl
  }, props));
};
var _templateObject$b, _templateObject2$8, _templateObject3$7, _templateObject4$6, _FooterEmpty;
const MediaEmpty = styled.styled(ImageComponent)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  ", ";\n"])), emptyStateImageAnimation);
const HeaderEmpty = styled.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
  } = _ref;
  return !isSmall($cardSize) ? '60%' : '75%';
}, _ref2 => {
  let {
    $cardSize
  } = _ref2;
  return !isSmall($cardSize) ? '2px 0 8px' : '0 20px 0 0';
}, emptyStateAnimation, _ref3 => {
  let {
    $cardSize
  } = _ref3;
  return !isLarge($cardSize) && "\n    height: 15px;\n  ";
});
const DescriptionEmpty = styled.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);
const FooterEmpty = styled.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
  } = _ref4;
  return !isLarge($cardSize) && "\n    height: 10px;\n  ";
});
const CardEmptyState = () => {
  const {
    props: {
      size
    }
  } = React.useContext(GlobalContext);
  const isSmallCard = isSmall(size);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaEmpty, {
    $cardSize: size
  }), /*#__PURE__*/React.createElement(Content, {
    $cardSize: size
  }, /*#__PURE__*/React.createElement(HeaderEmpty, {
    $cardSize: size
  }), !isSmallCard ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DescriptionEmpty, {
    $cardSize: size
  }), /*#__PURE__*/React.createElement(DescriptionEmpty, {
    $cardSize: size,
    style: {
      marginBottom: '12px'
    }
  })) : null, _FooterEmpty || (_FooterEmpty = /*#__PURE__*/React.createElement(FooterEmpty, null))));
};
var _templateObject$a;
const MediaButton = styled.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 => /*#__PURE__*/React.createElement("svg", _extends({
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 14 14"
}, props), _path$2 || (_path$2 = /*#__PURE__*/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)"
})));
const VolumeUp = props => /*#__PURE__*/React.createElement("svg", _extends({
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 14 14"
}, props), _path2$2 || (_path2$2 = /*#__PURE__*/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)"
})));
const BottomControls = styled.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
  } = _ref;
  return isLarge($cardSize) ? 18 : 14;
}, transition.medium('opacity'));
const VolumeIcon = styled.styled('svg')(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  stroke: #fff;\n"])));
const VolumeButton = styled.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
  } = _ref2;
  return isLarge($cardSize) ? 16 : 14;
}, _ref3 => {
  let {
    $cardSize
  } = _ref3;
  return isLarge($cardSize) ? 16 : 14;
}, _ref4 => {
  let {
    $cardSize
  } = _ref4;
  return !isLarge($cardSize) && media.mobile(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n      width: 12px;\n      height: 12px;\n    "])));
});
const PlaybackRateButton = styled.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
  } = _ref5;
  return isLarge($cardSize) ? 12 : 10;
}, _ref6 => {
  let {
    $cardSize
  } = _ref6;
  return isLarge($cardSize) ? 33 : 28;
}, _ref7 => {
  let {
    $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  "])));
});
const TimeLabel = styled.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
  } = _ref8;
  return !$right ? '0 auto 0 0' : '0 0 0 auto';
}, font.mono);
const FooterControls = _ref9 => {
  let {
    $cardSize,
    currentTime,
    endTime,
    isMuted,
    onMuteClick,
    onPlaybackRateClick,
    playbackRate
  } = _ref9;
  const VolumeComponent = React.useMemo(() => isMuted ? VolumeMute : VolumeUp, [isMuted]);
  const isLargeCard = React.useMemo(() => isLarge($cardSize), [$cardSize]);
  return /*#__PURE__*/React.createElement(BottomControls, {
    $cardSize: $cardSize
  }, isLargeCard && /*#__PURE__*/React.createElement(TimeLabel, null, currentTime), /*#__PURE__*/React.createElement(VolumeButton, {
    title: isMuted ? 'Unmute' : 'Mute',
    $cardSize: $cardSize,
    onClick: onMuteClick
  }, /*#__PURE__*/React.createElement(VolumeIcon, {
    as: VolumeComponent
  })), /*#__PURE__*/React.createElement(PlaybackRateButton, {
    title: "Playback Rate",
    $cardSize: $cardSize,
    onClick: onPlaybackRateClick
  }, /*#__PURE__*/React.createElement("span", null, playbackRate, "x")), isLargeCard && /*#__PURE__*/React.createElement(TimeLabel, {
    $right: true
  }, endTime));
};
const _excluded$5 = ["$isPlaying"];
var _path$1, _path2$1, _templateObject$8, _templateObject2$6, _templateObject3$5, _templateObject4$4;
const Pause = props => /*#__PURE__*/React.createElement("svg", _extends({
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 16 20"
}, props), _path$1 || (_path$1 = /*#__PURE__*/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)"
})));
const Play = props => /*#__PURE__*/React.createElement("svg", _extends({
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 21 24"
}, props), _path2$1 || (_path2$1 = /*#__PURE__*/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)"
})));
const iconSizes = {
  large: '50px',
  normal: '35px',
  small: '20px'
};
const PlaybackIcon = styled.styled('svg')(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  stroke: #fff;\n"])));
const PlaybackButtonWrap = styled.styled(MediaButton).attrs({
  className: classNames.playbackControl
})(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  ", " {\n    ", "\n  }\n"])), PlaybackIcon, _ref => {
  let {
    $cardSize
  } = _ref;
  return styled.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));
});
const PlaybackButton = _ref2 => {
  let {
      $isPlaying
    } = _ref2,
    props = _objectWithoutProperties(_ref2, _excluded$5);
  const PlaybackComponent = React.useMemo(() => $isPlaying ? Pause : Play, [$isPlaying]);
  return /*#__PURE__*/React.createElement(PlaybackButtonWrap, _extends({
    title: $isPlaying ? 'Pause' : 'Play'
  }, props), /*#__PURE__*/React.createElement(PlaybackIcon, {
    as: PlaybackComponent
  }));
};
var _templateObject$7, _templateObject2$5;
const SCRUBBER_SIZE = 12;
const scrubberSizeScales = {
  normal: 0.8,
  small: 0.9
};
const getScrubberSize = size => Math.floor(SCRUBBER_SIZE * (scrubberSizeScales[size] || 1));
const Scrubber = styled.styled('div').attrs(_ref => {
  let {
    $isVisible,
    $positionX
  } = _ref;
  return {
    style: {
      left: $positionX,
      transform: "scale(".concat($isVisible ? 1 : 0.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
  } = _ref2;
  const scrubberSize = getScrubberSize($cardSize);
  return styled.css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n      height: ", "px;\n      width: ", "px;\n    "])), scrubberSize, scrubberSize);
});
const _excluded$4 = ["$isDragging", "$isVisible", "label", "$positionX", "size"];
var _templateObject$6;
const BASE_FONT_SIZE = 11;
const sizeScales$1 = {
  normal: 0.8
};
const getMarkerFontSize = size => BASE_FONT_SIZE * (sizeScales$1[size] || 1);
const TooltipBase = styled.styled('span').attrs(_ref => {
  let {
    $position,
    $isDragging,
    $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 ? -100 : -110, "%)")
    }
  };
})(_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
  } = _ref2;
  return getMarkerFontSize($cardSize);
}, transition.medium('opacity', 'visibility', 'transform'), transition.long('top'));
const Tooltip = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
  let {
      $isDragging,
      $isVisible,
      label,
      $positionX,
      size
    } = _ref3,
    props = _objectWithoutProperties(_ref3, _excluded$4);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/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 HEIGHT$1 = 6;
const PADDING = 6;
const heightScales = {
  normal: 0.7,
  small: 0.6
};
const activeHeightScales = {
  small: 0.9,
  large: 1.4
};
const getProgressBarHeight = size => Math.floor(HEIGHT$1 * (heightScales[size] || 1));
const getProgressBarActiveHeight = size => Math.floor(HEIGHT$1 * (activeHeightScales[size] || 1));
const OuterWrap$1 = styled.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"])), PADDING, PADDING / 2, PADDING / 2);
const BarsWrap = styled.styled('div').attrs(_ref => {
  let {
    $cardSize,
    $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
  } = _ref2;
  const height = getProgressBarHeight($cardSize);
  const activeHeight = getProgressBarActiveHeight($cardSize);
  return styled.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n      height: ", "px;\n\n      ", ":hover & {\n        height: ", "px;\n      }\n    "])), height, OuterWrap$1, activeHeight);
});
const ProgressLine = styled.styled('div')(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  border-radius: inherit;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n"])));
const ProgressMask = styled.styled('div').attrs(_ref3 => {
  let {
    $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"])));
const ProgressHover = styled.styled('div').attrs(_ref4 => {
  let {
    $cursorRatio,
    $isHovering,
    $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'));
const BufferedChunk = styled.styled('div').attrs(_ref5 => {
  let {
    start,
    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"])));
const ProgressBar = _ref6 => {
  let {
    bufferedMedia,
    cursorX,
    duration,
    hoveredTime,
    $isDragging,
    $isHovering,
    onClick,
    onMouseDown,
    onMouseOver,
    progress,
    showTooltip
  } = _ref6;
  const {
    props: {
      size
    }
  } = React.useContext(GlobalContext);
  const wrapRef = React.useRef();
  const tooltipRef = React.useRef();
  const isSmallCard = React.useMemo(() => isSmall(size), [size]);
  const getWrapWidth = React.useCallback(() => {
    if (wrapRef.current) {
      return wrapRef.current.getBoundingClientRect().width - PADDING;
    }
    return 0;
  }, []);
  const progressRatio = React.useMemo(() => clampNumber(progress / duration, 0, 1), [duration, progress]);
  const $progressPercent = React.useMemo(() => "".concat(clampNumber(progressRatio * 100, 1, 99), "%"), [progressRatio]);
  const $cursorRatio = React.useMemo(() => {
    if (wrapRef.current) {
      const wrapWidth = getWrapWidth();
      const startPoint = progressRatio * wrapWidth;
      const cursorPosition = cursorX - startPoint;
      const width = wrapWidth - startPoint;
      if (cursorPosition > 0) {
        return clampNumber((cursorPosition / width).toFixed(3), 0, 0.99);
      }
    }
    return 0;
  }, [cursorX, getWrapWidth, progressRatio]);
  const bufferedMediaChunks = React.useMemo(() => {
    const wrapWidth = getWrapWidth();
    return bufferedMedia.map((chunk, key) => {
      const start = chunk.start * wrapWidth;
      const end = wrapWidth - chunk.end * wrapWidth;
      return {
        key,
        start,
        end
      };
    });
  }, [bufferedMedia, getWrapWidth]);
  const tooltipLabel = React.useMemo(() => formatSeconds(hoveredTime), [hoveredTime]);
  const tooltipPositionX = React.useMemo(() => {
    if (wrapRef.current && tooltipRef.current) {
      const wrapWidth = getWrapWidth();
      const tooltipWidth = tooltipRef.current.getBoundingClientRect().width;
      const tooltipHalf = tooltipWidth / 2;
      return clampNumber(cursorX, tooltipHalf, wrapWidth - tooltipHalf);
    }
    return 0;
  }, [cursorX, getWrapWidth]);
  const mouseEvents = React.useMemo(() => ({
    onClick,
    onMouseDown,
    onMouseOver
  }), [onClick, onMouseDown, onMouseOver]);
  const showAccessories = React.useMemo(() => $isDragging || $isHovering, [$isDragging, $isHovering]);
  return /*#__PURE__*/React.createElement(OuterWrap$1, _extends({
    $cardSize: size,
    ref: wrapRef
  }, mouseEvents), /*#__PURE__*/React.createElement(BarsWrap, {
    $cardSize: size,
    $isDragging: $isDragging
  }, /*#__PURE__*/React.createElement(ProgressLine, null, /*#__PURE__*/React.createElement(ProgressHover, {
    $cursorRatio: $cursorRatio,
    $isHovering: $isHovering,
    $progressPercent: $progressPercent
  }), bufferedMediaChunks.map(_ref7 => {
    let {
        key
      } = _ref7,
      chunk = _objectWithoutProperties(_ref7, _excluded$3);
    return /*#__PURE__*/React.createElement(BufferedChunk, _extends({
      key: key
    }, chunk));
  }), /*#__PURE__*/React.createElement(ProgressMask, {
    $maskScale: progressRatio
  })), /*#__PURE__*/React.createElement(Scrubber, {
    $cardSize: size,
    $isVisible: showAccessories,
    $positionX: $progressPercent
  }), !isSmallCard && /*#__PURE__*/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"];
const Backward = _ref => {
  let props = _objectWithoutProperties(_ref, _excluded$2);
  return /*#__PURE__*/React.createElement("svg", _extends({
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 29"
  }, props), _path || (_path = /*#__PURE__*/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)"
  })));
};
const Forward = _ref2 => {
  let props = _objectWithoutProperties(_ref2, _excluded2$1);
  return /*#__PURE__*/React.createElement("svg", _extends({
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 29"
  }, props), _path2 || (_path2 = /*#__PURE__*/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)"
  })));
};
const SeekIcon = styled.styled('svg')(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  stroke: #fff;\n  width: ", "px;\n  height: ", "px;\n\n  ", "\n"])), _ref3 => {
  let {
    $cardSize
  } = _ref3;
  return isLarge($cardSize) ? 30 : 24;
}, _ref4 => {
  let {
    $cardSize
  } = _ref4;
  return isLarge($cardSize) ? 30 : 24;
}, _ref5 => {
  let {
    $cardSize
  } = _ref5;
  return !isLarge($cardSize) && media.mobile(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n    width: 0;\n    height: 0;\n  "])));
});
const SeekButtonWrap = styled.styled(MediaButton)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  margin: 0 ", ";\n"])), _ref6 => {
  let {
    $cardSize
  } = _ref6;
  return isLarge($cardSize) ? '28px' : '3px';
});
const SeekButton = _ref7 => {
  let {
      type = 'rewind',
      $cardSize
    } = _ref7,
    props = _objectWithoutProperties(_ref7, _excluded3);
  const IconComponent = React.useMemo(() => type === 'rewind' ? Backward : Forward, [type]);
  return /*#__PURE__*/React.createElement(SeekButtonWrap, _extends({
    title: type === 'rewind' ? 'Rewind' : 'Forward',
    $cardSize: $cardSize
  }, props), /*#__PURE__*/React.createElement(SeekIcon, {
    as: IconComponent,
    $cardSize: $cardSize
  }));
};
var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _Svg;
const BASE_SIZE = 12;
const BASE_OFFSET = 6;
const offsetScales = {
  normal: 0.8,
  small: 0.6
};
const sizeScales = {
  normal: 0.9,
  small: 0.8
};
const getSpinnerOffset = size => Math.floor(BASE_OFFSET * (offsetScales[size] || 1));
const getSpinnerSize = size => Math.floor(BASE_SIZE * (sizeScales[size] || 1));
const rotate = styled.keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
const dash = styled.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"])));
const Wrap = styled.styled(MediaButton).attrs(_ref => {
  let {
    $isVisible
  } = _ref;
  return {
    style: {
      opacity: $isVisible ? 1 : 0,
      visibility: $isVisible ? '$visible' : 'hidden'
    }
  };
})(_ref2 => {
  let {
    $cardSize
  } = _ref2;
  const size = "".concat(getSpinnerSize($cardSize), "px");
  const offset = "".concat(getSpinnerOffset($cardSize), "px");
  return styled.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'));
});
const Svg = styled.styled('svg')(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  width: 100%;\n  animation: ", " 2s linear infinite;\n  will-change: transform;\n"])), rotate);
const Circle = styled.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);
const Spinner = _ref3 => {
  let {
    size,
    $isVisible
  } = _ref3;
  return /*#__PURE__*/React.createElement(Wrap, {
    $cardSize: size,
    className: classNames.spinner,
    $isVisible: $isVisible
  }, _Svg || (_Svg = /*#__PURE__*/React.createElement(Svg, {
    viewBox: "0 0 50 50"
  }, /*#__PURE__*/React.createElement(Circle, {
    cx: "25",
    cy: "25",
    r: "20"
  }))));
};
var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1;
const SPACE_KEY = 32;
const L_ARROW_KEY = 37;
const R_ARROW_KEY = 39;
const M_KEY = 77;
const OuterWrap = styled.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,
    $isDragging,
    $isPlaying
  } = _ref;
  const bg = 'rgba(0, 0, 0, 0.35)';
  const dragBg = 'rgba(0, 0, 0, 0.2)';
  const isPaused = $hasInteracted && !$isPlaying;
  return styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n      .", ":hover & {\n        background: ", ";\n      }\n\n      .", ":not(:hover) & {\n        opacity: ", ";\n        ", ";\n      }\n    "])), classNames.main, !$isDragging ? bg : dragBg, classNames.main, !$hasInteracted || isPaused ? 1 : 0, isPaused && "background: ".concat(bg));
});
const InnerWrap = styled.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"])));
const ControlsTop = styled.styled('div')(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  flex: 1;\n\n  ", "\n"])), _ref2 => {
  let {