diff --git a/src/api/gramjs/methods/messages.ts b/src/api/gramjs/methods/messages.ts index e1f93eae8..03329a733 100644 --- a/src/api/gramjs/methods/messages.ts +++ b/src/api/gramjs/methods/messages.ts @@ -5,6 +5,7 @@ import type { ThreadId } from '../../../types'; import type { ApiAttachment, ApiChat, + ApiClickSponsoredMessage, ApiContact, ApiFormattedText, ApiGlobalMessageSearchType, @@ -1673,8 +1674,12 @@ export async function viewSponsoredMessage({ chat, random }: { chat: ApiChat; ra })); } -export function clickSponsoredMessage({ chat, random }: { chat: ApiChat; random: string }) { +export function clickSponsoredMessage({ + chat, random, isMedia, isFullscreen, +}: ApiClickSponsoredMessage) { return invokeRequest(new GramJs.channels.ClickSponsoredMessage({ + media: isMedia || undefined, + fullscreen: isFullscreen || undefined, channel: buildInputPeer(chat.id, chat.accessHash), randomId: deserializeBytes(random), })); diff --git a/src/api/types/messages.ts b/src/api/types/messages.ts index 16753799d..8e88baf48 100644 --- a/src/api/types/messages.ts +++ b/src/api/types/messages.ts @@ -957,6 +957,13 @@ export type ApiSponsoredMessageReportResult = { }[]; }; +export type ApiClickSponsoredMessage = { + chat: ApiChat; + random: string; + isMedia?: boolean; + isFullscreen?: boolean; +}; + export const MAIN_THREAD_ID = -1; // `Symbol` can not be transferred from worker diff --git a/src/components/mediaViewer/MediaViewer.tsx b/src/components/mediaViewer/MediaViewer.tsx index 4de299876..6fd6af53c 100644 --- a/src/components/mediaViewer/MediaViewer.tsx +++ b/src/components/mediaViewer/MediaViewer.tsx @@ -253,10 +253,10 @@ const MediaViewer = ({ } }); - const onSponsoredButtonClick = useLastCallback(() => { + const handleSponsoredClick = useLastCallback((isFromMedia?: boolean) => { if (!sponsoredMessage || !chatId) return; - clickSponsoredMessage({ chatId }); + clickSponsoredMessage({ isMedia: isFromMedia, isFullscreen: true, chatId }); openUrl({ url: sponsoredMessage!.url }); closeMediaViewer(); }); @@ -468,7 +468,7 @@ const MediaViewer = ({ selectItem={openMediaViewerItem} isHidden={isHidden} onFooterClick={handleFooterClick} - onSponsoredButtonClick={onSponsoredButtonClick} + handleSponsoredClick={handleSponsoredClick} /> ); diff --git a/src/components/mediaViewer/MediaViewerContent.tsx b/src/components/mediaViewer/MediaViewerContent.tsx index ee51e1fd9..1dc8af230 100644 --- a/src/components/mediaViewer/MediaViewerContent.tsx +++ b/src/components/mediaViewer/MediaViewerContent.tsx @@ -36,7 +36,7 @@ type OwnProps = { isMoving?: boolean; onClose: () => void; onFooterClick: () => void; - onSponsoredButtonClick: () => void; + handleSponsoredClick: () => void; }; type StateProps = { @@ -66,11 +66,12 @@ const MediaViewerContent = ({ isMoving, onClose, onFooterClick, - onSponsoredButtonClick, + handleSponsoredClick, }: OwnProps & StateProps) => { const lang = useOldLang(); const isAvatar = item.type === 'avatar'; + const isSponsoredMessage = item.type === 'sponsoredMessage'; const { media } = getViewableMedia(item) || {}; const { @@ -132,6 +133,8 @@ const MediaViewerContent = ({ volume={0} isClickDisabled={isMoving} playbackRate={1} + isSponsoredMessage={isSponsoredMessage} + handleSponsoredClick={handleSponsoredClick} /> ); @@ -182,6 +185,8 @@ const MediaViewerContent = ({ volume={volume} isClickDisabled={isMoving} playbackRate={playbackRate} + isSponsoredMessage={isSponsoredMessage} + handleSponsoredClick={handleSponsoredClick} /> ))} {textParts && ( @@ -192,7 +197,7 @@ const MediaViewerContent = ({ isProtected={isProtected} isForceMobileVersion={isForceMobileVersion} isForVideo={isVideo && !isGif} - onButtonClick={onSponsoredButtonClick} + handleSponsoredClick={handleSponsoredClick} /> )} diff --git a/src/components/mediaViewer/MediaViewerFooter.scss b/src/components/mediaViewer/MediaViewerFooter.scss index 5e8182e1e..c58a7b1f7 100644 --- a/src/components/mediaViewer/MediaViewerFooter.scss +++ b/src/components/mediaViewer/MediaViewerFooter.scss @@ -98,6 +98,9 @@ } .media-viewer-button { - border-radius: 0.5rem; + max-width: 20rem; + margin-top: 0.5rem; + height: 2.8125rem; + border-radius: 0.6875rem; } } diff --git a/src/components/mediaViewer/MediaViewerFooter.tsx b/src/components/mediaViewer/MediaViewerFooter.tsx index 7d2a11ae6..453478c1d 100644 --- a/src/components/mediaViewer/MediaViewerFooter.tsx +++ b/src/components/mediaViewer/MediaViewerFooter.tsx @@ -10,6 +10,7 @@ import { REM } from '../common/helpers/mediaDimensions'; import useAppLayout from '../../hooks/useAppLayout'; import useDerivedState from '../../hooks/useDerivedState'; +import useLastCallback from '../../hooks/useLastCallback'; import useControlsSignal from './hooks/useControlsSignal'; import Button from '../ui/Button'; @@ -22,14 +23,14 @@ type OwnProps = { text: TextPart | TextPart[]; buttonText?: string; onClick: () => void; - onButtonClick: () => void; + handleSponsoredClick: (isFromMedia?: boolean) => void; isForVideo: boolean; isForceMobileVersion?: boolean; isProtected?: boolean; }; const MediaViewerFooter: FC = ({ - text = '', buttonText, isForVideo, onClick, onButtonClick, isProtected, isForceMobileVersion, + text = '', buttonText, isForVideo, onClick, handleSponsoredClick, isProtected, isForceMobileVersion, }) => { const [isMultiline, setIsMultiline] = useState(false); const { isMobile } = useAppLayout(); @@ -63,6 +64,10 @@ const MediaViewerFooter: FC = ({ } } + const onButtonClick = useLastCallback(() => { + handleSponsoredClick(); + }); + const classNames = buildClassName( 'MediaViewerFooter', isForVideo && 'is-for-video', @@ -84,7 +89,7 @@ const MediaViewerFooter: FC = ({