@sima-land/moleculas 16.0.0-alpha.11 → 16.0.0-alpha.12

package/common/components/media-gallery/index.d.ts

@@ -0,0 +1,2 @@
+export type { MediaGalleryProps, MediaGalleryStyle } from './types';
+export { MediaGallery, MediaSlide } from './media-gallery';

package/common/components/media-gallery/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaSlide = exports.MediaGallery = void 0;
+var media_gallery_1 = require("./media-gallery");
+Object.defineProperty(exports, "MediaGallery", { enumerable: true, get: function () { return media_gallery_1.MediaGallery; } });
+Object.defineProperty(exports, "MediaSlide", { enumerable: true, get: function () { return media_gallery_1.MediaSlide; } });
+//# sourceMappingURL=index.js.map

package/common/components/media-gallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/media-gallery/index.ts"],"names":[],"mappings":";;;AACA,iDAA2D;AAAlD,6GAAA,YAAY,OAAA;AAAE,2GAAA,UAAU,OAAA"}

package/common/components/media-gallery/media-gallery.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { MediaGalleryProps } from './types';
+/**
+ * Блок просмотра медиа (фото/видео) с возможностью прокрутки с помощью свайпа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaGallery({ className, style, children, targetIndex, onChangeTargetIndex, }: MediaGalleryProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Слот слайда галереи.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaSlide({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/common/components/media-gallery/media-gallery.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaSlide = exports.MediaGallery = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const media_gallery_module_scss_1 = __importDefault(require("./media-gallery.module.scss"));
+const cx = bind_1.default.bind(media_gallery_module_scss_1.default);
+/**
+ * Блок просмотра медиа (фото/видео) с возможностью прокрутки с помощью свайпа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaGallery({ className, style, children, targetIndex = 0, onChangeTargetIndex, }) {
+    const mounted = (0, hooks_1.useMounted)();
+    const slidesRef = (0, react_1.useRef)(null);
+    const items = react_1.Children.toArray(children).filter(item => (0, react_1.isValidElement)(item) && item.type === MediaSlide);
+    const total = items.length;
+    const totalRef = (0, react_1.useRef)(total);
+    totalRef.current = total;
+    const targetIndexRef = (0, react_1.useRef)(targetIndex);
+    targetIndexRef.current = targetIndex;
+    const onChangeTargetIndexRef = (0, react_1.useRef)(onChangeTargetIndex);
+    onChangeTargetIndexRef.current = onChangeTargetIndex;
+    const moveBackward = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = onChangeTargetIndexRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeTargetIndexRef, utils_1.LoopUtil.getPrevIndex(targetIndexRef.current, totalRef.current));
+    }, []);
+    const moveForward = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = onChangeTargetIndexRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeTargetIndexRef, utils_1.LoopUtil.getNextIndex(targetIndexRef.current, totalRef.current));
+    }, []);
+    const target = items[targetIndex];
+    const next = items[utils_1.LoopUtil.getNextIndex(targetIndex, total)];
+    const prev = items[utils_1.LoopUtil.getPrevIndex(targetIndex, total)];
+    const { init, getProps } = (0, react_1.useMemo)(() => (0, utils_1.createSwipe)({
+        onSwipeStart: () => {
+            if (!slidesRef.current) {
+                return;
+            }
+            slidesRef.current.classList.remove(cx('transition'));
+        },
+        onSwipeMove: ({ distanceX }) => {
+            if (!slidesRef.current) {
+                return;
+            }
+            // @todo линейная интерполяция для того чтобы не докручивать до тех слайдов которые не смонтированы
+            slidesRef.current.style.setProperty('transform', `translate3d(${distanceX}px, 0, 0)`);
+        },
+        onSwipeEnd: ({ distanceX, isLeft, isRight }) => {
+            const slides = slidesRef.current;
+            if (!slides) {
+                return;
+            }
+            if (isLeft) {
+                slides.style.setProperty('transform', `translate3d(calc(${distanceX}px - var(--media-gallery-width)), 0, 0)`);
+                moveBackward();
+            }
+            if (isRight) {
+                slides.style.setProperty('transform', `translate3d(calc(${distanceX}px + var(--media-gallery-width)), 0, 0)`);
+                moveForward();
+            }
+            // ВАЖНО: здесь должны быть именно два requestAnimationFrame, один внутри другого
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    slides.classList.add(cx('transition'));
+                    slides.style.setProperty('transform', `translate3d(0px, 0, 0)`);
+                });
+            });
+        },
+    }), [moveBackward, moveBackward]);
+    (0, react_1.useEffect)(init, [init]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: cx('root', className), style: style, ...getProps(), children: mounted && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { ref: slidesRef, className: cx('slides'), children: [prev && ((0, jsx_runtime_1.jsx)("div", { className: cx('slide', 'prev'), children: prev }, prev.key)), target && ((0, jsx_runtime_1.jsx)("div", { className: cx('slide'), children: target }, target.key)), next && ((0, jsx_runtime_1.jsx)("div", { className: cx('slide', 'next'), children: next }, next.key))] }) })) }));
+}
+exports.MediaGallery = MediaGallery;
+/**
+ * Слот слайда галереи.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaSlide({ children }) {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+exports.MediaSlide = MediaSlide;
+//# sourceMappingURL=media-gallery.js.map

package/common/components/media-gallery/media-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-gallery.js","sourceRoot":"","sources":["../../../../src/common/components/media-gallery/media-gallery.tsx"],"names":[],"mappings":"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"}

package/common/components/media-gallery/media-gallery.module.scss

@@ -0,0 +1,35 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  width: var(--media-gallery-width, 320px);
+  height: var(--media-gallery-height, 240px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+}
+
+.slides {
+  position: relative;
+}
+
+.slide {
+  width: var(--media-gallery-width, 320px);
+  height: var(--media-gallery-height, 240px);
+}
+
+.slide.prev {
+  position: absolute;
+  left: -100%;
+  top: 0;
+}
+
+.slide.next {
+  position: absolute;
+  left: 100%;
+  top: 0;
+}
+
+.transition {
+  transition: transform 0.3s ease-in-out;
+}

package/common/components/media-gallery/types.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface MediaGalleryStyle extends CSSProperties {
+    '--media-gallery-width'?: string;
+    '--media-gallery-height'?: string;
+}
+export interface MediaGalleryProps {
+    style?: MediaGalleryStyle;
+    className?: string;
+    children: ReactNode;
+    targetIndex?: number;
+    onChangeTargetIndex?: (newIndex: number) => void;
+}

package/common/components/media-gallery/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/common/components/media-gallery/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/media-gallery/types.ts"],"names":[],"mappings":""}

package/common/components/media-gallery/utils.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+export declare const LoopUtil: {
+    /**
+     * Возвращает индекс предыдущего элемента.
+     * @param current Текущий индекс.
+     * @param total Всего.
+     * @return Индекс.
+     */
+    readonly getPrevIndex: (current: number, total: number) => number;
+    /**
+     * Возвращает индекс следующего элемента.
+     * @param current Текущий индекс.
+     * @param total Всего.
+     * @return Индекс.
+     */
+    readonly getNextIndex: (current: number, total: number) => number;
+};
+/**
+ * Получив пропсы items и children вернет массив пропсов для MediaView.
+ * @param props Свойства.
+ * @return Пропсы.
+ */
+export declare function createSwipe({ onSwipeStart, onSwipeMove, onSwipeEnd, }?: {
+    onSwipeStart?: VoidFunction;
+    onSwipeMove?: (event: {
+        startX: number;
+        distanceX: number;
+    }) => void;
+    onSwipeEnd?: (event: {
+        startX: number;
+        distanceX: number;
+        isLeft: boolean;
+        isRight: boolean;
+    }) => void;
+}): {
+    getProps: () => HTMLAttributes<HTMLElement>;
+    init: () => VoidFunction;
+};

package/common/components/media-gallery/utils.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSwipe = exports.LoopUtil = void 0;
+exports.LoopUtil = {
+    /**
+     * Возвращает индекс предыдущего элемента.
+     * @param current Текущий индекс.
+     * @param total Всего.
+     * @return Индекс.
+     */
+    getPrevIndex(current, total) {
+        const nextIndex = current - 1;
+        return nextIndex < 0 ? total - 1 : nextIndex;
+    },
+    /**
+     * Возвращает индекс следующего элемента.
+     * @param current Текущий индекс.
+     * @param total Всего.
+     * @return Индекс.
+     */
+    getNextIndex(current, total) {
+        const nextIndex = current + 1;
+        return nextIndex >= total ? 0 : nextIndex;
+    },
+};
+/**
+ * Получив пропсы items и children вернет массив пропсов для MediaView.
+ * @param props Свойства.
+ * @return Пропсы.
+ */
+function createSwipe({ onSwipeStart, onSwipeMove, onSwipeEnd, } = {}) {
+    let pointerCount = 0;
+    let captureId = null;
+    let startX = 0;
+    // eslint-disable-next-line require-jsdoc
+    const getProps = () => ({
+        onPointerDown: event => {
+            if (captureId !== null) {
+                return;
+            }
+            captureId = event.pointerId;
+            startX = event.clientX;
+            event.preventDefault();
+            if (document.activeElement instanceof HTMLElement) {
+                document.activeElement.blur();
+            }
+            onSwipeStart === null || onSwipeStart === void 0 ? void 0 : onSwipeStart();
+        },
+    });
+    // eslint-disable-next-line require-jsdoc
+    const init = () => {
+        // eslint-disable-next-line require-jsdoc
+        const onPointerDown = () => {
+            pointerCount++;
+        };
+        // eslint-disable-next-line require-jsdoc
+        const onPointerMove = (event) => {
+            if (captureId !== event.pointerId) {
+                return;
+            }
+            if (pointerCount > 1) {
+                return;
+            }
+            onSwipeMove === null || onSwipeMove === void 0 ? void 0 : onSwipeMove({
+                startX,
+                distanceX: event.clientX - startX,
+            });
+        };
+        // eslint-disable-next-line require-jsdoc
+        const onPointerUp = (event) => {
+            pointerCount--;
+            if (captureId === null) {
+                return;
+            }
+            captureId = null;
+            const diff = event.clientX - startX;
+            onSwipeEnd === null || onSwipeEnd === void 0 ? void 0 : onSwipeEnd({
+                startX,
+                distanceX: diff,
+                isLeft: Math.abs(diff) > 64 && diff > 0,
+                isRight: Math.abs(diff) > 64 && diff < 0,
+            });
+        };
+        // eslint-disable-next-line require-jsdoc
+        const onPointerCancel = () => {
+            pointerCount--;
+        };
+        window.addEventListener('pointerdown', onPointerDown);
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerCancel);
+        return () => {
+            window.removeEventListener('pointerdown', onPointerDown);
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerCancel);
+        };
+    };
+    return { init, getProps };
+}
+exports.createSwipe = createSwipe;
+//# sourceMappingURL=utils.js.map

package/common/components/media-gallery/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/common/components/media-gallery/utils.ts"],"names":[],"mappings":"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"}

package/common/components/media-modal/__mocks__/index.js

@@ -1,6 +1,21 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.videos = exports.mixed = void 0;
+const armchair_jpg_1 = __importDefault(require("./images/armchair.jpg"));
+const cup_jpg_1 = __importDefault(require("./images/cup.jpg"));
+const plant_jpg_1 = __importDefault(require("./images/plant.jpg"));
+const stump_jpg_1 = __importDefault(require("./images/stump.jpg"));
+const table_jpg_1 = __importDefault(require("./images/table.jpg"));
+const vase_jpg_1 = __importDefault(require("./images/vase.jpg"));
+const armchair_jpg_2 = __importDefault(require("./thumbnails/armchair.jpg"));
+const cup_jpg_2 = __importDefault(require("./thumbnails/cup.jpg"));
+const plant_jpg_2 = __importDefault(require("./thumbnails/plant.jpg"));
+const stump_jpg_2 = __importDefault(require("./thumbnails/stump.jpg"));
+const table_jpg_2 = __importDefault(require("./thumbnails/table.jpg"));
+const vase_jpg_2 = __importDefault(require("./thumbnails/vase.jpg"));
 exports.mixed = [
     {
         type: '360',
@@ -92,49 +107,54 @@ exports.mixed = [
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
-            thumbnail: 'https://loremflickr.com/240/240?random=16',
         },
     },
     {
         type: 'image',
         data: {
-            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 1',
-            src: 'https://loremflickr.com/240/240?random=1',
+            alt: 'Стул',
+            src: armchair_jpg_1.default,
+            thumbnail: armchair_jpg_2.default,
         },
     },
     {
         type: 'image',
         data: {
-            alt: 'Фото из отзыва, не квадратное',
-            src: 'https://loremflickr.com/240/240?random=2',
+            alt: 'Чашка',
+            src: cup_jpg_1.default,
+            thumbnail: cup_jpg_2.default,
         },
     },
     {
         type: 'image',
         data: {
-            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 2',
-            src: 'https://loremflickr.com/240/240?random=3',
+            alt: 'Растение',
+            src: plant_jpg_1.default,
+            thumbnail: plant_jpg_2.default,
         },
     },
     {
         type: 'image',
         data: {
-            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 3',
-            src: 'https://loremflickr.com/240/240?random=4',
+            alt: 'Пень',
+            src: stump_jpg_1.default,
+            thumbnail: stump_jpg_2.default,
         },
     },
     {
         type: 'image',
         data: {
-            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 4',
-            src: 'https://loremflickr.com/240/240?random=5',
+            alt: 'Стол',
+            src: table_jpg_1.default,
+            thumbnail: table_jpg_2.default,
         },
     },
     {
         type: 'image',
         data: {
-            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 5',
-            src: 'https://loremflickr.com/240/240?random=6',
+            alt: 'Ваза',
+            src: vase_jpg_1.default,
+            thumbnail: vase_jpg_2.default,
         },
     },
 ];
@@ -143,42 +163,42 @@ exports.videos = [
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
-            thumbnail: 'https://loremflickr.com/240/240?random=6',
+            thumbnail: armchair_jpg_2.default,
         },
     },
     {
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/6907296.mp4',
-            thumbnail: 'https://loremflickr.com/240/240?random=7',
+            thumbnail: cup_jpg_2.default,
         },
     },
     {
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/3619217.mp4',
-            thumbnail: 'https://loremflickr.com/240/240?random=8',
+            thumbnail: plant_jpg_2.default,
         },
     },
     {
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/4093038.mp4',
-            thumbnail: 'https://loremflickr.com/240/240?random=9',
+            thumbnail: stump_jpg_2.default,
         },
     },
     {
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
-            thumbnail: 'https://loremflickr.com/240/240?random=10',
+            thumbnail: table_jpg_2.default,
         },
     },
     {
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/6907296.mp4',
-            thumbnail: 'https://loremflickr.com/240/240?random=11',
+            thumbnail: vase_jpg_2.default,
         },
     },
     {

package/common/components/media-modal/__mocks__/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/__mocks__/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/__mocks__/index.ts"],"names":[],"mappings":"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"}

package/common/components/media-modal/index.d.ts

@@ -3,9 +3,9 @@ import { Preset, HeaderLayout } from './parts';
 import { ScrollSection } from './parts/scroll-section';
 import { Thumbnail, ThumbnailProps } from './parts/thumbnail';
 import { Thumbnails, ThumbnailsProps } from './parts/thumbnails';
-import { MediaContentProps, MediaContent } from './parts/media-content';
-import { MediaViewProps, MediaView } from './parts/media-view';
+import { MediaViewProps, MediaView, MediaViewStyle } from './parts/media-view';
 import { ReviewProps, Review } from './parts/review';
 import { ProductBriefProps, ProductBrief } from './parts/product-brief';
-export type { MediaContentProps, MediaViewProps, ThumbnailProps, ThumbnailsProps, ReviewProps, ProductBriefProps, };
-export { MediaLayout, MediaHeader, MediaMain, MediaAside, MediaFooter, MediaContent, MediaView, HeaderLayout, Thumbnails, Thumbnail, Review, ProductBrief, Preset, ScrollSection, };
+import { MediaArea, MediaAreaMain, MediaAreaAside } from './parts/media-area';
+export type { MediaViewStyle, MediaViewProps, ThumbnailProps, ThumbnailsProps, ReviewProps, ProductBriefProps, };
+export { MediaLayout, MediaHeader, MediaMain, MediaAside, MediaFooter, MediaArea, MediaAreaMain, MediaAreaAside, MediaView, HeaderLayout, Thumbnails, Thumbnail, Review, ProductBrief, Preset, ScrollSection, };

package/common/components/media-modal/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollSection = exports.Preset = exports.ProductBrief = exports.Review = exports.Thumbnail = exports.Thumbnails = exports.HeaderLayout = exports.MediaView = exports.MediaContent = exports.MediaFooter = exports.MediaAside = exports.MediaMain = exports.MediaHeader = exports.MediaLayout = void 0;
+exports.ScrollSection = exports.Preset = exports.ProductBrief = exports.Review = exports.Thumbnail = exports.Thumbnails = exports.HeaderLayout = exports.MediaView = exports.MediaAreaAside = exports.MediaAreaMain = exports.MediaArea = exports.MediaFooter = exports.MediaAside = exports.MediaMain = exports.MediaHeader = exports.MediaLayout = void 0;
 const layout_1 = require("./layout");
 Object.defineProperty(exports, "MediaLayout", { enumerable: true, get: function () { return layout_1.MediaLayout; } });
 Object.defineProperty(exports, "MediaHeader", { enumerable: true, get: function () { return layout_1.MediaHeader; } });
@@ -16,12 +16,14 @@ const thumbnail_1 = require("./parts/thumbnail");
 Object.defineProperty(exports, "Thumbnail", { enumerable: true, get: function () { return thumbnail_1.Thumbnail; } });
 const thumbnails_1 = require("./parts/thumbnails");
 Object.defineProperty(exports, "Thumbnails", { enumerable: true, get: function () { return thumbnails_1.Thumbnails; } });
-const media_content_1 = require("./parts/media-content");
-Object.defineProperty(exports, "MediaContent", { enumerable: true, get: function () { return media_content_1.MediaContent; } });
 const media_view_1 = require("./parts/media-view");
 Object.defineProperty(exports, "MediaView", { enumerable: true, get: function () { return media_view_1.MediaView; } });
 const review_1 = require("./parts/review");
 Object.defineProperty(exports, "Review", { enumerable: true, get: function () { return review_1.Review; } });
 const product_brief_1 = require("./parts/product-brief");
 Object.defineProperty(exports, "ProductBrief", { enumerable: true, get: function () { return product_brief_1.ProductBrief; } });
+const media_area_1 = require("./parts/media-area");
+Object.defineProperty(exports, "MediaArea", { enumerable: true, get: function () { return media_area_1.MediaArea; } });
+Object.defineProperty(exports, "MediaAreaMain", { enumerable: true, get: function () { return media_area_1.MediaAreaMain; } });
+Object.defineProperty(exports, "MediaAreaAside", { enumerable: true, get: function () { return media_area_1.MediaAreaAside; } });
 //# sourceMappingURL=index.js.map

package/common/components/media-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/media-modal/index.tsx"],"names":[],"mappings":";;;AAAA,qCAAwF;AA4BtF,4FA5BO,oBAAW,OA4BP;AACX,4FA7BoB,oBAAW,OA6BpB;AACX,0FA9BiC,kBAAS,OA8BjC;AACT,2FA/B4C,mBAAU,OA+B5C;AACV,4FAhCwD,oBAAW,OAgCxD;AA/Bb,mCAA+C;AAmD7C,uFAnDO,cAAM,OAmDP;AAXN,6FAxCe,oBAAY,OAwCf;AAvCd,2DAAuD;AAmDrD,8FAnDO,8BAAa,OAmDP;AAlDf,iDAA8D;AA0C5D,0FA1CO,qBAAS,OA0CP;AAzCX,mDAAiE;AAwC/D,2FAxCO,uBAAU,OAwCP;AAvCZ,yDAAwE;AA8BtE,6FA9B0B,4BAAY,OA8B1B;AA7Bd,mDAA+D;AAgC7D,0FAhCuB,sBAAS,OAgCvB;AA/BX,2CAAqD;AAyCnD,uFAzCoB,eAAM,OAyCpB;AAxCR,yDAAwE;AAyCtE,6FAzC0B,4BAAY,OAyC1B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/media-modal/index.ts"],"names":[],"mappings":";;;AAAA,qCAAwF;AA0BtF,4FA1BO,oBAAW,OA0BP;AACX,4FA3BoB,oBAAW,OA2BpB;AACX,0FA5BiC,kBAAS,OA4BjC;AACT,2FA7B4C,mBAAU,OA6B5C;AACV,4FA9BwD,oBAAW,OA8BxD;AA7Bb,mCAA+C;AAmD7C,uFAnDO,cAAM,OAmDP;AAXN,6FAxCe,oBAAY,OAwCf;AAvCd,2DAAuD;AAmDrD,8FAnDO,8BAAa,OAmDP;AAlDf,iDAA8D;AA0C5D,0FA1CO,qBAAS,OA0CP;AAzCX,mDAAiE;AAwC/D,2FAxCO,uBAAU,OAwCP;AAvCZ,mDAA+E;AAiC7E,0FAjCuB,sBAAS,OAiCvB;AAhCX,2CAAqD;AA0CnD,uFA1CoB,eAAM,OA0CpB;AAzCR,yDAAwE;AA0CtE,6FA1C0B,4BAAY,OA0C1B;AAzCd,mDAA8E;AAyB5E,0FAzBO,sBAAS,OAyBP;AACT,8FA1BkB,0BAAa,OA0BlB;AACb,+FA3BiC,2BAAc,OA2BjC"}

package/common/components/media-modal/layout.js

@@ -34,10 +34,12 @@ function MediaLayout({ children }) {
     });
     const mainStyle = {
         '--vh': (_a = `${vh}px`) !== null && _a !== void 0 ? _a : '1vh',
-        '--media-width': `${mainRect.width}px`,
-        '--media-height': `${mainRect.height}px`,
+        '--media-gallery-width': `${mainRect.width}px`,
+        '--media-gallery-height': `${mainRect.height}px`,
+        '--media-view-width': `var(--media-gallery-width)`,
+        '--media-view-height': `var(--media-gallery-height)`,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: layout_module_scss_1.default.layout, children: [header && ((0, jsx_runtime_1.jsx)(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.header, children: header })), (0, jsx_runtime_1.jsxs)(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.body, children: [aside && (0, jsx_runtime_1.jsx)("div", { className: layout_module_scss_1.default.aside, children: aside }), (0, jsx_runtime_1.jsx)("div", { ref: mainRef, className: layout_module_scss_1.default.main, style: mainStyle, children: main })] }), footer && ((0, jsx_runtime_1.jsx)(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.footer, children: (0, jsx_runtime_1.jsx)("div", { className: cx('footer-inner', aside && 'with-aside'), children: footer }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cx('layout'), children: [header && ((0, jsx_runtime_1.jsx)(layout_1.Layout, { disabledOn: mobile, className: cx('header'), children: header })), (0, jsx_runtime_1.jsxs)(layout_1.Layout, { disabledOn: mobile, className: cx('body'), children: [aside && (0, jsx_runtime_1.jsx)("div", { className: cx('aside'), children: aside }), (0, jsx_runtime_1.jsx)("div", { ref: mainRef, className: cx('main'), style: mainStyle, children: main })] }), footer && ((0, jsx_runtime_1.jsx)(layout_1.Layout, { disabledOn: mobile, className: cx('footer'), children: (0, jsx_runtime_1.jsx)("div", { className: cx('footer-inner', aside && 'with-aside'), children: footer }) }))] }));
 }
 exports.MediaLayout = MediaLayout;
 /**

package/common/components/media-modal/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/common/components/media-modal/layout.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmE;AACnE,8EAA0E;AAC1E,0DAAmE;AACnE,mCAA2D;AAC3D,2DAAyC;AACzC,8EAA0C;AAO1C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,4BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAkB;;IACtD,MAAM,MAAM,GAAiB,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEvD,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAA,0BAAW,EAAC,QAAQ,EAAE;QAC5D,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,WAAW;KACpB,CAAC,CAAC;IAEH,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,IAAA,qBAAa,EAAC,OAAO,CAAC,CAAC;IAExC,IAAA,yBAAiB,EAAC,QAAQ,CAAC,EAAE;QAC3B,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG;QAChB,MAAM,EAAE,MAAA,GAAG,EAAE,IAAI,mCAAI,KAAK;QAC1B,eAAe,EAAE,GAAG,QAAQ,CAAC,KAAK,IAAI;QACtC,gBAAgB,EAAE,GAAG,QAAQ,CAAC,MAAM,IAAI;KACxB,CAAC;IAEnB,OAAO,CACL,iCAAK,SAAS,EAAE,4BAAM,CAAC,MAAM,aAC1B,MAAM,IAAI,CACT,uBAAC,eAAM,IAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,4BAAM,CAAC,MAAM,YACjD,MAAM,GACA,CACV,EAED,wBAAC,eAAM,IAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,4BAAM,CAAC,IAAI,aAC/C,KAAK,IAAI,gCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,YAAG,KAAK,GAAO,EACrD,gCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,4BAAM,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,YACxD,IAAI,GACD,IACC,EAER,MAAM,IAAI,CACT,uBAAC,eAAM,IAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,4BAAM,CAAC,MAAM,YAClD,gCAAK,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,KAAK,IAAI,YAAY,CAAC,YAAG,MAAM,GAAO,GAClE,CACV,IACG,CACP,CAAC;AACJ,CAAC;AA9CD,kCA8CC;AAED;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAkB;IACtD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,kCAEC;AAED;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EAAE,QAAQ,EAAkB;IACpD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,8BAEC;AAED;;;;GAIG;AACH,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAkB;IACrD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,gCAEC;AAED;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAkB;IACtD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,kCAEC"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/common/components/media-modal/layout.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmE;AACnE,8EAA0E;AAC1E,0DAAmE;AACnE,mCAA2D;AAC3D,2DAAyC;AACzC,8EAA0C;AAO1C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,4BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAkB;;IACtD,MAAM,MAAM,GAAiB,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEvD,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAA,0BAAW,EAAC,QAAQ,EAAE;QAC5D,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,WAAW;KACpB,CAAC,CAAC;IAEH,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,IAAA,qBAAa,EAAC,OAAO,CAAC,CAAC;IAExC,IAAA,yBAAiB,EAAC,QAAQ,CAAC,EAAE;QAC3B,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG;QAChB,MAAM,EAAE,MAAA,GAAG,EAAE,IAAI,mCAAI,KAAK;QAC1B,uBAAuB,EAAE,GAAG,QAAQ,CAAC,KAAK,IAAI;QAC9C,wBAAwB,EAAE,GAAG,QAAQ,CAAC,MAAM,IAAI;QAChD,oBAAoB,EAAE,4BAA4B;QAClD,qBAAqB,EAAE,6BAA6B;KACpC,CAAC;IAEnB,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,aACzB,MAAM,IAAI,CACT,uBAAC,eAAM,IAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,YAChD,MAAM,GACA,CACV,EAED,wBAAC,eAAM,IAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAC9C,KAAK,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAG,KAAK,GAAO,EACpD,gCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,SAAS,YACvD,IAAI,GACD,IACC,EAER,MAAM,IAAI,CACT,uBAAC,eAAM,IAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,YACjD,gCAAK,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,KAAK,IAAI,YAAY,CAAC,YAAG,MAAM,GAAO,GAClE,CACV,IACG,CACP,CAAC;AACJ,CAAC;AAhDD,kCAgDC;AAED;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAkB;IACtD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,kCAEC;AAED;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EAAE,QAAQ,EAAkB;IACpD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,8BAEC;AAED;;;;GAIG;AACH,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAkB;IACrD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,gCAEC;AAED;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAkB;IACtD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,kCAEC"}

package/common/components/media-modal/layout.module.scss

@@ -13,8 +13,6 @@
 }
 
 .main {
-  --media-width: var(--square-size);
-  --media-height: var(--square-size);
   display: flex;
   justify-content: center;
   flex-direction: column;