@micromag/element-background 0.3.832 → 0.4.4

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 (5) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.d.ts +55 -0
  3. package/es/index.js +81 -139
  4. package/es/styles.css +1 -0
  5. package/package.json +12 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-background-layer,.micromag-element-background-layers,.micromag-element-background-video,.micromag-element-background-videoContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-element-background-container{overflow:hidden}.micromag-element-background-container:focus video,.micromag-element-background-container:focus-within video{border:3px solid #f3f}.micromag-element-background-layer,.micromag-element-background-layers{z-index:0}.micromag-element-background-right .micromag-element-background-background{left:auto;right:0}.micromag-element-background-bottom .micromag-element-background-background{bottom:0;top:auto}
1
+ .container{overflow:hidden}.container:focus video,.container:focus-within video{border:3px solid #f3f}.layer,.layers,.video,.videoContainer{height:100%;left:0;position:absolute;top:0;width:100%}.layer,.layers{z-index:0}.right .background{left:auto;right:0}.bottom .background{bottom:0;top:auto}
package/es/index.d.ts ADDED
@@ -0,0 +1,55 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React from 'react';
3
+ import { BackgroundElement, Color, ImageMedia, VideoMedia } from '@micromag/core';
4
+
5
+ interface BackgroundLayersProps {
6
+ width?: number | null;
7
+ height?: number | null;
8
+ resolution?: number;
9
+ background?: BackgroundElement | BackgroundElement[];
10
+ playing?: boolean;
11
+ muted?: boolean;
12
+ children?: React.ReactNode | null;
13
+ className?: string | null;
14
+ layerClassName?: string | null;
15
+ backgroundClassName?: string | null;
16
+ loadingMode?: string;
17
+ mediaRef?: ((...args: unknown[]) => void | {
18
+ current?: unknown;
19
+ }) | null;
20
+ shouldLoad?: boolean;
21
+ withoutVideo?: boolean;
22
+ onPlayError?: boolean | null;
23
+ qualityStartLevel?: number | null;
24
+ onQualityLevelChange?: ((...args: unknown[]) => void) | null;
25
+ }
26
+ declare function BackgroundLayers({ width, height, resolution, background, playing, muted, children, className, layerClassName, backgroundClassName, loadingMode, mediaRef, shouldLoad, withoutVideo, onPlayError, qualityStartLevel, onQualityLevelChange, }: BackgroundLayersProps): react_jsx_runtime.JSX.Element;
27
+
28
+ interface BackgroundProps {
29
+ width?: number | null;
30
+ height?: number | null;
31
+ resolution?: number;
32
+ fit?: 'contain' | 'cover' | null;
33
+ horizontalAlign?: string;
34
+ verticalAlign?: string;
35
+ repeat?: boolean;
36
+ color?: Color | null;
37
+ media?: ImageMedia | VideoMedia | null;
38
+ mediaRef?: ((...args: unknown[]) => void | {
39
+ current?: unknown;
40
+ }) | null;
41
+ className?: string | null;
42
+ playing?: boolean;
43
+ muted?: boolean;
44
+ children?: React.ReactNode | null;
45
+ loadingMode?: string;
46
+ shouldLoad?: boolean;
47
+ onPlayError?: ((...args: unknown[]) => void) | null;
48
+ withoutVideo?: boolean;
49
+ forceMuted?: boolean;
50
+ qualityStartLevel?: number | null;
51
+ onQualityLevelChange?: ((...args: unknown[]) => void) | null;
52
+ }
53
+ declare function Background({ width, height, resolution, fit, horizontalAlign, verticalAlign, repeat, color, media, mediaRef, className, playing, muted, children, loadingMode, shouldLoad, onPlayError, withoutVideo, forceMuted, qualityStartLevel, onQualityLevelChange, }: BackgroundProps): react_jsx_runtime.JSX.Element;
54
+
55
+ export { Background, BackgroundLayers, BackgroundLayers as default };
package/es/index.js CHANGED
@@ -2,87 +2,57 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
4
  import classNames from 'classnames';
5
- import PropTypes from 'prop-types';
6
5
  import React, { useRef, useMemo } from 'react';
7
- import { PropTypes as PropTypes$1 } from '@micromag/core';
8
6
  import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
9
7
  import { getSizeWithinBounds } from '@folklore/size';
10
8
  import { useSetting } from '@micromag/core/contexts';
11
9
  import Video from '@micromag/element-video';
12
10
 
13
- var styles = {"layers":"micromag-element-background-layers","layer":"micromag-element-background-layer","videoContainer":"micromag-element-background-videoContainer","video":"micromag-element-background-video","container":"micromag-element-background-container","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
11
+ var styles = {"container":"container","videoContainer":"videoContainer","video":"video","layers":"layers","layer":"layer","right":"right","background":"background","bottom":"bottom"};
14
12
 
15
- var propTypes$1 = {
16
- width: PropTypes.number,
17
- height: PropTypes.number,
18
- resolution: PropTypes.number,
19
- fit: PropTypes.oneOf(['contain', 'cover']),
20
- horizontalAlign: PropTypes.string,
21
- verticalAlign: PropTypes.string,
22
- repeat: PropTypes.bool,
23
- color: PropTypes$1.color,
24
- media: PropTypes.oneOfType([PropTypes$1.imageMedia, PropTypes$1.videoMedia]),
25
- mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
26
- // eslint-disable-next-line react/forbid-prop-types
27
- current: PropTypes.any
28
- })]),
29
- className: PropTypes.string,
30
- playing: PropTypes.bool,
31
- muted: PropTypes.bool,
32
- children: PropTypes.node,
33
- loadingMode: PropTypes.string,
34
- shouldLoad: PropTypes.bool,
35
- onPlayError: PropTypes.func,
36
- withoutVideo: PropTypes.bool,
37
- forceMuted: PropTypes.bool,
38
- qualityStartLevel: PropTypes.number,
39
- onQualityLevelChange: PropTypes.func
40
- };
41
- var defaultProps$1 = {
42
- width: null,
43
- height: null,
44
- resolution: 1,
45
- fit: null,
46
- horizontalAlign: 'center',
47
- verticalAlign: 'center',
48
- repeat: false,
49
- color: null,
50
- media: null,
51
- mediaRef: null,
52
- className: null,
53
- playing: false,
54
- muted: false,
55
- children: null,
56
- loadingMode: 'lazy',
57
- shouldLoad: true,
58
- onPlayError: null,
59
- withoutVideo: false,
60
- forceMuted: false,
61
- qualityStartLevel: null,
62
- onQualityLevelChange: null
63
- };
64
- var Background = function Background(_ref) {
65
- var width = _ref.width,
66
- height = _ref.height,
67
- resolution = _ref.resolution,
68
- fit = _ref.fit,
69
- horizontalAlign = _ref.horizontalAlign,
70
- verticalAlign = _ref.verticalAlign,
71
- repeat = _ref.repeat,
72
- color = _ref.color,
73
- media = _ref.media,
74
- mediaRef = _ref.mediaRef,
75
- className = _ref.className,
76
- playing = _ref.playing,
77
- muted = _ref.muted,
78
- children = _ref.children,
79
- loadingMode = _ref.loadingMode,
80
- shouldLoad = _ref.shouldLoad,
81
- onPlayError = _ref.onPlayError,
82
- withoutVideo = _ref.withoutVideo,
83
- forceMuted = _ref.forceMuted,
84
- qualityStartLevel = _ref.qualityStartLevel,
85
- onQualityLevelChange = _ref.onQualityLevelChange;
13
+ function Background(_ref) {
14
+ var _ref$width = _ref.width,
15
+ width = _ref$width === void 0 ? null : _ref$width,
16
+ _ref$height = _ref.height,
17
+ height = _ref$height === void 0 ? null : _ref$height,
18
+ _ref$resolution = _ref.resolution,
19
+ resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
20
+ _ref$fit = _ref.fit,
21
+ fit = _ref$fit === void 0 ? null : _ref$fit,
22
+ _ref$horizontalAlign = _ref.horizontalAlign,
23
+ horizontalAlign = _ref$horizontalAlign === void 0 ? 'center' : _ref$horizontalAlign,
24
+ _ref$verticalAlign = _ref.verticalAlign,
25
+ verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
26
+ _ref$repeat = _ref.repeat,
27
+ repeat = _ref$repeat === void 0 ? false : _ref$repeat,
28
+ _ref$color = _ref.color,
29
+ color = _ref$color === void 0 ? null : _ref$color,
30
+ _ref$media = _ref.media,
31
+ media = _ref$media === void 0 ? null : _ref$media,
32
+ _ref$mediaRef = _ref.mediaRef,
33
+ mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
34
+ _ref$className = _ref.className,
35
+ className = _ref$className === void 0 ? null : _ref$className,
36
+ _ref$playing = _ref.playing,
37
+ playing = _ref$playing === void 0 ? false : _ref$playing,
38
+ _ref$muted = _ref.muted,
39
+ muted = _ref$muted === void 0 ? false : _ref$muted,
40
+ _ref$children = _ref.children,
41
+ children = _ref$children === void 0 ? null : _ref$children,
42
+ _ref$loadingMode = _ref.loadingMode,
43
+ loadingMode = _ref$loadingMode === void 0 ? 'lazy' : _ref$loadingMode,
44
+ _ref$shouldLoad = _ref.shouldLoad,
45
+ shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
46
+ _ref$onPlayError = _ref.onPlayError,
47
+ onPlayError = _ref$onPlayError === void 0 ? null : _ref$onPlayError,
48
+ _ref$withoutVideo = _ref.withoutVideo,
49
+ withoutVideo = _ref$withoutVideo === void 0 ? false : _ref$withoutVideo,
50
+ _ref$forceMuted = _ref.forceMuted,
51
+ forceMuted = _ref$forceMuted === void 0 ? false : _ref$forceMuted,
52
+ _ref$qualityStartLeve = _ref.qualityStartLevel,
53
+ qualityStartLevel = _ref$qualityStartLeve === void 0 ? null : _ref$qualityStartLeve,
54
+ _ref$onQualityLevelCh = _ref.onQualityLevelChange,
55
+ onQualityLevelChange = _ref$onQualityLevelCh === void 0 ? null : _ref$onQualityLevelCh;
86
56
  var _ref2 = media || {},
87
57
  _ref2$type = _ref2.type,
88
58
  mediaType = _ref2$type === void 0 ? null : _ref2$type,
@@ -174,70 +144,44 @@ var Background = function Background(_ref) {
174
144
  })) : null, /*#__PURE__*/React.createElement("div", {
175
145
  className: styles.content
176
146
  }, children));
177
- };
178
- Background.propTypes = propTypes$1;
179
- Background.defaultProps = defaultProps$1;
147
+ }
180
148
 
181
149
  var _excluded = ["horizontalAlign", "verticalAlign"];
182
- var propTypes = {
183
- width: PropTypes.number,
184
- height: PropTypes.number,
185
- resolution: PropTypes.number,
186
- background: PropTypes.oneOfType([PropTypes$1.backgroundElement, PropTypes.arrayOf(PropTypes$1.backgroundElement)]),
187
- playing: PropTypes.bool,
188
- muted: PropTypes.bool,
189
- children: PropTypes.node,
190
- className: PropTypes.string,
191
- layerClassName: PropTypes.string,
192
- backgroundClassName: PropTypes.string,
193
- loadingMode: PropTypes.string,
194
- mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
195
- // eslint-disable-next-line react/forbid-prop-types
196
- current: PropTypes.any
197
- })]),
198
- shouldLoad: PropTypes.bool,
199
- withoutVideo: PropTypes.bool,
200
- onPlayError: PropTypes.bool,
201
- qualityStartLevel: PropTypes.number,
202
- onQualityLevelChange: PropTypes.func
203
- };
204
- var defaultProps = {
205
- width: null,
206
- height: null,
207
- resolution: 1,
208
- background: [],
209
- playing: false,
210
- muted: false,
211
- children: null,
212
- className: null,
213
- layerClassName: null,
214
- backgroundClassName: null,
215
- loadingMode: 'lazy',
216
- mediaRef: null,
217
- shouldLoad: true,
218
- withoutVideo: false,
219
- onPlayError: null,
220
- qualityStartLevel: null,
221
- onQualityLevelChange: null
222
- };
223
- var BackgroundLayers = function BackgroundLayers(_ref) {
224
- var width = _ref.width,
225
- height = _ref.height,
226
- resolution = _ref.resolution,
227
- background = _ref.background,
228
- playing = _ref.playing,
229
- muted = _ref.muted,
230
- children = _ref.children,
231
- className = _ref.className,
232
- layerClassName = _ref.layerClassName,
233
- backgroundClassName = _ref.backgroundClassName,
234
- loadingMode = _ref.loadingMode,
235
- mediaRef = _ref.mediaRef,
236
- shouldLoad = _ref.shouldLoad,
237
- withoutVideo = _ref.withoutVideo,
238
- onPlayError = _ref.onPlayError,
239
- qualityStartLevel = _ref.qualityStartLevel,
240
- onQualityLevelChange = _ref.onQualityLevelChange;
150
+ function BackgroundLayers(_ref) {
151
+ var _ref$width = _ref.width,
152
+ width = _ref$width === void 0 ? null : _ref$width,
153
+ _ref$height = _ref.height,
154
+ height = _ref$height === void 0 ? null : _ref$height,
155
+ _ref$resolution = _ref.resolution,
156
+ resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
157
+ _ref$background = _ref.background,
158
+ background = _ref$background === void 0 ? [] : _ref$background,
159
+ _ref$playing = _ref.playing,
160
+ playing = _ref$playing === void 0 ? false : _ref$playing,
161
+ _ref$muted = _ref.muted,
162
+ muted = _ref$muted === void 0 ? false : _ref$muted,
163
+ _ref$children = _ref.children,
164
+ children = _ref$children === void 0 ? null : _ref$children,
165
+ _ref$className = _ref.className,
166
+ className = _ref$className === void 0 ? null : _ref$className,
167
+ _ref$layerClassName = _ref.layerClassName,
168
+ layerClassName = _ref$layerClassName === void 0 ? null : _ref$layerClassName,
169
+ _ref$backgroundClassN = _ref.backgroundClassName,
170
+ backgroundClassName = _ref$backgroundClassN === void 0 ? null : _ref$backgroundClassN,
171
+ _ref$loadingMode = _ref.loadingMode,
172
+ loadingMode = _ref$loadingMode === void 0 ? 'lazy' : _ref$loadingMode,
173
+ _ref$mediaRef = _ref.mediaRef,
174
+ mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
175
+ _ref$shouldLoad = _ref.shouldLoad,
176
+ shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
177
+ _ref$withoutVideo = _ref.withoutVideo,
178
+ withoutVideo = _ref$withoutVideo === void 0 ? false : _ref$withoutVideo,
179
+ _ref$onPlayError = _ref.onPlayError,
180
+ onPlayError = _ref$onPlayError === void 0 ? null : _ref$onPlayError,
181
+ _ref$qualityStartLeve = _ref.qualityStartLevel,
182
+ qualityStartLevel = _ref$qualityStartLeve === void 0 ? null : _ref$qualityStartLeve,
183
+ _ref$onQualityLevelCh = _ref.onQualityLevelChange,
184
+ onQualityLevelChange = _ref$onQualityLevelCh === void 0 ? null : _ref$onQualityLevelCh;
241
185
  var hasSize = width > 0 && height > 0;
242
186
  var layers = useMemo(function () {
243
187
  return getLayersFromBackground(background);
@@ -289,8 +233,6 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
289
233
  })), /*#__PURE__*/React.createElement("div", {
290
234
  className: styles.content
291
235
  }, children));
292
- };
293
- BackgroundLayers.propTypes = propTypes;
294
- BackgroundLayers.defaultProps = defaultProps;
236
+ }
295
237
 
296
238
  export { Background, BackgroundLayers, BackgroundLayers as default };
package/es/styles.css ADDED
@@ -0,0 +1 @@
1
+ .container{overflow:hidden}.container:focus video,.container:focus-within video{border:3px solid #f3f}.layer,.layers,.video,.videoContainer{height:100%;left:0;position:absolute;top:0;width:100%}.layer,.layers{z-index:0}.right .background{left:auto;right:0}.bottom .background{bottom:0;top:auto}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-background",
3
- "version": "0.3.832",
3
+ "version": "0.4.4",
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
+ "types": "es/index.d.ts",
35
36
  "exports": {
36
37
  ".": {
37
- "import": "./es/index.js"
38
+ "import": "./es/index.js",
39
+ "types": "./es/index.d.ts"
38
40
  },
39
41
  "./assets/css/styles": "./assets/css/styles.css",
40
42
  "./assets/css/styles.css": "./assets/css/styles.css"
@@ -47,28 +49,27 @@
47
49
  "scripts": {
48
50
  "clean": "rm -rf es && rm -rf lib && rm -rf assets",
49
51
  "prepublishOnly": "npm run build",
50
- "build": "../../scripts/prepare-package.sh"
52
+ "build": "../../scripts/prepare-package.sh --types"
51
53
  },
52
54
  "devDependencies": {
53
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
55
+ "react": "^19.2.0"
54
56
  },
55
57
  "peerDependencies": {
56
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
58
+ "react": "^19.2.0"
57
59
  },
58
60
  "dependencies": {
59
61
  "@babel/runtime": "^7.13.10",
60
62
  "@folklore/size": "^0.1.20",
61
- "@micromag/core": "^0.3.832",
62
- "@micromag/element-video": "^0.3.832",
63
+ "@micromag/core": "^0.4.4",
64
+ "@micromag/element-video": "^0.4.4",
63
65
  "classnames": "^2.2.6",
64
- "lodash": "^4.17.21",
65
- "prop-types": "^15.7.2",
66
- "react-intl": "^6.6.4",
66
+ "lodash": "^4.17.23",
67
+ "react-intl": "^8.1.3",
67
68
  "uuid": "^9.0.0"
68
69
  },
69
70
  "publishConfig": {
70
71
  "access": "public",
71
72
  "registry": "https://registry.npmjs.org/"
72
73
  },
73
- "gitHead": "4969d64e304334cfd47321e624e5914e0694c55f"
74
+ "gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d"
74
75
  }