Avatar: Hide "Report" button for personal photos (#5060)

src/components/mediaViewer/MediaViewer.tsx

@@ -136,7 +136,7 @@ const MediaViewer = ({
   const isGhostAnimation = Boolean(withAnimation && !shouldSkipHistoryAnimations);
 
   /* Controls */
-  const [isReportModalOpen, openReportModal, closeReportModal] = useFlag();
+  const [isReportAvatarModalOpen, openReportAvatarModal, closeReportAvatarModal] = useFlag();
 
   const currentItem = getMediaViewerItem({
     message, avatarOwner, standaloneMedia, profilePhotos, mediaIndex, sponsoredMessage,
@@ -155,7 +155,13 @@ const MediaViewer = ({
     media, isAvatar: Boolean(avatarOwner), origin, delay: isGhostAnimation && ANIMATION_DURATION,
   });
 
-  const canReport = avatarOwner && !isChatWithSelf;
+  const canReportAvatar = (() => {
+    if (isChatWithSelf) return false;
+    if (currentItem?.type !== 'avatar' || !avatarOwner) return false;
+    const info = currentItem.profilePhotos;
+    if (media === info.personalPhoto) return false;
+    return true;
+  })();
   const isVisible = !isHidden && isOpen;
 
   const messageMediaIds = useMemo(() => {
@@ -434,15 +440,15 @@ const MediaViewer = ({
           isVideo={isVideo}
           item={currentItem}
           canUpdateMedia={canUpdateMedia}
-          canReport={canReport}
+          canReportAvatar={canReportAvatar}
           onBeforeDelete={handleBeforeDelete}
-          onReport={openReportModal}
+          onReportAvatar={openReportAvatarModal}
           onCloseMediaViewer={handleClose}
           onForward={handleForward}
         />
         <ReportModal
-          isOpen={isReportModalOpen}
-          onClose={closeReportModal}
+          isOpen={isReportAvatarModalOpen}
+          onClose={closeReportAvatarModal}
           subject="media"
           photo={avatar}
           peerId={avatarOwner?.id}

src/components/mediaViewer/MediaViewerActions.tsx

@@ -54,9 +54,9 @@ type OwnProps = {
   mediaData?: string;
   isVideo: boolean;
   canUpdateMedia?: boolean;
-  canReport?: boolean;
+  canReportAvatar?: boolean;
   activeDownloads?: ActiveDownloads;
-  onReport: NoneToVoidFunction;
+  onReportAvatar: NoneToVoidFunction;
   onBeforeDelete: NoneToVoidFunction;
   onCloseMediaViewer: NoneToVoidFunction;
   onForward: NoneToVoidFunction;
@@ -68,13 +68,13 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
   isVideo,
   isChatProtected,
   isProtected,
-  canReport,
+  canReportAvatar,
   canDelete,
   canUpdate,
   messageListType,
   activeDownloads,
   origin,
-  onReport,
+  onReportAvatar: onReport,
   onCloseMediaViewer,
   onBeforeDelete,
   onForward,
@@ -247,7 +247,7 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
       }
     }
 
-    if (canReport) {
+    if (canReportAvatar) {
       menuItems.push({
         icon: 'flag',
         onClick: onReport,
@@ -335,7 +335,7 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
       >
         <i className="icon icon-zoom-in" />
       </Button>
-      {canReport && (
+      {canReportAvatar && (
         <Button
           round
           size="smaller"

src/components/mediaViewer/SenderInfo.tsx

@@ -71,13 +71,15 @@ const SenderInfo: FC<OwnProps & StateProps> = ({
     const profilePhotos = item.type === 'avatar' ? item.profilePhotos : undefined;
     const avatar = profilePhotos?.photos[item.mediaIndex!];
     const isFallbackAvatar = avatar?.id === profilePhotos?.fallbackPhoto?.id;
+    const isPersonalAvatar = avatar?.id === profilePhotos?.personalPhoto?.id;
     const date = item.type === 'message' ? item.message.date : avatar?.date;
     if (!date) return undefined;
 
     const formattedDate = formatMediaDateTime(lang, date * 1000, true);
     const count = profilePhotos?.count
       && (profilePhotos.count + (profilePhotos?.fallbackPhoto ? 1 : 0));
-    const countText = count && lang('Of', [item.mediaIndex! + 1, count]);
+    const currentIndex = item.mediaIndex! + 1 + (profilePhotos?.personalPhoto ? -1 : 0);
+    const countText = count && lang('Of', [currentIndex, count]);
 
     const parts: string[] = [];
     if (avatar) {
@@ -85,13 +87,16 @@ const SenderInfo: FC<OwnProps & StateProps> = ({
       const isChannel = chat && isChatChannel(chat);
       const isGroup = chat && isChatGroup(chat);
       parts.push(lang(
-        isFallbackAvatar ? 'lng_mediaview_profile_public_photo'
-          : isChannel ? 'lng_mediaview_channel_photo'
-            : isGroup ? 'lng_mediaview_group_photo' : 'lng_mediaview_profile_photo',
+        isPersonalAvatar ? 'lng_mediaview_profile_photo_by_you'
+          : isFallbackAvatar ? 'lng_mediaview_profile_public_photo'
+            : isChannel ? 'lng_mediaview_channel_photo'
+              : isGroup ? 'lng_mediaview_group_photo' : 'lng_mediaview_profile_photo',
       ));
     }
 
-    if (countText) parts.push(countText);
+    if (countText && !isPersonalAvatar && !isFallbackAvatar) {
+      parts.push(countText);
+    }
 
     parts.push(formattedDate);