@micromag/element-visual 0.3.541 → 0.3.569

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-visual",
-    "version": "0.3.541",
+    "version": "0.3.569",
     "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",
@@ -61,9 +60,9 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-image": "^0.3.541",
-        "@micromag/element-video": "^0.3.541",
+        "@micromag/core": "^0.3.569",
+        "@micromag/element-image": "^0.3.569",
+        "@micromag/element-video": "^0.3.569",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "uuid": "^9.0.0"
@@ -72,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ceb71f23a32ab8df4a1563a1e5cd5598e539de4d"
 }

package/lib/index.js

@@ -1,168 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var size = require('@folklore/size');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var Image = require('@micromag/element-image');
-var Video = require('@micromag/element-video');
-
-var styles = {"container":"micromag-element-visual-container","videoContainer":"micromag-element-visual-videoContainer","videoTag":"micromag-element-visual-videoTag","videoTouchOverlay":"micromag-element-visual-videoTouchOverlay"};
-
-var _excluded = ["media", "mediaRef", "width", "height", "resolution", "objectFit", "playing", "muted", "shouldLoad", "videoLoop", "videoInitialMuted", "onLoaded", "className", "imageClassName", "videoClassName", "withoutVideo"];
-var propTypes = {
-  media: core.PropTypes.media,
-  mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    // eslint-disable-next-line react/forbid-prop-types
-    current: PropTypes.any
-  })]),
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  resolution: PropTypes.number,
-  objectFit: core.PropTypes.objectFit,
-  playing: PropTypes.bool,
-  muted: PropTypes.bool,
-  shouldLoad: PropTypes.bool,
-  videoLoop: PropTypes.bool,
-  withoutVideo: PropTypes.bool,
-  videoInitialMuted: PropTypes.bool,
-  onLoaded: PropTypes.func,
-  className: PropTypes.string,
-  imageClassName: PropTypes.string,
-  videoClassName: PropTypes.string
-};
-var defaultProps = {
-  media: null,
-  mediaRef: null,
-  width: null,
-  height: null,
-  resolution: 1,
-  objectFit: null,
-  playing: true,
-  muted: true,
-  shouldLoad: true,
-  videoLoop: true,
-  withoutVideo: false,
-  videoInitialMuted: true,
-  onLoaded: null,
-  className: null,
-  imageClassName: null,
-  videoClassName: null
-};
-var Visual = function Visual(_ref) {
-  var media = _ref.media,
-    mediaRef = _ref.mediaRef,
-    width = _ref.width,
-    height = _ref.height,
-    resolution = _ref.resolution,
-    objectFit = _ref.objectFit,
-    playing = _ref.playing,
-    muted = _ref.muted,
-    shouldLoad = _ref.shouldLoad,
-    videoLoop = _ref.videoLoop;
-    _ref.videoInitialMuted;
-    var onParentLoaded = _ref.onLoaded,
-    className = _ref.className,
-    imageClassName = _ref.imageClassName,
-    videoClassName = _ref.videoClassName,
-    withoutVideo = _ref.withoutVideo,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _ref2 = media || {},
-    _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? null : _ref2$type,
-    _ref2$thumbnail_url = _ref2.thumbnail_url,
-    thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
-    _ref2$url = _ref2.url,
-    url = _ref2$url === void 0 ? null : _ref2$url;
-  var isVideo = type === 'video';
-  var elProps = React.useMemo(function () {
-    return _objectSpread(_objectSpread({}, props), {}, {
-      media: media
-    });
-  }, [props, media]);
-  var imageElProps = React.useMemo(function () {
-    var tmpProps = (!shouldLoad || withoutVideo) && isVideo ? _objectSpread(_objectSpread({}, elProps), {}, {
-      media: {
-        url: thumbnailUrl
-      }
-    }) : elProps;
-    return shouldLoad && !withoutVideo ? _objectSpread(_objectSpread({}, elProps), {}, {
-      media: _objectSpread(_objectSpread({}, media), {}, {
-        url: url
-      })
-    }) : tmpProps;
-  }, [isVideo, elProps, thumbnailUrl, url, shouldLoad]);
-  var videoContainerStyle = null;
-  if (type === 'video' && objectFit !== null && shouldLoad) {
-    var _ref3 = objectFit || {},
-      _ref3$fit = _ref3.fit,
-      fit = _ref3$fit === void 0 ? 'cover' : _ref3$fit;
-    var _ref4 = media || {},
-      _ref4$metadata = _ref4.metadata,
-      videoMetadata = _ref4$metadata === void 0 ? null : _ref4$metadata;
-    var _ref5 = videoMetadata || {},
-      _ref5$width = _ref5.width,
-      videoWidth = _ref5$width === void 0 ? 0 : _ref5$width,
-      _ref5$height = _ref5.height,
-      videoHeight = _ref5$height === void 0 ? 0 : _ref5$height;
-    var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
-        cover: fit === 'cover'
-      }),
-      resizedVideoWidth = _getSizeWithinBounds.width,
-      resizedVideoHeight = _getSizeWithinBounds.height;
-    var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
-    var resizedVideoTop = -(resizedVideoHeight - height) / 2;
-    videoContainerStyle = {
-      width: resizedVideoWidth,
-      height: resizedVideoHeight,
-      left: resizedVideoLeft,
-      top: resizedVideoTop
-    };
-  }
-  var onLoaded = React.useCallback(function (e) {
-    if (onParentLoaded !== null) {
-      onParentLoaded(e);
-    }
-  }, []);
-  return type !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, type === 'image' || !shouldLoad || withoutVideo ? /*#__PURE__*/React.createElement(Image, Object.assign({}, imageElProps, {
-    objectFit: objectFit,
-    width: width,
-    height: height,
-    resolution: resolution,
-    shouldLoad: shouldLoad,
-    onLoaded: onLoaded,
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    imageClassName: imageClassName
-  })) : null, type === 'video' && shouldLoad && !withoutVideo ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    style: {
-      width: width,
-      height: height
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.videoContainer, _defineProperty({}, videoClassName, videoClassName !== null)]),
-    style: videoContainerStyle
-  }, /*#__PURE__*/React.createElement(Video, Object.assign({}, elProps, {
-    innerClassName: styles.videoTag,
-    mediaRef: mediaRef,
-    width: objectFit === null ? width : null,
-    height: objectFit === null ? height : null,
-    paused: !playing,
-    muted: muted,
-    loop: videoLoop,
-    shouldLoad: shouldLoad,
-    onReady: onLoaded,
-    autoPlay: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.videoTouchOverlay
-  }))) : null) : null;
-};
-Visual.propTypes = propTypes;
-Visual.defaultProps = defaultProps;
-var Visual$1 = Visual;
-
-module.exports = Visual$1;