@cloud-ru/uikit-product-modal-predefined 2.1.4 → 2.2.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 2.2.1 (2026-04-03)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-copy-line@2.1.9]($PUBLIC_PROJECT_URL/blob/master/packages/copy-line/CHANGELOG.md)
+* [@cloud-ru/uikit-product-icons@17.2.0]($PUBLIC_PROJECT_URL/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-modal@2.1.2]($PUBLIC_PROJECT_URL/blob/master/packages/mobile-modal/CHANGELOG.md)
+
+
+
+
+
+# 2.2.0 (2026-03-31)
+
+
+### Features
+
+* **FF-7462:** add video into release modal ([0f9bedd](https://github.com/cloud-ru-tech/uikit-product/commit/0f9bedd7c9989b660131a24be5df70a75cb4ba25))
+
+
+
+
+
 ## 2.1.4 (2026-03-31)
 
 

package/dist/cjs/helperComponents/NoteItem/NoteItem.d.ts

@@ -8,5 +8,7 @@ export type NoteItemProps = {
         src: string;
         alt: string;
     };
+    /** URL видео (при наличии показывается вместо статичного изображения) */
+    video?: string;
 };
-export declare function NoteItem({ title, description, image }: NoteItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoteItem({ title, description, image, video }: NoteItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/NoteItem/NoteItem.js

@@ -5,10 +5,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoteItem = NoteItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const uikit_product_markdown_1 = require("@cloud-ru/uikit-product-markdown");
 const scroll_1 = require("@snack-uikit/scroll");
+const skeleton_1 = require("@snack-uikit/skeleton");
 const typography_1 = require("@snack-uikit/typography");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function NoteItem({ title, description, image }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.noteItemWrapper, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { size: 's', barHideStrategy: 'never', children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.noteItemText, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleL, { children: title }), (0, jsx_runtime_1.jsx)(uikit_product_markdown_1.Markdown, { value: description, className: styles_module_scss_1.default.noteItemMarkdownViewer })] }) }), (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt, className: styles_module_scss_1.default.noteItemIllustration })] }));
+function NoteItemMedia({ image, video }) {
+    const [videoReady, setVideoReady] = (0, react_1.useState)(false);
+    const [videoError, setVideoError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!video) {
+            return;
+        }
+        setVideoReady(false);
+        setVideoError(false);
+    }, [video]);
+    if (!video) {
+        return (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt, className: styles_module_scss_1.default.noteItemIllustration });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.noteItemIllustrationSlot, children: videoError ? ((0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt, className: styles_module_scss_1.default.noteItemIllustration })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { src: video, className: styles_module_scss_1.default.noteItemVideo, muted: true, loop: true, playsInline: true, autoPlay: true, onLoadedData: () => setVideoReady(true), onError: () => setVideoError(true), "aria-hidden": true }), !videoReady && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.noteItemMediaSkeletonOverlay, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: 380, height: 380, borderRadius: 8, loading: true }) }))] })) }));
+}
+function NoteItem({ title, description, image, video }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.noteItemWrapper, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { size: 's', barHideStrategy: 'never', children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.noteItemText, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleL, { children: title }), (0, jsx_runtime_1.jsx)(uikit_product_markdown_1.Markdown, { value: description, className: styles_module_scss_1.default.noteItemMarkdownViewer })] }) }), (0, jsx_runtime_1.jsx)(NoteItemMedia, { image: image, video: video })] }));
 }

package/dist/cjs/helperComponents/NoteItem/styles.module.css

@@ -12,6 +12,15 @@
   gap:var(--dimension-2m, 16px);
 }
 
+.noteItemIllustrationSlot{
+  position:relative;
+  flex-shrink:0;
+  width:380px;
+  height:380px;
+  border-radius:var(--dimension-1m, 8px);
+  overflow:hidden;
+}
+
 .noteItemIllustration{
   border-radius:var(--dimension-1m, 8px);
   width:380px;
@@ -19,6 +28,31 @@
   -o-object-fit:cover;
      object-fit:cover;
   pointer-events:none;
+  display:block;
+}
+
+.noteItemIllustrationSlot .noteItemIllustration,
+.noteItemVideo{
+  width:100%;
+  height:100%;
+  border-radius:0;
+}
+
+.noteItemVideo{
+  -o-object-fit:cover;
+     object-fit:cover;
+  pointer-events:none;
+  display:block;
+}
+
+.noteItemMediaSkeletonOverlay{
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius:inherit;
+  pointer-events:none;
 }
 
 .noteItemMarkdownViewer{

package/dist/cjs/helperComponents/NoteItemMobile/NoteItemMobile.d.ts

@@ -5,5 +5,5 @@ type NoteItemMobileProps = NoteItemProps & {
     childrenScrollRefs: RefObject<HTMLElement[]>;
     onScrollRefInitialized(): void;
 };
-export declare function NoteItemMobile({ title, description, image, childrenScrollRefs, index, onScrollRefInitialized, }: NoteItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoteItemMobile({ title, description, image, video, childrenScrollRefs, index, onScrollRefInitialized, }: NoteItemMobileProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/NoteItemMobile/NoteItemMobile.js

@@ -5,15 +5,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoteItemMobile = NoteItemMobile;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const uikit_product_markdown_1 = require("@cloud-ru/uikit-product-markdown");
 const scroll_1 = require("@snack-uikit/scroll");
+const skeleton_1 = require("@snack-uikit/skeleton");
 const typography_1 = require("@snack-uikit/typography");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function NoteItemMobile({ title, description, image, childrenScrollRefs, index, onScrollRefInitialized, }) {
+function NoteItemMobileMedia({ image, video }) {
+    const [videoReady, setVideoReady] = (0, react_1.useState)(false);
+    const [videoError, setVideoError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!video) {
+            return;
+        }
+        setVideoReady(false);
+        setVideoError(false);
+    }, [video]);
+    if (!video) {
+        return (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt, className: styles_module_scss_1.default.noteItemIllustration });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.noteItemIllustrationSlot, children: videoError ? ((0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt, className: styles_module_scss_1.default.noteItemIllustration })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { src: video, className: styles_module_scss_1.default.noteItemVideo, muted: true, loop: true, playsInline: true, autoPlay: true, onLoadedData: () => setVideoReady(true), onError: () => setVideoError(true), "aria-hidden": true }), !videoReady && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.noteItemMediaSkeletonOverlay, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: '100%', height: '100%', borderRadius: 8 }) }))] })) }));
+}
+function NoteItemMobile({ title, description, image, video, childrenScrollRefs, index, onScrollRefInitialized, }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.noteItemWrapper, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { size: 'm', barHideStrategy: 'never', ref: el => {
                 if (childrenScrollRefs.current && el) {
                     childrenScrollRefs.current[index] = el;
                     onScrollRefInitialized();
                 }
-            }, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.noteItemContent, children: [(0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt, className: styles_module_scss_1.default.noteItemIllustration }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleL, { children: title }), (0, jsx_runtime_1.jsx)(uikit_product_markdown_1.Markdown, { value: description, className: styles_module_scss_1.default.noteItemMarkdownViewer })] }) }) }));
+            }, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.noteItemContent, children: [(0, jsx_runtime_1.jsx)(NoteItemMobileMedia, { image: image, video: video }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleL, { children: title }), (0, jsx_runtime_1.jsx)(uikit_product_markdown_1.Markdown, { value: description, className: styles_module_scss_1.default.noteItemMarkdownViewer })] }) }) }));
 }

package/dist/cjs/helperComponents/NoteItemMobile/styles.module.css

@@ -10,11 +10,50 @@
   padding-right:var(--dimension-2m, 16px);
 }
 
+.noteItemIllustrationSlot{
+  position:relative;
+  width:100%;
+  max-width:380px;
+  align-self:center;
+  aspect-ratio:1/1;
+  border-radius:var(--dimension-1m, 8px);
+  overflow:hidden;
+}
+
 .noteItemIllustration{
   width:100%;
+  height:auto;
   pointer-events:none;
   max-width:380px;
   align-self:center;
+  display:block;
+}
+
+.noteItemIllustrationSlot .noteItemIllustration{
+  width:100%;
+  height:100%;
+  max-width:none;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.noteItemVideo{
+  width:100%;
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  pointer-events:none;
+  display:block;
+}
+
+.noteItemMediaSkeletonOverlay{
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:stretch;
+  justify-content:stretch;
+  border-radius:inherit;
+  pointer-events:none;
 }
 
 .noteItemSkeletonWrapper{

package/dist/esm/helperComponents/NoteItem/NoteItem.d.ts

@@ -8,5 +8,7 @@ export type NoteItemProps = {
         src: string;
         alt: string;
     };
+    /** URL видео (при наличии показывается вместо статичного изображения) */
+    video?: string;
 };
-export declare function NoteItem({ title, description, image }: NoteItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoteItem({ title, description, image, video }: NoteItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/NoteItem/NoteItem.js

@@ -1,8 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Markdown } from '@cloud-ru/uikit-product-markdown';
 import { Scroll } from '@snack-uikit/scroll';
+import { Skeleton } from '@snack-uikit/skeleton';
 import { Typography } from '@snack-uikit/typography';
 import styles from './styles.module.css';
-export function NoteItem({ title, description, image }) {
-    return (_jsxs("div", { className: styles.noteItemWrapper, children: [_jsx(Scroll, { size: 's', barHideStrategy: 'never', children: _jsxs("div", { className: styles.noteItemText, children: [_jsx(Typography.SansTitleL, { children: title }), _jsx(Markdown, { value: description, className: styles.noteItemMarkdownViewer })] }) }), _jsx("img", { src: image.src, alt: image.alt, className: styles.noteItemIllustration })] }));
+function NoteItemMedia({ image, video }) {
+    const [videoReady, setVideoReady] = useState(false);
+    const [videoError, setVideoError] = useState(false);
+    useEffect(() => {
+        if (!video) {
+            return;
+        }
+        setVideoReady(false);
+        setVideoError(false);
+    }, [video]);
+    if (!video) {
+        return _jsx("img", { src: image.src, alt: image.alt, className: styles.noteItemIllustration });
+    }
+    return (_jsx("div", { className: styles.noteItemIllustrationSlot, children: videoError ? (_jsx("img", { src: image.src, alt: image.alt, className: styles.noteItemIllustration })) : (_jsxs(_Fragment, { children: [_jsx("video", { src: video, className: styles.noteItemVideo, muted: true, loop: true, playsInline: true, autoPlay: true, onLoadedData: () => setVideoReady(true), onError: () => setVideoError(true), "aria-hidden": true }), !videoReady && (_jsx("div", { className: styles.noteItemMediaSkeletonOverlay, children: _jsx(Skeleton, { width: 380, height: 380, borderRadius: 8, loading: true }) }))] })) }));
+}
+export function NoteItem({ title, description, image, video }) {
+    return (_jsxs("div", { className: styles.noteItemWrapper, children: [_jsx(Scroll, { size: 's', barHideStrategy: 'never', children: _jsxs("div", { className: styles.noteItemText, children: [_jsx(Typography.SansTitleL, { children: title }), _jsx(Markdown, { value: description, className: styles.noteItemMarkdownViewer })] }) }), _jsx(NoteItemMedia, { image: image, video: video })] }));
 }

package/dist/esm/helperComponents/NoteItem/styles.module.css

@@ -12,6 +12,15 @@
   gap:var(--dimension-2m, 16px);
 }
 
+.noteItemIllustrationSlot{
+  position:relative;
+  flex-shrink:0;
+  width:380px;
+  height:380px;
+  border-radius:var(--dimension-1m, 8px);
+  overflow:hidden;
+}
+
 .noteItemIllustration{
   border-radius:var(--dimension-1m, 8px);
   width:380px;
@@ -19,6 +28,31 @@
   -o-object-fit:cover;
      object-fit:cover;
   pointer-events:none;
+  display:block;
+}
+
+.noteItemIllustrationSlot .noteItemIllustration,
+.noteItemVideo{
+  width:100%;
+  height:100%;
+  border-radius:0;
+}
+
+.noteItemVideo{
+  -o-object-fit:cover;
+     object-fit:cover;
+  pointer-events:none;
+  display:block;
+}
+
+.noteItemMediaSkeletonOverlay{
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius:inherit;
+  pointer-events:none;
 }
 
 .noteItemMarkdownViewer{

package/dist/esm/helperComponents/NoteItemMobile/NoteItemMobile.d.ts

@@ -5,5 +5,5 @@ type NoteItemMobileProps = NoteItemProps & {
     childrenScrollRefs: RefObject<HTMLElement[]>;
     onScrollRefInitialized(): void;
 };
-export declare function NoteItemMobile({ title, description, image, childrenScrollRefs, index, onScrollRefInitialized, }: NoteItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoteItemMobile({ title, description, image, video, childrenScrollRefs, index, onScrollRefInitialized, }: NoteItemMobileProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/helperComponents/NoteItemMobile/NoteItemMobile.js

@@ -1,13 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Markdown } from '@cloud-ru/uikit-product-markdown';
 import { Scroll } from '@snack-uikit/scroll';
+import { Skeleton } from '@snack-uikit/skeleton';
 import { Typography } from '@snack-uikit/typography';
 import styles from './styles.module.css';
-export function NoteItemMobile({ title, description, image, childrenScrollRefs, index, onScrollRefInitialized, }) {
+function NoteItemMobileMedia({ image, video }) {
+    const [videoReady, setVideoReady] = useState(false);
+    const [videoError, setVideoError] = useState(false);
+    useEffect(() => {
+        if (!video) {
+            return;
+        }
+        setVideoReady(false);
+        setVideoError(false);
+    }, [video]);
+    if (!video) {
+        return _jsx("img", { src: image.src, alt: image.alt, className: styles.noteItemIllustration });
+    }
+    return (_jsx("div", { className: styles.noteItemIllustrationSlot, children: videoError ? (_jsx("img", { src: image.src, alt: image.alt, className: styles.noteItemIllustration })) : (_jsxs(_Fragment, { children: [_jsx("video", { src: video, className: styles.noteItemVideo, muted: true, loop: true, playsInline: true, autoPlay: true, onLoadedData: () => setVideoReady(true), onError: () => setVideoError(true), "aria-hidden": true }), !videoReady && (_jsx("div", { className: styles.noteItemMediaSkeletonOverlay, children: _jsx(Skeleton, { width: '100%', height: '100%', borderRadius: 8 }) }))] })) }));
+}
+export function NoteItemMobile({ title, description, image, video, childrenScrollRefs, index, onScrollRefInitialized, }) {
     return (_jsx("div", { className: styles.noteItemWrapper, children: _jsx(Scroll, { size: 'm', barHideStrategy: 'never', ref: el => {
                 if (childrenScrollRefs.current && el) {
                     childrenScrollRefs.current[index] = el;
                     onScrollRefInitialized();
                 }
-            }, children: _jsxs("div", { className: styles.noteItemContent, children: [_jsx("img", { src: image.src, alt: image.alt, className: styles.noteItemIllustration }), _jsx(Typography.SansTitleL, { children: title }), _jsx(Markdown, { value: description, className: styles.noteItemMarkdownViewer })] }) }) }));
+            }, children: _jsxs("div", { className: styles.noteItemContent, children: [_jsx(NoteItemMobileMedia, { image: image, video: video }), _jsx(Typography.SansTitleL, { children: title }), _jsx(Markdown, { value: description, className: styles.noteItemMarkdownViewer })] }) }) }));
 }

package/dist/esm/helperComponents/NoteItemMobile/styles.module.css

@@ -10,11 +10,50 @@
   padding-right:var(--dimension-2m, 16px);
 }
 
+.noteItemIllustrationSlot{
+  position:relative;
+  width:100%;
+  max-width:380px;
+  align-self:center;
+  aspect-ratio:1/1;
+  border-radius:var(--dimension-1m, 8px);
+  overflow:hidden;
+}
+
 .noteItemIllustration{
   width:100%;
+  height:auto;
   pointer-events:none;
   max-width:380px;
   align-self:center;
+  display:block;
+}
+
+.noteItemIllustrationSlot .noteItemIllustration{
+  width:100%;
+  height:100%;
+  max-width:none;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.noteItemVideo{
+  width:100%;
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  pointer-events:none;
+  display:block;
+}
+
+.noteItemMediaSkeletonOverlay{
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:stretch;
+  justify-content:stretch;
+  border-radius:inherit;
+  pointer-events:none;
 }
 
 .noteItemSkeletonWrapper{

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-modal-predefined",
   "title": "Modal Predefined",
-  "version": "2.1.4",
+  "version": "2.2.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,10 +36,10 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-copy-line": "2.1.8",
-    "@cloud-ru/uikit-product-icons": "17.1.1",
+    "@cloud-ru/uikit-product-copy-line": "2.1.9",
+    "@cloud-ru/uikit-product-icons": "17.2.0",
     "@cloud-ru/uikit-product-markdown": "1.1.4",
-    "@cloud-ru/uikit-product-mobile-modal": "2.1.1",
+    "@cloud-ru/uikit-product-mobile-modal": "2.1.2",
     "@cloud-ru/uikit-product-switch-row": "1.1.5",
     "@cloud-ru/uikit-product-toggles-predefined": "2.0.5",
     "@cloud-ru/uikit-product-utils": "9.1.0",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "c5d44ec0fe45548b84559257798a1d2bdf7124ab"
+  "gitHead": "7ab3fb759acc8f2f742b85ac3fefdc02540c58f6"
 }

package/src/helperComponents/NoteItem/NoteItem.tsx

@@ -1,5 +1,8 @@
+import { useEffect, useState } from 'react';
+
 import { Markdown } from '@cloud-ru/uikit-product-markdown';
 import { Scroll } from '@snack-uikit/scroll';
+import { Skeleton } from '@snack-uikit/skeleton';
 import { Typography } from '@snack-uikit/typography';
 
 import styles from './styles.module.scss';
@@ -11,9 +14,55 @@ export type NoteItemProps = {
   description: string;
   /** Иллюстрация (изображение) */
   image: { src: string; alt: string };
+  /** URL видео (при наличии показывается вместо статичного изображения) */
+  video?: string;
 };
 
-export function NoteItem({ title, description, image }: NoteItemProps) {
+function NoteItemMedia({ image, video }: Pick<NoteItemProps, 'image' | 'video'>) {
+  const [videoReady, setVideoReady] = useState(false);
+  const [videoError, setVideoError] = useState(false);
+
+  useEffect(() => {
+    if (!video) {
+      return;
+    }
+    setVideoReady(false);
+    setVideoError(false);
+  }, [video]);
+
+  if (!video) {
+    return <img src={image.src} alt={image.alt} className={styles.noteItemIllustration} />;
+  }
+
+  return (
+    <div className={styles.noteItemIllustrationSlot}>
+      {videoError ? (
+        <img src={image.src} alt={image.alt} className={styles.noteItemIllustration} />
+      ) : (
+        <>
+          <video
+            src={video}
+            className={styles.noteItemVideo}
+            muted
+            loop
+            playsInline
+            autoPlay
+            onLoadedData={() => setVideoReady(true)}
+            onError={() => setVideoError(true)}
+            aria-hidden
+          />
+          {!videoReady && (
+            <div className={styles.noteItemMediaSkeletonOverlay}>
+              <Skeleton width={380} height={380} borderRadius={8} loading />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function NoteItem({ title, description, image, video }: NoteItemProps) {
   return (
     <div className={styles.noteItemWrapper}>
       <Scroll size='s' barHideStrategy='never'>
@@ -22,7 +71,7 @@ export function NoteItem({ title, description, image }: NoteItemProps) {
           <Markdown value={description} className={styles.noteItemMarkdownViewer} />
         </div>
       </Scroll>
-      <img src={image.src} alt={image.alt} className={styles.noteItemIllustration} />
+      <NoteItemMedia image={image} video={video} />
     </div>
   );
 }

package/src/helperComponents/NoteItem/styles.module.scss

@@ -14,12 +14,46 @@
   gap: styles-theme-variables.$dimension-2m;
 }
 
+.noteItemIllustrationSlot {
+  position: relative;
+  flex-shrink: 0;
+  width: 380px;
+  height: 380px;
+  border-radius: styles-theme-variables.$dimension-1m;
+  overflow: hidden;
+}
+
 .noteItemIllustration {
   border-radius: styles-theme-variables.$dimension-1m;
   width: 380px;
   height: 380px;
   object-fit: cover;
   pointer-events: none;
+  display: block;
+}
+
+.noteItemIllustrationSlot .noteItemIllustration,
+.noteItemVideo {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+.noteItemVideo {
+  object-fit: cover;
+  pointer-events: none;
+  display: block;
+}
+
+.noteItemMediaSkeletonOverlay {
+  position: absolute;
+  inset: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  pointer-events: none;
 }
 
 .noteItemMarkdownViewer {

package/src/helperComponents/NoteItemMobile/NoteItemMobile.tsx

@@ -1,7 +1,8 @@
-import { RefObject } from 'react';
+import { RefObject, useEffect, useState } from 'react';
 
 import { Markdown } from '@cloud-ru/uikit-product-markdown';
 import { Scroll } from '@snack-uikit/scroll';
+import { Skeleton } from '@snack-uikit/skeleton';
 import { Typography } from '@snack-uikit/typography';
 
 import { NoteItemProps } from '../NoteItem';
@@ -13,10 +14,55 @@ type NoteItemMobileProps = NoteItemProps & {
   onScrollRefInitialized(): void;
 };
 
+function NoteItemMobileMedia({ image, video }: Pick<NoteItemProps, 'image' | 'video'>) {
+  const [videoReady, setVideoReady] = useState(false);
+  const [videoError, setVideoError] = useState(false);
+
+  useEffect(() => {
+    if (!video) {
+      return;
+    }
+    setVideoReady(false);
+    setVideoError(false);
+  }, [video]);
+
+  if (!video) {
+    return <img src={image.src} alt={image.alt} className={styles.noteItemIllustration} />;
+  }
+
+  return (
+    <div className={styles.noteItemIllustrationSlot}>
+      {videoError ? (
+        <img src={image.src} alt={image.alt} className={styles.noteItemIllustration} />
+      ) : (
+        <>
+          <video
+            src={video}
+            className={styles.noteItemVideo}
+            muted
+            loop
+            playsInline
+            autoPlay
+            onLoadedData={() => setVideoReady(true)}
+            onError={() => setVideoError(true)}
+            aria-hidden
+          />
+          {!videoReady && (
+            <div className={styles.noteItemMediaSkeletonOverlay}>
+              <Skeleton width='100%' height='100%' borderRadius={8} />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
 export function NoteItemMobile({
   title,
   description,
   image,
+  video,
   childrenScrollRefs,
   index,
   onScrollRefInitialized,
@@ -34,7 +80,7 @@ export function NoteItemMobile({
         }}
       >
         <div className={styles.noteItemContent}>
-          <img src={image.src} alt={image.alt} className={styles.noteItemIllustration} />
+          <NoteItemMobileMedia image={image} video={video} />
           <Typography.SansTitleL>{title}</Typography.SansTitleL>
           <Markdown value={description} className={styles.noteItemMarkdownViewer} />
         </div>

package/src/helperComponents/NoteItemMobile/styles.module.scss

@@ -13,11 +13,49 @@
   padding-right: styles-tokens-drawer.$dimension-2m;
 }
 
+.noteItemIllustrationSlot {
+  position: relative;
+  width: 100%;
+  max-width: 380px;
+  align-self: center;
+  aspect-ratio: 1 / 1;
+  border-radius: styles-theme-variables.$dimension-1m;
+  overflow: hidden;
+}
+
 .noteItemIllustration {
   width: 100%;
+  height: auto;
   pointer-events: none;
   max-width: 380px;
   align-self: center;
+  display: block;
+}
+
+.noteItemIllustrationSlot .noteItemIllustration {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  object-fit: cover;
+}
+
+.noteItemVideo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  display: block;
+}
+
+.noteItemMediaSkeletonOverlay {
+  position: absolute;
+  inset: 0;
+
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  border-radius: inherit;
+  pointer-events: none;
 }
 
 .noteItemSkeletonWrapper {