@micromag/element-visual 0.4.48 → 0.4.50

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 (2) hide show
  1. package/es/index.js +42 -37
  2. package/package.json +5 -5
package/es/index.js CHANGED
@@ -3,10 +3,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
4
4
  import { getSizeWithinBounds } from '@folklore/size';
5
5
  import classNames from 'classnames';
6
- import React, { useMemo, useCallback } from 'react';
6
+ import { useMemo, useCallback } from 'react';
7
7
  import { useIsVisible } from '@micromag/core/hooks';
8
8
  import Image from '@micromag/element-image';
9
9
  import Video from '@micromag/element-video';
10
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
10
11
 
11
12
  var styles = {"container":"micromag-element-visual-container","videoContainer":"micromag-element-visual-videoContainer","videoTag":"micromag-element-visual-videoTag","videoTouchOverlay":"micromag-element-visual-videoTouchOverlay","natural":"micromag-element-visual-natural"};
12
13
 
@@ -119,44 +120,48 @@ function Visual(_ref) {
119
120
  onParentLoaded(e);
120
121
  }
121
122
  }, []);
122
- return type !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, type === 'image' || !shouldLoad || withoutVideo ? /*#__PURE__*/React.createElement(Image, Object.assign({}, imageElProps, {
123
- ref: refVisible,
124
- loadingMode: loadingMode !== 'lazy' ? 'lazy' : null,
125
- objectFit: objectFit,
126
- width: width,
127
- height: height,
128
- resolution: resolution,
129
- shouldLoad: finalShouldLoad,
130
- onLoaded: onLoaded,
131
- className: classNames([styles.container, className]),
132
- imageClassName: imageClassName
133
- })) : null, type === 'video' && shouldLoad && !withoutVideo ? /*#__PURE__*/React.createElement("div", {
134
- className: classNames([styles.container, className, _defineProperty({}, styles.natural, natural)]),
135
- style: {
123
+ return type !== null ? /*#__PURE__*/jsxs(Fragment, {
124
+ children: [type === 'image' || !shouldLoad || withoutVideo ? /*#__PURE__*/jsx(Image, _objectSpread(_objectSpread({}, imageElProps), {}, {
125
+ ref: refVisible,
126
+ loadingMode: loadingMode !== 'lazy' ? 'lazy' : null,
127
+ objectFit: objectFit,
136
128
  width: width,
137
129
  height: height,
138
- aspectRatio: ratio !== null ? "".concat(ratio) : null
139
- },
140
- ref: refVisible
141
- }, /*#__PURE__*/React.createElement("div", {
142
- className: classNames([styles.videoContainer, videoClassName]),
143
- style: videoContainerStyle
144
- }, /*#__PURE__*/React.createElement(Video, Object.assign({}, elProps, {
145
- innerClassName: styles.videoTag,
146
- mediaRef: mediaRef,
147
- width: objectFit === null ? width : null,
148
- height: objectFit === null ? height : null,
149
- paused: !playing,
150
- muted: muted,
151
- loop: videoLoop,
152
- shouldLoad: finalShouldLoad,
153
- onReady: onLoaded,
154
- autoPlay: true,
155
- qualityStartLevel: qualityStartLevel,
156
- onQualityLevelChange: onQualityLevelChange
157
- })), /*#__PURE__*/React.createElement("div", {
158
- className: styles.videoTouchOverlay
159
- }))) : null) : null;
130
+ resolution: resolution,
131
+ shouldLoad: finalShouldLoad,
132
+ onLoaded: onLoaded,
133
+ className: classNames([styles.container, className]),
134
+ imageClassName: imageClassName
135
+ })) : null, type === 'video' && shouldLoad && !withoutVideo ? /*#__PURE__*/jsx("div", {
136
+ className: classNames([styles.container, className, _defineProperty({}, styles.natural, natural)]),
137
+ style: {
138
+ width: width,
139
+ height: height,
140
+ aspectRatio: ratio !== null ? "".concat(ratio) : null
141
+ },
142
+ ref: refVisible,
143
+ children: /*#__PURE__*/jsxs("div", {
144
+ className: classNames([styles.videoContainer, videoClassName]),
145
+ style: videoContainerStyle,
146
+ children: [/*#__PURE__*/jsx(Video, _objectSpread(_objectSpread({}, elProps), {}, {
147
+ innerClassName: styles.videoTag,
148
+ mediaRef: mediaRef,
149
+ width: objectFit === null ? width : null,
150
+ height: objectFit === null ? height : null,
151
+ paused: !playing,
152
+ muted: muted,
153
+ loop: videoLoop,
154
+ shouldLoad: finalShouldLoad,
155
+ onReady: onLoaded,
156
+ autoPlay: true,
157
+ qualityStartLevel: qualityStartLevel,
158
+ onQualityLevelChange: onQualityLevelChange
159
+ })), /*#__PURE__*/jsx("div", {
160
+ className: styles.videoTouchOverlay
161
+ })]
162
+ })
163
+ }) : null]
164
+ }) : null;
160
165
  }
161
166
 
162
167
  export { Visual as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-visual",
3
- "version": "0.4.48",
3
+ "version": "0.4.50",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -61,9 +61,9 @@
61
61
  "dependencies": {
62
62
  "@babel/runtime": "^7.28.6",
63
63
  "@folklore/size": "^0.1.20",
64
- "@micromag/core": "^0.4.48",
65
- "@micromag/element-image": "^0.4.48",
66
- "@micromag/element-video": "^0.4.48",
64
+ "@micromag/core": "^0.4.50",
65
+ "@micromag/element-image": "^0.4.50",
66
+ "@micromag/element-video": "^0.4.50",
67
67
  "classnames": "^2.2.6",
68
68
  "uuid": "^9.0.0"
69
69
  },
@@ -71,6 +71,6 @@
71
71
  "access": "public",
72
72
  "registry": "https://registry.npmjs.org/"
73
73
  },
74
- "gitHead": "d6772865be1ee3f2d19288ebfbf4b9b6860f4cd7",
74
+ "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
75
75
  "types": "es/index.d.ts"
76
76
  }