"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Video = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

require("intersection-observer");

var _react = _interopRequireWildcard(require("react"));

var _Box = require("../Box");

var _Heading = require("../Heading");

var _useWindowResize2 = require("../hooks/useWindowResize");

var _Lightbox = require("../Lightbox");

var _PseudoBox = require("../PseudoBox");

var _Text = require("../Text");

var _styles = _interopRequireDefault(require("./styles"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __jsx = _react["default"].createElement;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function OuterContainer(props) {
  var id = props.id,
      cover = props.cover,
      children = props.children,
      src = props.src,
      withLightbox = props.withLightbox,
      full = props.full,
      iFrame = props.iFrame,
      innerRef = props.innerRef,
      rest = (0, _objectWithoutProperties2["default"])(props, ["id", "cover", "children", "src", "withLightbox", "full", "iFrame", "innerRef"]);

  var _useVideoStyle = (0, _styles["default"])({}),
      videoStyleProps = _useVideoStyle.root,
      fullVideoStyleProps = _useVideoStyle.full;

  var containerProps = _objectSpread(_objectSpread({}, videoStyleProps), full && fullVideoStyleProps); // set cover image background


  if (iFrame && cover) containerProps.style = {
    backgroundImage: "url(".concat(cover, ")")
  };

  var innerContent = __jsx(_PseudoBox.PseudoBox, (0, _extends2["default"])({
    id: id,
    ref: innerRef
  }, containerProps, rest), children);

  if (withLightbox && src) {
    return __jsx(_Lightbox.LightboxMedia, {
      src: src,
      type: "video",
      cover: cover
    }, innerContent);
  }

  return innerContent;
}

var useMediaStyle = function useMediaStyle(_ref) {
  var _ref$isStuck = _ref.isStuck,
      isStuck = _ref$isStuck === void 0 ? false : _ref$isStuck,
      _ref$allowSticky = _ref.allowSticky,
      allowSticky = _ref$allowSticky === void 0 ? false : _ref$allowSticky,
      _ref$isEmbed = _ref.isEmbed,
      isEmbed = _ref$isEmbed === void 0 ? false : _ref$isEmbed,
      _ref$full = _ref.full,
      full = _ref$full === void 0 ? false : _ref$full,
      height = _ref.height,
      width = _ref.width;

  var _useVideoStyle2 = (0, _styles["default"])({}),
      isStuckStyleProps = _useVideoStyle2.stuck,
      nativeVideoStyleProps = _useVideoStyle2["native"],
      iframeStyleProps = _useVideoStyle2.iframe;

  if (isStuck && allowSticky) {
    return isStuckStyleProps;
  }

  if (full || height && width) {
    if (!isEmbed) {
      return nativeVideoStyleProps;
    }

    return iframeStyleProps;
  }

  return {};
};

var VideoError = function VideoError(_ref2) {
  var error = _ref2.error;
  return __jsx(_Box.Box, null, __jsx(_Heading.Heading, null, "Something went wrong!"), __jsx(_Text.Text, null, error.toString()));
};

var SourceMissingError = new Error('video source missing');

var Video = function Video(props) {
  var loading = props.loading,
      error = props.error,
      src = props.src,
      cover = props.cover,
      id = props.id,
      _props$autoplay = props.autoplay,
      autoplay = _props$autoplay === void 0 ? true : _props$autoplay,
      allowSticky = props.allowSticky,
      height = props.height,
      width = props.width,
      rest = (0, _objectWithoutProperties2["default"])(props, ["loading", "error", "src", "cover", "id", "autoplay", "allowSticky", "height", "width"]);
  var videoRef = (0, _react.useRef)(null);

  var _useWindowResize = (0, _useWindowResize2.useWindowResize)(1000),
      windowWidth = _useWindowResize.windowWidth;

  var _useState = (0, _react.useState)(false),
      isStuck = _useState[0],
      setIsStuck = _useState[1];

  var videoStyleProps = useMediaStyle(_objectSpread({
    isStuck: isStuck,
    height: height,
    width: width
  }, props));
  var embedStyleProps = useMediaStyle(_objectSpread({
    isStuck: isStuck,
    isEmbed: true,
    height: height,
    width: width
  }, props));
  (0, _react.useEffect)(function () {
    if (allowSticky && 'IntersectionObserver' in window && windowWidth > 600) {
      var observer = new IntersectionObserver(function (items) {
        items.forEach(function (item) {
          setIsStuck(!item.isIntersecting);
        });
      }, {
        threshold: 0.0
      });

      if (videoRef.current) {
        observer.observe(videoRef.current);
      }

      return function () {
        observer.disconnect();
      };
    }

    if (allowSticky && isStuck) {
      setIsStuck(false);
    }

    return function () {};
  }, [videoRef.current, windowWidth]);

  if (loading) {
    return __jsx(OuterContainer, {
      id: id,
      cover: cover
    }, __jsx("video", {
      poster: cover,
      key: id,
      style: videoStyleProps
    }));
  } //! ERROR


  if (error || !src) {
    return __jsx(VideoError, {
      error: error || SourceMissingError
    });
  }

  if (src.indexOf('youtube') > -1) {
    return __jsx(OuterContainer, (0, _extends2["default"])({
      id: id,
      cover: cover,
      src: src,
      iFrame: true,
      innerRef: videoRef,
      height: height,
      width: width
    }, rest), __jsx("iframe", (0, _extends2["default"])({
      id: "youtube_embed",
      src: src,
      title: "Video",
      style: embedStyleProps
    }, props)));
  } //* Native Video


  return __jsx(OuterContainer, (0, _extends2["default"])({
    id: id,
    cover: cover,
    innerRef: videoRef,
    src: src,
    height: height,
    width: width
  }, rest), __jsx("video", {
    poster: cover,
    playsInline: true,
    key: id,
    controls: true,
    autoPlay: autoplay,
    style: videoStyleProps
  }, __jsx("source", {
    src: src,
    type: "video/mp4"
  }), __jsx("source", {
    src: src,
    media: "all and (max-width:800px)",
    type: "video/mp4"
  }), __jsx("p", null, "Your browser doesn't support HTML5 video. Here is a ", __jsx("a", {
    href: src
  }, "link to the video"), " instead.")));
};

exports.Video = Video;
//# sourceMappingURL=Video.js.map