From 490a98be8bad536a39a466a29378e478a9fd29eb Mon Sep 17 00:00:00 2001 From: zubiden <19638254+zubiden@users.noreply.github.com> Date: Tue, 6 Aug 2024 20:06:04 +0200 Subject: [PATCH] Paid media: Follow up (#4797) --- src/components/common/Document.tsx | 5 +--- .../mediaViewer/MediaViewerContent.tsx | 7 +++--- .../mediaViewer/helpers/getViewableMedia.ts | 1 - .../mediaViewer/hooks/useMediaProps.ts | 5 +++- src/components/middle/message/Album.scss | 4 ++++ .../message/PaidMediaOverlay.module.scss | 2 ++ .../modals/stars/PaidMediaThumb.module.scss | 4 ++-- .../stars/StarsBalanceModal.module.scss | 1 + src/global/helpers/messageSummary.ts | 23 ++++++++++++++----- 9 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/components/common/Document.tsx b/src/components/common/Document.tsx index 940bb8c88..ec657e1a1 100644 --- a/src/components/common/Document.tsx +++ b/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 }); diff --git a/src/components/mediaViewer/MediaViewerContent.tsx b/src/components/mediaViewer/MediaViewerContent.tsx index e2f556554..387b836cd 100644 --- a/src/components/mediaViewer/MediaViewerContent.tsx +++ b/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 (
@@ -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); diff --git a/src/components/mediaViewer/helpers/getViewableMedia.ts b/src/components/mediaViewer/helpers/getViewableMedia.ts index 0de8185c0..01f684595 100644 --- a/src/components/mediaViewer/helpers/getViewableMedia.ts +++ b/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, }; } diff --git a/src/components/mediaViewer/hooks/useMediaProps.ts b/src/components/mediaViewer/hooks/useMediaProps.ts index e9b29b698..2d8761ac2 100644 --- a/src/components/mediaViewer/hooks/useMediaProps.ts +++ b/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 { diff --git a/src/components/middle/message/Album.scss b/src/components/middle/message/Album.scss index 456df2206..1feb37d89 100644 --- a/src/components/middle/message/Album.scss +++ b/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; + } } } diff --git a/src/components/middle/message/PaidMediaOverlay.module.scss b/src/components/middle/message/PaidMediaOverlay.module.scss index 7099cdb56..fc124a491 100644 --- a/src/components/middle/message/PaidMediaOverlay.module.scss +++ b/src/components/middle/message/PaidMediaOverlay.module.scss @@ -7,6 +7,8 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + + z-index: 2; } .boughtStatus { diff --git a/src/components/modals/stars/PaidMediaThumb.module.scss b/src/components/modals/stars/PaidMediaThumb.module.scss index bf4f47305..207341a01 100644 --- a/src/components/modals/stars/PaidMediaThumb.module.scss +++ b/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; diff --git a/src/components/modals/stars/StarsBalanceModal.module.scss b/src/components/modals/stars/StarsBalanceModal.module.scss index e715260ad..8d4163fce 100644 --- a/src/components/modals/stars/StarsBalanceModal.module.scss +++ b/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 { diff --git a/src/global/helpers/messageSummary.ts b/src/global/helpers/messageSummary.ts index 327a2caef..a2a6d7d12 100644 --- a/src/global/helpers/messageSummary.ts +++ b/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) {