@micromag/element-visual 0.3.123 → 0.3.124

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 +29 -7
  2. package/lib/index.js +28 -6
  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,23 +51,40 @@ 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);
58
58
 
59
59
  var _ref2 = media || {},
60
60
  _ref2$type = _ref2.type,
61
- type = _ref2$type === void 0 ? null : _ref2$type;
61
+ type = _ref2$type === void 0 ? null : _ref2$type,
62
+ _ref2$thumbnail_url = _ref2.thumbnail_url,
63
+ thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
64
+ _ref2$url = _ref2.url,
65
+ url = _ref2$url === void 0 ? null : _ref2$url;
62
66
 
67
+ var isVideo = type === 'video';
63
68
  var elProps = useMemo(function () {
64
69
  return _objectSpread(_objectSpread({}, props), {}, {
65
70
  media: media
66
71
  });
67
72
  }, [props, media]);
73
+ var imageElProps = useMemo(function () {
74
+ var tmpProps = !shouldLoad && isVideo ? _objectSpread(_objectSpread({}, elProps), {}, {
75
+ media: {
76
+ url: thumbnailUrl
77
+ }
78
+ }) : elProps;
79
+ return shouldLoad ? _objectSpread(_objectSpread({}, elProps), {}, {
80
+ media: {
81
+ url: url
82
+ }
83
+ }) : tmpProps;
84
+ }, [isVideo, elProps, thumbnailUrl, url, shouldLoad]);
68
85
  var videoContainerStyle = null;
69
86
 
70
- if (type === 'video' && objectFit !== null && playing) {
87
+ if (type === 'video' && objectFit !== null && shouldLoad) {
71
88
  var _ref3 = objectFit || {},
72
89
  _ref3$fit = _ref3.fit,
73
90
  fit = _ref3$fit === void 0 ? 'cover' : _ref3$fit;
@@ -98,7 +115,12 @@ var Visual = function Visual(_ref) {
98
115
  };
99
116
  }
100
117
 
101
- return type !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, type === 'image' ? /*#__PURE__*/React.createElement(Image, Object.assign({}, elProps, {
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, {
102
124
  objectFit: objectFit,
103
125
  width: width,
104
126
  height: height,
@@ -106,7 +128,7 @@ var Visual = function Visual(_ref) {
106
128
  shouldLoad: shouldLoad,
107
129
  onLoaded: onLoaded,
108
130
  className: classNames([styles.container, _defineProperty({}, className, className !== null)])
109
- })) : null, type === 'video' ? /*#__PURE__*/React.createElement("div", {
131
+ })) : null, type === 'video' && shouldLoad ? /*#__PURE__*/React.createElement("div", {
110
132
  className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
111
133
  style: {
112
134
  width: width,
@@ -118,7 +140,7 @@ var Visual = function Visual(_ref) {
118
140
  }, /*#__PURE__*/React.createElement(Video, Object.assign({}, elProps, {
119
141
  width: objectFit === null ? width : null,
120
142
  height: objectFit === null ? height : null,
121
- autoPlay: true,
143
+ autoPlay: playing,
122
144
  loop: videoLoop,
123
145
  shouldLoad: shouldLoad,
124
146
  initialMuted: videoInitialMuted,
package/lib/index.js CHANGED
@@ -64,23 +64,40 @@ 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);
71
71
 
72
72
  var _ref2 = media || {},
73
73
  _ref2$type = _ref2.type,
74
- type = _ref2$type === void 0 ? null : _ref2$type;
74
+ type = _ref2$type === void 0 ? null : _ref2$type,
75
+ _ref2$thumbnail_url = _ref2.thumbnail_url,
76
+ thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
77
+ _ref2$url = _ref2.url,
78
+ url = _ref2$url === void 0 ? null : _ref2$url;
75
79
 
80
+ var isVideo = type === 'video';
76
81
  var elProps = React.useMemo(function () {
77
82
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
78
83
  media: media
79
84
  });
80
85
  }, [props, media]);
86
+ var imageElProps = React.useMemo(function () {
87
+ var tmpProps = !shouldLoad && isVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, elProps), {}, {
88
+ media: {
89
+ url: thumbnailUrl
90
+ }
91
+ }) : elProps;
92
+ return shouldLoad ? _objectSpread__default["default"](_objectSpread__default["default"]({}, elProps), {}, {
93
+ media: {
94
+ url: url
95
+ }
96
+ }) : tmpProps;
97
+ }, [isVideo, elProps, thumbnailUrl, url, shouldLoad]);
81
98
  var videoContainerStyle = null;
82
99
 
83
- if (type === 'video' && objectFit !== null && playing) {
100
+ if (type === 'video' && objectFit !== null && shouldLoad) {
84
101
  var _ref3 = objectFit || {},
85
102
  _ref3$fit = _ref3.fit,
86
103
  fit = _ref3$fit === void 0 ? 'cover' : _ref3$fit;
@@ -111,7 +128,12 @@ var Visual = function Visual(_ref) {
111
128
  };
112
129
  }
113
130
 
114
- return type !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'image' ? /*#__PURE__*/React__default["default"].createElement(Image__default["default"], Object.assign({}, elProps, {
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, {
115
137
  objectFit: objectFit,
116
138
  width: width,
117
139
  height: height,
@@ -119,7 +141,7 @@ var Visual = function Visual(_ref) {
119
141
  shouldLoad: shouldLoad,
120
142
  onLoaded: onLoaded,
121
143
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
122
- })) : null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement("div", {
144
+ })) : null, type === 'video' && shouldLoad ? /*#__PURE__*/React__default["default"].createElement("div", {
123
145
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
124
146
  style: {
125
147
  width: width,
@@ -131,7 +153,7 @@ var Visual = function Visual(_ref) {
131
153
  }, /*#__PURE__*/React__default["default"].createElement(Video__default["default"], Object.assign({}, elProps, {
132
154
  width: objectFit === null ? width : null,
133
155
  height: objectFit === null ? height : null,
134
- autoPlay: true,
156
+ autoPlay: playing,
135
157
  loop: videoLoop,
136
158
  shouldLoad: shouldLoad,
137
159
  initialMuted: videoInitialMuted,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-visual",
3
- "version": "0.3.123",
3
+ "version": "0.3.124",
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.123",
53
+ "@micromag/core": "^0.3.124",
54
+ "@micromag/element-image": "^0.3.124",
55
+ "@micromag/element-video": "^0.3.124",
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": "1815cb0d51d34e283db3390bd56113dbac339098"
63
+ "gitHead": "9050944df1d66cae14e04a771f739e2743894fb8"
64
64
  }