Shared Media: Add Voice tab (#1437)

src/api/types/messages.ts

@@ -288,7 +288,7 @@ export type ApiReplyKeyboard = {
   [K in 'inlineButtons' | 'keyboardButtons']?: ApiKeyboardButtons;
 };
 
-export type ApiMessageSearchType = 'text' | 'media' | 'documents' | 'links' | 'audio' | 'profilePhoto';
+export type ApiMessageSearchType = 'text' | 'media' | 'documents' | 'links' | 'audio' | 'voice' | 'profilePhoto';
 export type ApiGlobalMessageSearchType = 'text' | 'media' | 'documents' | 'links' | 'audio' | 'voice';
 
 export type ApiReportReason = 'spam' | 'violence' | 'pornography' | 'childAbuse'

src/components/common/Audio.tsx

@@ -279,7 +279,7 @@ const Audio: FC<OwnProps> = ({
 
   const contentClassName = buildClassName('content', withSeekline && 'with-seekline');
 
-  function renderSearchResult() {
+  function renderWithTitle() {
     return (
       <>
         <div className={contentClassName}>
@@ -355,12 +355,13 @@ const Audio: FC<OwnProps> = ({
           <i className={isDownloadStarted ? 'icon-close' : 'icon-arrow-down'} />
         </Button>
       )}
-      {origin === AudioOrigin.Search && renderSearchResult()}
+      {origin === AudioOrigin.Search && renderWithTitle()}
       {origin !== AudioOrigin.Search && audio && renderAudio(
         lang, audio, duration, isPlaying, playProgress, bufferedProgress, seekerRef, (isDownloadStarted || isUploading),
         date, transferProgress, onDateClick ? handleDateClick : undefined,
       )}
-      {origin !== AudioOrigin.Search && voice && renderVoice(voice, renderedWaveform, playProgress, isMediaUnread)}
+      {origin === AudioOrigin.SharedMedia && voice && renderWithTitle()}
+      {origin === AudioOrigin.Inline && voice && renderVoice(voice, renderedWaveform, playProgress, isMediaUnread)}
     </div>
   );
 };

src/components/right/Profile.scss

@@ -57,7 +57,7 @@
     z-index: 1;
 
     .Tab {
-      padding: 1rem .25rem;
+      padding: 1rem .75rem;
       i {
         bottom: -1rem;
       }
@@ -105,7 +105,8 @@
       }
     }
 
-    &.audio-list {
+    &.audio-list,
+    &.voice-list {
       padding: 1.25rem;
 
       & .Audio {

src/components/right/Profile.tsx

@@ -7,7 +7,7 @@ import {
   ApiMessage,
   ApiChatMember,
   ApiUser,
-  MAIN_THREAD_ID,
+  MAIN_THREAD_ID, ApiChat,
 } from '../../api/types';
 import { GlobalActions } from '../../global/types';
 import {
@@ -33,6 +33,7 @@ import {
 } from '../../modules/selectors';
 import { pick } from '../../util/iteratees';
 import { captureEvents, SwipeDirection } from '../../util/captureEvents';
+import { getSenderName } from '../left/search/helpers/getSenderName';
 import useCacheBuster from '../../hooks/useCacheBuster';
 import useProfileViewportIds from './hooks/useProfileViewportIds';
 import useProfileState from './hooks/useProfileState';
@@ -78,7 +79,8 @@ type StateProps = {
   canAddMembers?: boolean;
   canDeleteMembers?: boolean;
   members?: ApiChatMember[];
-  usersById?: Record<number, ApiUser>;
+  chatsById: Record<number, ApiChat>;
+  usersById: Record<number, ApiUser>;
   isRightColumnShown: boolean;
   isRestricted?: boolean;
   lastSyncTime?: number;
@@ -95,6 +97,7 @@ const TABS = [
   { type: 'documents', title: 'SharedFilesTab2' },
   { type: 'links', title: 'SharedLinksTab2' },
   { type: 'audio', title: 'SharedMusicTab2' },
+  { type: 'voice', title: 'SharedVoiceTab2' },
 ];
 
 const HIDDEN_RENDER_DELAY = 1000;
@@ -116,6 +119,7 @@ const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
   canDeleteMembers,
   members,
   usersById,
+  chatsById,
   isRightColumnShown,
   isRestricted,
   lastSyncTime,
@@ -272,6 +276,7 @@ const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
         case 'links':
           text = lang('lng_media_link_empty_search');
           break;
+        case 'voice':
         case 'audio':
           text = lang('lng_media_song_empty_search');
           break;
@@ -333,6 +338,21 @@ const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
               onDateClick={handleMessageFocus}
             />
           ))
+        ) : resultType === 'voice' ? (
+          viewportIds!.map((id) => chatMessages[id] && (
+            <Audio
+              key={id}
+              theme={theme}
+              message={chatMessages[id]}
+              senderTitle={getSenderName(lang, chatMessages[id], chatsById, usersById)}
+              origin={AudioOrigin.SharedMedia}
+              date={chatMessages[id].date}
+              lastSyncTime={lastSyncTime}
+              className="scroll-item"
+              onPlay={handlePlayAudio}
+              onDateClick={handleMessageFocus}
+            />
+          ))
         ) : resultType === 'members' ? (
           viewportIds!.map((id, i) => (
             <ListItem
@@ -383,7 +403,6 @@ const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
             {renderSharedMedia}
           </Transition>
           <TabList big activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} />
-
         </div>
       )}
 
@@ -434,6 +453,7 @@ export default memo(withGlobal<OwnProps>(
     const { foundIds } = (resultsByType && mediaSearchType && resultsByType[mediaSearchType]) || {};
 
     const { byId: usersById } = global.users;
+    const { byId: chatsById } = global.chats;
 
     const isGroup = chat && isChatGroup(chat);
     const isChannel = chat && isChatChannel(chat);
@@ -466,10 +486,9 @@ export default memo(withGlobal<OwnProps>(
       isRestricted: chat?.isRestricted,
       lastSyncTime: global.lastSyncTime,
       serverTimeOffset: global.serverTimeOffset,
-      ...(hasMembersTab && members && {
+      usersById,
-        members,
+      chatsById,
-        usersById,
+      ...(hasMembersTab && members && { members }),
-      }),
     };
   },
   (setGlobal, actions): DispatchProps => pick(actions, [

src/components/right/hooks/useProfileViewportIds.ts

@@ -52,6 +52,10 @@ export default function useProfileViewportIds(
     'audio', resultType, searchMessages, lastSyncTime, chatMessages, foundIds,
   );
 
+  const [voiceViewportIds, getMoreVoices, noProfileInfoForVoices] = useInfiniteScrollForSharedMedia(
+    'voice', resultType, searchMessages, lastSyncTime, chatMessages, foundIds,
+  );
+
   let viewportIds: number[] | undefined;
   let getMore: AnyToVoidFunction | undefined;
   let noProfileInfo = false;
@@ -82,6 +86,11 @@ export default function useProfileViewportIds(
       getMore = getMoreAudio;
       noProfileInfo = noProfileInfoForAudio;
       break;
+    case 'voice':
+      viewportIds = voiceViewportIds;
+      getMore = getMoreVoices;
+      noProfileInfo = noProfileInfoForVoices;
+      break;
   }
 
   return [resultType, viewportIds, getMore, noProfileInfo] as const;

src/modules/helpers/messageMedia.ts

@@ -365,6 +365,10 @@ export function getMessageContentIds(
       validator = getMessageAudio;
       break;
 
+    case 'voice':
+      validator = getMessageVoice;
+      break;
+
     case 'inlineMedia':
       validator = (message: ApiMessage) => {
         const video = getMessageVideo(message);

src/types/index.ts

@@ -270,8 +270,8 @@ export enum NewChatMembersProgress {
   Loading,
 }
 
-export type ProfileTabType = 'members' | 'media' | 'documents' | 'links' | 'audio';
+export type ProfileTabType = 'members' | 'media' | 'documents' | 'links' | 'audio' | 'voice';
-export type SharedMediaType = 'media' | 'documents' | 'links' | 'audio';
+export type SharedMediaType = 'media' | 'documents' | 'links' | 'audio' | 'voice';
 export type ApiPrivacyKey = 'phoneNumber' | 'lastSeen' | 'profilePhoto' | 'forwards' | 'chatInvite';
 export type PrivacyVisibility = 'everybody' | 'contacts' | 'nonContacts' | 'nobody';