Audio Player, Message Context Menu: Support "Add to Profile" for audio (#7225)

Author: Ajaxy

src/api/gramjs/gramjsBuilders/index.ts

@@ -2,6 +2,7 @@ import { Api as GramJs } from '../../../lib/gramjs';
 import { generateRandomBigInt, generateRandomBytes, readBigIntFromBuffer } from '../../../lib/gramjs/Helpers';
 
 import type {
+  ApiAudio,
   ApiBirthday,
   ApiBotApp,
   ApiChatAdminRights,
@@ -192,7 +193,7 @@ export function buildInputStickerSetShortName(shortName: string) {
   });
 }
 
-export function buildInputDocument(media: ApiSticker | ApiVideo | ApiDocument) {
+export function buildInputDocument(media: ApiAudio | ApiSticker | ApiVideo | ApiDocument) {
   if (!media.id) {
     return undefined;
   }

src/api/gramjs/methods/account.ts

@@ -1,11 +1,12 @@
 import { Api as GramJs } from '../../../lib/gramjs';
 
 import type {
-  ApiPeer, ApiPhoto, ApiProfileTab, ApiReportReason,
+  ApiAudio, ApiPeer, ApiPhoto, ApiProfileTab, ApiReportReason,
 } from '../../types';
 
 import { buildApiChatLink } from '../apiBuilders/misc';
 import {
+  buildInputDocument,
   buildInputPeer,
   buildInputPhoto,
   buildInputProfileTab,
@@ -138,3 +139,26 @@ export function setAccountMainProfileTab({ tab }: { tab: ApiProfileTab }) {
     shouldReturnTrue: true,
   });
 }
+
+export async function fetchSavedMusicIds() {
+  const result = await invokeRequest(new GramJs.account.GetSavedMusicIds({
+    hash: DEFAULT_PRIMITIVES.BIGINT,
+  }));
+  if (!(result instanceof GramJs.account.SavedMusicIds)) {
+    return undefined;
+  }
+
+  return result.ids.map(String);
+}
+
+export function saveMusic({ audio, shouldRemove }: { audio: ApiAudio; shouldRemove?: boolean }) {
+  const id = buildInputDocument(audio);
+  if (!id) return undefined;
+
+  return invokeRequest(new GramJs.account.SaveMusic({
+    id,
+    unsave: shouldRemove || undefined,
+  }), {
+    shouldReturnTrue: true,
+  });
+}

src/assets/font-icons/add-music.svg

@@ -1529,6 +1529,10 @@
 "AudioPlayerPrevious" = "Previous track";
 "AudioPlayerNext" = "Next track";
 "AudioPlayerClose" = "Close";
+"AudioAddToProfile" = "Add to Profile";
+"AudioRemoveFromProfile" = "Remove from Profile";
+"AudioSaveToMyProfileSaved" = "Audio added to your profile.";
+"AudioSaveToMyProfileUnsaved" = "Audio removed from your profile.";
 "DeleteForMeDescription" = "This will delete them just for you, not for other participants in the chat";
 "DeleteForEveryoneDescription" = "This will delete them for everyone in this chat";
 "AriaSearchInChat" = "Search in chat";

src/assets/font-icons/profile-music.svg

@@ -1,4 +1,3 @@
-import type { FC } from '../../../lib/teact/teact';
 import {
   memo, useEffect, useMemo, useState,
 } from '../../../lib/teact/teact';
@@ -33,6 +32,7 @@ import {
   areReactionsEmpty,
   getCanPostInChat,
   getIsDownloading,
+  getMessageAudio,
   getMessageVideo,
   getUserFullName,
   hasMessageTtl,
@@ -172,12 +172,14 @@ type StateProps = {
   savedDialogId?: string;
   noForwardsMyEnabled?: boolean;
   noForwardsPeerEnabled?: boolean;
+  savedMusicById?: Record<string, true>;
+  isSavedMusicLoading?: boolean;
 };
 
 const selection = window.getSelection();
 const UNQUOTABLE_OFFSET = -1;
 
-const ContextMenuContainer: FC<OwnProps & StateProps> = ({
+const ContextMenuContainer = ({
   threadId,
   availableReactions,
   topReactions,
@@ -247,9 +249,11 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
   savedDialogId,
   noForwardsMyEnabled,
   noForwardsPeerEnabled,
+  savedMusicById,
+  isSavedMusicLoading,
   onClose,
   onCloseAnimationEnd,
-}) => {
+}: OwnProps & StateProps) => {
   const {
     openThread,
     updateDraftReplyInfo,
@@ -291,6 +295,8 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
     showNotification,
     setSettingOption,
     loadRichMessage,
+    loadSavedMusicIds,
+    toggleMusicInProfile,
   } = getActions();
 
   const oldLang = useOldLang();
@@ -319,6 +325,17 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
   // `undefined` indicates that emoji are present and loading
   const hasCustomEmoji = !message.isEphemeral
     && (customEmojiSetsInfo === undefined || Boolean(customEmojiSetsInfo.length));
+  const audio = getMessageAudio(message);
+  const isLocalMessage = isMessageLocal(message);
+  const canManageMusicInProfile = Boolean(audio && !isLocalMessage);
+  const isMusicProfileStatusLoaded = Boolean(savedMusicById);
+  const isMusicSaved = Boolean(audio && savedMusicById?.[audio.id]);
+
+  useEffect(() => {
+    if (isOpen && audio && !isLocalMessage && !savedMusicById && !isSavedMusicLoading) {
+      loadSavedMusicIds();
+    }
+  }, [audio, isLocalMessage, isOpen, isSavedMusicLoading, loadSavedMusicIds, savedMusicById]);
 
   useEffect(() => {
     if (canShowSeenBy && isOpen) {
@@ -661,6 +678,11 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
     closeMenu();
   });
 
+  const handleToggleMusicInProfile = useLastCallback(() => {
+    toggleMusicInProfile({ audio: audio! });
+    closeMenu();
+  });
+
   const handleToggleReaction = useLastCallback((reaction: ApiReaction) => {
     if (isInSavedMessages && !isCurrentUserPremium) {
       openPremiumModal({
@@ -791,6 +813,10 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
         canSelect={canSelect}
         canDownload={canDownload}
         canSaveGif={canSaveGif}
+        canManageMusicInProfile={canManageMusicInProfile}
+        isMusicProfileStatusLoaded={isMusicProfileStatusLoaded}
+        isMusicProfileActionLoading={isSavedMusicLoading}
+        isMusicSaved={isMusicSaved}
         canRevote={canRevote}
         canClosePoll={canClosePoll}
         canShowSeenBy={canShowSeenBy}
@@ -830,6 +856,7 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
         onCopyNumber={handleCopyNumber}
         onDownload={handleDownloadClick}
         onSaveGif={handleSaveGif}
+        onToggleMusicInProfile={handleToggleMusicInProfile}
         onCancelVote={handleCancelVote}
         onClosePoll={openClosePollDialog}
         onShowSeenBy={handleOpenSeenByModal}
@@ -1058,6 +1085,8 @@ export default memo(withGlobal<OwnProps>(
       webPage,
       noForwardsMyEnabled: userFullInfo?.noForwardsMyEnabled,
       noForwardsPeerEnabled: userFullInfo?.noForwardsPeerEnabled,
+      savedMusicById: global.users.savedMusicById,
+      isSavedMusicLoading: global.users.isSavedMusicLoading,
     };
   },
 )(ContextMenuContainer));

src/assets/font-icons/remove-music.svg

@@ -70,6 +70,32 @@
     padding-inline-start: 1rem;
   }
 
+  .profile-music-menu-item-transition {
+    height: 3rem;
+  }
+
+  &.compact .profile-music-menu-item-transition {
+    height: 2.25rem;
+  }
+
+  .profile-music-menu-icon-placeholder {
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-inline-end: 2rem;
+  }
+
+  &.compact .profile-music-menu-icon-placeholder {
+    width: 1.25rem;
+    margin-inline: 0.5rem 1.25rem;
+  }
+
+  .profile-music-menu-label-placeholder {
+    width: 8rem;
+    height: 0.75rem;
+    border-radius: 0.375rem;
+  }
+
   .ReactionSelector {
     position: absolute;
     top: 0;

src/assets/localization/fallback.strings

@@ -1,4 +1,3 @@
-import type { FC } from '../../../lib/teact/teact';
 import {
   memo, useEffect, useMemo, useRef,
 } from '../../../lib/teact/teact';
@@ -50,6 +49,7 @@ import MenuItem from '../../ui/MenuItem';
 import MenuSeparator from '../../ui/MenuSeparator';
 import NestedMenuItem from '../../ui/NestedMenuItem';
 import Skeleton from '../../ui/placeholder/Skeleton';
+import Transition from '../../ui/Transition';
 import AutoDeleteTimeMenuItem from './AutoDeleteTimeMenuItem';
 import LastEditTimeMenuItem from './LastEditTimeMenuItem';
 import ReactionSelector from './reactions/ReactionSelector';
@@ -104,6 +104,10 @@ type OwnProps = {
   isCurrentUserPremium?: boolean;
   canDownload?: boolean;
   canSaveGif?: boolean;
+  canManageMusicInProfile?: boolean;
+  isMusicProfileStatusLoaded?: boolean;
+  isMusicProfileActionLoading?: boolean;
+  isMusicSaved?: boolean;
   canRevote?: boolean;
   canClosePoll?: boolean;
   isDownloading?: boolean;
@@ -137,6 +141,7 @@ type OwnProps = {
   onCopyNumber?: NoneToVoidFunction;
   onDownload?: NoneToVoidFunction;
   onSaveGif?: NoneToVoidFunction;
+  onToggleMusicInProfile?: NoneToVoidFunction;
   onCancelVote?: NoneToVoidFunction;
   onClosePoll?: NoneToVoidFunction;
   onShowSeenBy?: NoneToVoidFunction;
@@ -158,7 +163,7 @@ const SCROLLBAR_WIDTH = 10;
 const REACTION_SELECTOR_WIDTH_REM = 19.25;
 const ANIMATION_DURATION = 200;
 
-const MessageContextMenu: FC<OwnProps> = ({
+const MessageContextMenu = ({
   isReactionPickerOpen,
   availableReactions,
   topReactions,
@@ -199,6 +204,10 @@ const MessageContextMenu: FC<OwnProps> = ({
   canSelect,
   canDownload,
   canSaveGif,
+  canManageMusicInProfile,
+  isMusicProfileStatusLoaded,
+  isMusicProfileActionLoading,
+  isMusicSaved,
   canRevote,
   canClosePoll,
   canTranslate,
@@ -237,6 +246,7 @@ const MessageContextMenu: FC<OwnProps> = ({
   onCopyNumber,
   onDownload,
   onSaveGif,
+  onToggleMusicInProfile,
   onCancelVote,
   onClosePoll,
   onShowSeenBy,
@@ -253,7 +263,7 @@ const MessageContextMenu: FC<OwnProps> = ({
   userFullName,
   canGift,
   noForwardsNotice,
-}) => {
+}: OwnProps) => {
   const {
     showNotification, openStickerSet, openCustomEmojiSets, loadStickers, openGiftModal,
   } = getActions();
@@ -550,6 +560,28 @@ const MessageContextMenu: FC<OwnProps> = ({
         {canPin && <MenuItem icon="pin" onClick={onPin}>{oldLang('DialogPin')}</MenuItem>}
         {canUnpin && <MenuItem icon="unpin" onClick={onUnpin}>{oldLang('DialogUnpin')}</MenuItem>}
         {canSaveGif && <MenuItem icon="gifs" onClick={onSaveGif}>{oldLang('lng_context_save_gif')}</MenuItem>}
+        {canManageMusicInProfile && (
+          <Transition
+            activeKey={!isMusicProfileStatusLoaded ? 0 : (isMusicSaved ? 2 : 1)}
+            name="fade"
+            className="profile-music-menu-item-transition"
+            shouldCleanup
+          >
+            {!isMusicProfileStatusLoaded ? (
+              <MenuItem customIcon={<span className="profile-music-menu-icon-placeholder" />} disabled>
+                <Skeleton className="profile-music-menu-label-placeholder" animation="wave" />
+              </MenuItem>
+            ) : (
+              <MenuItem
+                icon={isMusicSaved ? 'remove-music' : 'add-music'}
+                disabled={isMusicProfileActionLoading}
+                onClick={onToggleMusicInProfile}
+              >
+                {lang(isMusicSaved ? 'AudioRemoveFromProfile' : 'AudioAddToProfile')}
+              </MenuItem>
+            )}
+          </Transition>
+        )}
         {canRevote && <MenuItem icon="revote" onClick={onCancelVote}>{oldLang('lng_polls_retract')}</MenuItem>}
         {canClosePoll && <MenuItem icon="stop" onClick={onClosePoll}>{oldLang('lng_polls_stop')}</MenuItem>}
         {canDownload && (