diff --git a/src/api/gramjs/apiBuilders/messages.ts b/src/api/gramjs/apiBuilders/messages.ts index eee1ce84f..d96db6019 100644 --- a/src/api/gramjs/apiBuilders/messages.ts +++ b/src/api/gramjs/apiBuilders/messages.ts @@ -1133,33 +1133,6 @@ function buildAction( function buildReplyButtons(message: UniversalMessage, shouldSkipBuyButton?: boolean): ApiReplyKeyboard | undefined { const { replyMarkup, media } = message; - // TODO Move to the proper button inside preview - if (!replyMarkup) { - if (media instanceof GramJs.MessageMediaWebPage && media.webpage instanceof GramJs.WebPage) { - if (media.webpage.type === 'telegram_message') { - return { - inlineButtons: [[{ - type: 'url', - text: 'Show Message', - url: media.webpage.url, - }]], - }; - } - if (media.webpage.type === 'telegram_botapp') { - return { - inlineButtons: [[{ - type: 'url', - text: 'Open App', - url: media.webpage.url, - }]], - }; - } - } - - return undefined; - } - - // TODO if (!(replyMarkup instanceof GramJs.ReplyKeyboardMarkup || replyMarkup instanceof GramJs.ReplyInlineMarkup)) { return undefined; } diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index 17f19c207..eb575e2e3 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -1,22 +1,33 @@ .WebPage { margin-top: 0.25rem; margin-bottom: 0.125rem; - padding-left: 0.625rem; font-size: calc(var(--message-text-size, 1rem) - 0.125rem); line-height: 1.125rem; max-width: 29rem; - position: relative; - &::before { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 0.125rem; - background: var(--accent-color); - border-radius: 0.125rem; + .WebPage--content { + padding-left: 0.625rem; + position: relative; + + &::before { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 0.125rem; + background: var(--accent-color); + border-radius: 0.125rem; + } + } + + &--quick-button { + margin-top: 0.375rem; + + .theme-dark .Message.own &:hover { + color: var(--background-color); + } } &-text { @@ -55,13 +66,14 @@ margin-bottom: 1rem !important; } - .message-content:not(.has-reactions) &.no-article:last-child { + .message-content:not(.has-reactions) &.no-article:last-child, + .message-content:not(.has-reactions) &.with-quick-button, + .message-content:not(.has-reactions) &.with-square-photo { margin-bottom: 1rem !important; } - &.with-square-photo { + &.with-square-photo .WebPage--content { display: flex; - margin-bottom: 1rem; .WebPage-text { order: 1; @@ -92,7 +104,7 @@ } } - &:not(.with-square-photo) { + &:not(.with-square-photo):not(.with-quick-button) { .site-name, .site-title, .site-description { diff --git a/src/components/middle/message/WebPage.tsx b/src/components/middle/message/WebPage.tsx index 0382365d1..6731594e7 100644 --- a/src/components/middle/message/WebPage.tsx +++ b/src/components/middle/message/WebPage.tsx @@ -1,20 +1,25 @@ -import type { FC } from '../../../lib/teact/teact'; import React, { memo, useCallback } from '../../../lib/teact/teact'; +import { getActions } from '../../../global'; +import type { FC } from '../../../lib/teact/teact'; import type { ApiMessage } from '../../../api/types'; import type { ObserveFn } from '../../../hooks/useIntersectionObserver'; import type { ISettings } from '../../../types'; import { getMessageWebPage } from '../../../global/helpers'; import { calculateMediaDimensions } from './helpers/mediaDimensions'; +import { getWebpageButtonText } from './helpers/webpageType'; import renderText from '../../common/helpers/renderText'; import trimText from '../../../util/trimText'; import buildClassName from '../../../util/buildClassName'; + import useAppLayout from '../../../hooks/useAppLayout'; +import useLang from '../../../hooks/useLang'; import SafeLink from '../../common/SafeLink'; import Photo from './Photo'; import Video from './Video'; +import Button from '../../ui/Button'; import './WebPage.scss'; @@ -51,13 +56,23 @@ const WebPage: FC = ({ onMediaClick, onCancelMediaTransfer, }) => { + const { openTelegramLink } = getActions(); const webPage = getMessageWebPage(message); const { isMobile } = useAppLayout(); + const lang = useLang(); + const handleMediaClick = useCallback(() => { onMediaClick!(); }, [onMediaClick]); + const handleQuickButtonClick = useCallback(() => { + if (!webPage) return; + openTelegramLink({ + url: webPage.url, + }); + }, [webPage]); + if (!webPage) { return undefined; } @@ -70,7 +85,9 @@ const WebPage: FC = ({ description, photo, video, + type, } = webPage; + const quickButtonLangKey = !inPreview ? getWebpageButtonText(type) : undefined; const truncatedDescription = trimText(description, MAX_TEXT_LENGTH); const isArticle = Boolean(truncatedDescription || title || siteName); let isSquarePhoto = false; @@ -87,56 +104,73 @@ const WebPage: FC = ({ !photo && !video && !inPreview && 'without-media', video && 'with-video', !isArticle && 'no-article', + quickButtonLangKey && 'with-quick-button', ); + function renderQuickButton(langKey: string) { + return ( + + ); + } + return (
- {photo && !video && ( - - )} - {isArticle && ( -
- - {!inPreview && title && ( -

{renderText(title)}

- )} - {truncatedDescription && ( -

{renderText(truncatedDescription, ['emoji', 'br'])}

- )} -
- )} - {!inPreview && video && ( -
); }; diff --git a/src/components/middle/message/helpers/webpageType.ts b/src/components/middle/message/helpers/webpageType.ts new file mode 100644 index 000000000..394ce78a6 --- /dev/null +++ b/src/components/middle/message/helpers/webpageType.ts @@ -0,0 +1,30 @@ +// https://github.com/telegramdesktop/tdesktop/blob/3da787791f6d227f69b32bf4003bc6071d05e2ac/Telegram/SourceFiles/history/view/history_view_view_button.cpp#L51 +export function getWebpageButtonText(type?: string) { + switch (type) { + case 'telegram_channel_request': + case 'telegram_megagroup_request': + case 'telegram_chat_request': + return 'lng_view_button_request_join'; + case 'telegram_message': + return 'lng_view_button_message'; + case 'telegram_bot': + return 'lng_view_button_bot'; + case 'telegram_voicechat': + return 'lng_view_button_voice_chat'; + case 'telegram_livestream': + return 'lng_view_button_voice_chat_channel'; + case 'telegram_megagroup': + case 'telegram_chat': + return 'lng_view_button_group'; + case 'telegram_channel': + return 'lng_view_button_channel'; + case 'telegram_user': + return 'lng_view_button_user'; + case 'telegram_botapp': + return 'lng_view_button_bot_app'; + case 'telegram_chatlist': + return 'ViewChatList'; + default: + return undefined; + } +} diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss index 2021a6a71..07ebd2f63 100644 --- a/src/components/ui/Button.scss +++ b/src/components/ui/Button.scss @@ -175,11 +175,10 @@ } &.translucent { + --ripple-color: var(--color-interactive-element-hover); background-color: transparent; color: var(--color-text-secondary); - --ripple-color: var(--color-interactive-element-hover); - @include active-styles() { background-color: var(--color-interactive-element-hover); } @@ -194,9 +193,9 @@ } &.translucent-white { + --ripple-color: rgba(255, 255, 255, 0.08); background-color: transparent; color: rgba(255, 255, 255, 0.5); - --ripple-color: rgba(255, 255, 255, 0.08); @include active-styles() { background-color: rgba(255, 255, 255, 0.08); @@ -209,9 +208,9 @@ } &.translucent-black { + --ripple-color: rgba(0, 0, 0, 0.08); background-color: transparent; color: rgba(0, 0, 0, 0.8); - --ripple-color: rgba(0, 0, 0, 0.08); @include active-styles() { background-color: rgba(0, 0, 0, 0.08); @@ -222,6 +221,22 @@ } } + &.translucent-bordered { + --ripple-color: rgba(0, 0, 0, 0.08); + background-color: transparent; + color: var(--accent-color); + border: 1px solid var(--accent-color); + + @include active-styles() { + background-color: var(--accent-color); + color: var(--color-white); + } + + @include no-ripple-styles() { + background-color: var(--active-color); + } + } + &.dark { background-color: rgba(0, 0, 0, 0.75); color: white; diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 9c6951d85..93c5d412f 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -18,7 +18,8 @@ export type OwnProps = { children: React.ReactNode; size?: 'default' | 'smaller' | 'tiny'; color?: ( - 'primary' | 'secondary' | 'gray' | 'danger' | 'translucent' | 'translucent-white' | 'translucent-black' | 'dark' + 'primary' | 'secondary' | 'gray' | 'danger' | 'translucent' | 'translucent-white' | 'translucent-black' + | 'translucent-bordered' | 'dark' ); backgroundImage?: string; id?: string;