@sima-land/moleculas 16.0.0-alpha.2 → 16.0.0-alpha.4

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

@@ -0,0 +1,3 @@
+import { MediaData, MediaVideo } from '../types';
+export declare const mixed: MediaData[];
+export declare const videos: MediaVideo[];

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

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.videos = exports.mixed = void 0;
+exports.mixed = [
+    {
+        type: '360',
+        data: {
+            photos: [
+                'https://cdn2.static1-sima-land.com/3d/3243668/0/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/1/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/2/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/3/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/4/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/5/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/6/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/7/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/8/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/9/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/10/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/11/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/12/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/13/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/14/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/15/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/16/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/17/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/18/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/19/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/20/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/21/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/22/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/23/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/24/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/25/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/26/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/27/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/28/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/29/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/30/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/31/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/32/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/33/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/34/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/35/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/36/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/37/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/38/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/39/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/40/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/41/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/42/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/43/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/44/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/45/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/46/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/47/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/48/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/49/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/50/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/51/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/52/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/53/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/54/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/55/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/56/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/57/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/58/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/59/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/60/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/61/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/62/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/63/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/64/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/65/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/66/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/67/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/68/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/69/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/70/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/71/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/72/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/73/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/74/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/75/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/76/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/77/700.jpg',
+                'https://cdn2.static1-sima-land.com/3d/3243668/78/700.jpg',
+            ],
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+        },
+    },
+    {
+        type: 'image',
+        data: {
+            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 1',
+            src: 'https://loremflickr.com/240/240?random=1',
+        },
+    },
+    {
+        type: 'image',
+        data: {
+            alt: 'Фото из отзыва, не квадратное',
+            src: 'https://loremflickr.com/240/240?random=2',
+        },
+    },
+    {
+        type: 'image',
+        data: {
+            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 2',
+            src: 'https://loremflickr.com/240/240?random=3',
+        },
+    },
+    {
+        type: 'image',
+        data: {
+            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 3',
+            src: 'https://loremflickr.com/240/240?random=4',
+        },
+    },
+    {
+        type: 'image',
+        data: {
+            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 4',
+            src: 'https://loremflickr.com/240/240?random=5',
+        },
+    },
+    {
+        type: 'image',
+        data: {
+            alt: 'Сапоги детские MINAKU, цвет синий, размер 31 - Фото 5',
+            src: 'https://loremflickr.com/240/240?random=6',
+        },
+    },
+];
+exports.videos = [
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=6',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=7',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=8',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=9',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=10',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=11',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=12',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=13',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=14',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=15',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=16',
+        },
+    },
+    {
+        type: 'video',
+        data: {
+            src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=17',
+        },
+    },
+];

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

@@ -0,0 +1,11 @@
+import { MediaLayout, MediaHeader, MediaMain, MediaAside, MediaFooter } from './layout';
+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 { 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, };

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

@@ -0,0 +1,26 @@
+"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;
+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; } });
+Object.defineProperty(exports, "MediaMain", { enumerable: true, get: function () { return layout_1.MediaMain; } });
+Object.defineProperty(exports, "MediaAside", { enumerable: true, get: function () { return layout_1.MediaAside; } });
+Object.defineProperty(exports, "MediaFooter", { enumerable: true, get: function () { return layout_1.MediaFooter; } });
+const parts_1 = require("./parts");
+Object.defineProperty(exports, "Preset", { enumerable: true, get: function () { return parts_1.Preset; } });
+Object.defineProperty(exports, "HeaderLayout", { enumerable: true, get: function () { return parts_1.HeaderLayout; } });
+const scroll_section_1 = require("./parts/scroll-section");
+Object.defineProperty(exports, "ScrollSection", { enumerable: true, get: function () { return scroll_section_1.ScrollSection; } });
+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; } });

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+interface ContainerProps {
+    /** Содержимое. */
+    children?: ReactNode;
+}
+/**
+ * Формирует layout для модального окна медиа товара.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaLayout({ children }: ContainerProps): JSX.Element;
+/**
+ * Слот шапки MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaHeader({ children }: ContainerProps): JSX.Element;
+/**
+ * Слот основного контента MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaMain({ children }: ContainerProps): JSX.Element;
+/**
+ * Слот дополнительного контента MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaAside({ children }: ContainerProps): JSX.Element;
+/**
+ * Слот футера MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaFooter({ children }: ContainerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaFooter = exports.MediaAside = exports.MediaMain = exports.MediaHeader = exports.MediaLayout = void 0;
+const react_1 = __importStar(require("react"));
+const define_slots_1 = require("@sima-land/ui-nucleons/helpers/define-slots");
+const layout_1 = require("@sima-land/ui-nucleons/layout");
+const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const layout_module_scss_1 = __importDefault(require("./layout.module.scss"));
+const cx = bind_1.default.bind(layout_module_scss_1.default);
+/**
+ * Формирует layout для модального окна медиа товара.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaLayout({ children }) {
+    var _a;
+    const mobile = ['mxs', 'ms', 'mm', 'ml'];
+    const { header, main, aside, footer } = (0, define_slots_1.defineSlots)(children, {
+        header: MediaHeader,
+        main: MediaMain,
+        aside: MediaAside,
+        footer: MediaFooter,
+    });
+    const [vh, setVh] = (0, react_1.useState)(null);
+    const mainRef = (0, react_1.useRef)(null);
+    const mainRect = (0, utils_1.useClientRect)(mainRef);
+    (0, utils_1.useVisualViewport)(viewport => {
+        setVh(viewport.height / 100);
+    });
+    const mainStyle = {
+        '--vh': (_a = `${vh}px`) !== null && _a !== void 0 ? _a : '1vh',
+        '--media-width': `${mainRect.width}px`,
+        '--media-height': `${mainRect.height}px`,
+    };
+    return (react_1.default.createElement("div", { className: layout_module_scss_1.default.layout },
+        header && (react_1.default.createElement(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.header }, header)),
+        react_1.default.createElement(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.body },
+            aside && react_1.default.createElement("div", { className: layout_module_scss_1.default.aside }, aside),
+            react_1.default.createElement("div", { ref: mainRef, className: layout_module_scss_1.default.main, style: mainStyle }, main)),
+        footer && (react_1.default.createElement(layout_1.Layout, { disabledOn: mobile, className: layout_module_scss_1.default.footer },
+            react_1.default.createElement("div", { className: cx('footer-inner', aside && 'with-aside') }, footer)))));
+}
+exports.MediaLayout = MediaLayout;
+/**
+ * Слот шапки MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaHeader({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.MediaHeader = MediaHeader;
+/**
+ * Слот основного контента MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaMain({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.MediaMain = MediaMain;
+/**
+ * Слот дополнительного контента MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaAside({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.MediaAside = MediaAside;
+/**
+ * Слот футера MediaLayout.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaFooter({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+exports.MediaFooter = MediaFooter;

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

@@ -0,0 +1,80 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: calc((100 * var(--vh, 1vh)) - var(--modal-header-height));
+}
+
+.body {
+  flex-grow: 1;
+  display: flex;
+}
+
+.main {
+  --media-width: var(--square-size);
+  --media-height: var(--square-size);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  flex-grow: 1;
+  position: relative; // ВАЖНО: что иметь возможность заполнить доступную область содержимым
+  min-height: max(50vh, 240px);
+}
+
+@include breakpoints.down('xs') {
+  .header + .body {
+    margin-top: 24px;
+  }
+  .body {
+    flex-direction: column-reverse;
+    &:first-child {
+      margin-top: 24px;
+    }
+    &:last-child {
+      margin-bottom: 24px;
+    }
+  }
+  .aside + .main {
+    margin-bottom: 24px;
+  }
+  .body + .footer {
+    margin-top: 24px;
+  }
+  .footer {
+    margin-bottom: 24px;
+  }
+}
+
+@include breakpoints.up('xs') {
+  .header + .body {
+    margin-top: 40px;
+  }
+  .body {
+    &:first-child {
+      margin-top: 40px;
+    }
+    &:last-child {
+      margin-bottom: 40px;
+    }
+  }
+  .aside {
+    display: flex;
+    flex-direction: column;
+    width: 104px;
+    max-height: 100%;
+  }
+  .aside + .main {
+    margin-left: 16px;
+  }
+  .body + .footer {
+    margin-top: 32px;
+  }
+  .footer {
+    margin-bottom: 40px;
+  }
+  .footer-inner.with-aside {
+    margin-left: calc(104px + 16px);
+  }
+}

package/common/components/media-modal/parts/all-round-view.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AllRoundViewProps } from '../../../../desktop/components/gallery-modal/components/all-round-view';
+/**
+ * Просмотр 360.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function AllRoundView(props: AllRoundViewProps): JSX.Element | null;

package/common/components/media-modal/parts/all-round-view.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllRoundView = void 0;
+const react_1 = __importStar(require("react"));
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+const all_round_view_1 = require("../../../../desktop/components/gallery-modal/components/all-round-view");
+const utils_1 = require("../utils");
+const touch_x_svg_1 = __importDefault(require("../../../icons/touch-x.svg"));
+const all_round_view_module_scss_1 = __importDefault(require("./all-round-view.module.scss"));
+/**
+ * Просмотр 360.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function AllRoundView(props) {
+    const mounted = (0, utils_1.useMounted)();
+    const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    if (!mounted) {
+        return null;
+    }
+    return react_1.default.createElement(AfterMount, Object.assign({ desktop: desktop }, props));
+}
+exports.AllRoundView = AllRoundView;
+/**
+ * Внутренний компонент который будет выведен только после монтирования.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function AfterMount(_a) {
+    var { desktop } = _a, props = __rest(_a, ["desktop"]);
+    const [state, setState] = (0, react_1.useState)(() => (desktop ? 'autoplay' : 'default'));
+    const [tutorial, setTutorial] = (0, react_1.useState)(() => !desktop);
+    const acceptTutorial = (0, react_1.useCallback)(() => {
+        setTutorial(false);
+        setState('autoplay');
+    }, []);
+    return (react_1.default.createElement("div", { className: all_round_view_module_scss_1.default.root },
+        !desktop && tutorial && (react_1.default.createElement("div", { className: all_round_view_module_scss_1.default.tutorial, onPointerUp: acceptTutorial },
+            react_1.default.createElement(touch_x_svg_1.default, null))),
+        react_1.default.createElement(all_round_view_1.AllRoundView, Object.assign({}, props, { controls: desktop, state: state, onStateChange: setState }))));
+}

package/common/components/media-modal/parts/all-round-view.module.scss

@@ -0,0 +1,30 @@
+.root {
+  width: var(--all-round-view-size, 360px);
+  height: var(--all-round-view-size, 360px);
+  position: relative;
+}
+
+.tutorial {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  > svg {
+    animation: 2s ease-in-out infinite bounce;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateX(-24px);
+  }
+  50% {
+    transform: translateX(24px);
+  }
+  100% {
+    transform: translateX(-24px);
+  }
+}

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { TabsProps } from '@sima-land/ui-nucleons/tabs';
+import { TextButtonProps } from '@sima-land/ui-nucleons/text-button';
+export declare const Preset: {
+    readonly headerTabs: (userProps?: TabsProps) => TabsProps;
+    readonly headerButton: (userProps?: TextButtonProps) => TextButtonProps;
+};
+/**
+ * Формирует layout для шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function HeaderLayout({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+export declare namespace HeaderLayout {
+    var Tabs: typeof HeaderLayoutTabs;
+    var Button: typeof HeaderLayoutButton;
+}
+/**
+ * Слот вкладок для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function HeaderLayoutTabs({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+/**
+ * Слот кнопки для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function HeaderLayoutButton({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+export {};