@mobilon-dev/chotto 0.3.110 → 0.3.112

package/dist/types/src/components/2_feed_elements/ImageMessage/stories/ImageMessage.stories.d.ts

@@ -19,4 +19,9 @@ export declare const RightMessageWithReplyAudio: Story;
 export declare const LeftMessageWithReplyCall: Story;
 export declare const RightMessageWithReplyCall: Story;
 export declare const LeftMessageWithPreviewLink: Story;
+export declare const WithImagePreviewUrl: Story;
+export declare const RightWithImagePreviewUrl: Story;
 export declare const RightMessageWithPreviewLink: Story;
+export declare const AlbumTwoImages: Story;
+export declare const AlbumThreeImages: Story;
+export declare const AlbumFiveImages: Story;

package/dist/types/src/components/2_feed_elements/ImageMessage/styles/types.d.ts

@@ -392,6 +392,46 @@ export interface ImageMessageThemeCSSVariables {
     '--chotto-imagemessage-modal-image-max-height': string;
     /** Максимальная ширина изображения в модальном окне */
     '--chotto-imagemessage-modal-image-max-width': string;
+    /** Минимальная ширина сетки альбома */
+    '--chotto-imagemessage-album-size': string;
+    /** Отображение сетки альбома */
+    '--chotto-imagemessage-album-display': string;
+    /** Промежуток между фото в альбоме */
+    '--chotto-imagemessage-album-gap': string;
+    /** Ширина сетки альбома */
+    '--chotto-imagemessage-album-width': string;
+    /** Высота сетки альбома */
+    '--chotto-imagemessage-album-height': string;
+    /** Фон плитки альбома */
+    '--chotto-imagemessage-album-tile-background': string;
+    /** Курсор плитки альбома */
+    '--chotto-imagemessage-album-tile-cursor': string;
+    /** Вписывание фото в плитке альбома */
+    '--chotto-imagemessage-album-tile-object-fit': string;
+    /** Фон оверлея «ещё N» */
+    '--chotto-imagemessage-album-overflow-background': string;
+    /** Цвет текста оверлея «ещё N» */
+    '--chotto-imagemessage-album-overflow-color': string;
+    /** Размер шрифта оверлея «ещё N» */
+    '--chotto-imagemessage-album-overflow-font-size': string;
+    /** Размер кнопки навигации в модалке альбома */
+    '--chotto-imagemessage-modal-nav-size': string;
+    /** Фон кнопки навигации в модалке альбома */
+    '--chotto-imagemessage-modal-nav-background': string;
+    /** Цвет иконки навигации в модалке альбома */
+    '--chotto-imagemessage-modal-nav-color': string;
+    /** Скругление кнопки навигации в модалке альбома */
+    '--chotto-imagemessage-modal-nav-border-radius': string;
+    /** Размер иконки навигации в модалке альбома */
+    '--chotto-imagemessage-modal-nav-font-size': string;
+    /** Цвет счётчика в модалке альбома */
+    '--chotto-imagemessage-modal-counter-color': string;
+    /** Размер шрифта счётчика в модалке альбома */
+    '--chotto-imagemessage-modal-counter-font-size': string;
+    /** Внутренние отступы счётчика в модалке альбома */
+    '--chotto-imagemessage-modal-counter-padding': string;
+    /** Скругление счётчика в модалке альбома */
+    '--chotto-imagemessage-modal-counter-border-radius': string;
     /** Переход появления контекстного меню */
     '--chotto-imagemessage-context-menu-enter-active-transition': string;
     /** Переход скрытия контекстного меню */

package/dist/types/src/components/2_feed_elements/ReplyVideoMessage/styles/types.d.ts

@@ -40,6 +40,38 @@ export interface ReplyVideoMessageThemeCSSVariables {
     '--chotto-replyvideomessage-preview-button-display': string;
     /** Направление флекс-контейнера кнопки превью */
     '--chotto-replyvideomessage-preview-button-flex-direction': string;
+    /** Позиционирование значка play на обложке */
+    '--chotto-replyvideomessage-play-badge-position': string;
+    /** Смещение значка play сверху */
+    '--chotto-replyvideomessage-play-badge-top': string;
+    /** Смещение значка play слева */
+    '--chotto-replyvideomessage-play-badge-left': string;
+    /** Трансформация значка play */
+    '--chotto-replyvideomessage-play-badge-transform': string;
+    /** Отображение значка play */
+    '--chotto-replyvideomessage-play-badge-display': string;
+    /** Выравнивание содержимого значка play по поперечной оси */
+    '--chotto-replyvideomessage-play-badge-align-items': string;
+    /** Выравнивание содержимого значка play по главной оси */
+    '--chotto-replyvideomessage-play-badge-justify-content': string;
+    /** Ширина значка play */
+    '--chotto-replyvideomessage-play-badge-width': string;
+    /** Высота значка play */
+    '--chotto-replyvideomessage-play-badge-height': string;
+    /** Скругление значка play */
+    '--chotto-replyvideomessage-play-badge-border-radius': string;
+    /** Фон значка play */
+    '--chotto-replyvideomessage-play-badge-background-color': string;
+    /** Цвет иконки play */
+    '--chotto-replyvideomessage-play-badge-color': string;
+    /** События указателя значка play */
+    '--chotto-replyvideomessage-play-badge-pointer-events': string;
+    /** Слой значка play */
+    '--chotto-replyvideomessage-play-badge-z-index': string;
+    /** Размер иконки play */
+    '--chotto-replyvideomessage-play-badge-icon-font-size': string;
+    /** Отступ иконки play слева */
+    '--chotto-replyvideomessage-play-badge-icon-margin-left': string;
     /** Перенос слов в контейнере текста */
     '--chotto-replyvideomessage-text-container-word-wrap': string;
     /** Выравнивание содержимого текстового контейнера */

package/dist/types/src/components/2_feed_elements/VideoMessage/stories/VideoMessage.stories.d.ts

@@ -37,3 +37,6 @@ export declare const LeftMessageWithReplyCall: Story;
 export declare const RightMessageWithReplyCall: Story;
 export declare const LeftMessageWithPreviewLink: Story;
 export declare const RightMessageWithPreviewLink: Story;
+export declare const WithCoverUrl: Story;
+export declare const WithVideoPreviewUrl: Story;
+export declare const WithCoverAndVideoPreviewUrl: Story;

package/dist/types/src/components/2_feed_elements/VideoMessage/styles/types.d.ts

@@ -122,6 +122,38 @@ export interface VideoMessageThemeCSSVariables {
     '--chotto-videomessage-preview-button-display': string;
     /** Направление флекс-контейнера кнопки превью */
     '--chotto-videomessage-preview-button-flex-direction': string;
+    /** Позиционирование значка play на обложке */
+    '--chotto-videomessage-play-badge-position': string;
+    /** Смещение значка play сверху */
+    '--chotto-videomessage-play-badge-top': string;
+    /** Смещение значка play слева */
+    '--chotto-videomessage-play-badge-left': string;
+    /** Трансформация значка play */
+    '--chotto-videomessage-play-badge-transform': string;
+    /** Отображение значка play */
+    '--chotto-videomessage-play-badge-display': string;
+    /** Выравнивание содержимого значка play по поперечной оси */
+    '--chotto-videomessage-play-badge-align-items': string;
+    /** Выравнивание содержимого значка play по главной оси */
+    '--chotto-videomessage-play-badge-justify-content': string;
+    /** Ширина значка play */
+    '--chotto-videomessage-play-badge-width': string;
+    /** Высота значка play */
+    '--chotto-videomessage-play-badge-height': string;
+    /** Скругление значка play */
+    '--chotto-videomessage-play-badge-border-radius': string;
+    /** Фон значка play */
+    '--chotto-videomessage-play-badge-background-color': string;
+    /** Цвет иконки play */
+    '--chotto-videomessage-play-badge-color': string;
+    /** События указателя значка play */
+    '--chotto-videomessage-play-badge-pointer-events': string;
+    /** Слой значка play */
+    '--chotto-videomessage-play-badge-z-index': string;
+    /** Размер иконки play */
+    '--chotto-videomessage-play-badge-icon-font-size': string;
+    /** Отступ иконки play слева (оптическое центрирование треугольника) */
+    '--chotto-videomessage-play-badge-icon-margin-left': string;
     /** Позиционирование кнопки меню сообщения */
     '--chotto-videomessage-menu-button-position': string;
     /** Прозрачный фон кнопки меню */

package/dist/types/src/components/2_feed_elements/types/components.d.ts

@@ -1,4 +1,4 @@
-import { IAudioMessage, ICallMessage, IDateMessage, IFileMessage, IImageMessage, IKeyBoard, ILinkPreview, ISystemMessage, ITextMessage, ITypingMessage, IVideoMessage, Reply } from "@/types";
+import { IAudioMessage, ICallMessage, IDateMessage, IFileMessage, IImageMessage, IImageMessageItem, IKeyBoard, ILinkPreview, ISystemMessage, ITextMessage, ITypingMessage, IVideoMessage, Reply } from "@/types";
 export interface IFeedObject {
     messageId: string;
     type: string;
@@ -8,6 +8,14 @@ export interface IFeedObject {
     status?: string;
     time?: string;
     url?: string;
+    /** URL превью картинки для ленты (для `message.image`) */
+    imagePreviewUrl?: string;
+    /** Несколько изображений в одном `message.image` */
+    items?: IImageMessageItem[];
+    /** URL сжатого превью видео для ленты (для `message.video`) */
+    videoPreviewUrl?: string;
+    /** URL обложки видео для ленты (для `message.video`) */
+    coverUrl?: string;
     alt?: string;
     filename?: string;
     avatar?: string;

package/dist/types/src/components/2_feed_elements/types/messages.d.ts

@@ -3,6 +3,12 @@ export interface Reply {
     type: string;
     text?: string;
     url?: string;
+    /** URL превью картинки в цитате (для `message.image`); если нет — используется `url` */
+    imagePreviewUrl?: string;
+    /** URL сжатого превью видео в ленте (для `message.video`) */
+    videoPreviewUrl?: string;
+    /** URL обложки видео (картинка) в ленте/цитате (для `message.video`) */
+    coverUrl?: string;
     filename?: string;
     header?: string;
     callDuration?: string;
@@ -262,11 +268,27 @@ export interface IFileMessage {
     /** Можно ли ещё удалить (если `false` — пункт меню disabled) */
     canDelete?: boolean;
 }
+/** Одно изображение в альбоме `message.image` */
+export interface IImageMessageItem {
+    url: string;
+    /** URL превью для ленты. Если нет — показывается `url`. */
+    imagePreviewUrl?: string;
+    filename?: string;
+    size?: number | string;
+}
 export interface IImageMessage {
     messageId: string;
     position: string;
     time: string;
-    url: string;
+    /**
+     * Полноразмерный URL (для одного фото или как дубль первого элемента `items`).
+     * Если задан `items`, в ленте используются элементы массива.
+     */
+    url?: string;
+    /** URL превью для ленты. Если нет — в ленте показывается `url`. При широком просмотре открывается полноразмерный `url`. */
+    imagePreviewUrl?: string;
+    /** Несколько изображений в одном сообщении. Один элемент — обычное фото. */
+    items?: IImageMessageItem[];
     alt?: string;
     status: string;
     statusMsg?: string;
@@ -340,6 +362,10 @@ export interface IVideoMessage {
     statusMsg?: string;
     time: string;
     url: string;
+    /** URL сжатого превью видео для ленты. Если нет — используется `url`. При широком просмотре открывается полноразмерный `url`. */
+    videoPreviewUrl?: string;
+    /** URL обложки (картинка) для ленты. Приоритет в ленте: `coverUrl`, затем `videoPreviewUrl`, затем `url`. */
+    coverUrl?: string;
     alt?: string;
     avatar?: string;
     header?: string;

package/dist/types/src/hooks/messages/buildReplyPayload.d.ts

@@ -1,11 +1,15 @@
-import type { Reply } from '@/types';
+import type { IImageMessageItem, Reply } from '@/types';
 export interface ReplyMessageSource {
     messageId: string | number;
     type?: string;
     text?: string;
     url?: string;
+    imagePreviewUrl?: string;
+    videoPreviewUrl?: string;
+    coverUrl?: string;
     filename?: string;
     header?: string;
     callDuration?: string;
+    items?: IImageMessageItem[];
 }
 export declare function buildReplyPayload(message: ReplyMessageSource, fallbackType: string): Reply;

package/dist/types/src/hooks/messages/getImageMessageItems.d.ts

@@ -0,0 +1,12 @@
+import type { IImageMessageItem } from '@/types';
+export interface ImageMessageItemsSource {
+    url?: string;
+    imagePreviewUrl?: string;
+    filename?: string;
+    items?: IImageMessageItem[];
+}
+/**
+ * Список картинок сообщения: `items`, если их больше нуля, иначе корневые `url` / `imagePreviewUrl`.
+ */
+export declare function getImageMessageItems(message: ImageMessageItemsSource | undefined): IImageMessageItem[];
+export declare function getPrimaryImageItem(message: ImageMessageItemsSource | undefined): IImageMessageItem | undefined;

package/dist/types/src/hooks/messages/index.d.ts

@@ -11,6 +11,7 @@ export * from './useStartReply';
 export * from './useStartEdit';
 export * from './canStartEditLastSent';
 export * from './buildReplyPayload';
+export * from './getImageMessageItems';
 export * from './buildEditPayload';
 export * from './getEditTooltipLines';
 export * from './getDeletedOriginalText';

package/dist/types/src/hooks/validators/messages/types.d.ts

@@ -6,6 +6,9 @@ export interface MessageReply {
     type: string;
     text?: string;
     url?: string;
+    imagePreviewUrl?: string;
+    videoPreviewUrl?: string;
+    coverUrl?: string;
     filename?: string;
 }
 export interface MessageEmbed {
@@ -47,8 +50,17 @@ export interface Message {
     subText?: string;
     avatar?: string;
     url?: string;
+    imagePreviewUrl?: string;
+    videoPreviewUrl?: string;
+    coverUrl?: string;
     filename?: string;
     alt?: string;
+    items?: Array<{
+        url: string;
+        imagePreviewUrl?: string;
+        filename?: string;
+        size?: number | string;
+    }>;
     views?: number;
     reply?: MessageReply;
     embed?: MessageEmbed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobilon-dev/chotto",
-  "version": "0.3.110",
+  "version": "0.3.112",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",