@telefonica/mistica 11.12.0 → 11.12.1

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 (7) hide show
  1. package/dist/image.js +2 -2
  2. package/dist/package-version.js +1 -1
  3. package/dist/video.js +10 -13
  4. package/dist-es/image.js +2 -2
  5. package/dist-es/package-version.js +1 -1
  6. package/dist-es/video.js +10 -13
  7. package/package.json +1 -1
package/dist/image.js CHANGED
@@ -239,9 +239,9 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
239
239
  width = props.width;
240
240
  height = props.height;
241
241
  } else if (typeof props.width === "number") {
242
- height = props.width / ratio;
242
+ height = ratio ? props.width / ratio : undefined;
243
243
  } else if (typeof props.height === "number") {
244
- width = props.height * ratio;
244
+ width = ratio ? props.height * ratio : undefined;
245
245
  } else {
246
246
  width = props.width || "100%";
247
247
  }
package/dist/package-version.js CHANGED
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
5
  exports.PACKAGE_VERSION = void 0;
6
- var PACKAGE_VERSION = "11.12.0";
6
+ var PACKAGE_VERSION = "11.12.1";
7
7
  exports.PACKAGE_VERSION = PACKAGE_VERSION;
package/dist/video.js CHANGED
@@ -103,10 +103,6 @@ var useStyles = (0, _jss).createUseStyles(function() {
103
103
  objectFit: "cover",
104
104
  maxWidth: "100%",
105
105
  maxHeight: "100%",
106
- borderRadius: function borderRadius(param) {
107
- var noBorderRadius = param.noBorderRadius;
108
- return noBorderRadius ? 0 : 4;
109
- },
110
106
  "@supports (aspect-ratio: 1 / 1)": {
111
107
  aspectRatio: function aspectRatio(param) {
112
108
  var aspectRatio1 = param.aspectRatio;
@@ -126,10 +122,6 @@ var useStyles = (0, _jss).createUseStyles(function() {
126
122
  }
127
123
  },
128
124
  wrapper: {
129
- borderRadius: function borderRadius(param) {
130
- var noBorderRadius = param.noBorderRadius;
131
- return noBorderRadius ? 0 : 4;
132
- },
133
125
  overflow: "hidden",
134
126
  maxWidth: "100%",
135
127
  maxHeight: "100%",
@@ -166,7 +158,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
166
158
  // if aspect ratio is 0, we use the original video proportions
167
159
  var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
168
160
  var classes = useStyles({
169
- noBorderRadius: noBorderRadius,
170
161
  aspectRatio: withCssAspectRatio ? ratio : undefined,
171
162
  width: props.width
172
163
  });
@@ -197,9 +188,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
197
188
  width = props.width;
198
189
  height = props.height;
199
190
  } else if (typeof props.width === "number") {
200
- height = props.width / ratio;
191
+ height = ratio ? props.width / ratio : undefined;
201
192
  } else if (typeof props.height === "number") {
202
- width = props.height * ratio;
193
+ width = ratio ? props.height * ratio : undefined;
203
194
  } else {
204
195
  width = props.width || "100%";
205
196
  }
@@ -225,8 +216,12 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
225
216
  className: classes.video,
226
217
  preload: preload,
227
218
  // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
228
- poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
219
+ poster: poster || TRANSPARENT_PIXEL
229
220
  }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
221
+ style: {
222
+ // For some reason adding this style with JSS doesn't add the border radius in safari
223
+ borderRadius: noBorderRadius ? 0 : 4
224
+ },
230
225
  children: sources.map(function(param, index) {
231
226
  var src = param.src, type = param.type;
232
227
  return /*#__PURE__*/ (0, _jsxRuntime).jsx("source", {
@@ -240,9 +235,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
240
235
  style: {
241
236
  width: width,
242
237
  height: height,
238
+ // adding the poster as background image avoids the flicker in Safari
243
239
  backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
244
240
  backgroundSize: "cover",
245
- backgroundPosition: "50% 50%"
241
+ backgroundPosition: "50% 50%",
242
+ borderRadius: noBorderRadius ? 0 : 4
246
243
  },
247
244
  className: classes.wrapper,
248
245
  children: video1
package/dist-es/image.js CHANGED
@@ -210,9 +210,9 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
210
210
  width = props.width;
211
211
  height = props.height;
212
212
  } else if (typeof props.width === "number") {
213
- height = props.width / ratio;
213
+ height = ratio ? props.width / ratio : undefined;
214
214
  } else if (typeof props.height === "number") {
215
- width = props.height * ratio;
215
+ width = ratio ? props.height * ratio : undefined;
216
216
  } else {
217
217
  width = props.width || "100%";
218
218
  }
package/dist-es/package-version.js CHANGED
@@ -1,2 +1,2 @@
1
1
  // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
2
- export var PACKAGE_VERSION = "11.12.0";
2
+ export var PACKAGE_VERSION = "11.12.1";
package/dist-es/video.js CHANGED
@@ -75,10 +75,6 @@ var useStyles = createUseStyles(function() {
75
75
  objectFit: "cover",
76
76
  maxWidth: "100%",
77
77
  maxHeight: "100%",
78
- borderRadius: function(param) {
79
- var noBorderRadius = param.noBorderRadius;
80
- return noBorderRadius ? 0 : 4;
81
- },
82
78
  "@supports (aspect-ratio: 1 / 1)": {
83
79
  aspectRatio: function(param) {
84
80
  var aspectRatio = param.aspectRatio;
@@ -99,10 +95,6 @@ var useStyles = createUseStyles(function() {
99
95
  }
100
96
  },
101
97
  wrapper: {
102
- borderRadius: function(param) {
103
- var noBorderRadius = param.noBorderRadius;
104
- return noBorderRadius ? 0 : 4;
105
- },
106
98
  overflow: "hidden",
107
99
  maxWidth: "100%",
108
100
  maxHeight: "100%",
@@ -139,7 +131,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
139
131
  // if aspect ratio is 0, we use the original video proportions
140
132
  var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
141
133
  var classes = useStyles({
142
- noBorderRadius: noBorderRadius,
143
134
  aspectRatio: withCssAspectRatio ? ratio : undefined,
144
135
  width: props.width
145
136
  });
@@ -170,9 +161,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
170
161
  width = props.width;
171
162
  height = props.height;
172
163
  } else if (typeof props.width === "number") {
173
- height = props.width / ratio;
164
+ height = ratio ? props.width / ratio : undefined;
174
165
  } else if (typeof props.height === "number") {
175
- width = props.height * ratio;
166
+ width = ratio ? props.height * ratio : undefined;
176
167
  } else {
177
168
  width = props.width || "100%";
178
169
  }
@@ -198,8 +189,12 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
198
189
  className: classes.video,
199
190
  preload: preload,
200
191
  // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
201
- poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
192
+ poster: poster || TRANSPARENT_PIXEL
202
193
  }, getPrefixedDataAttributes(dataAttributes), {
194
+ style: {
195
+ // For some reason adding this style with JSS doesn't add the border radius in safari
196
+ borderRadius: noBorderRadius ? 0 : 4
197
+ },
203
198
  children: sources.map(function(param, index) {
204
199
  var src = param.src, type = param.type;
205
200
  return /*#__PURE__*/ _jsx("source", {
@@ -213,9 +208,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
213
208
  style: {
214
209
  width: width,
215
210
  height: height,
211
+ // adding the poster as background image avoids the flicker in Safari
216
212
  backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
217
213
  backgroundSize: "cover",
218
- backgroundPosition: "50% 50%"
214
+ backgroundPosition: "50% 50%",
215
+ borderRadius: noBorderRadius ? 0 : 4
219
216
  },
220
217
  className: classes.wrapper,
221
218
  children: video1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telefonica/mistica",
3
- "version": "11.12.0",
3
+ "version": "11.12.1",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",