@micromag/element-visual 0.4.71 → 0.4.76

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.d.ts +4 -5
  2. package/es/index.js +299 -149
  3. package/package.json +11 -9
package/es/index.d.ts CHANGED
@@ -1,11 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { Media, ObjectFit } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { ImageMedia, VideoMedia, MediaElement, ObjectFit } from '@micromag/core';
3
4
 
4
5
  interface VisualProps {
5
- media?: Media | null;
6
- mediaRef?: ((...args: unknown[]) => void | {
7
- current?: unknown;
8
- }) | null;
6
+ media?: ImageMedia | VideoMedia | null;
7
+ mediaRef?: ForwardedRef<MediaElement> | null;
9
8
  width?: number | string | null;
10
9
  height?: number | string | null;
11
10
  ratio?: number | null;
package/es/index.js CHANGED
@@ -1,9 +1,6 @@
1
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
- import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
1
+ import { c } from 'react/compiler-runtime';
4
2
  import { getSizeWithinBounds } from '@folklore/size';
5
3
  import classNames from 'classnames';
6
- import { useMemo, useCallback } from 'react';
7
4
  import { useIsVisible } from '@micromag/core/hooks';
8
5
  import Image from '@micromag/element-image';
9
6
  import Video from '@micromag/element-video';
@@ -11,157 +8,310 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
11
8
 
12
9
  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"};
13
10
 
14
- var _excluded = ["media", "mediaRef", "width", "height", "ratio", "resolution", "objectFit", "playing", "muted", "loadingMode", "shouldLoad", "videoLoop", "videoInitialMuted", "onLoaded", "className", "imageClassName", "videoClassName", "withoutVideo", "qualityStartLevel", "onQualityLevelChange"];
15
- function Visual(_ref) {
16
- var _ref$media = _ref.media,
17
- media = _ref$media === void 0 ? null : _ref$media,
18
- _ref$mediaRef = _ref.mediaRef,
19
- mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
20
- _ref$width = _ref.width,
21
- width = _ref$width === void 0 ? null : _ref$width,
22
- _ref$height = _ref.height,
23
- height = _ref$height === void 0 ? null : _ref$height,
24
- _ref$ratio = _ref.ratio,
25
- ratio = _ref$ratio === void 0 ? null : _ref$ratio,
26
- _ref$resolution = _ref.resolution,
27
- resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
28
- _ref$objectFit = _ref.objectFit,
29
- objectFit = _ref$objectFit === void 0 ? null : _ref$objectFit,
30
- _ref$playing = _ref.playing,
31
- playing = _ref$playing === void 0 ? true : _ref$playing,
32
- _ref$muted = _ref.muted,
33
- muted = _ref$muted === void 0 ? true : _ref$muted,
34
- _ref$loadingMode = _ref.loadingMode,
35
- loadingMode = _ref$loadingMode === void 0 ? null : _ref$loadingMode,
36
- _ref$shouldLoad = _ref.shouldLoad,
37
- shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
38
- _ref$videoLoop = _ref.videoLoop,
39
- videoLoop = _ref$videoLoop === void 0 ? true : _ref$videoLoop;
40
- _ref.videoInitialMuted;
41
- var _ref$onLoaded = _ref.onLoaded,
42
- onParentLoaded = _ref$onLoaded === void 0 ? null : _ref$onLoaded,
43
- _ref$className = _ref.className,
44
- className = _ref$className === void 0 ? null : _ref$className,
45
- _ref$imageClassName = _ref.imageClassName,
46
- imageClassName = _ref$imageClassName === void 0 ? null : _ref$imageClassName,
47
- _ref$videoClassName = _ref.videoClassName,
48
- videoClassName = _ref$videoClassName === void 0 ? null : _ref$videoClassName,
49
- _ref$withoutVideo = _ref.withoutVideo,
50
- withoutVideo = _ref$withoutVideo === void 0 ? false : _ref$withoutVideo,
51
- _ref$qualityStartLeve = _ref.qualityStartLevel,
52
- qualityStartLevel = _ref$qualityStartLeve === void 0 ? null : _ref$qualityStartLeve,
53
- _ref$onQualityLevelCh = _ref.onQualityLevelChange,
54
- onQualityLevelChange = _ref$onQualityLevelCh === void 0 ? null : _ref$onQualityLevelCh,
55
- props = _objectWithoutProperties(_ref, _excluded);
56
- var _ref2 = media || {},
57
- _ref2$type = _ref2.type,
58
- type = _ref2$type === void 0 ? null : _ref2$type,
59
- _ref2$thumbnail_url = _ref2.thumbnail_url,
60
- thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
61
- _ref2$url = _ref2.url,
62
- url = _ref2$url === void 0 ? null : _ref2$url;
63
- var isVideo = type === 'video';
64
- var elProps = useMemo(function () {
65
- return _objectSpread(_objectSpread({}, props), {}, {
66
- media: media
67
- });
68
- }, [props, media]);
69
- var isLazyLoading = loadingMode === 'lazy';
70
- var _useIsVisible = useIsVisible({
71
- rootMargin: '200px',
11
+ function Visual(t0) {
12
+ const $ = c(68);
13
+ let props;
14
+ let t1;
15
+ let t10;
16
+ let t11;
17
+ let t12;
18
+ let t13;
19
+ let t14;
20
+ let t15;
21
+ let t16;
22
+ let t17;
23
+ let t18;
24
+ let t19;
25
+ let t2;
26
+ let t20;
27
+ let t3;
28
+ let t4;
29
+ let t5;
30
+ let t6;
31
+ let t7;
32
+ let t8;
33
+ let t9;
34
+ if ($[0] !== t0) {
35
+ ({
36
+ media: t1,
37
+ mediaRef: t2,
38
+ width: t3,
39
+ height: t4,
40
+ ratio: t5,
41
+ resolution: t6,
42
+ objectFit: t7,
43
+ playing: t8,
44
+ muted: t9,
45
+ loadingMode: t10,
46
+ shouldLoad: t11,
47
+ videoLoop: t12,
48
+ videoInitialMuted: t13,
49
+ onLoaded: t14,
50
+ className: t15,
51
+ imageClassName: t16,
52
+ videoClassName: t17,
53
+ withoutVideo: t18,
54
+ qualityStartLevel: t19,
55
+ onQualityLevelChange: t20,
56
+ ...props
57
+ } = t0);
58
+ $[0] = t0;
59
+ $[1] = props;
60
+ $[2] = t1;
61
+ $[3] = t10;
62
+ $[4] = t11;
63
+ $[5] = t12;
64
+ $[6] = t13;
65
+ $[7] = t14;
66
+ $[8] = t15;
67
+ $[9] = t16;
68
+ $[10] = t17;
69
+ $[11] = t18;
70
+ $[12] = t19;
71
+ $[13] = t2;
72
+ $[14] = t20;
73
+ $[15] = t3;
74
+ $[16] = t4;
75
+ $[17] = t5;
76
+ $[18] = t6;
77
+ $[19] = t7;
78
+ $[20] = t8;
79
+ $[21] = t9;
80
+ } else {
81
+ props = $[1];
82
+ t1 = $[2];
83
+ t10 = $[3];
84
+ t11 = $[4];
85
+ t12 = $[5];
86
+ t13 = $[6];
87
+ t14 = $[7];
88
+ t15 = $[8];
89
+ t16 = $[9];
90
+ t17 = $[10];
91
+ t18 = $[11];
92
+ t19 = $[12];
93
+ t2 = $[13];
94
+ t20 = $[14];
95
+ t3 = $[15];
96
+ t4 = $[16];
97
+ t5 = $[17];
98
+ t6 = $[18];
99
+ t7 = $[19];
100
+ t8 = $[20];
101
+ t9 = $[21];
102
+ }
103
+ const media = t1 === undefined ? null : t1;
104
+ const mediaRef = t2 === undefined ? null : t2;
105
+ const width = t3 === undefined ? null : t3;
106
+ const height = t4 === undefined ? null : t4;
107
+ const ratio = t5 === undefined ? null : t5;
108
+ const resolution = t6 === undefined ? 1 : t6;
109
+ const objectFit = t7 === undefined ? null : t7;
110
+ const playing = t8 === undefined ? true : t8;
111
+ const muted = t9 === undefined ? true : t9;
112
+ const loadingMode = t10 === undefined ? null : t10;
113
+ const shouldLoad = t11 === undefined ? true : t11;
114
+ const videoLoop = t12 === undefined ? true : t12;
115
+ const onParentLoaded = t14 === undefined ? null : t14;
116
+ const className = t15 === undefined ? null : t15;
117
+ const imageClassName = t16 === undefined ? null : t16;
118
+ const videoClassName = t17 === undefined ? null : t17;
119
+ const withoutVideo = t18 === undefined ? false : t18;
120
+ const qualityStartLevel = t19 === undefined ? null : t19;
121
+ const onQualityLevelChange = t20 === undefined ? null : t20;
122
+ let t21;
123
+ if ($[22] !== media) {
124
+ t21 = media || {};
125
+ $[22] = media;
126
+ $[23] = t21;
127
+ } else {
128
+ t21 = $[23];
129
+ }
130
+ const {
131
+ type: t22,
132
+ thumbnail_url: t23
133
+ } = t21;
134
+ const type = t22 === undefined ? null : t22;
135
+ const thumbnailUrl = t23 === undefined ? null : t23;
136
+ const isVideo = type === "video";
137
+ const isLazyLoading = loadingMode === "lazy";
138
+ const t24 = !isLazyLoading;
139
+ let t25;
140
+ if ($[24] !== t24) {
141
+ t25 = {
142
+ rootMargin: "200px",
72
143
  persist: true,
73
- disabled: !isLazyLoading
74
- }),
75
- refVisible = _useIsVisible.ref,
76
- isVisible = _useIsVisible.visible;
77
- var finalShouldLoad = (!isLazyLoading || isVisible) && shouldLoad;
78
- var imageElProps = useMemo(function () {
79
- var tmpProps = (!shouldLoad || withoutVideo) && isVideo ? _objectSpread(_objectSpread({}, elProps), {}, {
80
- media: {
81
- url: thumbnailUrl
82
- }
83
- }) : elProps;
84
- return shouldLoad && !withoutVideo ? _objectSpread(_objectSpread({}, elProps), {}, {
85
- media: _objectSpread(_objectSpread({}, media), {}, {
86
- url: url
87
- })
88
- }) : tmpProps;
89
- }, [isVideo, elProps, thumbnailUrl, url, shouldLoad]);
90
- var videoContainerStyle = null;
91
- if (type === 'video' && objectFit !== null && shouldLoad) {
92
- var _ref3 = objectFit || {},
93
- _ref3$fit = _ref3.fit,
94
- fit = _ref3$fit === void 0 ? 'cover' : _ref3$fit;
95
- var _ref4 = media || {},
96
- _ref4$metadata = _ref4.metadata,
97
- videoMetadata = _ref4$metadata === void 0 ? null : _ref4$metadata;
98
- var _ref5 = videoMetadata || {},
99
- _ref5$width = _ref5.width,
100
- videoWidth = _ref5$width === void 0 ? 0 : _ref5$width,
101
- _ref5$height = _ref5.height,
102
- videoHeight = _ref5$height === void 0 ? 0 : _ref5$height;
103
- var _getSizeWithinBounds = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
104
- cover: fit === 'cover'
105
- }),
106
- resizedVideoWidth = _getSizeWithinBounds.width,
107
- resizedVideoHeight = _getSizeWithinBounds.height;
108
- var resizedVideoLeft = -(resizedVideoWidth - width) / 2;
109
- var resizedVideoTop = -(resizedVideoHeight - height) / 2;
110
- videoContainerStyle = {
111
- width: resizedVideoWidth,
112
- height: resizedVideoHeight,
113
- left: resizedVideoLeft,
114
- top: resizedVideoTop
144
+ disabled: t24
115
145
  };
146
+ $[24] = t24;
147
+ $[25] = t25;
148
+ } else {
149
+ t25 = $[25];
116
150
  }
117
- var natural = objectFit === null;
118
- var onLoaded = useCallback(function (e) {
119
- if (onParentLoaded !== null) {
120
- onParentLoaded(e);
151
+ const {
152
+ ref: refVisible,
153
+ visible: isVisible
154
+ } = useIsVisible(t25);
155
+ const finalShouldLoad = (!isLazyLoading || isVisible) && shouldLoad;
156
+ let videoContainerStyle = null;
157
+ if (type === "video" && objectFit !== null && shouldLoad) {
158
+ let t26;
159
+ if ($[26] !== objectFit) {
160
+ t26 = objectFit || {};
161
+ $[26] = objectFit;
162
+ $[27] = t26;
163
+ } else {
164
+ t26 = $[27];
165
+ }
166
+ const {
167
+ fit: t27
168
+ } = t26;
169
+ const fit = t27 === undefined ? "cover" : t27;
170
+ let t28;
171
+ if ($[28] !== fit || $[29] !== height || $[30] !== media || $[31] !== width) {
172
+ const {
173
+ metadata: t29
174
+ } = media || {};
175
+ const videoMetadata = t29 === undefined ? null : t29;
176
+ const {
177
+ width: t30,
178
+ height: t31
179
+ } = videoMetadata || {};
180
+ const videoWidth = t30 === undefined ? 0 : t30;
181
+ const videoHeight = t31 === undefined ? 0 : t31;
182
+ t28 = getSizeWithinBounds(videoWidth, videoHeight, width, height, {
183
+ cover: fit === "cover"
184
+ });
185
+ $[28] = fit;
186
+ $[29] = height;
187
+ $[30] = media;
188
+ $[31] = width;
189
+ $[32] = t28;
190
+ } else {
191
+ t28 = $[32];
192
+ }
193
+ const {
194
+ width: resizedVideoWidth,
195
+ height: resizedVideoHeight
196
+ } = t28;
197
+ const resizedVideoLeft = -(resizedVideoWidth - width) / 2;
198
+ const resizedVideoTop = -(resizedVideoHeight - height) / 2;
199
+ let t29;
200
+ if ($[33] !== resizedVideoHeight || $[34] !== resizedVideoLeft || $[35] !== resizedVideoTop || $[36] !== resizedVideoWidth) {
201
+ t29 = {
202
+ width: resizedVideoWidth,
203
+ height: resizedVideoHeight,
204
+ left: resizedVideoLeft,
205
+ top: resizedVideoTop
206
+ };
207
+ $[33] = resizedVideoHeight;
208
+ $[34] = resizedVideoLeft;
209
+ $[35] = resizedVideoTop;
210
+ $[36] = resizedVideoWidth;
211
+ $[37] = t29;
212
+ } else {
213
+ t29 = $[37];
121
214
  }
122
- }, []);
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,
128
- width: width,
129
- height: height,
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: {
215
+ videoContainerStyle = t29;
216
+ }
217
+ const natural = objectFit === null;
218
+ let t26;
219
+ if ($[38] !== onParentLoaded) {
220
+ t26 = e => {
221
+ if (onParentLoaded !== null) {
222
+ onParentLoaded(e);
223
+ }
224
+ };
225
+ $[38] = onParentLoaded;
226
+ $[39] = t26;
227
+ } else {
228
+ t26 = $[39];
229
+ }
230
+ const onLoaded = t26;
231
+ let t27;
232
+ if ($[40] !== className || $[41] !== finalShouldLoad || $[42] !== height || $[43] !== imageClassName || $[44] !== isVideo || $[45] !== loadingMode || $[46] !== media || $[47] !== mediaRef || $[48] !== muted || $[49] !== natural || $[50] !== objectFit || $[51] !== onLoaded || $[52] !== onQualityLevelChange || $[53] !== playing || $[54] !== props || $[55] !== qualityStartLevel || $[56] !== ratio || $[57] !== refVisible || $[58] !== resolution || $[59] !== shouldLoad || $[60] !== thumbnailUrl || $[61] !== type || $[62] !== videoClassName || $[63] !== videoContainerStyle || $[64] !== videoLoop || $[65] !== width || $[66] !== withoutVideo) {
233
+ t27 = type !== null ? /*#__PURE__*/jsxs(Fragment, {
234
+ children: [type === "image" || !shouldLoad || withoutVideo ? /*#__PURE__*/jsx(Image, {
235
+ ...props,
236
+ media: isVideo ? {
237
+ url: thumbnailUrl
238
+ } : media,
239
+ ref: refVisible,
240
+ loadingMode: loadingMode !== "lazy" ? "lazy" : null,
241
+ objectFit: objectFit,
138
242
  width: width,
139
243
  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;
244
+ resolution: resolution,
245
+ shouldLoad: finalShouldLoad,
246
+ onLoaded: onLoaded,
247
+ className: classNames([styles.container, className]),
248
+ imageClassName: imageClassName
249
+ }) : null, type === "video" && shouldLoad && !withoutVideo ? /*#__PURE__*/jsx("div", {
250
+ className: classNames([styles.container, className, {
251
+ [styles.natural]: natural
252
+ }]),
253
+ style: {
254
+ width,
255
+ height,
256
+ aspectRatio: ratio !== null ? `${ratio}` : null
257
+ },
258
+ ref: refVisible,
259
+ children: /*#__PURE__*/jsxs("div", {
260
+ className: classNames([styles.videoContainer, videoClassName]),
261
+ style: videoContainerStyle,
262
+ children: [/*#__PURE__*/jsx(Video, {
263
+ ...props,
264
+ media: media,
265
+ innerClassName: styles.videoTag,
266
+ mediaRef: mediaRef,
267
+ width: objectFit === null ? width : null,
268
+ height: objectFit === null ? height : null,
269
+ paused: !playing,
270
+ muted: muted,
271
+ loop: videoLoop,
272
+ shouldLoad: finalShouldLoad,
273
+ onReady: onLoaded,
274
+ autoPlay: true,
275
+ qualityStartLevel: qualityStartLevel,
276
+ onQualityLevelChange: onQualityLevelChange
277
+ }), /*#__PURE__*/jsx("div", {
278
+ className: styles.videoTouchOverlay
279
+ })]
280
+ })
281
+ }) : null]
282
+ }) : null;
283
+ $[40] = className;
284
+ $[41] = finalShouldLoad;
285
+ $[42] = height;
286
+ $[43] = imageClassName;
287
+ $[44] = isVideo;
288
+ $[45] = loadingMode;
289
+ $[46] = media;
290
+ $[47] = mediaRef;
291
+ $[48] = muted;
292
+ $[49] = natural;
293
+ $[50] = objectFit;
294
+ $[51] = onLoaded;
295
+ $[52] = onQualityLevelChange;
296
+ $[53] = playing;
297
+ $[54] = props;
298
+ $[55] = qualityStartLevel;
299
+ $[56] = ratio;
300
+ $[57] = refVisible;
301
+ $[58] = resolution;
302
+ $[59] = shouldLoad;
303
+ $[60] = thumbnailUrl;
304
+ $[61] = type;
305
+ $[62] = videoClassName;
306
+ $[63] = videoContainerStyle;
307
+ $[64] = videoLoop;
308
+ $[65] = width;
309
+ $[66] = withoutVideo;
310
+ $[67] = t27;
311
+ } else {
312
+ t27 = $[67];
313
+ }
314
+ return t27;
165
315
  }
166
316
 
167
317
  export { Visual as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-visual",
3
- "version": "0.4.71",
3
+ "version": "0.4.76",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -32,9 +32,11 @@
32
32
  "license": "ISC",
33
33
  "type": "module",
34
34
  "module": "es/index.js",
35
+ "style": "./assets/css/styles.css",
35
36
  "exports": {
36
37
  ".": {
37
38
  "types": "./es/index.d.ts",
39
+ "style": "./assets/css/styles.css",
38
40
  "import": "./es/index.js"
39
41
  },
40
42
  "./assets/css/styles": "./assets/css/styles.css",
@@ -51,19 +53,19 @@
51
53
  "build": "../../scripts/prepare-package.sh --types"
52
54
  },
53
55
  "devDependencies": {
54
- "react": "^18.3.0 || ^19.0.0",
55
- "react-dom": "^18.3.0 || ^19.0.0"
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0"
56
58
  },
57
59
  "peerDependencies": {
58
- "react": "^18.3.0 || ^19.0.0",
59
- "react-dom": "^18.3.0 || ^19.0.0"
60
+ "react": "^19.0.0",
61
+ "react-dom": "^19.0.0"
60
62
  },
61
63
  "dependencies": {
62
64
  "@babel/runtime": "^7.28.6",
63
65
  "@folklore/size": "^0.1.20",
64
- "@micromag/core": "^0.4.71",
65
- "@micromag/element-image": "^0.4.71",
66
- "@micromag/element-video": "^0.4.71",
66
+ "@micromag/core": "^0.4.74",
67
+ "@micromag/element-image": "^0.4.74",
68
+ "@micromag/element-video": "^0.4.76",
67
69
  "classnames": "^2.2.6",
68
70
  "uuid": "^9.0.0"
69
71
  },
@@ -71,6 +73,6 @@
71
73
  "access": "public",
72
74
  "registry": "https://registry.npmjs.org/"
73
75
  },
74
- "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
76
+ "gitHead": "42a24f578994b23090271013f136b7f78956b632",
75
77
  "types": "es/index.d.ts"
76
78
  }