@micromag/element-visual 0.3.122 → 0.3.126

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/index.js +27 -26
  2. package/lib/index.js +26 -25
  3. package/package.json +5 -5
package/es/index.js CHANGED
@@ -4,7 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
4
4
  import { getSizeWithinBounds } from '@folklore/size';
5
5
  import classNames from 'classnames';
6
6
  import PropTypes$1 from 'prop-types';
7
- import React, { useMemo } from 'react';
7
+ import React, { useMemo, useCallback } from 'react';
8
8
  import { PropTypes } from '@micromag/core';
9
9
  import Image from '@micromag/element-image';
10
10
  import Video from '@micromag/element-video';
@@ -51,7 +51,7 @@ var Visual = function Visual(_ref) {
51
51
  shouldLoad = _ref.shouldLoad,
52
52
  videoLoop = _ref.videoLoop,
53
53
  videoInitialMuted = _ref.videoInitialMuted,
54
- onLoaded = _ref.onLoaded,
54
+ onParentLoaded = _ref.onLoaded,
55
55
  className = _ref.className,
56
56
  videoClassName = _ref.videoClassName,
57
57
  props = _objectWithoutProperties(_ref, _excluded);
@@ -61,47 +61,43 @@ var Visual = function Visual(_ref) {
61
61
  type = _ref2$type === void 0 ? null : _ref2$type,
62
62
  _ref2$thumbnail_url = _ref2.thumbnail_url,
63
63
  thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
64
- metadata = _ref2.metadata,
65
- url = _ref2.url;
66
-
67
- var _ref3 = metadata || {},
68
- mime = _ref3.mime;
64
+ _ref2$url = _ref2.url,
65
+ url = _ref2$url === void 0 ? null : _ref2$url;
69
66
 
70
67
  var isVideo = type === 'video';
71
- var isGIF = type === 'image' && mime === 'image/gif';
72
68
  var elProps = useMemo(function () {
73
69
  return _objectSpread(_objectSpread({}, props), {}, {
74
70
  media: media
75
71
  });
76
72
  }, [props, media]);
77
73
  var imageElProps = useMemo(function () {
78
- var tmpProps = !playing && (isVideo || isGIF) ? _objectSpread(_objectSpread({}, elProps), {}, {
74
+ var tmpProps = !shouldLoad && isVideo ? _objectSpread(_objectSpread({}, elProps), {}, {
79
75
  media: {
80
76
  url: thumbnailUrl
81
77
  }
82
78
  }) : elProps;
83
- return isGIF && playing ? _objectSpread(_objectSpread({}, elProps), {}, {
79
+ return shouldLoad ? _objectSpread(_objectSpread({}, elProps), {}, {
84
80
  media: {
85
81
  url: url
86
82
  }
87
83
  }) : tmpProps;
88
- }, [isVideo, isGIF, elProps, thumbnailUrl, url, playing]);
84
+ }, [isVideo, elProps, thumbnailUrl, url, shouldLoad]);
89
85
  var videoContainerStyle = null;
90
86
 
91
- if (isVideo && objectFit !== null && playing) {
92
- var _ref4 = objectFit || {},
93
- _ref4$fit = _ref4.fit,
94
- fit = _ref4$fit === void 0 ? 'cover' : _ref4$fit;
87
+ if (type === 'video' && objectFit !== null && shouldLoad) {
88
+ var _ref3 = objectFit || {},
89
+ _ref3$fit = _ref3.fit,
90
+ fit = _ref3$fit === void 0 ? 'cover' : _ref3$fit;
95
91
 
96
- var _ref5 = media || {},
97
- _ref5$metadata = _ref5.metadata,
98
- videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata;
92
+ var _ref4 = media || {},
93
+ _ref4$metadata = _ref4.metadata,
94
+ videoMetadata = _ref4$metadata === void 0 ? null : _ref4$metadata;
99
95
 
100
- var _ref6 = videoMetadata || {},
101
- _ref6$width = _ref6.width,
102
- videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
103
- _ref6$height = _ref6.height,
104
- videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
96
+ var _ref5 = videoMetadata || {},
97
+ _ref5$width = _ref5.width,
98
+ videoWidth = _ref5$width === void 0 ? 0 : _ref5$width,
99
+ _ref5$height = _ref5.height,
100
+ videoHeight = _ref5$height === void 0 ? 0 : _ref5$height;
105
101
 
106
102
  var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
107
103
  cover: fit === 'cover'
@@ -119,7 +115,12 @@ var Visual = function Visual(_ref) {
119
115
  };
120
116
  }
121
117
 
122
- return type !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, type === 'image' || !playing ? /*#__PURE__*/React.createElement(Image, Object.assign({}, imageElProps, {
118
+ var onLoaded = useCallback(function (e) {
119
+ if (onParentLoaded !== null) {
120
+ onParentLoaded(e);
121
+ }
122
+ }, []);
123
+ return type !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, type === 'image' || !shouldLoad ? /*#__PURE__*/React.createElement(Image, Object.assign({}, imageElProps, {
123
124
  objectFit: objectFit,
124
125
  width: width,
125
126
  height: height,
@@ -127,7 +128,7 @@ var Visual = function Visual(_ref) {
127
128
  shouldLoad: shouldLoad,
128
129
  onLoaded: onLoaded,
129
130
  className: classNames([styles.container, _defineProperty({}, className, className !== null)])
130
- })) : null, isVideo && playing ? /*#__PURE__*/React.createElement("div", {
131
+ })) : null, type === 'video' && shouldLoad ? /*#__PURE__*/React.createElement("div", {
131
132
  className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
132
133
  style: {
133
134
  width: width,
@@ -139,7 +140,7 @@ var Visual = function Visual(_ref) {
139
140
  }, /*#__PURE__*/React.createElement(Video, Object.assign({}, elProps, {
140
141
  width: objectFit === null ? width : null,
141
142
  height: objectFit === null ? height : null,
142
- autoPlay: true,
143
+ autoPlay: playing,
143
144
  loop: videoLoop,
144
145
  shouldLoad: shouldLoad,
145
146
  initialMuted: videoInitialMuted,
package/lib/index.js CHANGED
@@ -64,7 +64,7 @@ var Visual = function Visual(_ref) {
64
64
  shouldLoad = _ref.shouldLoad,
65
65
  videoLoop = _ref.videoLoop,
66
66
  videoInitialMuted = _ref.videoInitialMuted,
67
- onLoaded = _ref.onLoaded,
67
+ onParentLoaded = _ref.onLoaded,
68
68
  className = _ref.className,
69
69
  videoClassName = _ref.videoClassName,
70
70
  props = _objectWithoutProperties__default["default"](_ref, _excluded);
@@ -74,47 +74,43 @@ var Visual = function Visual(_ref) {
74
74
  type = _ref2$type === void 0 ? null : _ref2$type,
75
75
  _ref2$thumbnail_url = _ref2.thumbnail_url,
76
76
  thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
77
- metadata = _ref2.metadata,
78
- url = _ref2.url;
79
-
80
- var _ref3 = metadata || {},
81
- mime = _ref3.mime;
77
+ _ref2$url = _ref2.url,
78
+ url = _ref2$url === void 0 ? null : _ref2$url;
82
79
 
83
80
  var isVideo = type === 'video';
84
- var isGIF = type === 'image' && mime === 'image/gif';
85
81
  var elProps = React.useMemo(function () {
86
82
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
87
83
  media: media
88
84
  });
89
85
  }, [props, media]);
90
86
  var imageElProps = React.useMemo(function () {
91
- var tmpProps = !playing && (isVideo || isGIF) ? _objectSpread__default["default"](_objectSpread__default["default"]({}, elProps), {}, {
87
+ var tmpProps = !shouldLoad && isVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, elProps), {}, {
92
88
  media: {
93
89
  url: thumbnailUrl
94
90
  }
95
91
  }) : elProps;
96
- return isGIF && playing ? _objectSpread__default["default"](_objectSpread__default["default"]({}, elProps), {}, {
92
+ return shouldLoad ? _objectSpread__default["default"](_objectSpread__default["default"]({}, elProps), {}, {
97
93
  media: {
98
94
  url: url
99
95
  }
100
96
  }) : tmpProps;
101
- }, [isVideo, isGIF, elProps, thumbnailUrl, url, playing]);
97
+ }, [isVideo, elProps, thumbnailUrl, url, shouldLoad]);
102
98
  var videoContainerStyle = null;
103
99
 
104
- if (isVideo && objectFit !== null && playing) {
105
- var _ref4 = objectFit || {},
106
- _ref4$fit = _ref4.fit,
107
- fit = _ref4$fit === void 0 ? 'cover' : _ref4$fit;
100
+ if (type === 'video' && objectFit !== null && shouldLoad) {
101
+ var _ref3 = objectFit || {},
102
+ _ref3$fit = _ref3.fit,
103
+ fit = _ref3$fit === void 0 ? 'cover' : _ref3$fit;
108
104
 
109
- var _ref5 = media || {},
110
- _ref5$metadata = _ref5.metadata,
111
- videoMetadata = _ref5$metadata === void 0 ? null : _ref5$metadata;
105
+ var _ref4 = media || {},
106
+ _ref4$metadata = _ref4.metadata,
107
+ videoMetadata = _ref4$metadata === void 0 ? null : _ref4$metadata;
112
108
 
113
- var _ref6 = videoMetadata || {},
114
- _ref6$width = _ref6.width,
115
- videoWidth = _ref6$width === void 0 ? 0 : _ref6$width,
116
- _ref6$height = _ref6.height,
117
- videoHeight = _ref6$height === void 0 ? 0 : _ref6$height;
109
+ var _ref5 = videoMetadata || {},
110
+ _ref5$width = _ref5.width,
111
+ videoWidth = _ref5$width === void 0 ? 0 : _ref5$width,
112
+ _ref5$height = _ref5.height,
113
+ videoHeight = _ref5$height === void 0 ? 0 : _ref5$height;
118
114
 
119
115
  var _getSizeWithinBounds = size.getSizeWithinBounds(videoWidth, videoHeight, width, height, {
120
116
  cover: fit === 'cover'
@@ -132,7 +128,12 @@ var Visual = function Visual(_ref) {
132
128
  };
133
129
  }
134
130
 
135
- return type !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'image' || !playing ? /*#__PURE__*/React__default["default"].createElement(Image__default["default"], Object.assign({}, imageElProps, {
131
+ var onLoaded = React.useCallback(function (e) {
132
+ if (onParentLoaded !== null) {
133
+ onParentLoaded(e);
134
+ }
135
+ }, []);
136
+ return type !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'image' || !shouldLoad ? /*#__PURE__*/React__default["default"].createElement(Image__default["default"], Object.assign({}, imageElProps, {
136
137
  objectFit: objectFit,
137
138
  width: width,
138
139
  height: height,
@@ -140,7 +141,7 @@ var Visual = function Visual(_ref) {
140
141
  shouldLoad: shouldLoad,
141
142
  onLoaded: onLoaded,
142
143
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
143
- })) : null, isVideo && playing ? /*#__PURE__*/React__default["default"].createElement("div", {
144
+ })) : null, type === 'video' && shouldLoad ? /*#__PURE__*/React__default["default"].createElement("div", {
144
145
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
145
146
  style: {
146
147
  width: width,
@@ -152,7 +153,7 @@ var Visual = function Visual(_ref) {
152
153
  }, /*#__PURE__*/React__default["default"].createElement(Video__default["default"], Object.assign({}, elProps, {
153
154
  width: objectFit === null ? width : null,
154
155
  height: objectFit === null ? height : null,
155
- autoPlay: true,
156
+ autoPlay: playing,
156
157
  loop: videoLoop,
157
158
  shouldLoad: shouldLoad,
158
159
  initialMuted: videoInitialMuted,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-visual",
3
- "version": "0.3.122",
3
+ "version": "0.3.126",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -50,9 +50,9 @@
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/size": "^0.1.20",
53
- "@micromag/core": "^0.3.122",
54
- "@micromag/element-image": "^0.3.122",
55
- "@micromag/element-video": "^0.3.122",
53
+ "@micromag/core": "^0.3.126",
54
+ "@micromag/element-image": "^0.3.126",
55
+ "@micromag/element-video": "^0.3.126",
56
56
  "classnames": "^2.2.6",
57
57
  "prop-types": "^15.7.2",
58
58
  "uuid": "^8.3.2"
@@ -60,5 +60,5 @@
60
60
  "publishConfig": {
61
61
  "access": "public"
62
62
  },
63
- "gitHead": "4fbee9b4305d9a4ae0e4532a1d8e143155499878"
63
+ "gitHead": "079203c5850c4aa771bc4fa1c567d2db1bc3ee3d"
64
64
  }