@micromag/element-background 0.3.531 → 0.3.547

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-background",
-    "version": "0.3.531",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,11 +30,10 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -59,8 +58,8 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.531",
-        "@micromag/element-video": "^0.3.531",
+        "@micromag/core": "^0.3.547",
+        "@micromag/element-video": "^0.3.547",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -71,5 +70,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "e3a59c467ad33528b38eb4badd78b6ed0e38a3a6"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,284 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var utils = require('@micromag/core/utils');
-var size = require('@folklore/size');
-var Video = require('@micromag/element-video');
-
-var styles = {"layers":"micromag-element-background-layers","layer":"micromag-element-background-layer","videoContainer":"micromag-element-background-videoContainer","video":"micromag-element-background-video","container":"micromag-element-background-container","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
-
-var propTypes$1 = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  resolution: PropTypes.number,
-  fit: PropTypes.oneOf(['contain', 'cover']),
-  horizontalAlign: PropTypes.string,
-  verticalAlign: PropTypes.string,
-  repeat: PropTypes.bool,
-  color: core.PropTypes.color,
-  media: PropTypes.oneOfType([core.PropTypes.imageMedia, core.PropTypes.videoMedia]),
-  mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    // eslint-disable-next-line react/forbid-prop-types
-    current: PropTypes.any
-  })]),
-  className: PropTypes.string,
-  playing: PropTypes.bool,
-  muted: PropTypes.bool,
-  children: PropTypes.node,
-  loadingMode: PropTypes.string,
-  shouldLoad: PropTypes.bool,
-  onPlayError: PropTypes.func,
-  withoutVideo: PropTypes.bool,
-  forceMuted: PropTypes.bool
-};
-var defaultProps$1 = {
-  width: null,
-  height: null,
-  resolution: 1,
-  fit: null,
-  horizontalAlign: 'center',
-  verticalAlign: 'center',
-  repeat: false,
-  color: null,
-  media: null,
-  mediaRef: null,
-  className: null,
-  playing: false,
-  muted: false,
-  children: null,
-  loadingMode: 'lazy',
-  shouldLoad: true,
-  onPlayError: null,
-  withoutVideo: false,
-  forceMuted: false
-};
-var Background = function Background(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    resolution = _ref.resolution,
-    fit = _ref.fit,
-    horizontalAlign = _ref.horizontalAlign,
-    verticalAlign = _ref.verticalAlign,
-    repeat = _ref.repeat,
-    color = _ref.color,
-    media = _ref.media,
-    mediaRef = _ref.mediaRef,
-    className = _ref.className,
-    playing = _ref.playing,
-    muted = _ref.muted,
-    children = _ref.children,
-    loadingMode = _ref.loadingMode,
-    shouldLoad = _ref.shouldLoad,
-    onPlayError = _ref.onPlayError,
-    withoutVideo = _ref.withoutVideo,
-    forceMuted = _ref.forceMuted;
-  var _ref2 = media || {},
-    _ref2$type = _ref2.type,
-    mediaType = _ref2$type === void 0 ? null : _ref2$type,
-    _ref2$metadata = _ref2.metadata,
-    mediaMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata,
-    mediaThumbnailUrl = _ref2.thumbnail_url;
-  var _ref3 = mediaMetadata || {},
-    _ref3$width = _ref3.width,
-    mediaWidth = _ref3$width === void 0 ? 0 : _ref3$width,
-    _ref3$height = _ref3.height,
-    mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height;
-  var isVideo = mediaType === 'video';
-  var isImage = mediaType === 'image';
-
-  // Lazy load
-  var newShouldLoad = shouldLoad || loadingMode !== 'lazy';
-  var wasLoadedRef = React.useRef(newShouldLoad);
-  if (newShouldLoad && !wasLoadedRef.current) {
-    wasLoadedRef.current = newShouldLoad;
-  }
-  var finalShouldLoad = wasLoadedRef.current;
-
-  // color
-  var containerStyle = _objectSpread({
-    width: width,
-    height: height
-  }, utils.getStyleFromColor(color));
-
-  // image
-  if (media !== null && (isImage || isVideo && (!shouldLoad || withoutVideo))) {
-    var finalUrl = utils.getOptimalImageUrl(isVideo ? {
-      url: mediaThumbnailUrl
-    } : media, width, height, {
-      resolution: resolution
-    });
-    containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
-    containerStyle.backgroundRepeat = repeat && !isVideo ? 'repeat' : 'no-repeat';
-    containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
-    if (fit !== null) {
-      containerStyle.backgroundSize = fit;
-    } else if (!repeat || isVideo) {
-      containerStyle.backgroundSize = 'cover';
-    }
-  }
-
-  // video
-  var videoContainerStyle = {};
-  if (isVideo && shouldLoad) {
-    if (width > 0 && height > 0) {
-      var _getSizeWithinBounds = size.getSizeWithinBounds(mediaWidth, mediaHeight, width, height, {
-          cover: fit === 'cover' || fit === null
-        }),
-        _getSizeWithinBounds$ = _getSizeWithinBounds.width,
-        videoWidth = _getSizeWithinBounds$ === void 0 ? 0 : _getSizeWithinBounds$,
-        _getSizeWithinBounds$2 = _getSizeWithinBounds.height,
-        videoHeight = _getSizeWithinBounds$2 === void 0 ? 0 : _getSizeWithinBounds$2;
-      videoContainerStyle.width = videoWidth;
-      videoContainerStyle.height = videoHeight;
-      videoContainerStyle.left = -(videoWidth - width) / 2;
-      videoContainerStyle.top = -(videoHeight - height) / 2;
-    } else {
-      videoContainerStyle.objectFit = 'cover';
-    }
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    style: containerStyle
-  }, isVideo && shouldLoad && !withoutVideo ? /*#__PURE__*/React.createElement("div", {
-    className: styles.videoContainer,
-    style: videoContainerStyle
-  }, /*#__PURE__*/React.createElement(Video, {
-    className: styles.video,
-    media: media,
-    mediaRef: !forceMuted ? mediaRef : null,
-    paused: !playing,
-    muted: muted || forceMuted,
-    shouldLoad: shouldLoad,
-    onPlayError: onPlayError,
-    disablePictureInPicture: true,
-    autoPlay: true,
-    loop: true,
-    withPoster: true,
-    focusable: false
-  })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, children));
-};
-Background.propTypes = propTypes$1;
-Background.defaultProps = defaultProps$1;
-var Background$1 = Background;
-
-var _excluded = ["horizontalAlign", "verticalAlign"];
-var propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  resolution: PropTypes.number,
-  background: PropTypes.oneOfType([core.PropTypes.backgroundElement, PropTypes.arrayOf(core.PropTypes.backgroundElement)]),
-  playing: PropTypes.bool,
-  muted: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  layerClassName: PropTypes.string,
-  backgroundClassName: PropTypes.string,
-  loadingMode: PropTypes.string,
-  mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    // eslint-disable-next-line react/forbid-prop-types
-    current: PropTypes.any
-  })]),
-  shouldLoad: PropTypes.bool,
-  withoutVideo: PropTypes.bool,
-  onPlayError: PropTypes.bool
-};
-var defaultProps = {
-  width: null,
-  height: null,
-  resolution: 1,
-  background: [],
-  playing: false,
-  muted: false,
-  children: null,
-  className: null,
-  layerClassName: null,
-  backgroundClassName: null,
-  loadingMode: 'lazy',
-  mediaRef: null,
-  shouldLoad: true,
-  withoutVideo: false,
-  onPlayError: null
-};
-var BackgroundLayers = function BackgroundLayers(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    resolution = _ref.resolution,
-    background = _ref.background,
-    playing = _ref.playing,
-    muted = _ref.muted,
-    children = _ref.children,
-    className = _ref.className,
-    layerClassName = _ref.layerClassName,
-    backgroundClassName = _ref.backgroundClassName,
-    loadingMode = _ref.loadingMode,
-    mediaRef = _ref.mediaRef,
-    shouldLoad = _ref.shouldLoad,
-    withoutVideo = _ref.withoutVideo,
-    onPlayError = _ref.onPlayError;
-  var hasSize = width > 0 && height > 0;
-  var layers = React.useMemo(function () {
-    return utils.getLayersFromBackground(background);
-  }, [background]);
-  var maxZIndex = layers.length;
-  if (layers.length === 0) {
-    return null;
-  }
-
-  // color
-  var containerStyle = _objectSpread({}, hasSize ? {
-    width: width,
-    height: height
-  } : null);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    style: containerStyle
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.layers
-  }, layers.map(function (_ref3, index) {
-    var _ref3$horizontalAlign = _ref3.horizontalAlign,
-      horizontalAlign = _ref3$horizontalAlign === void 0 ? undefined : _ref3$horizontalAlign,
-      _ref3$verticalAlign = _ref3.verticalAlign,
-      verticalAlign = _ref3$verticalAlign === void 0 ? undefined : _ref3$verticalAlign,
-      layer = _objectWithoutProperties(_ref3, _excluded);
-    return /*#__PURE__*/React.createElement("div", {
-      key: "background-".concat(index),
-      className: classNames([styles.layer, _defineProperty(_defineProperty(_defineProperty({}, styles.bottom, verticalAlign === 'bottom'), styles.right, horizontalAlign === 'right'), layerClassName, layerClassName !== null)]),
-      style: {
-        zIndex: maxZIndex - index
-      }
-    }, /*#__PURE__*/React.createElement(Background$1, Object.assign({
-      width: width,
-      height: height,
-      resolution: resolution,
-      className: classNames([styles.background, _defineProperty({}, backgroundClassName, backgroundClassName !== null)]),
-      playing: playing,
-      muted: muted,
-      horizontalAlign: horizontalAlign,
-      verticalAlign: verticalAlign,
-      loadingMode: loadingMode,
-      shouldLoad: shouldLoad,
-      mediaRef: mediaRef,
-      withoutVideo: withoutVideo,
-      onPlayError: onPlayError
-    }, layer)));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, children));
-};
-BackgroundLayers.propTypes = propTypes;
-BackgroundLayers.defaultProps = defaultProps;
-var BackgroundLayers$1 = BackgroundLayers;
-
-exports.Background = Background$1;
-exports.BackgroundLayers = BackgroundLayers$1;
-exports.default = BackgroundLayers$1;