npm - @gravity-ui/page-constructor - Versions diffs - 5.24.0 → 5.26.0 - Mend

@gravity-ui/page-constructor 5.24.0 → 5.26.0

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 (36) hide show

package/build/cjs/blocks/Header/schema.d.ts CHANGED Viewed

@@ -162,6 +162,9 @@ export declare const HeaderBackgroundProps: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         youtube: {
@@ -281,7 +284,8 @@ export declare const HeaderBackgroundProps: {
             })[];
         };
         ratio: {
-            type: string;
+            type: string[];
+            pattern: string;
         };
         iframe: {
             type: string;
@@ -466,6 +470,9 @@ export declare const HeaderProperties: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         } & {
             optionName: string;
@@ -667,6 +674,9 @@ export declare const HeaderProperties: {
                         ariaLabel: {
                             type: string;
                         };
+                        contain: {
+                            type: string;
+                        };
                     };
                 };
                 youtube: {
@@ -786,7 +796,8 @@ export declare const HeaderProperties: {
                     })[];
                 };
                 ratio: {
-                    type: string;
+                    type: string[];
+                    pattern: string;
                 };
                 iframe: {
                     type: string;
@@ -1020,6 +1031,9 @@ export declare const HeaderBlock: {
                         ariaLabel: {
                             type: string;
                         };
+                        contain: {
+                            type: string;
+                        };
                     };
                 } & {
                     optionName: string;
@@ -1221,6 +1235,9 @@ export declare const HeaderBlock: {
                                 ariaLabel: {
                                     type: string;
                                 };
+                                contain: {
+                                    type: string;
+                                };
                             };
                         };
                         youtube: {
@@ -1340,7 +1357,8 @@ export declare const HeaderBlock: {
                             })[];
                         };
                         ratio: {
-                            type: string;
+                            type: string[];
+                            pattern: string;
                         };
                         iframe: {
                             type: string;

package/build/cjs/blocks/HeaderSlider/schema.d.ts CHANGED Viewed

@@ -165,6 +165,9 @@ export declare const HeaderSliderBlock: {
                                     ariaLabel: {
                                         type: string;
                                     };
+                                    contain: {
+                                        type: string;
+                                    };
                                 };
                             } & {
                                 optionName: string;
@@ -366,6 +369,9 @@ export declare const HeaderSliderBlock: {
                                             ariaLabel: {
                                                 type: string;
                                             };
+                                            contain: {
+                                                type: string;
+                                            };
                                         };
                                     };
                                     youtube: {
@@ -485,7 +491,8 @@ export declare const HeaderSliderBlock: {
                                         })[];
                                     };
                                     ratio: {
-                                        type: string;
+                                        type: string[];
+                                        pattern: string;
                                     };
                                     iframe: {
                                         type: string;

package/build/cjs/blocks/Media/schema.d.ts CHANGED Viewed

@@ -156,6 +156,9 @@ export declare const Media: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         youtube: {
@@ -275,7 +278,8 @@ export declare const Media: {
             })[];
         };
         ratio: {
-            type: string;
+            type: string[];
+            pattern: string;
         };
         iframe: {
             type: string;
@@ -782,6 +786,9 @@ export declare const MediaBlock: {
                                 ariaLabel: {
                                     type: string;
                                 };
+                                contain: {
+                                    type: string;
+                                };
                             };
                         };
                         youtube: {
@@ -901,7 +908,8 @@ export declare const MediaBlock: {
                             })[];
                         };
                         ratio: {
-                            type: string;
+                            type: string[];
+                            pattern: string;
                         };
                         iframe: {
                             type: string;

package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts CHANGED Viewed

@@ -172,6 +172,9 @@ export declare const PromoFeaturesItem: {
                         ariaLabel: {
                             type: string;
                         };
+                        contain: {
+                            type: string;
+                        };
                     };
                 };
                 youtube: {
@@ -291,7 +294,8 @@ export declare const PromoFeaturesItem: {
                     })[];
                 };
                 ratio: {
-                    type: string;
+                    type: string[];
+                    pattern: string;
                 };
                 iframe: {
                     type: string;

package/build/cjs/blocks/Tabs/schema.d.ts CHANGED Viewed

@@ -167,6 +167,9 @@ export declare const tabsItem: {
                             ariaLabel: {
                                 type: string;
                             };
+                            contain: {
+                                type: string;
+                            };
                         };
                     };
                     youtube: {
@@ -286,7 +289,8 @@ export declare const tabsItem: {
                         })[];
                     };
                     ratio: {
-                        type: string;
+                        type: string[];
+                        pattern: string;
                     };
                     iframe: {
                         type: string;

package/build/cjs/components/Media/Video/Video.js CHANGED Viewed

@@ -31,8 +31,8 @@ const Video = (props) => {
         }
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
-        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
+        return (react_1.default.createElement(ReactPlayer_1.default, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
     }, [
         video,
         height,

package/build/cjs/components/ReactPlayer/ReactPlayer.css CHANGED Viewed

@@ -1,5 +1,9 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-ReactPlayer video {
+  background-color: var(--pc-color-video-player-bg, #000);
+  object-fit: cover;
+}
 .pc-ReactPlayer__wrapper {
   position: relative;
   padding-top: 56.25%;
@@ -63,6 +67,9 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: opacity 300ms;
 }
+.pc-ReactPlayer_contain video {
+  object-fit: contain;
+}
 @media only screen and (max-width: 577px) {
   .pc-ReactPlayer__button_text {
     font-size: 20px;

package/build/cjs/components/ReactPlayer/ReactPlayer.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     onClickPreview?: () => void;
     height?: number;
     ratio?: number;
+    autoRatio?: boolean;
     children?: React.ReactNode;
 }
 export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;

package/build/cjs/components/ReactPlayer/ReactPlayer.js CHANGED Viewed

@@ -24,7 +24,7 @@ const FPS = 60;
 // eslint-disable-next-line react/display-name
 exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const { type: customControlsType = models_1.CustomControlsType.WithMuteButton, muteButtonShown, positioning = models_1.CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
@@ -36,6 +36,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [playedPercent, setPlayedPercent] = (0, react_1.useState)(0);
     const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height);
     const [width, setWidth] = (0, react_1.useState)(0);
+    const [actualRatio, setActualRatio] = (0, react_1.useState)();
     const [muted, setMuted] = (0, react_1.useState)(mute);
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
     const [ended, setEnded] = (0, react_1.useState)(false);
@@ -106,7 +107,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                     parseFloat(paddingLeft) -
                     parseFloat(paddingRight);
                 setWidth(newWidth);
-                setCurrentHeight(Math.floor(getHeight(newWidth, ratio)));
+                setCurrentHeight(Math.floor(getHeight(newWidth, ratio !== null && ratio !== void 0 ? ratio : (autoRatio ? actualRatio : undefined))));
             }
         }, 200);
         updateSize();
@@ -114,7 +115,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         return () => {
             window.removeEventListener('resize', updateSize);
         };
-    }, [ratio]);
+    }, [actualRatio, autoRatio, ratio]);
     const playEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
     const stopEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = (0, react_1.useMemo)(() => {
@@ -184,6 +185,15 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             setEnded(false);
         }
     }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
+    const onReady = (0, react_1.useCallback)((player) => {
+        setPlayerRef(player);
+        const videoElement = player.getInternalPlayer();
+        const videoWidth = videoElement.videoWidth;
+        const videoHeight = videoElement.videoHeight;
+        if (videoWidth && videoHeight) {
+            setActualRatio(videoHeight / videoWidth);
+        }
+    }, []);
     const onProgress = (0, react_1.useCallback)((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
@@ -224,8 +234,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     return (react_1.default.createElement("div", { className: b({
             wrapper: !currentHeight,
             controls,
+            contain,
         }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: autoPlay && customControlsType !== models_1.CustomControlsType.WithMuteButton
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== models_1.CustomControlsType.WithMuteButton
                 ? undefined
                 : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
                 file: {

package/build/cjs/models/constructor-items/common.d.ts CHANGED Viewed

@@ -127,6 +127,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     customControlsOptions?: CustomControlsOptions;
     ariaLabel?: string;
+    contain?: boolean;
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
@@ -179,7 +180,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
-    ratio?: number;
+    ratio?: number | 'auto';
     previewImg?: string;
 }
 export interface MediaComponentVideoIframeProps {

package/build/cjs/schema/constants.d.ts CHANGED Viewed

@@ -1549,6 +1549,9 @@ export declare const cardSchemas: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
@@ -1590,7 +1593,8 @@ export declare const cardSchemas: {
                 type: string;
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

package/build/cjs/schema/validators/common.d.ts CHANGED Viewed

@@ -203,6 +203,9 @@ export declare const VideoProps: {
         ariaLabel: {
             type: string;
         };
+        contain: {
+            type: string;
+        };
     };
 };
 export declare const ThemeProps: {
@@ -365,6 +368,9 @@ export declare const BackgroundProps: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         height: {
@@ -1129,6 +1135,9 @@ export declare const MediaProps: {
             ariaLabel: {
                 type: string;
             };
+            contain: {
+                type: string;
+            };
         };
     };
     youtube: {
@@ -1248,7 +1257,8 @@ export declare const MediaProps: {
         })[];
     };
     ratio: {
-        type: string;
+        type: string[];
+        pattern: string;
     };
     iframe: {
         type: string;

package/build/cjs/schema/validators/common.js CHANGED Viewed

@@ -164,6 +164,9 @@ exports.VideoProps = {
         ariaLabel: {
             type: 'string',
         },
+        contain: {
+            type: 'boolean',
+        },
     },
 };
 exports.ThemeProps = {
@@ -547,7 +550,8 @@ exports.MediaProps = {
         anyOf: [event_1.AnalyticsEventSchema, { type: 'array', items: event_1.AnalyticsEventSchema }],
     },
     ratio: {
-        type: 'number',
+        type: ['number', 'string'],
+        pattern: '^auto$',
     },
     iframe: Object.assign({}, IframeProps),
     margins: {

package/build/cjs/sub-blocks/ImageCard/ImageCard.js CHANGED Viewed

@@ -24,7 +24,7 @@ const ImageCard = (props) => {
             react_1.default.createElement(components_1.Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
         hasContent && (react_1.default.createElement("div", { className: b('content') },
             react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: CONTENT_COL_SIZES, controlPosition: areControlsInFooter ? 'bottom' : 'default' })))));
-    return url ? (react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, extraProps: {
+    return url ? (react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, style: { backgroundColor }, extraProps: {
             draggable: false,
             onDragStart: (e) => e.preventDefault(),
         } }, cardContent)) : (react_1.default.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } }, cardContent));

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts CHANGED Viewed

@@ -157,6 +157,9 @@ export declare const LayoutItem: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
@@ -276,7 +279,8 @@ export declare const LayoutItem: {
                 })[];
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

package/build/cjs/sub-blocks/MediaCard/schema.d.ts CHANGED Viewed

@@ -240,6 +240,9 @@ export declare const MediaCardBlock: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
@@ -281,7 +284,8 @@ export declare const MediaCardBlock: {
                 type: string;
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

package/build/esm/blocks/Header/schema.d.ts CHANGED Viewed

@@ -162,6 +162,9 @@ export declare const HeaderBackgroundProps: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         youtube: {
@@ -281,7 +284,8 @@ export declare const HeaderBackgroundProps: {
             })[];
         };
         ratio: {
-            type: string;
+            type: string[];
+            pattern: string;
         };
         iframe: {
             type: string;
@@ -466,6 +470,9 @@ export declare const HeaderProperties: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         } & {
             optionName: string;
@@ -667,6 +674,9 @@ export declare const HeaderProperties: {
                         ariaLabel: {
                             type: string;
                         };
+                        contain: {
+                            type: string;
+                        };
                     };
                 };
                 youtube: {
@@ -786,7 +796,8 @@ export declare const HeaderProperties: {
                     })[];
                 };
                 ratio: {
-                    type: string;
+                    type: string[];
+                    pattern: string;
                 };
                 iframe: {
                     type: string;
@@ -1020,6 +1031,9 @@ export declare const HeaderBlock: {
                         ariaLabel: {
                             type: string;
                         };
+                        contain: {
+                            type: string;
+                        };
                     };
                 } & {
                     optionName: string;
@@ -1221,6 +1235,9 @@ export declare const HeaderBlock: {
                                 ariaLabel: {
                                     type: string;
                                 };
+                                contain: {
+                                    type: string;
+                                };
                             };
                         };
                         youtube: {
@@ -1340,7 +1357,8 @@ export declare const HeaderBlock: {
                             })[];
                         };
                         ratio: {
-                            type: string;
+                            type: string[];
+                            pattern: string;
                         };
                         iframe: {
                             type: string;

package/build/esm/blocks/HeaderSlider/schema.d.ts CHANGED Viewed

@@ -165,6 +165,9 @@ export declare const HeaderSliderBlock: {
                                     ariaLabel: {
                                         type: string;
                                     };
+                                    contain: {
+                                        type: string;
+                                    };
                                 };
                             } & {
                                 optionName: string;
@@ -366,6 +369,9 @@ export declare const HeaderSliderBlock: {
                                             ariaLabel: {
                                                 type: string;
                                             };
+                                            contain: {
+                                                type: string;
+                                            };
                                         };
                                     };
                                     youtube: {
@@ -485,7 +491,8 @@ export declare const HeaderSliderBlock: {
                                         })[];
                                     };
                                     ratio: {
-                                        type: string;
+                                        type: string[];
+                                        pattern: string;
                                     };
                                     iframe: {
                                         type: string;

package/build/esm/blocks/Media/schema.d.ts CHANGED Viewed

@@ -156,6 +156,9 @@ export declare const Media: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         youtube: {
@@ -275,7 +278,8 @@ export declare const Media: {
             })[];
         };
         ratio: {
-            type: string;
+            type: string[];
+            pattern: string;
         };
         iframe: {
             type: string;
@@ -782,6 +786,9 @@ export declare const MediaBlock: {
                                 ariaLabel: {
                                     type: string;
                                 };
+                                contain: {
+                                    type: string;
+                                };
                             };
                         };
                         youtube: {
@@ -901,7 +908,8 @@ export declare const MediaBlock: {
                             })[];
                         };
                         ratio: {
-                            type: string;
+                            type: string[];
+                            pattern: string;
                         };
                         iframe: {
                             type: string;

package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts CHANGED Viewed

@@ -172,6 +172,9 @@ export declare const PromoFeaturesItem: {
                         ariaLabel: {
                             type: string;
                         };
+                        contain: {
+                            type: string;
+                        };
                     };
                 };
                 youtube: {
@@ -291,7 +294,8 @@ export declare const PromoFeaturesItem: {
                     })[];
                 };
                 ratio: {
-                    type: string;
+                    type: string[];
+                    pattern: string;
                 };
                 iframe: {
                     type: string;

package/build/esm/blocks/Tabs/schema.d.ts CHANGED Viewed

@@ -167,6 +167,9 @@ export declare const tabsItem: {
                             ariaLabel: {
                                 type: string;
                             };
+                            contain: {
+                                type: string;
+                            };
                         };
                     };
                     youtube: {
@@ -286,7 +289,8 @@ export declare const tabsItem: {
                         })[];
                     };
                     ratio: {
-                        type: string;
+                        type: string[];
+                        pattern: string;
                     };
                     iframe: {
                         type: string;

package/build/esm/components/Media/Video/Video.js CHANGED Viewed

@@ -29,8 +29,8 @@ const Video = (props) => {
         }
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
-        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (React.createElement(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
+        return (React.createElement(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
     }, [
         video,
         height,

package/build/esm/components/ReactPlayer/ReactPlayer.css CHANGED Viewed

@@ -1,5 +1,9 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-ReactPlayer video {
+  background-color: var(--pc-color-video-player-bg, #000);
+  object-fit: cover;
+}
 .pc-ReactPlayer__wrapper {
   position: relative;
   padding-top: 56.25%;
@@ -63,6 +67,9 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: opacity 300ms;
 }
+.pc-ReactPlayer_contain video {
+  object-fit: contain;
+}
 @media only screen and (max-width: 577px) {
   .pc-ReactPlayer__button_text {
     font-size: 20px;