@meduza/ui-kit-2 1.0.6 → 1.0.8
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.
- package/dist/ui-kit-2.cjs.development.js +16 -10
- package/dist/ui-kit-2.cjs.development.js.map +1 -1
- package/dist/ui-kit-2.cjs.production.min.js +1 -1
- package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
- package/dist/ui-kit-2.esm.js +16 -10
- package/dist/ui-kit-2.esm.js.map +1 -1
- package/dist/ui-kit.css +5 -0
- package/package.json +1 -1
- package/src/EmbedBlock/EmbedBlock.tsx +5 -3
- package/src/Image/index.tsx +16 -13
- package/dist/ui-kit-game.css +0 -7278
|
@@ -482,8 +482,9 @@ const Image = ({
|
|
|
482
482
|
lightBox
|
|
483
483
|
} = React.useContext(BlockContext);
|
|
484
484
|
const [isLoaded, setIsLoaded] = React.useState(lazy ? false : true);
|
|
485
|
+
const isFullscreenEnabled = Boolean(lightBox && optimized?.original && fullscreen);
|
|
485
486
|
const handleClick = () => {
|
|
486
|
-
if (!
|
|
487
|
+
if (!isFullscreenEnabled) {
|
|
487
488
|
return;
|
|
488
489
|
}
|
|
489
490
|
postMessage('', 'fullscreen_click', 'click');
|
|
@@ -497,10 +498,16 @@ const Image = ({
|
|
|
497
498
|
};
|
|
498
499
|
/* fallback w325 url until w6 was released */
|
|
499
500
|
const fallbackSource = source && source[0] || optimized.w325 && optimized.w325['1x'] || optimized.original;
|
|
500
|
-
let classNames = [[styles$F.root, true], [styles$F.isLoaded, isLoaded], [styles$F.fullscreen,
|
|
501
|
+
let classNames = [[styles$F.root, true], [styles$F.isLoaded, isLoaded], [styles$F.fullscreen, isFullscreenEnabled], [styles$F.fullRatio, ratio === null]];
|
|
501
502
|
if (styleContext) {
|
|
502
503
|
classNames = makeStyleContext(classNames, styleContext, styles$F);
|
|
503
504
|
}
|
|
505
|
+
const wrapperProps = isFullscreenEnabled ? {
|
|
506
|
+
onClick: handleClick,
|
|
507
|
+
onKeyPress: handleClick,
|
|
508
|
+
role: 'button',
|
|
509
|
+
tabIndex: 0
|
|
510
|
+
} : {};
|
|
504
511
|
return /*#__PURE__*/React.createElement("div", {
|
|
505
512
|
className: makeClassName(classNames),
|
|
506
513
|
style: blockStyles,
|
|
@@ -508,10 +515,7 @@ const Image = ({
|
|
|
508
515
|
}, /*#__PURE__*/React.createElement("div", {
|
|
509
516
|
className: styles$F.wrapper,
|
|
510
517
|
style: pictureStyles,
|
|
511
|
-
|
|
512
|
-
onKeyPress: () => handleClick(),
|
|
513
|
-
role: "button",
|
|
514
|
-
tabIndex: 0
|
|
518
|
+
...wrapperProps
|
|
515
519
|
}, lazy ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Lazy, {
|
|
516
520
|
threshold: 0.25
|
|
517
521
|
}, /*#__PURE__*/React.createElement(RenderPicture, {
|
|
@@ -1178,7 +1182,8 @@ const EmbedBlock = ({
|
|
|
1178
1182
|
large_url: large,
|
|
1179
1183
|
gif_url: gifUrl,
|
|
1180
1184
|
mp4_url: mp4Url,
|
|
1181
|
-
video_file_path: videoFileUrl
|
|
1185
|
+
video_file_path: videoFileUrl,
|
|
1186
|
+
thumbnail_url: thumbnailUrl
|
|
1182
1187
|
}
|
|
1183
1188
|
},
|
|
1184
1189
|
styleContext,
|
|
@@ -1217,6 +1222,7 @@ const EmbedBlock = ({
|
|
|
1217
1222
|
alt: block.data.caption,
|
|
1218
1223
|
display: block.data.display,
|
|
1219
1224
|
lazy: block.data.lazy,
|
|
1225
|
+
fullscreen: block.data.fullscreen,
|
|
1220
1226
|
styleContext: styleContext
|
|
1221
1227
|
}));
|
|
1222
1228
|
}
|
|
@@ -1246,10 +1252,10 @@ const EmbedBlock = ({
|
|
|
1246
1252
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1247
1253
|
className: makeClassName([[styles$r.objectWrap, true], [styles$r.isDefaultVideo, true]])
|
|
1248
1254
|
}, /*#__PURE__*/React.createElement("video", {
|
|
1249
|
-
src:
|
|
1255
|
+
src: videoFileUrl,
|
|
1256
|
+
poster: thumbnailUrl || undefined,
|
|
1250
1257
|
controls: true,
|
|
1251
|
-
playsInline: true
|
|
1252
|
-
preload: "metadata"
|
|
1258
|
+
playsInline: true
|
|
1253
1259
|
})));
|
|
1254
1260
|
}
|
|
1255
1261
|
return /*#__PURE__*/React.createElement("div", {
|