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

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

@@ -0,0 +1,78 @@
+@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(--top-bar-height, 0))};
+}
+
+.body {
+  flex-grow: 1;
+  display: flex;
+}
+
+.main {
+  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,7 @@
+import { AllRoundViewProps } from '../../../../desktop/components/gallery-modal/components/all-round-view';
+/**
+ * Просмотр 360.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function AllRoundView(props: AllRoundViewProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,42 @@
+"use strict";
+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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const all_round_view_1 = require("../../../../desktop/components/gallery-modal/components/all-round-view");
+const hooks_2 = require("../../../../common/hooks");
+const TouchScrollX_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Colorful/TouchScrollX"));
+const all_round_view_m_scss_1 = __importDefault(require("./all-round-view.m.scss"));
+/**
+ * Просмотр 360.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function AllRoundView(props) {
+    const mounted = (0, hooks_2.useMounted)();
+    const desktop = (0, hooks_1.useBreakpoint)('xs+');
+    if (!mounted) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(AfterMount, { desktop: desktop, ...props });
+}
+exports.AllRoundView = AllRoundView;
+/**
+ * Внутренний компонент который будет выведен только после монтирования.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function AfterMount({ desktop, ...props }) {
+    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 ((0, jsx_runtime_1.jsxs)("div", { className: all_round_view_m_scss_1.default.root, children: [!desktop && tutorial && ((0, jsx_runtime_1.jsx)("div", { className: all_round_view_m_scss_1.default.tutorial, onPointerUp: acceptTutorial, children: (0, jsx_runtime_1.jsx)(TouchScrollX_1.default, {}) })), (0, jsx_runtime_1.jsx)(all_round_view_1.AllRoundView, { ...props, controls: desktop, state: state, onStateChange: setState })] }));
+}
+//# sourceMappingURL=all-round-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"all-round-view.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/all-round-view.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA8C;AAC9C,wDAA6D;AAC7D,2GAIgF;AAChF,oDAAsD;AACtD,0GAA8E;AAC9E,oFAA6C;AAE7C;;;;GAIG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;IAErC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,uBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACrD,CAAC;AATD,oCASC;AAED;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA4C;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACxF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACtC,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,QAAQ,CAAC,UAAU,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,iCAAK,SAAS,EAAE,+BAAM,CAAC,IAAI,aACxB,CAAC,OAAO,IAAI,QAAQ,IAAI,CACvB,gCAAK,SAAS,EAAE,+BAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,YAC1D,uBAAC,sBAAQ,KAAG,GACR,CACP,EAED,uBAAC,6BAAgB,OAAK,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAI,IACrF,CACP,CAAC;AACJ,CAAC"}

package/common/components/media-modal/parts/all-round-view.m.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;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderLayout {
+    var Tabs: typeof HeaderLayoutTabs;
+    var Button: typeof HeaderLayoutButton;
+}
+/**
+ * Слот вкладок для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function HeaderLayoutTabs({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Слот кнопки для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function HeaderLayoutButton({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderLayout = exports.Preset = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("@sima-land/ui-nucleons/layout");
+const helpers_1 = require("@sima-land/ui-nucleons/helpers");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const hooks_2 = require("../../../../common/hooks");
+const scroll_section_1 = require("./scroll-section");
+const ArrowExpandLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowExpandLeft"));
+const parts_m_scss_1 = __importDefault(require("./parts.m.scss"));
+exports.Preset = {
+    headerTabs: (userProps) => ({
+        view: 'clean-underline',
+        ...userProps,
+    }),
+    headerButton: (userProps) => ({
+        size: 's',
+        startIcon: ArrowExpandLeft_1.default,
+        iconGutter: 4,
+        className: parts_m_scss_1.default['header-button'],
+        children: 'Вернуться к основному товару',
+        ...userProps,
+    }),
+};
+/**
+ * Формирует layout для шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HeaderLayout({ children }) {
+    const mounted = (0, hooks_2.useMounted)();
+    const desktop = (0, hooks_1.useBreakpoint)('xs+');
+    const { tabs, button } = (0, helpers_1.defineSlots)(children, {
+        tabs: HeaderLayoutTabs,
+        button: HeaderLayoutButton,
+    });
+    if (!mounted) {
+        return (0, jsx_runtime_1.jsx)("div", { className: parts_m_scss_1.default['header-layout'] });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: parts_m_scss_1.default['header-layout'], children: [!desktop && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tabs && (0, jsx_runtime_1.jsx)(scroll_section_1.ScrollSection, { children: tabs }), button && (0, jsx_runtime_1.jsx)(layout_1.Layout, { children: button })] })), desktop && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tabs, button] }))] }));
+}
+exports.HeaderLayout = HeaderLayout;
+HeaderLayout.Tabs = HeaderLayoutTabs;
+HeaderLayout.Button = HeaderLayoutButton;
+/**
+ * Слот вкладок для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HeaderLayoutTabs({ children }) {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+/**
+ * Слот кнопки для layout'а шапки модального окна медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HeaderLayoutButton({ children }) {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/index.tsx"],"names":[],"mappings":";;;;;;;AACA,0DAAuD;AAGvD,4DAA6D;AAC7D,wDAA6D;AAC7D,oDAAsD;AACtD,qDAAiD;AACjD,+GAA+E;AAC/E,kEAAoC;AAEvB,QAAA,MAAM,GAAG;IACpB,UAAU,EAAE,CAAC,SAAqB,EAAa,EAAE,CAAC,CAAC;QACjD,IAAI,EAAE,iBAAiB;QACvB,GAAG,SAAS;KACb,CAAC;IAEF,YAAY,EAAE,CAAC,SAA2B,EAAmB,EAAE,CAAC,CAAC;QAC/D,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,yBAAO;QAClB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,sBAAM,CAAC,eAAe,CAAC;QAClC,QAAQ,EAAE,8BAA8B;QACxC,GAAG,SAAS;KACb,CAAC;CACM,CAAC;AAEX;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAAE,QAAQ,EAA4B;IACjE,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAA,qBAAW,EAAC,QAAQ,EAAE;QAC7C,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,kBAAkB;KAC3B,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,gCAAK,SAAS,EAAE,sBAAM,CAAC,eAAe,CAAC,GAAQ,CAAC;IACzD,CAAC;IAED,OAAO,CACL,iCAAK,SAAS,EAAE,sBAAM,CAAC,eAAe,CAAC,aACpC,CAAC,OAAO,IAAI,CACX,6DACG,IAAI,IAAI,uBAAC,8BAAa,cAAE,IAAI,GAAiB,EAC7C,MAAM,IAAI,uBAAC,eAAM,cAAE,MAAM,GAAU,IACnC,CACJ,EAEA,OAAO,IAAI,CACV,6DACG,IAAI,EACJ,MAAM,IACN,CACJ,IACG,CACP,CAAC;AACJ,CAAC;AA9BD,oCA8BC;AAED,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AACrC,YAAY,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAEzC;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAA4B;IAC9D,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAED;;;;GAIG;AACH,SAAS,kBAAkB,CAAC,EAAE,QAAQ,EAA4B;IAChE,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC"}

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+/**
+ * Формирует ограничения высоты и ширины для вывода меда контента по гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaArea({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Центральная часть зоны для медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaAreaMain({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Боковая часть зоны для медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaAreaAside({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/common/components/media-modal/parts/media-area.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaAreaAside = exports.MediaAreaMain = exports.MediaArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("@sima-land/ui-nucleons/layout");
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const media_area_m_scss_1 = __importDefault(require("./media-area.m.scss"));
+const cx = bind_1.default.bind(media_area_m_scss_1.default);
+/**
+ * Формирует ограничения высоты и ширины для вывода меда контента по гайдам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaArea({ children }) {
+    const ref = (0, react_1.useRef)(null);
+    const rect = (0, utils_1.useClientRect)(ref);
+    const style = rect.ready
+        ? {
+            '--media-gallery-width': `${rect.width}px`,
+            '--media-gallery-height': `${rect.height}px`,
+            '--media-view-width': `var(--media-gallery-width)`,
+            '--media-view-height': `var(--media-gallery-height)`,
+        }
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(layout_1.Layout, { rootRef: ref, disabledOn: ['mxs', 'ms', 'xs', 's', 'm', 'l', 'xl'], className: cx('root'), style: style, children: children }));
+}
+exports.MediaArea = MediaArea;
+/**
+ * Центральная часть зоны для медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaAreaMain({ children }) {
+    const ref = (0, react_1.useRef)(null);
+    const rect = (0, utils_1.useClientRect)(ref);
+    const style = rect.ready
+        ? {
+            '--media-gallery-width': `${rect.width}px`,
+            '--media-gallery-height': `${rect.height}px`,
+            '--media-view-width': `var(--media-gallery-width)`,
+            '--media-view-height': `var(--media-gallery-height)`,
+        }
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cx('main'), style: style, children: children }));
+}
+exports.MediaAreaMain = MediaAreaMain;
+/**
+ * Боковая часть зоны для медиа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaAreaAside({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('aside'), children: children });
+}
+exports.MediaAreaAside = MediaAreaAside;
+//# sourceMappingURL=media-area.js.map

package/common/components/media-modal/parts/media-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-area.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/media-area.tsx"],"names":[],"mappings":";;;;;;;AAAA,0DAAuD;AACvD,iCAAyD;AACzD,oCAAyC;AACzC,2DAAyC;AACzC,4EAAyC;AAEzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EAAE,QAAQ,EAA4B;IAC9D,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,qBAAa,EAAC,GAAG,CAAC,CAAC;IAEhC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,CAAC,CAAE;YACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;YAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;YAC5C,oBAAoB,EAAE,4BAA4B;YAClD,qBAAqB,EAAE,6BAA6B;SACnC;QACrB,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,uBAAC,eAAM,IACL,OAAO,EAAE,GAAG,EACZ,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EACpD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EACrB,KAAK,EAAE,KAAK,YAEX,QAAQ,GACF,CACV,CAAC;AACJ,CAAC;AAvBD,8BAuBC;AAED;;;;GAIG;AACH,SAAgB,aAAa,CAAC,EAAE,QAAQ,EAA4B;IAClE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,qBAAa,EAAC,GAAG,CAAC,CAAC;IAEhC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,CAAC,CAAE;YACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;YAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;YAC5C,oBAAoB,EAAE,4BAA4B;YAClD,qBAAqB,EAAE,6BAA6B;SACnC;QACrB,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,YAC/C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAlBD,sCAkBC;AAED;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAAE,QAAQ,EAA4B;IACnE,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAG,QAAQ,GAAO,CAAC;AACvD,CAAC;AAFD,wCAEC"}

package/common/components/media-modal/parts/media-area.m.scss

@@ -0,0 +1,21 @@
+.root {
+  position: relative;
+  flex-grow: 1;
+  height: max(50vh, 240px);
+  display: flex;
+}
+
+.aside + .main,
+.main + .aside {
+  margin-left: 24px;
+}
+
+.main {
+  flex-grow: 1;
+  position: relative;
+}
+
+.aside {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,20 @@
+import { CSSProperties, Ref, VideoHTMLAttributes } from 'react';
+import { MediaData } from '../types';
+export interface MediaViewStyle extends CSSProperties {
+    '--media-view-width'?: string;
+    '--media-view-height'?: string;
+}
+export interface MediaViewProps {
+    rootRef?: Ref<HTMLDivElement>;
+    media?: MediaData;
+    loading?: boolean;
+    videoProps?: VideoHTMLAttributes<HTMLVideoElement>;
+    style?: MediaViewStyle;
+    className?: string;
+}
+/**
+ * Отображает медиа-контент - 360, видео или изображение.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaView({ media, loading, videoProps, style, className, rootRef, }: MediaViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const all_round_view_1 = require("./all-round-view");
+const hooks_2 = require("../../../hooks");
+const img_stub_1 = require("../../img-stub");
+const bind_1 = __importDefault(require("classnames/bind"));
+const media_view_m_scss_1 = __importDefault(require("./media-view.m.scss"));
+const cx = bind_1.default.bind(media_view_m_scss_1.default);
+/**
+ * Отображает медиа-контент - 360, видео или изображение.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaView({ media, loading, videoProps, style, className, rootRef, }) {
+    const desktop = (0, hooks_1.useBreakpoint)('xs+');
+    let imageSrc = undefined;
+    if ((media === null || media === void 0 ? void 0 : media.type) === 'image') {
+        imageSrc = media.data.src;
+    }
+    else if ((media === null || media === void 0 ? void 0 : media.type) === 'video') {
+        imageSrc = media.data.thumbnail;
+    }
+    const { failed, handleError } = (0, hooks_2.useImageStub)(imageSrc);
+    const videoRef = (0, react_1.useRef)(null);
+    const videoSrc = (media === null || media === void 0 ? void 0 : media.type) === 'video' ? media.data.src : null;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // ВАЖНО: при смене src у элемента source видео не меняется автоматически - перезапускаем явно
+        if (videoSrc) {
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.load();
+        }
+    }, [loading, videoSrc]);
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: cx('root', 'loading') });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: cx('root', className), style: style, children: [(media === null || media === void 0 ? void 0 : media.type) === 'image' && ((0, jsx_runtime_1.jsxs)("div", { className: cx('image'), children: [failed && (0, jsx_runtime_1.jsx)(img_stub_1.ImgStub, { className: media_view_m_scss_1.default.stub }), !failed && (0, jsx_runtime_1.jsx)("img", { src: media.data.src, alt: media.data.alt || '', onError: handleError })] })), (media === null || media === void 0 ? void 0 : media.type) === 'video' && ((0, jsx_runtime_1.jsx)("video", { autoPlay: false, controls: true, controlsList: 'nodownload', ...videoProps, ref: videoRef, children: (0, jsx_runtime_1.jsx)("source", { src: media.data.src }) })), (media === null || media === void 0 ? void 0 : media.type) === '360' && (0, jsx_runtime_1.jsx)(all_round_view_1.AllRoundView, { photos: media.data.photos, controls: desktop })] }));
+}
+exports.MediaView = MediaView;
+//# sourceMappingURL=media-view.js.map

package/common/components/media-modal/parts/media-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-view.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/media-view.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmF;AAEnF,wDAA6D;AAC7D,qDAAgD;AAChD,0CAA8C;AAC9C,6CAAyC;AACzC,2DAAyC;AACzC,4EAAyC;AAgBzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,UAAU,EACV,KAAK,EACL,SAAS,EACT,OAAO,GACQ;IACf,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;IACrC,IAAI,QAAQ,GAAuB,SAAS,CAAC;IAE7C,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,EAAE,CAAC;QAC5B,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IAC5B,CAAC;SAAM,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,EAAE,CAAC;QACnC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;IAClC,CAAC;IAED,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,oBAAY,EAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,8FAA8F;QAC9F,IAAI,QAAQ,EAAE,CAAC;YACb,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,gCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,GAAQ,CAAC;IACrE,CAAC;IAED,OAAO,CACL,iCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAC9D,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,IAAI,CAC1B,iCAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,aACxB,MAAM,IAAI,uBAAC,kBAAO,IAAC,SAAS,EAAE,2BAAM,CAAC,IAAI,GAAI,EAC7C,CAAC,MAAM,IAAI,gCAAK,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,GAAI,IACrF,CACP,EAEA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,OAAO,IAAI,CAC1B,kCAAO,QAAQ,EAAE,KAAK,EAAE,QAAQ,QAAC,YAAY,EAAC,YAAY,KAAK,UAAU,EAAE,GAAG,EAAE,QAAQ,YACtF,mCAAQ,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,GAAI,GACzB,CACT,EAEA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,KAAK,IAAI,uBAAC,6BAAY,IAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAI,IACpF,CACP,CAAC;AACJ,CAAC;AAnDD,8BAmDC"}

package/common/components/media-modal/parts/media-view.m.scss

@@ -0,0 +1,34 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  position: absolute;
+  width: var(--media-view-width, 320px);
+  height: var(--media-view-height, 240px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.loading {
+    background: colors.$basic-gray4;
+  }
+  --all-round-view-size: min(var(--media-view-width, 320px), var(--media-view-height, 240px));
+  video,
+  .image {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  video {
+    background: colors.$basic-gray87;
+  }
+  .image img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  .stub {
+    width: 100%;
+    height: 100%;
+  }
+}

package/common/components/media-modal/parts/parts.m.scss

@@ -0,0 +1,21 @@
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.header-layout {
+  min-height: 40px; // ВАЖНО: чтобы при отсутствии табов не уменьшалась высота
+  @include breakpoints.up('xs') {
+    flex-wrap: wrap;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+}
+
+.header-button {
+  margin-top: 16px !important;
+  @include breakpoints.down('xs') {
+    &:first-child {
+      margin-left: auto;
+    }
+  }
+}

package/common/components/media-modal/parts/product-brief.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ImgHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export interface ProductBriefProps extends HTMLAttributes<HTMLDivElement> {
+    size?: 's' | 'l';
+    title?: string;
+    price?: string | number;
+    priceReplacer?: ReactNode;
+    currency?: string;
+    footer?: ReactNode;
+    href?: string;
+    onLinkClick?: MouseEventHandler<HTMLAnchorElement>;
+    imageSrc?: string;
+    imageProps?: ImgHTMLAttributes<HTMLImageElement>;
+    loading?: boolean;
+}
+/**
+ * Блок товара-рекомендации.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ProductBrief({ size: sizeProp, imageSrc, imageProps, title, price, priceReplacer, currency, footer, className, href, onLinkClick, loading, ...restProps }: ProductBriefProps): import("react/jsx-runtime").JSX.Element;

package/common/components/media-modal/parts/product-brief.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductBrief = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
+const price_1 = require("@sima-land/ui-nucleons/price");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const hooks_2 = require("../../../hooks");
+const bind_1 = __importDefault(require("classnames/bind"));
+const product_brief_m_scss_1 = __importDefault(require("./product-brief.m.scss"));
+const img_stub_1 = require("../../img-stub");
+const cx = bind_1.default.bind(product_brief_m_scss_1.default);
+/**
+ * Блок товара-рекомендации.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ProductBrief({ size: sizeProp, imageSrc, imageProps, title, price, priceReplacer, currency, footer, className, href, onLinkClick, loading, ...restProps }) {
+    const desktop = (0, hooks_1.useBreakpoint)('xs+');
+    const { failed, handleError } = (0, hooks_2.useImageStub)(imageSrc);
+    const size = (sizeProp !== null && sizeProp !== void 0 ? sizeProp : desktop) ? 'l' : 's';
+    const priceDefined = typeof price === 'number' || typeof price === 'string';
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(ProductBriefSkeleton, { size: size });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cx('root', `size-${size}`, className), ...restProps, children: [(0, jsx_runtime_1.jsx)("a", { className: product_brief_m_scss_1.default.image, href: href, onClick: onLinkClick, children: (0, jsx_runtime_1.jsxs)(image_overlay_1.ImageOverlay, { className: product_brief_m_scss_1.default.overlay, children: [failed && (0, jsx_runtime_1.jsx)(img_stub_1.ImgStub, { className: product_brief_m_scss_1.default.stub }), !failed && (0, jsx_runtime_1.jsx)("img", { src: imageSrc, ...imageProps, onError: handleError })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: product_brief_m_scss_1.default.info, children: [(0, jsx_runtime_1.jsx)("a", { className: product_brief_m_scss_1.default.title, href: href, onClick: onLinkClick, children: title }), (priceDefined || priceReplacer) && ((0, jsx_runtime_1.jsx)("div", { className: product_brief_m_scss_1.default.price, children: priceDefined ? (0, jsx_runtime_1.jsx)(price_1.Price, { value: price, currencyGrapheme: currency }) : priceReplacer }))] }), footer && (0, jsx_runtime_1.jsx)("div", { className: product_brief_m_scss_1.default.footer, children: footer })] }));
+}
+exports.ProductBrief = ProductBrief;
+/**
+ * Заглушка блока товара-рекомендации.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ProductBriefSkeleton({ size }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cx('skeleton', size), children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
+}
+//# sourceMappingURL=product-brief.js.map

package/common/components/media-modal/parts/product-brief.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-brief.js","sourceRoot":"","sources":["../../../../../src/common/components/media-modal/parts/product-brief.tsx"],"names":[],"mappings":";;;;;;;AACA,yGAAqG;AACrG,wDAAqD;AACrD,wDAA6D;AAC7D,0CAA8C;AAC9C,2DAAyC;AACzC,kFAA4C;AAC5C,6CAAyC;AAgBzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,8BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAC3B,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,UAAU,EACV,KAAK,EACL,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,SAAS,EACT,IAAI,EACJ,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACM;IAClB,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,oBAAY,EAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,IAAI,GAAG,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAC7C,MAAM,YAAY,GAAG,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;IAE5E,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,uBAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IAC9C,CAAC;IAED,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC,KAAM,SAAS,aAClE,8BAAG,SAAS,EAAE,8BAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YAC1D,wBAAC,4BAAY,IAAC,SAAS,EAAE,8BAAM,CAAC,OAAO,aACpC,MAAM,IAAI,uBAAC,kBAAO,IAAC,SAAS,EAAE,8BAAM,CAAC,IAAI,GAAI,EAC7C,CAAC,MAAM,IAAI,gCAAK,GAAG,EAAE,QAAQ,KAAM,UAAU,EAAE,OAAO,EAAE,WAAW,GAAI,IAC3D,GACb,EAEJ,iCAAK,SAAS,EAAE,8BAAM,CAAC,IAAI,aACzB,8BAAG,SAAS,EAAE,8BAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YACzD,KAAK,GACJ,EACH,CAAC,YAAY,IAAI,aAAa,CAAC,IAAI,CAClC,gCAAK,SAAS,EAAE,8BAAM,CAAC,KAAK,YACzB,YAAY,CAAC,CAAC,CAAC,uBAAC,aAAK,IAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,aAAa,GAC/E,CACP,IACG,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAE,8BAAM,CAAC,MAAM,YAAG,MAAM,GAAO,IACpD,CACP,CAAC;AACJ,CAAC;AA/CD,oCA+CC;AAED;;;;GAIG;AACH,SAAS,oBAAoB,CAAC,EAAE,IAAI,EAAO;IACzC,OAAO,CACL,iCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,aAClC,iCAAW,EACX,iCAAW,EACX,iCAAW,IACP,CACP,CAAC;AACJ,CAAC"}