@gravity-ui/page-constructor 8.0.0-beta.2 → 8.1.0

package/build/cjs/components/Map/YMap/YandexMap.js

@@ -21,8 +21,31 @@ const DEFAULT_ZOOM = 9;
 // We use this init center to create a map
 // The real center of the map will be calculated later, using the coordinates of the markers
 const INITIAL_CENTER = [0, 0];
+const BALLOON_DISABLING_MARKER_OPTIONS = {
+    cursor: 'drag',
+    interactivityModel: 'default#silent',
+};
+// Helper function to convert YMapMarker to Schema.org Place object
+const markerToSchemaPlace = (marker) => {
+    return {
+        '@type': 'Place',
+        address: marker.address
+            ? {
+                '@type': 'Text',
+                '@value': marker.address,
+            }
+            : undefined,
+        geo: marker.coordinate && marker.coordinate.length === 2
+            ? {
+                '@type': 'GeoCoordinates',
+                latitude: marker.coordinate[0],
+                longitude: marker.coordinate[1],
+            }
+            : undefined,
+    };
+};
 const YandexMap = (props) => {
-    const { markers, zoom, id, className } = props;
+    const { markers, zoom, id, disableControls = false, disableBalloons = false, areaMargin, copyrightPosition, className, forceAspectRatio = true, } = props;
     const { apiKey, scriptSrc, nonce } = React.useContext(mapsContext_1.MapsContext);
     const isMobile = React.useContext(mobileContext_1.MobileContext);
     const { lang = 'ru' } = React.useContext(localeContext_1.LocaleContext);
@@ -44,12 +67,32 @@ const YandexMap = (props) => {
                 setYmaps(new YMap_1.YMap(new window.ymaps.Map(containerId, {
                     center: INITIAL_CENTER,
                     zoom: zoom || DEFAULT_ZOOM,
-                }, { autoFitToViewport: 'always' }), ref.current));
+                    controls: disableControls ? [] : undefined,
+                }, {
+                    autoFitToViewport: 'always',
+                    suppressMapOpenBlock: disableControls,
+                    yandexMapDisablePoiInteractivity: disableControls,
+                    copyrightPosition,
+                }), ref.current));
             });
             setLoading(false);
         })();
-    }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);
+    }, [
+        apiKey,
+        lang,
+        scriptSrc,
+        containerId,
+        zoom,
+        nonce,
+        attemptsIndex,
+        setLoading,
+        disableControls,
+        copyrightPosition,
+    ]);
     React.useEffect(() => {
+        if (!forceAspectRatio) {
+            return;
+        }
         const updateSize = (0, debounce_1.default)(() => {
             if (ref.current) {
                 setHeight(Math.round((0, helpers_1.getMapHeight)(ref.current.offsetWidth, isMobile)));
@@ -57,23 +100,46 @@ const YandexMap = (props) => {
         }, 100);
         updateSize();
         window.addEventListener('resize', updateSize, { passive: true });
+        // eslint-disable-next-line consistent-return
         return () => {
             window.removeEventListener('resize', updateSize);
         };
-    }, [markers, ymap, setYmaps, isMobile]);
+    }, [isMobile, forceAspectRatio]);
     React.useEffect(() => {
         if (ymap) {
             // show with computed center and placemarks
             const showPlacemarks = async () => {
-                await ymap.showPlacemarks({ markers, zoom });
+                const privateMarkers = disableBalloons
+                    ? markers.map(({ label, ...marker }) => ({
+                        ...marker,
+                        label: { ...label, ...BALLOON_DISABLING_MARKER_OPTIONS },
+                    }))
+                    : markers;
+                await ymap.showPlacemarks({ markers: privateMarkers, zoom, areaMargin });
                 setReady(true);
             };
             showPlacemarks();
         }
-    });
+    }, [ymap, markers, zoom, disableBalloons, areaMargin]);
+    const mapMicrodataScript = React.useMemo(() => {
+        if (!markers.length) {
+            return null;
+        }
+        const places = markers
+            .filter((marker) => marker.address || marker.coordinate)
+            .map(markerToSchemaPlace);
+        if (places.length === 0) {
+            return null;
+        }
+        const json = JSON.stringify({
+            '@context': 'https://schema.org',
+            '@graph': places,
+        });
+        return (0, jsx_runtime_1.jsx)("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } });
+    }, [markers]);
     if (!markers)
         return null;
-    return ((0, jsx_runtime_1.jsx)(ErrorWrapper_1.default, { isError: YandexMapApiLoader_1.YMapsApiLoader.status === YandexMapApiLoader_1.MapApiStatus.Error, text: (0, i18n_1.i18n)('map-load-error'), buttonText: (0, i18n_1.i18n)('map-try-again'), handler: onTryAgain, className: b('wrapper'), children: (0, jsx_runtime_1.jsxs)("div", { className: b('wrapper'), children: [(0, jsx_runtime_1.jsx)("div", { id: containerId, className: b({ hidden: !ready }, className), ref: ref, style: { height } }), loading ? (0, jsx_runtime_1.jsx)(uikit_1.Spin, { size: "xl", className: b('spinner') }) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(ErrorWrapper_1.default, { isError: YandexMapApiLoader_1.YMapsApiLoader.status === YandexMapApiLoader_1.MapApiStatus.Error, text: (0, i18n_1.i18n)('map-load-error'), buttonText: (0, i18n_1.i18n)('map-try-again'), handler: onTryAgain, className: b('wrapper'), children: (0, jsx_runtime_1.jsxs)("div", { className: b('wrapper'), children: [mapMicrodataScript, (0, jsx_runtime_1.jsx)("div", { id: containerId, className: b({ hidden: !ready }, className), ref: ref, style: { height } }), loading ? (0, jsx_runtime_1.jsx)(uikit_1.Spin, { size: "xl", className: b('spinner') }) : null] }) }));
 };
 exports.default = YandexMap;
 //# sourceMappingURL=YandexMap.js.map

package/build/cjs/components/Map/YMap/YandexMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"YandexMap.js","sourceRoot":"../../../../../src","sources":["components/Map/YMap/YandexMap.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Spin} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\n\nimport {LocaleContext} from '../../../context/localeContext/localeContext';\nimport {MapsContext} from '../../../context/mapsContext/mapsContext';\nimport {MobileContext} from '../../../context/mobileContext';\nimport {YMapProps} from '../../../models';\nimport {block} from '../../../utils';\nimport ErrorWrapper from '../../ErrorWrapper/ErrorWrapper';\nimport {getMapHeight} from '../helpers';\n\nimport {YMap} from './YMap';\nimport {MapApiStatus, YMapsApiLoader} from './YandexMapApiLoader';\nimport {i18n} from './i18n';\n\nconst b = block('map');\nconst DEFAULT_CONTAINER_ID = 'ymap';\nconst DEFAULT_ZOOM = 9;\n// Center - is a required parameter for creating a new map\n// We use this init center to create a map\n// The real center of the map will be calculated later, using the coordinates of the markers\nconst INITIAL_CENTER = [0, 0];\n\nconst YandexMap: React.FC<YMapProps> = (props) => {\n    const {markers, zoom, id, className} = props;\n    const {apiKey, scriptSrc, nonce} = React.useContext(MapsContext);\n    const isMobile = React.useContext(MobileContext);\n\n    const {lang = 'ru'} = React.useContext(LocaleContext);\n    const containerId = `${DEFAULT_CONTAINER_ID}-${id}`;\n\n    const [ymap, setYmaps] = React.useState<YMap | null>(null);\n    const [height, setHeight] = React.useState<number | undefined>(undefined);\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    const [loading, setLoading] = React.useState<boolean>(false);\n    const [ready, setReady] = React.useState<boolean>(false);\n    const [attemptsIndex, setAttemptsIndex] = React.useState<number>(0);\n    const onTryAgain = React.useCallback(() => {\n        setAttemptsIndex(attemptsIndex + 1);\n    }, [attemptsIndex]);\n\n    React.useEffect(() => {\n        (async function () {\n            setLoading(true);\n\n            await YMapsApiLoader.loadApi(apiKey, scriptSrc, lang, nonce);\n\n            window.ymaps?.ready(() => {\n                setYmaps(\n                    new YMap(\n                        new window.ymaps.Map(\n                            containerId,\n                            {\n                                center: INITIAL_CENTER,\n                                zoom: zoom || DEFAULT_ZOOM,\n                            },\n                            {autoFitToViewport: 'always'},\n                        ),\n                        ref.current,\n                    ),\n                );\n            });\n\n            setLoading(false);\n        })();\n    }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);\n\n    React.useEffect(() => {\n        const updateSize = debounce(() => {\n            if (ref.current) {\n                setHeight(Math.round(getMapHeight(ref.current.offsetWidth, isMobile)));\n            }\n        }, 100);\n\n        updateSize();\n        window.addEventListener('resize', updateSize, {passive: true});\n\n        return () => {\n            window.removeEventListener('resize', updateSize);\n        };\n    }, [markers, ymap, setYmaps, isMobile]);\n\n    React.useEffect(() => {\n        if (ymap) {\n            // show with computed center and placemarks\n            const showPlacemarks = async () => {\n                await ymap.showPlacemarks({markers, zoom});\n\n                setReady(true);\n            };\n\n            showPlacemarks();\n        }\n    });\n\n    if (!markers) return null;\n\n    return (\n        <ErrorWrapper\n            isError={YMapsApiLoader.status === MapApiStatus.Error}\n            text={i18n('map-load-error')}\n            buttonText={i18n('map-try-again')}\n            handler={onTryAgain}\n            className={b('wrapper')}\n        >\n            <div className={b('wrapper')}>\n                {/* hidden - to show the map after calculating the center */}\n                <div\n                    id={containerId}\n                    className={b({hidden: !ready}, className)}\n                    ref={ref}\n                    style={{height}}\n                />\n                {loading ? <Spin size=\"xl\" className={b('spinner')} /> : null}\n            </div>\n        </ErrorWrapper>\n    );\n};\n\nexport default YandexMap;\n"]}
+{"version":3,"file":"YandexMap.js","sourceRoot":"../../../../../src","sources":["components/Map/YMap/YandexMap.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Spin} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\n\nimport {LocaleContext} from '../../../context/localeContext/localeContext';\nimport {MapsContext} from '../../../context/mapsContext/mapsContext';\nimport {MobileContext} from '../../../context/mobileContext';\nimport {YMapMarker, YMapMarkerLabelPrivate, YMapMarkerPrivate, YMapProps} from '../../../models';\nimport {block} from '../../../utils';\nimport ErrorWrapper from '../../ErrorWrapper/ErrorWrapper';\nimport {getMapHeight} from '../helpers';\n\nimport {YMap} from './YMap';\nimport {MapApiStatus, YMapsApiLoader} from './YandexMapApiLoader';\nimport {i18n} from './i18n';\n\nconst b = block('map');\nconst DEFAULT_CONTAINER_ID = 'ymap';\nconst DEFAULT_ZOOM = 9;\n// Center - is a required parameter for creating a new map\n// We use this init center to create a map\n// The real center of the map will be calculated later, using the coordinates of the markers\nconst INITIAL_CENTER = [0, 0];\n\nconst BALLOON_DISABLING_MARKER_OPTIONS: YMapMarkerLabelPrivate = {\n    cursor: 'drag',\n    interactivityModel: 'default#silent',\n};\n\n// Helper function to convert YMapMarker to Schema.org Place object\nconst markerToSchemaPlace = (marker: YMapMarker) => {\n    return {\n        '@type': 'Place',\n        address: marker.address\n            ? {\n                  '@type': 'Text',\n                  '@value': marker.address,\n              }\n            : undefined,\n        geo:\n            marker.coordinate && marker.coordinate.length === 2\n                ? {\n                      '@type': 'GeoCoordinates',\n                      latitude: marker.coordinate[0],\n                      longitude: marker.coordinate[1],\n                  }\n                : undefined,\n    };\n};\n\nconst YandexMap = (props: YMapProps) => {\n    const {\n        markers,\n        zoom,\n        id,\n        disableControls = false,\n        disableBalloons = false,\n        areaMargin,\n        copyrightPosition,\n        className,\n        forceAspectRatio = true,\n    } = props;\n    const {apiKey, scriptSrc, nonce} = React.useContext(MapsContext);\n    const isMobile = React.useContext(MobileContext);\n\n    const {lang = 'ru'} = React.useContext(LocaleContext);\n    const containerId = `${DEFAULT_CONTAINER_ID}-${id}`;\n\n    const [ymap, setYmaps] = React.useState<YMap | null>(null);\n    const [height, setHeight] = React.useState<number | undefined>(undefined);\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    const [loading, setLoading] = React.useState<boolean>(false);\n    const [ready, setReady] = React.useState<boolean>(false);\n    const [attemptsIndex, setAttemptsIndex] = React.useState<number>(0);\n    const onTryAgain = React.useCallback(() => {\n        setAttemptsIndex(attemptsIndex + 1);\n    }, [attemptsIndex]);\n\n    React.useEffect(() => {\n        (async function () {\n            setLoading(true);\n\n            await YMapsApiLoader.loadApi(apiKey, scriptSrc, lang, nonce);\n\n            window.ymaps?.ready(() => {\n                setYmaps(\n                    new YMap(\n                        new window.ymaps.Map(\n                            containerId,\n                            {\n                                center: INITIAL_CENTER,\n                                zoom: zoom || DEFAULT_ZOOM,\n                                controls: disableControls ? [] : undefined,\n                            },\n                            {\n                                autoFitToViewport: 'always',\n                                suppressMapOpenBlock: disableControls,\n                                yandexMapDisablePoiInteractivity: disableControls,\n                                copyrightPosition,\n                            },\n                        ),\n                        ref.current,\n                    ),\n                );\n            });\n\n            setLoading(false);\n        })();\n    }, [\n        apiKey,\n        lang,\n        scriptSrc,\n        containerId,\n        zoom,\n        nonce,\n        attemptsIndex,\n        setLoading,\n        disableControls,\n        copyrightPosition,\n    ]);\n\n    React.useEffect(() => {\n        if (!forceAspectRatio) {\n            return;\n        }\n\n        const updateSize = debounce(() => {\n            if (ref.current) {\n                setHeight(Math.round(getMapHeight(ref.current.offsetWidth, isMobile)));\n            }\n        }, 100);\n\n        updateSize();\n        window.addEventListener('resize', updateSize, {passive: true});\n\n        // eslint-disable-next-line consistent-return\n        return () => {\n            window.removeEventListener('resize', updateSize);\n        };\n    }, [isMobile, forceAspectRatio]);\n\n    React.useEffect(() => {\n        if (ymap) {\n            // show with computed center and placemarks\n            const showPlacemarks = async () => {\n                const privateMarkers: YMapMarkerPrivate[] = disableBalloons\n                    ? markers.map(({label, ...marker}) => ({\n                          ...marker,\n                          label: {...label, ...BALLOON_DISABLING_MARKER_OPTIONS},\n                      }))\n                    : markers;\n\n                await ymap.showPlacemarks({markers: privateMarkers, zoom, areaMargin});\n\n                setReady(true);\n            };\n\n            showPlacemarks();\n        }\n    }, [ymap, markers, zoom, disableBalloons, areaMargin]);\n\n    const mapMicrodataScript = React.useMemo(() => {\n        if (!markers.length) {\n            return null;\n        }\n\n        const places = markers\n            .filter((marker) => marker.address || marker.coordinate)\n            .map(markerToSchemaPlace);\n\n        if (places.length === 0) {\n            return null;\n        }\n\n        const json = JSON.stringify({\n            '@context': 'https://schema.org',\n            '@graph': places,\n        });\n\n        return <script type=\"application/ld+json\" dangerouslySetInnerHTML={{__html: json}} />;\n    }, [markers]);\n\n    if (!markers) return null;\n\n    return (\n        <ErrorWrapper\n            isError={YMapsApiLoader.status === MapApiStatus.Error}\n            text={i18n('map-load-error')}\n            buttonText={i18n('map-try-again')}\n            handler={onTryAgain}\n            className={b('wrapper')}\n        >\n            <div className={b('wrapper')}>\n                {mapMicrodataScript}\n                {/* hidden - to show the map after calculating the center */}\n                <div\n                    id={containerId}\n                    className={b({hidden: !ready}, className)}\n                    ref={ref}\n                    style={{height}}\n                />\n                {loading ? <Spin size=\"xl\" className={b('spinner')} /> : null}\n            </div>\n        </ErrorWrapper>\n    );\n};\n\nexport default YandexMap;\n"]}

package/build/cjs/components/Map/YMap/utils.d.ts

@@ -0,0 +1,8 @@
+import { Coordinate, YMapMargin } from "../../../models/index.js";
+export type ParsedMargin = [top: number, right: number, bottom: number, left: number];
+export declare const parseMargin: (margin: YMapMargin) => ParsedMargin;
+export declare const calcPixelBounds: ([leftTop, rightBottom]: [Coordinate, Coordinate], zoom: number, containerSize: Coordinate) => number[][];
+export declare const calculateMapParamsWithMarginAndZoom: ([leftTop, rightBottom]: [Coordinate, Coordinate], zoom: number, areaMargin: ParsedMargin, containerSize: Coordinate) => {
+    center: any;
+    zoom: number;
+};

package/build/cjs/components/Map/YMap/utils.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateMapParamsWithMarginAndZoom = exports.calcPixelBounds = exports.parseMargin = void 0;
+const parseMargin = (margin) => {
+    if (!Array.isArray(margin)) {
+        return [margin, margin, margin, margin];
+    }
+    if (margin.length === 2) {
+        return [margin[0], margin[1], margin[0], margin[1]];
+    }
+    return margin;
+};
+exports.parseMargin = parseMargin;
+const calcPixelBounds = ([leftTop, rightBottom], zoom, containerSize) => {
+    const utils = window.ymaps.util.bounds;
+    let [[leftPx, topPx], [rightPx, bottomPx]] = utils.toGlobalPixelBounds([leftTop, rightBottom], zoom);
+    // fall back to container size in case there is only one marker and area is 0
+    if (rightPx - leftPx <= 0) {
+        const halfX = containerSize[0] / 2;
+        leftPx -= halfX;
+        rightPx += halfX;
+    }
+    if (bottomPx - topPx <= 0) {
+        const halfY = containerSize[1] / 2;
+        topPx -= halfY;
+        bottomPx += halfY;
+    }
+    return [
+        [leftPx, topPx],
+        [rightPx, bottomPx],
+    ];
+};
+exports.calcPixelBounds = calcPixelBounds;
+const calcNewZoom = (l, zoom, marginSum) => {
+    return Math.log2((Math.pow(2, zoom) * (l - marginSum)) / l);
+};
+const calculateMapParamsWithMarginAndZoom = ([leftTop, rightBottom], zoom, areaMargin, containerSize) => {
+    const utils = window.ymaps.util.bounds;
+    // calculate pixel bounds with current zoom
+    let [[leftPx, topPx], [rightPx, bottomPx]] = (0, exports.calcPixelBounds)([leftTop, rightBottom], zoom, containerSize);
+    const [topMargin, rightMargin, bottomMargin, leftMargin] = areaMargin;
+    let zoomV;
+    let zoomH;
+    // calculate new zoom value after margins are applied
+    if (leftMargin && rightMargin) {
+        zoomH = calcNewZoom(rightPx - leftPx, zoom, leftMargin + rightMargin);
+    }
+    else {
+        zoomH = zoom;
+    }
+    if (topMargin && bottomMargin) {
+        zoomV = calcNewZoom(bottomPx - topPx, zoom, topMargin + bottomMargin);
+    }
+    else {
+        zoomV = zoom;
+    }
+    const newZoom = Math.min(zoomV, zoomH);
+    // calculate pixel bounds with new zoom
+    [[leftPx, topPx], [rightPx, bottomPx]] = (0, exports.calcPixelBounds)([leftTop, rightBottom], newZoom, containerSize);
+    // calculate new bounds (scale if both size are present, otherwise shift the map)
+    if (leftMargin && rightMargin) {
+        leftPx -= leftMargin;
+        rightPx += rightMargin;
+    }
+    else if (leftMargin) {
+        leftPx -= leftMargin;
+        rightPx -= leftMargin;
+    }
+    else if (rightMargin) {
+        leftPx += rightMargin;
+        rightPx += rightMargin;
+    }
+    if (topMargin && bottomMargin) {
+        topPx -= topMargin;
+        bottomPx += bottomMargin;
+    }
+    else if (topMargin) {
+        topPx -= topMargin;
+        bottomPx -= topMargin;
+    }
+    else if (bottomMargin) {
+        topPx += bottomMargin;
+        bottomPx += bottomMargin;
+    }
+    // transform new bounds into coordinates
+    const [newLeftTop, newRightBottom] = utils.fromGlobalPixelBounds([
+        [leftPx, topPx],
+        [rightPx, bottomPx],
+    ], newZoom);
+    return {
+        center: utils.getCenter([newLeftTop, newRightBottom]),
+        zoom: newZoom,
+    };
+};
+exports.calculateMapParamsWithMarginAndZoom = calculateMapParamsWithMarginAndZoom;
+//# sourceMappingURL=utils.js.map

package/build/cjs/components/Map/YMap/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../../../src","sources":["components/Map/YMap/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import {Coordinate, YMapMargin} from '../../../models';\n\nexport type ParsedMargin = [top: number, right: number, bottom: number, left: number];\n\nexport const parseMargin = (margin: YMapMargin): ParsedMargin => {\n    if (!Array.isArray(margin)) {\n        return [margin, margin, margin, margin];\n    }\n\n    if (margin.length === 2) {\n        return [margin[0], margin[1], margin[0], margin[1]];\n    }\n\n    return margin;\n};\n\nexport const calcPixelBounds = (\n    [leftTop, rightBottom]: [Coordinate, Coordinate],\n    zoom: number,\n    containerSize: Coordinate,\n) => {\n    const utils = window.ymaps.util.bounds;\n\n    let [[leftPx, topPx], [rightPx, bottomPx]] = utils.toGlobalPixelBounds(\n        [leftTop, rightBottom],\n        zoom,\n    ) as [Coordinate, Coordinate];\n\n    // fall back to container size in case there is only one marker and area is 0\n    if (rightPx - leftPx <= 0) {\n        const halfX = containerSize[0] / 2;\n        leftPx -= halfX;\n        rightPx += halfX;\n    }\n\n    if (bottomPx - topPx <= 0) {\n        const halfY = containerSize[1] / 2;\n        topPx -= halfY;\n        bottomPx += halfY;\n    }\n\n    return [\n        [leftPx, topPx],\n        [rightPx, bottomPx],\n    ];\n};\n\nconst calcNewZoom = (l: number, zoom: number, marginSum: number) => {\n    return Math.log2((Math.pow(2, zoom) * (l - marginSum)) / l);\n};\n\nexport const calculateMapParamsWithMarginAndZoom = (\n    [leftTop, rightBottom]: [Coordinate, Coordinate],\n    zoom: number,\n    areaMargin: ParsedMargin,\n    containerSize: Coordinate,\n) => {\n    const utils = window.ymaps.util.bounds;\n\n    // calculate pixel bounds with current zoom\n    let [[leftPx, topPx], [rightPx, bottomPx]] = calcPixelBounds(\n        [leftTop, rightBottom],\n        zoom,\n        containerSize,\n    );\n\n    const [topMargin, rightMargin, bottomMargin, leftMargin] = areaMargin;\n\n    let zoomV: number;\n    let zoomH: number;\n\n    // calculate new zoom value after margins are applied\n    if (leftMargin && rightMargin) {\n        zoomH = calcNewZoom(rightPx - leftPx, zoom, leftMargin + rightMargin);\n    } else {\n        zoomH = zoom;\n    }\n\n    if (topMargin && bottomMargin) {\n        zoomV = calcNewZoom(bottomPx - topPx, zoom, topMargin + bottomMargin);\n    } else {\n        zoomV = zoom;\n    }\n\n    const newZoom = Math.min(zoomV, zoomH);\n\n    // calculate pixel bounds with new zoom\n    [[leftPx, topPx], [rightPx, bottomPx]] = calcPixelBounds(\n        [leftTop, rightBottom],\n        newZoom,\n        containerSize,\n    );\n\n    // calculate new bounds (scale if both size are present, otherwise shift the map)\n    if (leftMargin && rightMargin) {\n        leftPx -= leftMargin;\n        rightPx += rightMargin;\n    } else if (leftMargin) {\n        leftPx -= leftMargin;\n        rightPx -= leftMargin;\n    } else if (rightMargin) {\n        leftPx += rightMargin;\n        rightPx += rightMargin;\n    }\n\n    if (topMargin && bottomMargin) {\n        topPx -= topMargin;\n        bottomPx += bottomMargin;\n    } else if (topMargin) {\n        topPx -= topMargin;\n        bottomPx -= topMargin;\n    } else if (bottomMargin) {\n        topPx += bottomMargin;\n        bottomPx += bottomMargin;\n    }\n\n    // transform new bounds into coordinates\n    const [newLeftTop, newRightBottom] = utils.fromGlobalPixelBounds(\n        [\n            [leftPx, topPx],\n            [rightPx, bottomPx],\n        ],\n        newZoom,\n    );\n\n    return {\n        center: utils.getCenter([newLeftTop, newRightBottom]),\n        zoom: newZoom,\n    };\n};\n"]}

package/build/cjs/components/Media/FullscreenVideo/FullscreenVideo.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { VideoAllProps } from "../Video/Video.js";
-declare const FullscreenVideo: React.FC<VideoAllProps>;
+declare const FullscreenVideo: (props: VideoAllProps) => import("react/jsx-runtime").JSX.Element;
 export default FullscreenVideo;

package/build/cjs/components/Media/FullscreenVideo/FullscreenVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullscreenVideo.js","sourceRoot":"../../../../../src","sources":["components/Media/FullscreenVideo/FullscreenVideo.tsx"],"names":[],"mappings":";;;;AAEA,uGAAoE;AACpE,sEAAoD;AAEpD,MAAM,eAAe,GAA4B,CAAC,KAAK,EAAE,EAAE;IACvD,OAAO,CACH,uBAAC,yBAAe,cAAE,CAAC,UAAU,EAAE,EAAE,CAAC,uBAAC,eAAK,OAAK,KAAK,KAAM,UAAU,GAAI,GAAmB,CAC5F,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport FullscreenMedia from '../../FullscreenMedia/FullscreenMedia';\nimport Video, {VideoAllProps} from '../Video/Video';\n\nconst FullscreenVideo: React.FC<VideoAllProps> = (props) => {\n    return (\n        <FullscreenMedia>{(classNames) => <Video {...props} {...classNames} />}</FullscreenMedia>\n    );\n};\n\nexport default FullscreenVideo;\n"]}
+{"version":3,"file":"FullscreenVideo.js","sourceRoot":"../../../../../src","sources":["components/Media/FullscreenVideo/FullscreenVideo.tsx"],"names":[],"mappings":";;;;AAAA,uGAAoE;AACpE,sEAAoD;AAEpD,MAAM,eAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC7C,OAAO,CACH,uBAAC,yBAAe,cAAE,CAAC,UAAU,EAAE,EAAE,CAAC,uBAAC,eAAK,OAAK,KAAK,KAAM,UAAU,GAAI,GAAmB,CAC5F,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import FullscreenMedia from '../../FullscreenMedia/FullscreenMedia';\nimport Video, {VideoAllProps} from '../Video/Video';\n\nconst FullscreenVideo = (props: VideoAllProps) => {\n    return (\n        <FullscreenMedia>{(classNames) => <Video {...props} {...classNames} />}</FullscreenMedia>\n    );\n};\n\nexport default FullscreenVideo;\n"]}

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

@@ -12,20 +12,9 @@ const Video = (props) => {
     const { video, height, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'source');
     const ref = React.useRef(null);
+    React.useImperativeHandle(video.ref, () => ref.current, []);
     React.useEffect(() => {
         if (ref && ref.current) {
-            const { loop } = video;
-            if (loop && typeof loop !== 'boolean') {
-                const { start = 0, end } = loop;
-                ref.current.addEventListener('timeupdate', () => {
-                    const videoRef = ref.current;
-                    const endTime = end || (videoRef && videoRef.duration);
-                    if (videoRef && videoRef.currentTime === endTime) {
-                        videoRef.currentTime = start;
-                        videoRef.play().catch(() => setHasVideoFallback(true));
-                    }
-                }, { passive: true });
-            }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));
             }
@@ -33,7 +22,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = React.useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
-        return ((0, jsx_runtime_1.jsx)(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 }));
+        return ((0, jsx_runtime_1.jsx)(ReactPlayer_1.default, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: 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/Media/Video/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sourceRoot":"../../../../../src","sources":["components/Media/Video/Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {MediaComponentVideoProps, MediaVideoType, PlayButtonProps, QAProps} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport {DefaultVideo} from '../../DefaultVideo/DefaultVideo';\nimport ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';\n\nimport './Video.scss';\n\nconst b = block('media-component-video');\n\nexport interface VideoAdditionProps {\n    playButton?: PlayButtonProps;\n    customBarControlsClassName?: string;\n    videoClassName?: string;\n    playVideo?: boolean;\n}\n\ninterface InnerVideoProps {\n    setHasVideoFallback: React.Dispatch<boolean>;\n    hasVideoFallback: boolean;\n}\n\nexport type VideoAllProps = VideoAdditionProps &\n    MediaComponentVideoProps &\n    InnerVideoProps &\n    QAProps;\n\nconst Video = (props: VideoAllProps) => {\n    const {\n        video,\n        height,\n        analyticsEvents,\n        previewImg,\n        playButton: commonPlayButton,\n        customBarControlsClassName,\n        videoClassName,\n        playVideo,\n        setHasVideoFallback,\n        hasVideoFallback,\n        qa,\n        ratio,\n    } = props;\n\n    const qaAttributes = getQaAttrubutes(qa, 'source');\n\n    const ref = React.useRef<HTMLVideoElement>(null);\n\n    React.useEffect(() => {\n        if (ref && ref.current) {\n            const {loop} = video;\n\n            if (loop && typeof loop !== 'boolean') {\n                const {start = 0, end} = loop;\n\n                ref.current.addEventListener(\n                    'timeupdate',\n                    () => {\n                        const videoRef = ref.current;\n                        const endTime = end || (videoRef && videoRef.duration);\n\n                        if (videoRef && videoRef.currentTime === endTime) {\n                            videoRef.currentTime = start;\n                            videoRef.play().catch(() => setHasVideoFallback(true));\n                        }\n                    },\n                    {passive: true},\n                );\n            }\n\n            if (playVideo) {\n                ref.current.play().catch(() => setHasVideoFallback(true));\n            }\n        }\n    }, [playVideo, video, setHasVideoFallback]);\n\n    const reactPlayerBlock = React.useMemo(() => {\n        const {\n            src,\n            loop,\n            controls,\n            muted,\n            autoplay = true,\n            elapsedTime,\n            playButton,\n            ariaLabel,\n            customControlsOptions,\n            contain,\n        } = video;\n\n        return (\n            <ReactPlayerBlock\n                ref={ref}\n                className={b('react-player', videoClassName)}\n                src={src}\n                previewImgUrl={previewImg}\n                loop={Boolean(loop)}\n                controls={controls}\n                muted={muted}\n                autoplay={autoplay && playVideo}\n                elapsedTime={elapsedTime}\n                playButton={playButton || commonPlayButton}\n                customBarControlsClassName={customBarControlsClassName}\n                analyticsEvents={analyticsEvents}\n                height={height}\n                ariaLabel={ariaLabel}\n                customControlsOptions={customControlsOptions}\n                ratio={ratio === 'auto' ? undefined : ratio}\n                autoRatio={ratio === 'auto'}\n                contain={contain}\n            />\n        );\n    }, [\n        video,\n        height,\n        videoClassName,\n        previewImg,\n        playVideo,\n        commonPlayButton,\n        customBarControlsClassName,\n        analyticsEvents,\n        ratio,\n    ]);\n\n    const defaultVideoBlock = React.useMemo(() => {\n        return video.src.length && !hasVideoFallback ? (\n            <div\n                className={b('wrap', videoClassName)}\n                style={{height}}\n                data-qa={qaAttributes.default}\n            >\n                <DefaultVideo ref={ref} video={video} qa={qaAttributes.source} />\n            </div>\n        ) : null;\n    }, [\n        video,\n        hasVideoFallback,\n        videoClassName,\n        height,\n        qaAttributes.default,\n        qaAttributes.source,\n    ]);\n\n    switch (video.type) {\n        case MediaVideoType.Player:\n            return reactPlayerBlock;\n        case MediaVideoType.Default:\n        default:\n            return defaultVideoBlock;\n    }\n};\n\nexport default Video;\n"]}
+{"version":3,"file":"Video.js","sourceRoot":"../../../../../src","sources":["components/Media/Video/Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {MediaComponentVideoProps, MediaVideoType, PlayButtonProps, QAProps} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport {DefaultVideo} from '../../DefaultVideo/DefaultVideo';\nimport ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';\n\nimport './Video.scss';\n\nconst b = block('media-component-video');\n\nexport interface VideoAdditionProps {\n    playButton?: PlayButtonProps;\n    customBarControlsClassName?: string;\n    videoClassName?: string;\n    playVideo?: boolean;\n}\n\ninterface InnerVideoProps {\n    setHasVideoFallback: React.Dispatch<boolean>;\n    hasVideoFallback: boolean;\n}\n\nexport type VideoAllProps = VideoAdditionProps &\n    MediaComponentVideoProps &\n    InnerVideoProps &\n    QAProps;\n\nconst Video = (props: VideoAllProps) => {\n    const {\n        video,\n        height,\n        analyticsEvents,\n        previewImg,\n        playButton: commonPlayButton,\n        customBarControlsClassName,\n        videoClassName,\n        playVideo,\n        setHasVideoFallback,\n        hasVideoFallback,\n        qa,\n        ratio,\n    } = props;\n\n    const qaAttributes = getQaAttrubutes(qa, 'source');\n\n    const ref = React.useRef<HTMLVideoElement>(null);\n\n    React.useImperativeHandle(video.ref, () => ref.current, []);\n\n    React.useEffect(() => {\n        if (ref && ref.current) {\n            if (playVideo) {\n                ref.current.play().catch(() => setHasVideoFallback(true));\n            }\n        }\n    }, [playVideo, video, setHasVideoFallback]);\n\n    const reactPlayerBlock = React.useMemo(() => {\n        const {\n            src,\n            loop,\n            controls,\n            muted,\n            autoplay = true,\n            elapsedTime,\n            playButton,\n            ariaLabel,\n            customControlsOptions,\n            contain,\n        } = video;\n\n        return (\n            <ReactPlayerBlock\n                ref={ref}\n                className={b('react-player', videoClassName)}\n                src={src}\n                previewImgUrl={previewImg}\n                loop={loop}\n                controls={controls}\n                muted={muted}\n                autoplay={autoplay && playVideo}\n                elapsedTime={elapsedTime}\n                playButton={playButton || commonPlayButton}\n                customBarControlsClassName={customBarControlsClassName}\n                analyticsEvents={analyticsEvents}\n                height={height}\n                ariaLabel={ariaLabel}\n                customControlsOptions={customControlsOptions}\n                ratio={ratio === 'auto' ? undefined : ratio}\n                autoRatio={ratio === 'auto'}\n                contain={contain}\n            />\n        );\n    }, [\n        video,\n        height,\n        videoClassName,\n        previewImg,\n        playVideo,\n        commonPlayButton,\n        customBarControlsClassName,\n        analyticsEvents,\n        ratio,\n    ]);\n\n    const defaultVideoBlock = React.useMemo(() => {\n        return video.src.length && !hasVideoFallback ? (\n            <div\n                className={b('wrap', videoClassName)}\n                style={{height}}\n                data-qa={qaAttributes.default}\n            >\n                <DefaultVideo ref={ref} video={video} qa={qaAttributes.source} />\n            </div>\n        ) : null;\n    }, [\n        video,\n        hasVideoFallback,\n        videoClassName,\n        height,\n        qaAttributes.default,\n        qaAttributes.source,\n    ]);\n\n    switch (video.type) {\n        case MediaVideoType.Player:\n            return reactPlayerBlock;\n        case MediaVideoType.Default:\n        default:\n            return defaultVideoBlock;\n    }\n};\n\nexport default Video;\n"]}

package/build/cjs/components/MediaBase/MediaBase.d.ts

@@ -6,8 +6,6 @@ interface MediaBaseProps extends MediaBaseBlockProps {
 }
 export declare const MediaBase: {
     (props: MediaBaseProps): import("react/jsx-runtime").JSX.Element;
-    Card: React.FC<{
-        children?: React.ReactNode | undefined;
-    }>;
+    Card: (props: React.PropsWithChildren<{}>) => React.ReactElement | null;
 };
 export default MediaBase;

package/build/cjs/components/MediaBase/MediaBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBase.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,2FAAsE;AACtE,8CAA0D;AAE1D,gDAAkC;AAClC,sEAAmC;AAEnC,qFAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,IAAI,GAA0C,GAAG,EAAE,CAAC,IAAI,CAAC;AAOxD,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC/C,MAAM,EACF,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,eAAe,EAC3B,eAAe,GAAG,eAAe,EACjC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,iBAAiB,GAAG,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EACpC,GAAG,iBAAiB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,EAAC,KAAK,EAAE,WAAW,EAAC,GAAG,iBAAiB,CAAC;IAE/C,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,SAAS;YACZ,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC;YAC5B,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,uBAAC,0BAAY,OAAK,iBAAiB,GAAI,CAAC;IAC3E,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtE,OAAO,CACH,wBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,aAC9D,SAAS,IAAI,CACV,uBAAC,eAAK,IACF,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,iBAAiB,GAC7B,CACL,EACD,uBAAC,WAAI,cACD,wBAAC,UAAG,IACA,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;wBAChB,OAAO,EAAE,SAAS,KAAK,eAAe;wBACtC,gBAAgB,EAAE,eAAe,KAAK,eAAe;qBACxD,CAAC,aAEF,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,YAC5C,YAAY,GACX,EACL,IAAI,CAAC,CAAC,CAAC,CACJ,uBAAC,UAAG,IAAC,KAAK,EAAE,UAAU,YAClB,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,GACrC,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACH,IACI,CAClB,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,SAAS,aAwDpB;AAEF,iBAAS,CAAC,IAAI,GAAG,IAAI,CAAC;AAEtB,kBAAe,iBAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {Col, Grid, GridColumnSize, Row} from '../../grid';\nimport {MediaBaseBlockProps} from '../../models';\nimport {block} from '../../utils';\nimport Title from '../Title/Title';\n\nimport MediaContent from './MediaBaseContent';\n\nimport './MediaBase.scss';\n\nconst b = block('media-base');\n\nconst Card: React.FC<React.PropsWithChildren<{}>> = () => null;\n\ninterface MediaBaseProps extends MediaBaseBlockProps {\n    children: React.ReactElement;\n    onScroll?: () => void;\n}\n\nexport const MediaBase = (props: MediaBaseProps) => {\n    const {\n        children,\n        largeMedia,\n        direction = 'content-media',\n        mobileDirection = 'content-media',\n        animated,\n        mediaOnly,\n        onScroll,\n        mediaOnlyColSizes = {all: 12, md: 8},\n        ...mediaContentProps\n    } = props;\n    const {title, description} = mediaContentProps;\n\n    const mediaSizes = React.useMemo(() => {\n        return mediaOnly\n            ? {[GridColumnSize.All]: 12}\n            : {[GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12};\n    }, [mediaOnly, largeMedia]);\n\n    const contentSizes = React.useMemo(() => {\n        return {[GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12};\n    }, [largeMedia]);\n\n    const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;\n    const card = children.type === Card ? children?.props.children : null;\n\n    return (\n        <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>\n            {mediaOnly && (\n                <Title\n                    className={b('header')}\n                    title={title}\n                    subtitle={description}\n                    colSizes={mediaOnlyColSizes}\n                />\n            )}\n            <Grid>\n                <Row\n                    className={b('row', {\n                        reverse: direction === 'media-content',\n                        'mobile-reverse': mobileDirection === 'media-content',\n                    })}\n                >\n                    <Col className={b('content')} sizes={contentSizes}>\n                        {mediaContent}\n                    </Col>\n                    {card ? (\n                        <Col sizes={mediaSizes}>\n                            <div className={b('card')}>{card}</div>\n                        </Col>\n                    ) : null}\n                </Row>\n            </Grid>\n        </AnimateBlock>\n    );\n};\n\nMediaBase.Card = Card;\n\nexport default MediaBase;\n"]}
+{"version":3,"file":"MediaBase.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,2FAAsE;AACtE,8CAA0D;AAE1D,gDAAkC;AAClC,sEAAmC;AAEnC,qFAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,IAAI,GAAsE,GAAG,EAAE,CAAC,IAAI,CAAC;AAOpF,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC/C,MAAM,EACF,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,eAAe,EAC3B,eAAe,GAAG,eAAe,EACjC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,iBAAiB,GAAG,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EACpC,GAAG,iBAAiB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,EAAC,KAAK,EAAE,WAAW,EAAC,GAAG,iBAAiB,CAAC;IAE/C,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,SAAS;YACZ,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC;YAC5B,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,uBAAC,0BAAY,OAAK,iBAAiB,GAAI,CAAC;IAC3E,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtE,OAAO,CACH,wBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,aAC9D,SAAS,IAAI,CACV,uBAAC,eAAK,IACF,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,iBAAiB,GAC7B,CACL,EACD,uBAAC,WAAI,cACD,wBAAC,UAAG,IACA,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;wBAChB,OAAO,EAAE,SAAS,KAAK,eAAe;wBACtC,gBAAgB,EAAE,eAAe,KAAK,eAAe;qBACxD,CAAC,aAEF,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,YAC5C,YAAY,GACX,EACL,IAAI,CAAC,CAAC,CAAC,CACJ,uBAAC,UAAG,IAAC,KAAK,EAAE,UAAU,YAClB,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,GACrC,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACH,IACI,CAClB,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,SAAS,aAwDpB;AAEF,iBAAS,CAAC,IAAI,GAAG,IAAI,CAAC;AAEtB,kBAAe,iBAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {Col, Grid, GridColumnSize, Row} from '../../grid';\nimport {MediaBaseBlockProps} from '../../models';\nimport {block} from '../../utils';\nimport Title from '../Title/Title';\n\nimport MediaContent from './MediaBaseContent';\n\nimport './MediaBase.scss';\n\nconst b = block('media-base');\n\nconst Card: (props: React.PropsWithChildren<{}>) => React.ReactElement | null = () => null;\n\ninterface MediaBaseProps extends MediaBaseBlockProps {\n    children: React.ReactElement;\n    onScroll?: () => void;\n}\n\nexport const MediaBase = (props: MediaBaseProps) => {\n    const {\n        children,\n        largeMedia,\n        direction = 'content-media',\n        mobileDirection = 'content-media',\n        animated,\n        mediaOnly,\n        onScroll,\n        mediaOnlyColSizes = {all: 12, md: 8},\n        ...mediaContentProps\n    } = props;\n    const {title, description} = mediaContentProps;\n\n    const mediaSizes = React.useMemo(() => {\n        return mediaOnly\n            ? {[GridColumnSize.All]: 12}\n            : {[GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12};\n    }, [mediaOnly, largeMedia]);\n\n    const contentSizes = React.useMemo(() => {\n        return {[GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12};\n    }, [largeMedia]);\n\n    const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;\n    const card = children.type === Card ? children?.props.children : null;\n\n    return (\n        <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>\n            {mediaOnly && (\n                <Title\n                    className={b('header')}\n                    title={title}\n                    subtitle={description}\n                    colSizes={mediaOnlyColSizes}\n                />\n            )}\n            <Grid>\n                <Row\n                    className={b('row', {\n                        reverse: direction === 'media-content',\n                        'mobile-reverse': mobileDirection === 'media-content',\n                    })}\n                >\n                    <Col className={b('content')} sizes={contentSizes}>\n                        {mediaContent}\n                    </Col>\n                    {card ? (\n                        <Col sizes={mediaSizes}>\n                            <div className={b('card')}>{card}</div>\n                        </Col>\n                    ) : null}\n                </Row>\n            </Grid>\n        </AnimateBlock>\n    );\n};\n\nMediaBase.Card = Card;\n\nexport default MediaBase;\n"]}

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { ClassNameProps, MediaVideoProps, ReactPlayerBlockHandler } from "../../models/index.js";
-export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 'src'>, ClassNameProps {
+export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'src' | 'ref'>, ClassNameProps {
     src: string | string[];
     previewImgUrl?: string;
-    loop?: boolean;
     customBarControlsClassName?: string;
     showPreview?: boolean;
     onClickPreview?: () => void;

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

@@ -37,6 +37,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [isPlaying, setIsPlaying] = React.useState(autoPlay);
     const [playedPercent, setPlayedPercent] = React.useState(0);
     const [currentHeight, setCurrentHeight] = React.useState(height);
+    const [duration, setDuration] = React.useState(null);
     const [width, setWidth] = React.useState(0);
     const [actualRatio, setActualRatio] = React.useState();
     const [muted, setMuted] = React.useState(mute);
@@ -196,23 +197,28 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setActualRatio(videoHeight / videoWidth);
         }
     }, []);
-    const onProgress = React.useCallback((progress) => {
-        setPlayedPercent(progress.played);
-        if (progress.played === 1) {
+    const onProgress = React.useCallback(({ played, playedSeconds }) => {
+        setPlayedPercent(played);
+        if (loop) {
+            const { start = 0, end = duration } = typeof loop === 'boolean' ? {} : loop;
+            // Youtube videos not muted after finishing playing and start again.
+            // 'onEnded' does not fire when 'loop' is set to true.
+            // It is custom loop with muted sound after finishing playing and start again.
+            if (end !== null && playedSeconds >= end) {
+                setIsPlaying(true);
+                playerRef?.seekTo(start);
+            }
+        }
+        if (played === 1) {
             setMuted(true);
         }
+    }, [duration, loop, playerRef]);
+    const onDuration = React.useCallback((currentDuration) => {
+        setDuration(currentDuration);
     }, []);
     const onEnded = React.useCallback(() => {
-        // Youtube videos not muted after finishing playing and start again.
-        // 'onEnded' does not fire when 'loop' is set to true.
-        // It is custom loop with muted sound after finishing playing and start again.
-        if (loop) {
-            setPlayedPercent(0);
-            setIsPlaying(true);
-            playerRef?.seekTo(0);
-        }
         setEnded(true);
-    }, [loop, playerRef]);
+    }, []);
     const onPlayClick = React.useCallback(() => {
         if (isPlaying) {
             onPause();
@@ -247,7 +253,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             'auto-ratio': autoRatio,
         }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, children: isMounted ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(ReactPlayer, { 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: {
+                        : onPause, onProgress: onProgress, onEnded: onEnded, onDuration: onDuration, "aria-label": ariaLabel, previewTabIndex: -1, config: {
                         file: {
                             attributes: {
                                 pip: isMobile ? 'false' : undefined,