Message: Send inverted media (#4700)

Co-authored-by: Alexander Zinchuk <alx.zinchuk@gmail.com>

src/api/gramjs/apiBuilders/messages.ts

@@ -801,6 +801,7 @@ export function buildLocalMessage(
   scheduledAt?: number,
   sendAs?: ApiPeer,
   story?: ApiStory | ApiStorySkipped,
+  isInvertedMedia?: true,
 ): ApiMessage {
   const localId = getNextLocalMessageId(lastMessageId);
   const media = attachment && buildUploadingMedia(attachment);
@@ -835,6 +836,7 @@ export function buildLocalMessage(
     }),
     ...(scheduledAt && { isScheduled: true }),
     isForwardingAllowed: true,
+    isInvertedMedia,
   } satisfies ApiMessage;
 
   const emojiOnlyCount = getEmojiOnlyCountForMessage(message.content, message.groupedId);
@@ -872,6 +874,7 @@ export function buildLocalForwardedMessage({
     senderId,
     groupedId,
     isInAlbum,
+    isInvertedMedia,
   } = message;
 
   const isAudio = content.audio;
@@ -912,6 +915,7 @@ export function buildLocalForwardedMessage({
     isInAlbum,
     isForwardingAllowed: true,
     replyInfo,
+    isInvertedMedia,
     ...(toThreadId && toChat?.isForum && { isTopicReply: true }),
 
     ...(emojiOnlyCount && { emojiOnlyCount }),

src/api/gramjs/methods/messages.ts

@@ -269,6 +269,7 @@ export function sendMessage(
     sendAs,
     shouldUpdateStickerSetOrder,
     wasDrafted,
+    isInvertedMedia,
   }: {
     chat: ApiChat;
     lastMessageId?: number;
@@ -288,6 +289,7 @@ export function sendMessage(
     sendAs?: ApiPeer;
     shouldUpdateStickerSetOrder?: boolean;
     wasDrafted?: boolean;
+    isInvertedMedia?: true;
   },
   onProgress?: ApiOnProgress,
 ) {
@@ -306,6 +308,7 @@ export function sendMessage(
     scheduledAt,
     sendAs,
     story,
+    isInvertedMedia,
   );
 
   onUpdate({
@@ -392,6 +395,7 @@ export function sendMessage(
         ...(noWebPage && { noWebpage: noWebPage }),
         ...(sendAs && { sendAs: buildInputPeer(sendAs.id, sendAs.accessHash) }),
         ...(shouldUpdateStickerSetOrder && { updateStickersetsOrder: shouldUpdateStickerSetOrder }),
+        ...(isInvertedMedia && { invertMedia: isInvertedMedia }),
       }), {
         shouldThrow: true,
         shouldIgnoreUpdates: true,
@@ -585,6 +589,8 @@ export async function editMessage({
 
   const media = attachment && buildUploadingMedia(attachment);
 
+  const isInvertedMedia = text && !attachment?.shouldSendAsFile ? message.isInvertedMedia : undefined;
+
   const newContent = {
     ...(media || message.content),
     ...(text && {
@@ -599,6 +605,7 @@ export async function editMessage({
     ...message,
     content: newContent,
     emojiOnlyCount: getEmojiOnlyCountForMessage(newContent, message.groupedId),
+    isInvertedMedia,
   };
 
   onUpdate({
@@ -624,6 +631,7 @@ export async function editMessage({
       id: message.id,
       ...(isScheduled && { scheduleDate: message.date }),
       ...(noWebPage && { noWebpage: noWebPage }),
+      ...(isInvertedMedia && { invertMedia: isInvertedMedia }),
     }), { shouldThrow: true });
   } catch (err) {
     if (DEBUG) {

src/assets/font-icons/move-caption-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><path fill="#000" fill-rule="evenodd" d="M4.368 7C3.613 7 3 7.597 3 8.333c0 .737.613 1.334 1.368 1.334h19.158c.756 0 1.369-.597 1.369-1.334 0-.736-.613-1.333-1.369-1.333Zm0 6.667C3.613 13.667 3 14.264 3 15s.613 1.333 1.368 1.333h13.685c.755 0 1.368-.597 1.368-1.333s-.613-1.333-1.368-1.333zm-1.368 8c0-.737.613-1.334 1.368-1.334h9.58c.755 0 1.368.597 1.368 1.334 0 .736-.613 1.333-1.369 1.333H4.368C3.613 23 3 22.403 3 21.667m21.494 4.942c-.535.521-1.4.521-1.935 0l-4.106-4a1.31 1.31 0 0 1 0-1.885c.535-.52 1.401-.52 1.936 0l1.769 1.724V15c0-.736.613-1.333 1.368-1.333s1.369.597 1.369 1.333v7.448l1.769-1.724c.534-.52 1.4-.52 1.935 0a1.31 1.31 0 0 1 0 1.885z" clip-rule="evenodd" style="stroke-width:1.35077"/></svg>

src/assets/font-icons/move-caption-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><path fill="#000" fill-rule="evenodd" d="M22.559 5.39c.534-.52 1.4-.52 1.935 0l4.105 4a1.31 1.31 0 0 1 0 1.886c-.534.52-1.4.52-1.935 0l-1.77-1.724V17c0 .736-.612 1.333-1.368 1.333s-1.368-.597-1.368-1.333V9.552l-1.77 1.724c-.534.52-1.4.52-1.935 0a1.31 1.31 0 0 1 0-1.885zM3 10.334C3 9.597 3.613 9 4.368 9h9.58c.755 0 1.368.597 1.368 1.333 0 .737-.613 1.334-1.369 1.334H4.368C3.613 11.667 3 11.07 3 10.333m1.368 5.334C3.613 15.667 3 16.264 3 17s.613 1.333 1.368 1.333h13.685c.755 0 1.368-.597 1.368-1.333s-.613-1.333-1.368-1.333zm0 6.666c-.755 0-1.368.597-1.368 1.334C3 24.403 3.613 25 4.368 25h19.158c.756 0 1.369-.597 1.369-1.333 0-.737-.613-1.334-1.369-1.334z" clip-rule="evenodd" style="opacity:.99;stroke-width:1.35077"/></svg>

src/components/common/Composer.tsx

@@ -887,12 +887,14 @@ const Composer: FC<OwnProps & StateProps> = ({
     sendGrouped = attachmentSettings.shouldSendGrouped,
     isSilent,
     scheduledAt,
+    isInvertedMedia,
   }: {
     attachments: ApiAttachment[];
     sendCompressed?: boolean;
     sendGrouped?: boolean;
     isSilent?: boolean;
     scheduledAt?: number;
+    isInvertedMedia?: true;
   }) => {
     if (!currentMessageList && !storyId) {
       return;
@@ -905,6 +907,8 @@ const Composer: FC<OwnProps & StateProps> = ({
     if (!validateTextLength(text, true)) return;
     if (!checkSlowMode()) return;
 
+    isInvertedMedia = text && sendCompressed && sendGrouped ? isInvertedMedia : undefined;
+
     if (editingMessage) {
       editMessage({
         messageList: currentMessageList,
@@ -922,6 +926,7 @@ const Composer: FC<OwnProps & StateProps> = ({
         shouldUpdateStickerSetOrder,
         attachments: prepareAttachmentsToSend(attachmentsToSend, sendCompressed),
         shouldGroupMessages: sendGrouped,
+        isInvertedMedia,
       });
     }
 
@@ -935,11 +940,25 @@ const Composer: FC<OwnProps & StateProps> = ({
     });
   });
 
+  const handleSendAttachmentsFromModal = useLastCallback((
+    sendCompressed: boolean,
+    sendGrouped: boolean,
+    isInvertedMedia?: true,
+  ) => {
+    sendAttachments({
+      attachments,
+      sendCompressed,
+      sendGrouped,
+      isInvertedMedia,
+    });
+  });
+
   const handleSendAttachments = useLastCallback((
     sendCompressed: boolean,
     sendGrouped: boolean,
     isSilent?: boolean,
     scheduledAt?: number,
+    isInvertedMedia?: true,
   ) => {
     sendAttachments({
       attachments,
@@ -947,6 +966,7 @@ const Composer: FC<OwnProps & StateProps> = ({
       sendGrouped,
       isSilent,
       scheduledAt,
+      isInvertedMedia,
     });
   });
 
@@ -1059,8 +1079,8 @@ const Composer: FC<OwnProps & StateProps> = ({
     if (!args || Object.keys(restArgs).length === 0) {
       void handleSend(Boolean(isSilent), scheduledAt);
     } else if (args.sendCompressed !== undefined || args.sendGrouped !== undefined) {
-      const { sendCompressed = false, sendGrouped = false } = args;
+      const { sendCompressed = false, sendGrouped = false, isInvertedMedia } = args;
-      void handleSendAttachments(sendCompressed, sendGrouped, isSilent, scheduledAt);
+      void handleSendAttachments(sendCompressed, sendGrouped, isSilent, scheduledAt, isInvertedMedia);
     } else {
       sendMessage({
         ...args,
@@ -1237,8 +1257,8 @@ const Composer: FC<OwnProps & StateProps> = ({
         handleMessageSchedule({ ...additionalArgs, isSilent: true }, scheduledAt, currentMessageList!);
       });
     } else if (additionalArgs && ('sendCompressed' in additionalArgs || 'sendGrouped' in additionalArgs)) {
-      const { sendCompressed = false, sendGrouped = false } = additionalArgs;
+      const { sendCompressed = false, sendGrouped = false, isInvertedMedia } = additionalArgs;
-      void handleSendAttachments(sendCompressed, sendGrouped, true);
+      void handleSendAttachments(sendCompressed, sendGrouped, true, undefined, isInvertedMedia);
     } else {
       void handleSend(true);
     }
@@ -1490,15 +1510,19 @@ const Composer: FC<OwnProps & StateProps> = ({
     handleMessageSchedule({}, SCHEDULED_WHEN_ONLINE, currentMessageList!);
   });
 
-  const handleSendScheduledAttachments = useLastCallback((sendCompressed: boolean, sendGrouped: boolean) => {
+  const handleSendScheduledAttachments = useLastCallback(
-    requestCalendar((scheduledAt) => {
+    (sendCompressed: boolean, sendGrouped: boolean, isInvertedMedia?: true) => {
-      handleMessageSchedule({ sendCompressed, sendGrouped }, scheduledAt, currentMessageList!);
+      requestCalendar((scheduledAt) => {
-    });
+        handleMessageSchedule({ sendCompressed, sendGrouped, isInvertedMedia }, scheduledAt, currentMessageList!);
-  });
+      });
+    },
+  );
 
-  const handleSendSilentAttachments = useLastCallback((sendCompressed: boolean, sendGrouped: boolean) => {
+  const handleSendSilentAttachments = useLastCallback(
-    sendSilent({ sendCompressed, sendGrouped });
+    (sendCompressed: boolean, sendGrouped: boolean, isInvertedMedia?: true) => {
-  });
+      sendSilent({ sendCompressed, sendGrouped, isInvertedMedia });
+    },
+  );
 
   const onSend = useMemo(() => {
     switch (mainButtonState) {
@@ -1557,7 +1581,7 @@ const Composer: FC<OwnProps & StateProps> = ({
         forceDarkTheme={isInStoryViewer}
         onCaptionUpdate={onCaptionUpdate}
         onSendSilent={handleSendSilentAttachments}
-        onSend={handleSendAttachments}
+        onSend={handleSendAttachmentsFromModal}
         onSendScheduled={handleSendScheduledAttachments}
         onFileAppend={handleAppendFiles}
         onClear={handleClearAttachments}

src/components/middle/composer/AttachmentModal.tsx

@@ -74,12 +74,12 @@ export type OwnProps = {
   isForCurrentMessageList?: boolean;
   forceDarkTheme?: boolean;
   onCaptionUpdate: (html: string) => void;
-  onSend: (sendCompressed: boolean, sendGrouped: boolean) => void;
+  onSend: (sendCompressed: boolean, sendGrouped: boolean, isInvertedMedia?: true) => void;
   onFileAppend: (files: File[], isSpoiler?: boolean) => void;
   onAttachmentsUpdate: (attachments: ApiAttachment[]) => void;
   onClear: NoneToVoidFunction;
-  onSendSilent: (sendCompressed: boolean, sendGrouped: boolean) => void;
+  onSendSilent: (sendCompressed: boolean, sendGrouped: boolean, isInvertedMedia?: true) => void;
-  onSendScheduled: (sendCompressed: boolean, sendGrouped: boolean) => void;
+  onSendScheduled: (sendCompressed: boolean, sendGrouped: boolean, isInvertedMedia?: true) => void;
   onCustomEmojiSelect: (emoji: ApiSticker) => void;
   onRemoveSymbol: VoidFunction;
   onEmojiSelect: (emoji: string) => void;
@@ -167,6 +167,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
     (shouldSendCompressed || shouldForceCompression || isInAlbum) && !shouldForceAsFile,
   );
   const [shouldSendGrouped, setShouldSendGrouped] = useState(attachmentSettings.shouldSendGrouped);
+  const [isInvertedMedia, setIsInvertedMedia] = useState(attachmentSettings.isInvertedMedia);
 
   const {
     handleScroll: handleAttachmentsScroll,
@@ -253,6 +254,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
     if (isOpen) {
       setShouldSendCompressed(shouldSuggestCompression ?? attachmentSettings.shouldCompress);
       setShouldSendGrouped(attachmentSettings.shouldSendGrouped);
+      setIsInvertedMedia(attachmentSettings.isInvertedMedia);
     }
   }, [attachmentSettings, isOpen, shouldSuggestCompression]);
 
@@ -273,10 +275,11 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
     if (isOpen) {
       const send = ((shouldSchedule || shouldSendScheduled) && isForMessage && !editingMessage) ? onSendScheduled
         : isSilent ? onSendSilent : onSend;
-      send(isSendingCompressed, shouldSendGrouped);
+      send(isSendingCompressed, shouldSendGrouped, isInvertedMedia);
       updateAttachmentSettings({
         shouldCompress: shouldSuggestCompression === undefined ? isSendingCompressed : undefined,
         shouldSendGrouped,
+        isInvertedMedia,
       });
     }
   });
@@ -432,6 +435,14 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
 
   const isMultiple = renderingAttachments.length > 1;
 
+  const canInvertMedia = (() => {
+    if (isEditing) return false;
+    if (!hasMedia) return false;
+    if (!shouldForceAsFile && !shouldForceCompression && !isSendingCompressed) return false;
+    if (isMultiple && shouldSendGrouped) return false;
+    return true;
+  })();
+
   let title = '';
   if (areAllPhotos) {
     title = lang(isEditing ? 'EditMessageReplacePhoto' : 'PreviewSender.SendPhoto', renderingAttachments.length, 'i');
@@ -466,6 +477,19 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
               )}
               {hasMedia && (
                 <>
+                  {
+                    canInvertMedia && (!isInvertedMedia ? (
+                      // eslint-disable-next-line react/jsx-no-bind
+                      <MenuItem icon="move-caption-up" onClick={() => setIsInvertedMedia(true)}>
+                        {lang('PreviewSender.MoveTextUp')}
+                      </MenuItem>
+                    ) : (
+                      // eslint-disable-next-line react/jsx-no-bind
+                      <MenuItem icon="move-caption-down" onClick={() => setIsInvertedMedia(undefined)}>
+                        {lang(('PreviewSender.MoveTextDown'))}
+                      </MenuItem>
+                    ))
+                  }
                   {
                     !shouldForceAsFile && !shouldForceCompression && (isSendingCompressed ? (
                       // eslint-disable-next-line react/jsx-no-bind

src/global/actions/api/messages.ts

@@ -1407,6 +1407,7 @@ async function sendMessage<T extends GlobalState>(global: T, params: {
   groupedId?: string;
   wasDrafted?: boolean;
   lastMessageId?: number;
+  isInvertedMedia?: true;
 }) {
   let currentMessageKey: MessageKey | undefined;
   const progressCallback = params.attachment ? (progress: number, messageKey: MessageKey) => {

src/global/actions/ui/misc.ts

@@ -485,7 +485,7 @@ addActionHandler('requestConfetti', (global, actions, payload): ActionReturnType
 
 addActionHandler('updateAttachmentSettings', (global, actions, payload): ActionReturnType => {
   const {
-    shouldCompress, shouldSendGrouped,
+    shouldCompress, shouldSendGrouped, isInvertedMedia,
   } = payload;
 
   return {
@@ -493,6 +493,7 @@ addActionHandler('updateAttachmentSettings', (global, actions, payload): ActionR
     attachmentSettings: {
       shouldCompress: shouldCompress ?? global.attachmentSettings.shouldCompress,
       shouldSendGrouped: shouldSendGrouped ?? global.attachmentSettings.shouldSendGrouped,
+      isInvertedMedia,
     },
   };
 });

src/global/initialState.ts

@@ -132,6 +132,7 @@ export const INITIAL_GLOBAL_STATE: GlobalState = {
   attachmentSettings: {
     shouldCompress: true,
     shouldSendGrouped: true,
+    isInvertedMedia: undefined,
   },
 
   scheduledMessages: {

src/global/types.ts

@@ -296,6 +296,7 @@ export type TabState = {
     isSilent?: boolean;
     sendGrouped?: boolean;
     sendCompressed?: boolean;
+    isInvertedMedia?: true;
   };
 
   activeChatFolder: number;
@@ -823,6 +824,7 @@ export type GlobalState = {
   attachmentSettings: {
     shouldCompress: boolean;
     shouldSendGrouped: boolean;
+    isInvertedMedia?: true;
   };
 
   attachMenu: {
@@ -1475,6 +1477,7 @@ export interface ActionPayloads {
     shouldGroupMessages?: boolean;
     messageList?: MessageList;
     isReaction?: true; // Reaction to the story are sent in the form of a message
+    isInvertedMedia?: true;
   } & WithTabId;
   sendInviteMessages: {
     chatId: string;
@@ -2905,6 +2908,7 @@ export interface ActionPayloads {
   updateAttachmentSettings: {
     shouldCompress?: boolean;
     shouldSendGrouped?: boolean;
+    isInvertedMedia?: true;
   };
 
   updateArchiveSettings: {

src/lib/gramjs/tl/api.d.ts

@@ -14151,7 +14151,7 @@ namespace Api {
       clearDraft?: true;
       noforwards?: true;
       updateStickersetsOrder?: true;
-      invertMedia?: true;
+      isInvertedMedia?: true;
       peer: Api.TypeInputPeer;
       replyTo?: Api.TypeInputReplyTo;
       media: Api.TypeInputMedia;

src/styles/icons.scss

@@ -153,119 +153,121 @@ $icons-map: (
   "monospace": "\f17a",
   "more-circle": "\f17b",
   "more": "\f17c",
-  "mute": "\f17d",
+  "move-caption-down": "\f17d",
-  "muted": "\f17e",
+  "move-caption-up": "\f17e",
-  "my-notes": "\f17f",
+  "mute": "\f17f",
-  "new-chat-filled": "\f180",
+  "muted": "\f180",
-  "next": "\f181",
+  "my-notes": "\f181",
-  "nochannel": "\f182",
+  "new-chat-filled": "\f182",
-  "noise-suppression": "\f183",
+  "next": "\f183",
-  "non-contacts": "\f184",
+  "nochannel": "\f184",
-  "one-filled": "\f185",
+  "noise-suppression": "\f185",
-  "open-in-new-tab": "\f186",
+  "non-contacts": "\f186",
-  "password-off": "\f187",
+  "one-filled": "\f187",
-  "pause": "\f188",
+  "open-in-new-tab": "\f188",
-  "permissions": "\f189",
+  "password-off": "\f189",
-  "phone-discard-outline": "\f18a",
+  "pause": "\f18a",
-  "phone-discard": "\f18b",
+  "permissions": "\f18b",
-  "phone": "\f18c",
+  "phone-discard-outline": "\f18c",
-  "photo": "\f18d",
+  "phone-discard": "\f18d",
-  "pin-badge": "\f18e",
+  "phone": "\f18e",
-  "pin-list": "\f18f",
+  "photo": "\f18f",
-  "pin": "\f190",
+  "pin-badge": "\f190",
-  "pinned-chat": "\f191",
+  "pin-list": "\f191",
-  "pinned-message": "\f192",
+  "pin": "\f192",
-  "pip": "\f193",
+  "pinned-chat": "\f193",
-  "play-story": "\f194",
+  "pinned-message": "\f194",
-  "play": "\f195",
+  "pip": "\f195",
-  "poll": "\f196",
+  "play-story": "\f196",
-  "previous": "\f197",
+  "play": "\f197",
-  "privacy-policy": "\f198",
+  "poll": "\f198",
-  "quote-text": "\f199",
+  "previous": "\f199",
-  "quote": "\f19a",
+  "privacy-policy": "\f19a",
-  "readchats": "\f19b",
+  "quote-text": "\f19b",
-  "recent": "\f19c",
+  "quote": "\f19c",
-  "reload": "\f19d",
+  "readchats": "\f19d",
-  "remove-quote": "\f19e",
+  "recent": "\f19e",
-  "remove": "\f19f",
+  "reload": "\f19f",
-  "reopen-topic": "\f1a0",
+  "remove-quote": "\f1a0",
-  "replace": "\f1a1",
+  "remove": "\f1a1",
-  "replies": "\f1a2",
+  "reopen-topic": "\f1a2",
-  "reply-filled": "\f1a3",
+  "replace": "\f1a3",
-  "reply": "\f1a4",
+  "replies": "\f1a4",
-  "revenue-split": "\f1a5",
+  "reply-filled": "\f1a5",
-  "revote": "\f1a6",
+  "reply": "\f1a6",
-  "save-story": "\f1a7",
+  "revenue-split": "\f1a7",
-  "saved-messages": "\f1a8",
+  "revote": "\f1a8",
-  "schedule": "\f1a9",
+  "save-story": "\f1a9",
-  "search": "\f1aa",
+  "saved-messages": "\f1aa",
-  "select": "\f1ab",
+  "schedule": "\f1ab",
-  "send-outline": "\f1ac",
+  "search": "\f1ac",
-  "send": "\f1ad",
+  "select": "\f1ad",
-  "settings-filled": "\f1ae",
+  "send-outline": "\f1ae",
-  "settings": "\f1af",
+  "send": "\f1af",
-  "share-filled": "\f1b0",
+  "settings-filled": "\f1b0",
-  "share-screen-outlined": "\f1b1",
+  "settings": "\f1b1",
-  "share-screen-stop": "\f1b2",
+  "share-filled": "\f1b2",
-  "share-screen": "\f1b3",
+  "share-screen-outlined": "\f1b3",
-  "show-message": "\f1b4",
+  "share-screen-stop": "\f1b4",
-  "sidebar": "\f1b5",
+  "share-screen": "\f1b5",
-  "skip-next": "\f1b6",
+  "show-message": "\f1b6",
-  "skip-previous": "\f1b7",
+  "sidebar": "\f1b7",
-  "smallscreen": "\f1b8",
+  "skip-next": "\f1b8",
-  "smile": "\f1b9",
+  "skip-previous": "\f1b9",
-  "sort": "\f1ba",
+  "smallscreen": "\f1ba",
-  "speaker-muted-story": "\f1bb",
+  "smile": "\f1bb",
-  "speaker-outline": "\f1bc",
+  "sort": "\f1bc",
-  "speaker-story": "\f1bd",
+  "speaker-muted-story": "\f1bd",
-  "speaker": "\f1be",
+  "speaker-outline": "\f1be",
-  "spoiler-disable": "\f1bf",
+  "speaker-story": "\f1bf",
-  "spoiler": "\f1c0",
+  "speaker": "\f1c0",
-  "sport": "\f1c1",
+  "spoiler-disable": "\f1c1",
-  "star": "\f1c2",
+  "spoiler": "\f1c2",
-  "stats": "\f1c3",
+  "sport": "\f1c3",
-  "stealth-future": "\f1c4",
+  "star": "\f1c4",
-  "stealth-past": "\f1c5",
+  "stats": "\f1c5",
-  "stickers": "\f1c6",
+  "stealth-future": "\f1c6",
-  "stop-raising-hand": "\f1c7",
+  "stealth-past": "\f1c7",
-  "stop": "\f1c8",
+  "stickers": "\f1c8",
-  "story-caption": "\f1c9",
+  "stop-raising-hand": "\f1c9",
-  "story-expired": "\f1ca",
+  "stop": "\f1ca",
-  "story-priority": "\f1cb",
+  "story-caption": "\f1cb",
-  "story-reply": "\f1cc",
+  "story-expired": "\f1cc",
-  "strikethrough": "\f1cd",
+  "story-priority": "\f1cd",
-  "tag-add": "\f1ce",
+  "story-reply": "\f1ce",
-  "tag-crossed": "\f1cf",
+  "strikethrough": "\f1cf",
-  "tag-filter": "\f1d0",
+  "tag-add": "\f1d0",
-  "tag-name": "\f1d1",
+  "tag-crossed": "\f1d1",
-  "tag": "\f1d2",
+  "tag-filter": "\f1d2",
-  "timer": "\f1d3",
+  "tag-name": "\f1d3",
-  "transcribe": "\f1d4",
+  "tag": "\f1d4",
-  "truck": "\f1d5",
+  "timer": "\f1d5",
-  "unarchive": "\f1d6",
+  "transcribe": "\f1d6",
-  "underlined": "\f1d7",
+  "truck": "\f1d7",
-  "unlock-badge": "\f1d8",
+  "unarchive": "\f1d8",
-  "unlock": "\f1d9",
+  "underlined": "\f1d9",
-  "unmute": "\f1da",
+  "unlock-badge": "\f1da",
-  "unpin": "\f1db",
+  "unlock": "\f1db",
-  "unread": "\f1dc",
+  "unmute": "\f1dc",
-  "up": "\f1dd",
+  "unpin": "\f1dd",
-  "user-filled": "\f1de",
+  "unread": "\f1de",
-  "user-online": "\f1df",
+  "up": "\f1df",
-  "user": "\f1e0",
+  "user-filled": "\f1e0",
-  "video-outlined": "\f1e1",
+  "user-online": "\f1e1",
-  "video-stop": "\f1e2",
+  "user": "\f1e2",
-  "video": "\f1e3",
+  "video-outlined": "\f1e3",
-  "view-once": "\f1e4",
+  "video-stop": "\f1e4",
-  "voice-chat": "\f1e5",
+  "video": "\f1e5",
-  "volume-1": "\f1e6",
+  "view-once": "\f1e6",
-  "volume-2": "\f1e7",
+  "voice-chat": "\f1e7",
-  "volume-3": "\f1e8",
+  "volume-1": "\f1e8",
-  "web": "\f1e9",
+  "volume-2": "\f1e9",
-  "webapp": "\f1ea",
+  "volume-3": "\f1ea",
-  "word-wrap": "\f1eb",
+  "web": "\f1eb",
-  "zoom-in": "\f1ec",
+  "webapp": "\f1ec",
-  "zoom-out": "\f1ed",
+  "word-wrap": "\f1ed",
+  "zoom-in": "\f1ee",
+  "zoom-out": "\f1ef",
 );
 
 .icon-active-sessions::before {
@@ -640,6 +642,12 @@ $icons-map: (
 .icon-more::before {
   content: map.get($icons-map, "more");
 }
+.icon-move-caption-down::before {
+  content: map.get($icons-map, "move-caption-down");
+}
+.icon-move-caption-up::before {
+  content: map.get($icons-map, "move-caption-up");
+}
 .icon-mute::before {
   content: map.get($icons-map, "mute");
 }

src/types/icons/font.ts

@@ -123,6 +123,8 @@ export type FontIconName =
   | 'monospace'
   | 'more-circle'
   | 'more'
+  | 'move-caption-down'
+  | 'move-caption-up'
   | 'mute'
   | 'muted'
   | 'my-notes'