'use strict';

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

var _extends = require('@babel/runtime/helpers/extends');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var styledComponents = 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 styledComponents.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n    @media (max-width: 48em) {\n      ", ";\n    }\n  "])), styledComponents.css(...arguments));
  },
  desktop: function () {
    return styledComponents.css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n    @media (min-width: 48em) {\n      ", ";\n    }\n  "])), styledComponents.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 = styledComponents.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 && styledComponents.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 = styledComponents.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 = styledComponents.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 styledComponents.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 = styledComponents.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 styledComponents.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) && styledComponents.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n      min-width: 0;\n      padding-right: 14px;\n    "]))));
});
const Description = styledComponents.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 = styledComponents.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 styledComponents.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    ", "\n  "])), !isSmall($cardSize) ? '12px' : '10px', !isSmall($cardSize) && 'width: 100%;');
});
const Author = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n  animation: ", " .75s linear infinite;\n"])), emptyStatePulse);
const emptyStateImageAnimation = styledComponents.css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n  animation: ", " 1.25s linear infinite;\n"])), emptyStateImagePulse);

var _templateObject$e, _templateObject2$a, _templateObject3$9;
const ImageLoadCatcher = styledComponents.styled('img')(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  height: 1px;\n  width: 1px;\n  position: absolute;\n  z-index: -1;\n"])));
const loadingOverlay = styledComponents.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 styledComponents.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: styledComponents.css(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n    flex: 0 0 48px;\n  "]))),
  normal: styledComponents.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: styledComponents.css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n    flex: 1;\n\n    &::before {\n      padding-bottom: 0;\n    }\n  "])))
};
const StyledWrap = styledComponents.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 = styledComponents.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 = styledComponents.styled(ImageComponent)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  ", ";\n"])), emptyStateImageAnimation);
const HeaderEmpty = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.styled('svg')(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  stroke: #fff;\n"])));
const VolumeButton = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.styled('svg')(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  stroke: #fff;\n"])));
const PlaybackButtonWrap = styledComponents.styled(MediaButton).attrs({
  className: classNames.playbackControl
})(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  ", " {\n    ", "\n  }\n"])), PlaybackIcon, _ref => {
  let {
    $cardSize
  } = _ref;
  return styledComponents.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 = styledComponents.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 styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.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 styledComponents.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n      height: ", "px;\n\n      ", ":hover & {\n        height: ", "px;\n      }\n    "])), height, OuterWrap$1, activeHeight);
});
const ProgressLine = styledComponents.styled('div')(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  border-radius: inherit;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n"])));
const ProgressMask = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
const dash = styledComponents.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 = styledComponents.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 styledComponents.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 = styledComponents.styled('svg')(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  width: 100%;\n  animation: ", " 2s linear infinite;\n  will-change: transform;\n"])), rotate);
const Circle = styledComponents.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 = styledComponents.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 styledComponents.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 = styledComponents.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 = styledComponents.styled('div')(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  flex: 1;\n\n  ", "\n"])), _ref2 => {
  let {
    $isVisible
  } = _ref2;
  return !$isVisible && styledComponents.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n      *[class*='", "']:not(.", ") {\n        transition: ", ";\n        opacity: 0;\n        visibility: hidden;\n      }\n    "])), classNames.mediaControls, classNames.progressTime, transition.medium('opacity', 'visibility'));
});
const getNextPlaybackRate = rate => {
  switch (rate) {
    case 1:
      return 1.25;
    case 1.25:
      return 1.5;
    case 1.5:
      return 2;
    default:
      return 1;
  }
};
const Controls = _ref3 => {
  let {
    MediaComponent,
    mediaProps
  } = _ref3;
  const {
    props: {
      autoPlay,
      controls,
      mediaRef: propRef,
      muted,
      loop,
      size
    }
  } = React.useContext(GlobalContext);
  const [duration, setDuration] = React.useState(0);
  const [progress, setProgress] = React.useState(0);
  const [buffered, setBuffered] = React.useState([]);
  const [cursorX, setCursorX] = React.useState(0);
  const [hoveredTime, setHoveredTime] = React.useState(0);
  const [$isPlaying, setIsPlaying] = React.useState(autoPlay);
  const [isMuted, setIsMuted] = React.useState(muted);
  const [isBuffering, setIsBuffering] = React.useState(false);
  const [$isHovering, setIsHovering] = React.useState(false);
  const [$isDragging, setIsDragging] = React.useState(false);
  const [playbackRate, setPlaybackRate] = React.useState(1);
  const [$hasInteracted, setHasInteracted] = React.useState(autoPlay);
  const [pausedByDrag, setPausedByDrag] = React.useState(false);
  const mediaRef = React.useRef();
  const setRefs = React.useCallback(node => {
    mediaRef.current = node;
    if (propRef) {
      if (isFunction(propRef)) {
        propRef(node);
      } else {
        propRef.current = node;
      }
    }
  }, [propRef]);
  const isNotSmall = React.useMemo(() => !isSmall(size), [size]);
  const mediaEvents = React.useMemo(() => ({
    onCanPlay: () => setIsBuffering(false),
    onLoadedMetadata: e => setDuration(e.currentTarget.duration),
    onPause: () => setIsPlaying(false),
    onPlay: () => setIsPlaying(true),
    onPlaying: () => setIsBuffering(false),
    onProgress: e => setBuffered(e.currentTarget.buffered),
    onRateChange: e => setPlaybackRate(e.currentTarget.playbackRate),
    onTimeUpdate: e => setProgress(e.currentTarget.currentTime),
    onVolumeChange: e => setIsMuted(e.currentTarget.muted),
    onWaiting: e => setIsBuffering(true)
  }), []);
  const evaluateCursorPosition = React.useCallback(event => {
    if (mediaRef.current) {
      const bounds = event.currentTarget.getBoundingClientRect();
      const cursor = clampNumber(Math.floor(event.clientX - bounds.left), 0, bounds.width);
      const time = cursor / bounds.width * mediaRef.current.duration;
      return {
        cursor,
        time
      };
    }
    return {
      cursor: 0,
      time: 0
    };
  }, []);
  const togglePlayback = React.useCallback(() => {
    if (mediaRef.current) {
      if (mediaRef.current.paused) {
        if (!$hasInteracted) {
          setHasInteracted(true);
        }
        mediaRef.current.play();
      } else {
        mediaRef.current.pause();
      }
    }
  }, [$hasInteracted]);
  const jumpTo = React.useCallback(time => {
    if (mediaRef.current) {
      const t = clampNumber(time, 0, mediaRef.current.duration);
      mediaRef.current.currentTime = t;
      setProgress(t);
    }
  }, []);
  const onSeekClick = React.useCallback((event, type) => {
    event.preventDefault();
    event.stopPropagation();
    if (mediaRef.current) {
      const {
        currentTime
      } = mediaRef.current;
      jumpTo(type === 'rewind' ? currentTime - 10 : currentTime + 30);
    }
  }, [jumpTo]);
  const onMuteClick = React.useCallback(event => {
    event.preventDefault();
    event.stopPropagation();
    if (mediaRef.current) {
      mediaRef.current.muted = !mediaRef.current.muted;
    }
  }, []);
  const onPlaybackRateClick = React.useCallback(event => {
    event.preventDefault();
    event.stopPropagation();
    if (mediaRef.current) {
      mediaRef.current.playbackRate = getNextPlaybackRate(mediaRef.current.playbackRate);
    }
  }, []);
  const onProgressBarClick = React.useCallback(event => {
    event.preventDefault();
    event.stopPropagation();
    setIsDragging(false);
  }, []);
  const onProgressBarMouseDown = React.useCallback(event => {
    event.preventDefault();
    event.stopPropagation();
    setIsDragging(true);
    const {
      time
    } = evaluateCursorPosition(event);
    jumpTo(time);
  }, [evaluateCursorPosition, jumpTo]);
  const onProgressBarMouseOver = React.useCallback(() => setIsHovering(true), []);
  const onWrapClick = React.useCallback(event => {
    event.preventDefault();
    event.stopPropagation();
    if ($isDragging) {
      setIsDragging(false);
    } else {
      togglePlayback();
    }
  }, [$isDragging, togglePlayback]);
  const onWrapMouseMove = React.useCallback(event => {
    if (($isDragging || $isHovering) && mediaRef.current) {
      event.preventDefault();
      const {
        cursor,
        time
      } = evaluateCursorPosition(event);
      setHoveredTime(time);
      setCursorX(cursor);
      if ($isDragging) {
        if (!mediaRef.current.paused) {
          mediaRef.current.pause();
          setPausedByDrag(true);
        }
        jumpTo(time);
      }
    }
  }, [evaluateCursorPosition, $isDragging, $isHovering, jumpTo]);
  const onWrapMouseOver = React.useCallback(event => {
    if ($isDragging && event.buttons === 0) {
      setIsDragging(false);
    }
  }, [$isDragging]);
  const onWrapKeyDown = React.useCallback(event => {
    if ($isDragging) {
      return;
    }
    const {
      keyCode
    } = event;
    if ([SPACE_KEY, L_ARROW_KEY, R_ARROW_KEY, M_KEY].includes(keyCode) && mediaRef.current) {
      event.preventDefault();
      switch (keyCode) {
        case SPACE_KEY:
          togglePlayback();
          break;
        case L_ARROW_KEY:
          jumpTo(mediaRef.current.currentTime - 5);
          break;
        case R_ARROW_KEY:
          jumpTo(mediaRef.current.currentTime + 5);
          break;
        case M_KEY:
          mediaRef.current.muted = !mediaRef.current.muted;
          break;
      }
    }
  }, [$isDragging, jumpTo, togglePlayback]);
  const outerWrapEvents = React.useMemo(() => ({
    onClick: onWrapClick,
    onKeyDown: onWrapKeyDown,
    onMouseMove: onWrapMouseMove,
    onMouseOut: () => setIsHovering(false),
    onMouseOver: onWrapMouseOver
  }), [onWrapClick, onWrapKeyDown, onWrapMouseMove, onWrapMouseOver]);
  const outerWrapTitle = React.useMemo(() => $hasInteracted ? {
    title: ''
  } : {}, [$hasInteracted]);
  const bufferedMedia = React.useMemo(() => {
    if (buffered && buffered.length && mediaRef.current) {
      return [...Array(buffered.length).keys()].map(index => {
        return {
          start: buffered.start(index) / mediaRef.current.duration,
          end: buffered.end(index) / mediaRef.current.duration
        };
      });
    }
    return [];
  }, [buffered]);
  const currentTime = React.useMemo(() => formatSeconds(progress || 0), [progress]);
  const endTime = React.useMemo(() => formatSeconds(duration || 0), [duration]);
  const footerControlsProps = React.useMemo(() => ({
    $cardSize: size,
    currentTime,
    endTime,
    isMuted,
    onMuteClick,
    onPlaybackRateClick,
    playbackRate
  }), [currentTime, endTime, isMuted, onMuteClick, onPlaybackRateClick, playbackRate, size]);
  const progressBarProps = React.useMemo(() => ({
    bufferedMedia,
    cursorX,
    duration,
    hoveredTime,
    $isDragging,
    $isHovering,
    onClick: onProgressBarClick,
    onMouseDown: onProgressBarMouseDown,
    onMouseOver: onProgressBarMouseOver,
    progress,
    showTooltip: $isDragging || $isHovering
  }), [bufferedMedia, cursorX, duration, hoveredTime, $isDragging, $isHovering, onProgressBarClick, onProgressBarMouseDown, onProgressBarMouseOver, progress]);
  React.useEffect(() => {
    if (!$isDragging && pausedByDrag && mediaRef.current && mediaRef.current.paused) {
      mediaRef.current.play();
      setPausedByDrag(false);
    }
  }, [pausedByDrag, $isDragging]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaComponent, _extends({}, mediaProps, mediaEvents, {
    ref: setRefs,
    autoPlay: autoPlay,
    loop: loop,
    muted: muted
  })), controls && /*#__PURE__*/React.createElement(OuterWrap, _extends({}, outerWrapTitle, {
    tabIndex: 0,
    $hasInteracted: $hasInteracted,
    $isDragging: $isDragging,
    $isPlaying: $isPlaying
  }, outerWrapEvents), /*#__PURE__*/React.createElement(Spinner, {
    size: size,
    $isVisible: isBuffering
  }), !$hasInteracted ? /*#__PURE__*/React.createElement(InnerWrap, null, /*#__PURE__*/React.createElement(PlaybackButton, {
    $cardSize: size
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ControlsTop, {
    $isVisible: !$isDragging
  }, /*#__PURE__*/React.createElement(InnerWrap, null, isNotSmall && /*#__PURE__*/React.createElement(SeekButton, {
    className: classNames.rwControl,
    type: "rewind",
    $cardSize: size,
    onClick: event => onSeekClick(event, 'rewind')
  }), /*#__PURE__*/React.createElement(PlaybackButton, {
    $cardSize: size,
    $isPlaying: $isPlaying
  }), isNotSmall && /*#__PURE__*/React.createElement(SeekButton, {
    className: classNames.ffwControl,
    type: "fastforward",
    $cardSize: size,
    onClick: event => onSeekClick(event, 'fastforward')
  })), isNotSmall && /*#__PURE__*/React.createElement(FooterControls, footerControlsProps)), /*#__PURE__*/React.createElement(ProgressBar, progressBarProps))));
};

var _templateObject$1;
const VideoDOM = styledComponents.styled('video')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  &::media-controls-start-playback-button {\n    display: none;\n    appearance: none;\n  }\n"])));
const Video = props => {
  const {
    state: {
      imageUrl,
      playsInline,
      videoUrl
    }
  } = React.useContext(GlobalContext);
  const mediaProps = React.useMemo(() => {
    const mediaProps = {
      className: "".concat(classNames.media, " ").concat(classNames.video),
      src: videoUrl,
      playsInline
    };
    if (imageUrl) mediaProps.poster = imageProxy(imageUrl);
    return mediaProps;
  }, [imageUrl, playsInline, videoUrl]);
  return /*#__PURE__*/React.createElement(Wrap$1, _extends({
    className: "".concat(classNames.mediaWrapper, " ").concat(classNames.videoWrapper)
  }, props), /*#__PURE__*/React.createElement(Controls, {
    MediaComponent: VideoDOM,
    mediaProps: mediaProps
  }));
};

const Audio = props => {
  const {
    state: {
      audioUrl
    }
  } = React.useContext(GlobalContext);
  const mediaProps = React.useMemo(() => ({
    className: "".concat(classNames.media, " ").concat(classNames.audio),
    src: audioUrl
  }), [audioUrl]);
  return (
    /*#__PURE__*/
    // eslint-disable-next-line
    React.createElement(ImageComponent, _extends({
      className: "".concat(classNames.mediaWrapper, " ").concat(classNames.audioWrapper)
    }, props), /*#__PURE__*/React.createElement(Controls, {
      MediaComponent: "audio",
      mediaProps: mediaProps
    }))
  );
};

const isUrl = url => getUrlPath(url) !== null;
const MEDIA_COMPONENT = {
  video: Video,
  image: ImageComponent,
  audio: Audio
};
const getMediaType = (isAudio, isVideo) => {
  if (isAudio) return 'audio';
  if (isVideo) return 'video';
  return 'image';
};
const CardMedia = () => {
  const {
    state: {
      imageUrl,
      isAudio,
      isVideo
    }
  } = React.useContext(GlobalContext);
  const [isLoading, setIsLoading] = React.useState(isUrl(imageUrl));
  const mediaType = getMediaType(isAudio, isVideo);
  const MediaComponent = MEDIA_COMPONENT[mediaType];
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaComponent, {
    $isLoading: isLoading
  }), isLoading && /*#__PURE__*/React.createElement(ImageLoadCatcher, {
    src: imageUrl,
    onLoad: () => setIsLoading(false)
  }));
};

const _excluded$1 = ["href", "rel", "target", "as"];
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const HEIGHT = '382px';
const contrastStyle = _ref => {
  let {
    $backgroundColor,
    color
  } = _ref;
  return styledComponents.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-color: ", ";\n  transition-property: filter;\n  will-change: filter;\n\n  &&& {\n    color: ", ";\n  }\n\n  &:hover {\n    filter: brightness(90%);\n  }\n"])), $backgroundColor, color, color);
};
const largeStyle = styledComponents.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  height: ", ";\n  ", ";\n"])), HEIGHT, media.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: calc(", " * 7/9);\n  "])), HEIGHT));
const hoverStyle = styledComponents.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition-property: background, border-color;\n  will-change: background, border-color;\n  &:hover {\n    background-color: var(--microlink-hover-background-color, #f5f8fa);\n    border-color: var(--microlink-hover-border-color, #8899a680);\n  }\n"])));
const rtlStyle = _ref2 => {
  let {
    $cardSize
  } = _ref2;
  return styledComponents.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex-direction: ", ";\n"])), isLarge($cardSize) ? 'column-reverse' : 'row-reverse');
};
const baseStyle = styledComponents.css(() => "\n  max-width: var(--microlink-max-width, 500px);\n  background-color: var(--microlink-background-color, #fff);\n  border-width: var(--microlink-border-width, 1px);\n  border-style: var(--microlink-border-style, solid);\n  border-color: var(--microlink-border-color, #e1e8ed);\n  color: var(--microlink-color, #181919);\n  overflow: hidden;\n  font-family: ".concat(font.sans, ";\n  display: flex;\n  text-decoration: none;\n  opacity: 1;\n  position: relative;\n  transition-duration: ").concat(speed.medium, ";\n  transition-timing-function: ").concat(animation.medium, ";\n\n  &:active,\n  &:hover {\n    outline: 0;\n  }\n"));
const Element = styledComponents.styled('a')(baseStyle, _ref3 => {
  let {
    $isLoading,
    contrast
  } = _ref3;
  return !$isLoading && !contrast && hoverStyle;
}, _ref4 => {
  let {
    $cardSize
  } = _ref4;
  return isLarge($cardSize) && largeStyle;
}, _ref5 => {
  let {
    direction
  } = _ref5;
  return direction === 'rtl' && rtlStyle;
}, _ref6 => {
  let {
    $backgroundColor,
    color,
    contrast
  } = _ref6;
  return contrast && color && $backgroundColor && contrastStyle;
}, _ref7 => {
  let {
    $backgroundColor,
    color,
    contrast
  } = _ref7;
  return contrast && (!color || !$backgroundColor) && hoverStyle;
});
const CardWrap = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
  let {
      href,
      rel = 'noopener noreferrer',
      target = '_blank',
      as = 'a'
    } = _ref8,
    restProps = _objectWithoutProperties(_ref8, _excluded$1);
  const {
    state: {
      $backgroundColor,
      color,
      title
    },
    props: {
      size: $cardSize
    }
  } = React.useContext(GlobalContext);
  return /*#__PURE__*/React.createElement(Element, _objectSpread$1(_objectSpread$1(_objectSpread$1({}, as === 'a' ? {
    href,
    rel,
    target
  } : undefined), restProps), {}, {
    $backgroundColor,
    $cardSize,
    color,
    ref,
    title
  }));
});
CardWrap.displayName = 'CardWrap';

/* global IntersectionObserver */

const useIntersectionObserver = (enabled, options) => {
  const [hasIntersected, setHasIntersected] = React.useState(false);
  const refCallback = React.useCallback(node => {
    if (enabled) {
      const onIntersect = (_ref, self) => {
        let [entry] = _ref;
        if (entry.isIntersecting) {
          setHasIntersected(true);
          self.unobserve(entry.target);
        }
      };
      const observer = new IntersectionObserver(onIntersect, options);
      if (node !== null) {
        observer.observe(node);
      }
    } else {
      setHasIntersected(true);
    }
  }, [enabled, options]);
  return [hasIntersected, refCallback];
};

var _CardEmpty, _CardMedia, _CardContent;
const _excluded = ["className", "fetchData", "lazy", "loading", "media", "setData", "url", "apiKey"],
  _excluded2 = ["className", "apiKey", "autoPlay", "controls", "direction", "lazy", "loop", "media", "fetchData", "muted", "playsInline", "size"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const Card = props => {
  const {
      className,
      fetchData,
      lazy,
      loading,
      media: mediaProp,
      setData,
      url,
      apiKey // destructuring to avoid pass it
    } = props,
    restProps = _objectWithoutProperties(props, _excluded);
  const mediaProps = React.useMemo(() => castArray(mediaProp), [mediaProp]);
  const {
    updateState
  } = React.useContext(GlobalContext);
  const [loadingState, setLoading] = React.useState(true);
  const [iframeMedia, setIframeMedia] = React.useState(null);
  const [isError, setIsError] = React.useState(false);
  const isLoadingUndefined = React.useMemo(() => loading === undefined, [loading]);
  const [apiUrl, apiUrlProps] = React.useMemo(() => getApiUrl(_objectSpread(_objectSpread({}, props), {}, {
    media: mediaProps
  })), [mediaProps, props]);
  const isLazyEnabled = React.useMemo(() => isLazySupported && (lazy === true || isObject(lazy)), [lazy]);
  const lazyOptions = React.useMemo(() => isObject(lazy) ? lazy : undefined, [lazy]);
  const [hasIntersected, cardRef] = useIntersectionObserver(isLazyEnabled, lazyOptions);
  const canFetchData = React.useMemo(() => !isLazyEnabled || isLazyEnabled && hasIntersected, [isLazyEnabled, hasIntersected]);
  const mergeData = React.useCallback(fetchedData => {
    const payload = isFunction(setData) ? setData(fetchedData) : _objectSpread(_objectSpread({}, fetchedData), setData);
    const {
      title,
      description,
      url,
      video,
      audio,
      image,
      logo,
      iframe
    } = payload;
    const mediaFallback = image || logo || {};
    let media = mediaFallback;
    let videoUrl;
    let audioUrl;
    let isVideo = false;
    let isAudio = false;
    const preferredMedia = getPreferredMedia(payload, mediaProps);
    switch (preferredMedia) {
      case 'audio':
        isAudio = true;
        audioUrl = getUrlPath(audio);
        break;
      case 'video':
        isVideo = true;
        videoUrl = getUrlPath(video);
        break;
      case 'iframe':
        setIframeMedia(iframe);
        break;
      default:
        media = someProp(payload, mediaProps) || mediaFallback;
        break;
    }
    const imageUrl = getUrlPath(media);
    const {
      color,
      background_color: $backgroundColor
    } = media;
    updateState({
      url,
      color,
      title,
      description,
      imageUrl,
      videoUrl,
      audioUrl,
      isVideo,
      isAudio,
      $backgroundColor
    });
    setLoading(false);
  }, [updateState, mediaProps, setData]);
  const toFetchData = React.useCallback(() => {
    if (canFetchData) {
      setLoading(true);
      const fetch = fetchData ? mql.fetchFromApi(apiUrl, apiUrlProps) : Promise.resolve({});
      fetch.then(_ref => {
        let {
          data
        } = _ref;
        return mergeData(data);
      }).catch(error => {
        setLoading(false);
        setIsError(true);
        console.error("\n\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Microlink SDK \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\n".concat(error.description, "\n\n").concat(JSON.stringify(error.data), "\n\nid   ").concat(error.headers['x-request-id'], "\nuri  ").concat(error.url, "\ncode ").concat(error.code, " (").concat(error.statusCode, ")\n\nmicrolink.io/").concat(error.code.toLowerCase(), "\n"));
      });
    }
  }, [apiUrlProps, fetchData, apiUrl, mergeData, canFetchData]);
  React.useEffect(toFetchData, [url, setData, hasIntersected]);
  const isLoading = isLoadingUndefined ? loadingState : loading;
  if (isError) {
    return /*#__PURE__*/React.createElement("a", _extends({
      href: url
    }, restProps), url);
  }
  if (iframeMedia) {
    if (!isSSR) {
      iframeMedia.scripts.forEach(attrs => {
        const hasScript = document.querySelector("script[src=\"".concat(attrs.src, "\"]"));
        if (!hasScript) {
          const script = document.createElement('script');
          Object.keys(attrs).forEach(key => script[key] = attrs[key]);
          document.body.appendChild(script);
        }
      });
    }
    return /*#__PURE__*/React.createElement("div", _extends({
      className: classNames.iframe,
      dangerouslySetInnerHTML: {
        __html: iframeMedia.html
      }
    }, restProps));
  }
  return /*#__PURE__*/React.createElement(CardWrap, _extends({
    className: "".concat(classNames.main, " ").concat(className).trim(),
    href: url,
    $isLoading: isLoading,
    ref: cardRef
  }, restProps), isLoading ? _CardEmpty || (_CardEmpty = /*#__PURE__*/React.createElement(CardEmptyState, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, _CardMedia || (_CardMedia = /*#__PURE__*/React.createElement(CardMedia, null)), _CardContent || (_CardContent = /*#__PURE__*/React.createElement(CardContent, null))));
};
const Microlink = _ref2 => {
  let {
      className = '',
      apiKey = undefined,
      autoPlay = true,
      controls = true,
      direction = 'ltr',
      lazy = true,
      loop = true,
      media = ['iframe', 'video', 'audio', 'image', 'logo'],
      fetchData = true,
      muted = true,
      playsInline = true,
      size = 'normal'
    } = _ref2,
    props = _objectWithoutProperties(_ref2, _excluded2);
  return /*#__PURE__*/React.createElement(GlobalState, _extends({
    className: className,
    apiKey: apiKey,
    autoPlay: autoPlay,
    controls: controls,
    direction: direction,
    lazy: lazy,
    loop: loop,
    media: media,
    fetchData: fetchData,
    muted: muted,
    playsInline: playsInline,
    size: size
  }, props), otherProps => /*#__PURE__*/React.createElement(Card, otherProps));
};

Object.defineProperty(exports, "fetchFromApi", {
	enumerable: true,
	get: function () { return mql.fetchFromApi; }
});
exports.default = Microlink;
exports.getApiUrl = getApiUrl;
exports.imageProxy = imageProxy;