Paid media: Follow up (#4797)

src/components/common/Document.tsx

@@ -6,7 +6,6 @@ import { getActions } from '../../global';
 import type { ApiDocument, ApiMessage } from '../../api/types';
 import type { ObserveFn } from '../../hooks/useIntersectionObserver';
 
-import { SUPPORTED_IMAGE_CONTENT_TYPES, SUPPORTED_VIDEO_CONTENT_TYPES } from '../../config';
 import {
   getDocumentMediaHash,
   getMediaFormat,
@@ -121,9 +120,7 @@ const Document = ({
   const localBlobUrl = hasPreview ? document.previewBlobUrl : undefined;
   const previewData = useMedia(getDocumentMediaHash(document, 'pictogram'), !isIntersecting);
 
-  const withMediaViewer = onMediaClick && Boolean(document.mediaType) && (
-    SUPPORTED_VIDEO_CONTENT_TYPES.has(document.mimeType) || SUPPORTED_IMAGE_CONTENT_TYPES.has(document.mimeType)
-  );
+  const withMediaViewer = onMediaClick && document.innerMediaType;
 
   const handleDownload = useLastCallback(() => {
     downloadMedia({ media: document });

src/components/mediaViewer/MediaViewerContent.tsx

@@ -97,7 +97,7 @@ const MediaViewerContent = ({
 
   if (!media) return undefined;
 
-  if (item.type !== 'message') {
+  if (item.type === 'avatar') {
     if (!isVideoAvatar) {
       return (
         <div key={media.id} className="MediaViewerContent">
@@ -136,10 +136,9 @@ const MediaViewerContent = ({
     }
   }
 
-  if (!textMessage) return undefined;
-  const textParts = textMessage.content.action?.type === 'suggestProfilePhoto'
+  const textParts = textMessage && (textMessage.content.action?.type === 'suggestProfilePhoto'
     ? lang('Conversation.SuggestedPhotoTitle')
-    : renderMessageText({ message: textMessage, forcePlayback: true, isForMediaViewer: true });
+    : renderMessageText({ message: textMessage, forcePlayback: true, isForMediaViewer: true }));
 
   const hasFooter = Boolean(textParts);
   const posterSize = calculateMediaViewerDimensions(dimensions!, hasFooter, isVideo);

src/components/mediaViewer/helpers/getViewableMedia.ts

@@ -91,7 +91,6 @@ export default function getViewableMedia(params?: MediaViewerItem): ViewableMedi
   if (document && (isDocumentPhoto(document) || isDocumentVideo(document))) {
     return {
       media: document,
-      isSingle: true,
     };
   }
 

src/components/mediaViewer/hooks/useMediaProps.ts

@@ -21,6 +21,8 @@ import useBlurSync from '../../../hooks/useBlurSync';
 import useMedia from '../../../hooks/useMedia';
 import useMediaWithLoadProgress from '../../../hooks/useMediaWithLoadProgress';
 
+const FALLBACK_DIMENSIONS = AVATAR_FULL_DIMENSIONS;
+
 type UseMediaProps = {
   media?: MediaViewerMedia;
   isAvatar?: boolean;
@@ -111,7 +113,8 @@ export const useMediaProps = ({
     if (isVideo) {
       return getVideoDimensions(media);
     }
-    return undefined;
+
+    return FALLBACK_DIMENSIONS;
   }, [isAvatar, isDocument, isPhoto, isVideo, isVideoAvatar, media]);
 
   return {

src/components/middle/message/Album.scss

@@ -22,6 +22,10 @@
       margin: 0 0 0.3125rem;
       --border-bottom-left-radius: inherit;
       --border-bottom-right-radius: inherit;
+
+      + .message-paid-media-status {
+        margin-right: 0;
+      }
     }
   }
 

src/components/middle/message/PaidMediaOverlay.module.scss

@@ -7,6 +7,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+
+  z-index: 2;
 }
 
 .boughtStatus {

src/components/modals/stars/PaidMediaThumb.module.scss

@@ -12,8 +12,8 @@
 }
 
 .preview {
-  height: 2.5rem;
-  width: 2.5rem;
+  height: 3rem;
+  width: 3rem;
 
   grid-auto-columns: 0.25rem;
   grid-auto-rows: 0.25rem;

src/components/modals/stars/StarsBalanceModal.module.scss

@@ -178,6 +178,7 @@
 
 .stackedStar {
   @include mixins.filter-outline(0.0625rem, var(--_background-color));
+  transition: filter 0.25s ease-out;
 }
 
 .optionBottom {

src/global/helpers/messageSummary.ts

@@ -1,6 +1,6 @@
 import type { TeactNode } from '../../lib/teact/teact';
 
-import type { ApiMessage, MediaContent } from '../../api/types';
+import type { ApiMediaExtendedPreview, ApiMessage, MediaContent } from '../../api/types';
 import type { LangFn } from '../../hooks/useOldLang';
 import { ApiMessageEntityTypes } from '../../api/types';
 
@@ -70,9 +70,10 @@ export function getMessageSummaryEmoji(message: ApiMessage) {
     document,
     sticker,
     poll,
+    paidMedia,
   } = message.content;
 
-  if (message.groupedId || photo) {
+  if (message.groupedId || photo || paidMedia) {
     return '🖼';
   }
 
@@ -137,24 +138,34 @@ function getSummaryDescription(
     storyData,
     giveaway,
     giveawayResults,
+    paidMedia,
   } = mediaContent;
 
   let hasUsedTruncatedText = false;
   let summary: string | TeactNode | undefined;
 
-  if (message?.groupedId) {
+  const boughtExtendedMedia = paidMedia?.isBought && paidMedia.extendedMedia;
+  const previewExtendedMedia = paidMedia && !paidMedia.isBought
+    ? paidMedia.extendedMedia as ApiMediaExtendedPreview[] : undefined;
+
+  const isPaidMediaAlbum = paidMedia && paidMedia.extendedMedia.length > 1;
+  const isPaidMediaSingleVideo = !isPaidMediaAlbum
+    && (boughtExtendedMedia?.[0].video || previewExtendedMedia?.[0].duration);
+  const isPaidMediaSinglePhoto = !isPaidMediaAlbum && !isPaidMediaSingleVideo;
+
+  if (message?.groupedId || isPaidMediaAlbum) {
     hasUsedTruncatedText = true;
     summary = truncatedText || lang('lng_in_dlg_album');
   }
 
-  if (photo) {
+  if (photo || isPaidMediaSinglePhoto) {
     hasUsedTruncatedText = true;
     summary = truncatedText || lang('AttachPhoto');
   }
 
-  if (video) {
+  if (video || isPaidMediaSingleVideo) {
     hasUsedTruncatedText = true;
-    summary = truncatedText || lang(video.isGif ? 'AttachGif' : 'AttachVideo');
+    summary = truncatedText || lang(video?.isGif ? 'AttachGif' : 'AttachVideo');
   }
 
   if (sticker) {