diff --git a/src/components/common/helpers/mediaDimensions.ts b/src/components/common/helpers/mediaDimensions.ts index 7bce7a030..768a967c3 100644 --- a/src/components/common/helpers/mediaDimensions.ts +++ b/src/components/common/helpers/mediaDimensions.ts @@ -60,11 +60,11 @@ function getMaxMessageWidthRem(fromOwnMessage: boolean, noAvatars?: boolean) { export function getAvailableWidth( fromOwnMessage: boolean, - isForwarded?: boolean, - isWebPagePhoto?: boolean, + asForwarded?: boolean, + isWebPageMedia?: boolean, noAvatars?: boolean, ) { - const extraPaddingRem = isForwarded || isWebPagePhoto ? 1.625 : 0; + const extraPaddingRem = asForwarded && isWebPageMedia ? 2.25 : (asForwarded || isWebPageMedia ? 1.625 : 0); const availableWidthRem = getMaxMessageWidthRem(fromOwnMessage, noAvatars) - extraPaddingRem; return availableWidthRem * REM; @@ -85,21 +85,21 @@ export function calculateDimensionsForMessageMedia({ width, height, fromOwnMessage, - isForwarded, - isWebPagePhoto, + asForwarded, + isWebPageMedia, isGif, noAvatars, }: { width: number; height: number; fromOwnMessage: boolean; - isForwarded?: boolean; - isWebPagePhoto?: boolean; + asForwarded?: boolean; + isWebPageMedia?: boolean; isGif?: boolean; noAvatars?: boolean; }): ApiDimensions { const aspectRatio = height / width; - const availableWidth = getAvailableWidth(fromOwnMessage, isForwarded, isWebPagePhoto, noAvatars); + const availableWidth = getAvailableWidth(fromOwnMessage, asForwarded, isWebPageMedia, noAvatars); const availableHeight = getAvailableHeight(isGif, aspectRatio); const mediaWidth = isGif ? Math.max(GIF_MIN_WIDTH, width) : width; const mediaHeight = isGif ? height * (mediaWidth / width) : height; @@ -123,8 +123,8 @@ export function getMediaViewerAvailableDimensions(withFooter: boolean, isVideo: export function calculateInlineImageDimensions( photo: ApiPhoto, fromOwnMessage: boolean, - isForwarded?: boolean, - isWebPagePhoto?: boolean, + asForwarded?: boolean, + isWebPageMedia?: boolean, noAvatars?: boolean, ) { const { width, height } = getPhotoInlineDimensions(photo) || DEFAULT_MEDIA_DIMENSIONS; @@ -133,8 +133,8 @@ export function calculateInlineImageDimensions( width, height, fromOwnMessage, - isForwarded, - isWebPagePhoto, + asForwarded, + isWebPageMedia, noAvatars, }); } @@ -142,7 +142,8 @@ export function calculateInlineImageDimensions( export function calculateVideoDimensions( video: ApiVideo, fromOwnMessage: boolean, - isForwarded?: boolean, + asForwarded?: boolean, + isWebPageMedia?: boolean, noAvatars?: boolean, ) { const { width, height } = getVideoDimensions(video) || DEFAULT_MEDIA_DIMENSIONS; @@ -151,7 +152,8 @@ export function calculateVideoDimensions( width, height, fromOwnMessage, - isForwarded, + asForwarded, + isWebPageMedia, isGif: video.isGif, noAvatars, }); diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 409c55581..062e51536 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -585,12 +585,12 @@ const Message: FC = ({ if (!isAlbum && (photo || video || invoice?.extendedMedia)) { let width: number | undefined; if (photo) { - width = calculateMediaDimensions(message, noAvatars).width; + width = calculateMediaDimensions(message, asForwarded, noAvatars).width; } else if (video) { if (video.isRound) { width = ROUND_VIDEO_DIMENSIONS_PX; } else { - width = calculateMediaDimensions(message, noAvatars).width; + width = calculateMediaDimensions(message, asForwarded, noAvatars).width; } } else if (invoice?.extendedMedia && ( invoice.extendedMedia.width && invoice.extendedMedia.height @@ -600,7 +600,7 @@ const Message: FC = ({ width: previewWidth, height: previewHeight, fromOwnMessage: isOwn, - isForwarded: isForwarding, + asForwarded, noAvatars, }).width; } @@ -776,11 +776,12 @@ const Message: FC = ({ canAutoLoad={canAutoLoadMedia} uploadProgress={uploadProgress} shouldAffectAppendix={hasCustomAppendix} - onClick={handleMediaClick} - onCancelUpload={handleCancelUpload} isDownloading={isDownloading} isProtected={isProtected} + asForwarded={asForwarded} theme={theme} + onClick={handleMediaClick} + onCancelUpload={handleCancelUpload} /> )} {!isAlbum && video && video.isRound && ( @@ -802,10 +803,11 @@ const Message: FC = ({ canAutoPlay={canAutoPlayMedia} uploadProgress={uploadProgress} lastSyncTime={lastSyncTime} - onClick={handleMediaClick} - onCancelUpload={handleCancelUpload} isDownloading={isDownloading} isProtected={isProtected} + asForwarded={asForwarded} + onClick={handleMediaClick} + onCancelUpload={handleCancelUpload} /> )} {(audio || voice) && ( @@ -901,12 +903,13 @@ const Message: FC = ({ noAvatars={noAvatars} canAutoLoad={canAutoLoadMedia} canAutoPlay={canAutoPlayMedia} + asForwarded={asForwarded} lastSyncTime={lastSyncTime} - onMediaClick={handleMediaClick} - onCancelMediaTransfer={handleCancelUpload} isDownloading={isDownloading} isProtected={isProtected} theme={theme} + onMediaClick={handleMediaClick} + onCancelMediaTransfer={handleCancelUpload} /> )} {invoice && !invoice.extendedMedia && ( diff --git a/src/components/middle/message/Photo.tsx b/src/components/middle/message/Photo.tsx index 17fa3ef48..2b48ae29f 100644 --- a/src/components/middle/message/Photo.tsx +++ b/src/components/middle/message/Photo.tsx @@ -43,10 +43,10 @@ export type OwnProps = { size?: 'inline' | 'pictogram'; shouldAffectAppendix?: boolean; dimensions?: IMediaDimensions & { isSmall?: boolean }; + asForwarded?: boolean; nonInteractive?: boolean; isDownloading: boolean; isProtected?: boolean; - withAspectRatio?: boolean; theme: ISettings['theme']; onClick?: (id: number) => void; onCancelUpload?: (message: ApiMessage) => void; @@ -63,11 +63,11 @@ const Photo: FC = ({ uploadProgress, size = 'inline', dimensions, + asForwarded, nonInteractive, shouldAffectAppendix, isDownloading, isProtected, - withAspectRatio, theme, onClick, onCancelUpload, @@ -148,7 +148,7 @@ const Photo: FC = ({ } }, [shouldAffectAppendix, fullMediaData, isOwn, isInSelectMode, isSelected, theme] as const); - const { width, height, isSmall } = dimensions || calculateMediaDimensions(message, noAvatars); + const { width, height, isSmall } = dimensions || calculateMediaDimensions(message, asForwarded, noAvatars); const className = buildClassName( 'media-inner', @@ -157,10 +157,8 @@ const Photo: FC = ({ width === height && 'square-image', ); - const aspectRatio = withAspectRatio ? `aspect-ratio: ${(width / height).toFixed(3)}/ 1` : ''; - const style = dimensions - ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;${aspectRatio}` - : ''; + const dimensionsStyle = dimensions ? ` width: ${width}px; left: ${dimensions.x}px; top: ${dimensions.y}px;` : ''; + const style = size === 'inline' ? `height: ${height}px;${dimensionsStyle}` : undefined; return (
= ({ {withThumb && ( - + )} {isProtected && } {shouldRenderSpinner && !shouldRenderDownloadButton && ( diff --git a/src/components/middle/message/Video.tsx b/src/components/middle/message/Video.tsx index 18ad48357..472514b00 100644 --- a/src/components/middle/message/Video.tsx +++ b/src/components/middle/message/Video.tsx @@ -11,10 +11,10 @@ import { calculateVideoDimensions } from '../../common/helpers/mediaDimensions'; import { getMediaTransferState, getMessageMediaFormat, - getMessageMediaHash, getMessageMediaThumbDataUri, + getMessageMediaHash, + getMessageMediaThumbDataUri, getMessageVideo, getMessageWebPageVideo, - isForwardedMessage, isOwnMessage, } from '../../../global/helpers'; import type { ObserveFn } from '../../../hooks/useIntersectionObserver'; @@ -41,10 +41,10 @@ export type OwnProps = { canAutoPlay?: boolean; uploadProgress?: number; dimensions?: IMediaDimensions; + asForwarded?: boolean; lastSyncTime?: number; isDownloading: boolean; isProtected?: boolean; - withAspectRatio?: boolean; onClick?: (id: number) => void; onCancelUpload?: (message: ApiMessage) => void; }; @@ -60,11 +60,11 @@ const Video: FC = ({ uploadProgress, lastSyncTime, dimensions, - onClick, - onCancelUpload, + asForwarded, isDownloading, isProtected, - withAspectRatio, + onClick, + onCancelUpload, }) => { // eslint-disable-next-line no-null/no-null const ref = useRef(null); @@ -140,8 +140,10 @@ const Video: FC = ({ const duration = videoRef.current?.duration || video.duration || 0; const isOwn = isOwnMessage(message); - const isForwarded = isForwardedMessage(message); - const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars); + const isWebPageVideo = Boolean(getMessageWebPageVideo(message)); + const { + width, height, + } = dimensions || calculateVideoDimensions(video, isOwn, asForwarded, isWebPageVideo, noAvatars); const handleClick = useCallback(() => { if (isUploading) { @@ -161,9 +163,8 @@ const Video: FC = ({ const className = buildClassName('media-inner dark', !isUploading && 'interactive'); - const dimensionsStyle = dimensions ? ` left: ${dimensions.x}px; top: ${dimensions.y}px;` : ''; - const aspectRatioStyle = withAspectRatio ? ` aspect-ratio: ${(width / height).toFixed(3)}/ 1;` : ''; - const style = `width: ${width}px; height: ${height}px;${dimensionsStyle}${aspectRatioStyle}`; + const dimensionsStyle = dimensions ? ` width: ${width}px; left: ${dimensions.x}px; top: ${dimensions.y}px;` : ''; + const style = `height: ${height}px;${dimensionsStyle}`; return (
= ({ src={fullMediaData} className="full-media" canPlay={isPlayAllowed && isIntersectingForPlaying} - width={width} - height={height} muted loop playsInline diff --git a/src/components/middle/message/WebPage.tsx b/src/components/middle/message/WebPage.tsx index b031dcf08..a8e82a486 100644 --- a/src/components/middle/message/WebPage.tsx +++ b/src/components/middle/message/WebPage.tsx @@ -26,6 +26,7 @@ type OwnProps = { canAutoLoad?: boolean; canAutoPlay?: boolean; inPreview?: boolean; + asForwarded?: boolean; lastSyncTime?: number; isDownloading?: boolean; isProtected?: boolean; @@ -41,6 +42,7 @@ const WebPage: FC = ({ canAutoLoad, canAutoPlay, inPreview, + asForwarded, lastSyncTime, isDownloading = false, isProtected, @@ -98,13 +100,13 @@ const WebPage: FC = ({ noAvatars={noAvatars} canAutoLoad={canAutoLoad} size={isSquarePhoto ? 'pictogram' : 'inline'} + asForwarded={asForwarded} nonInteractive={!isMediaInteractive} - onClick={isMediaInteractive ? handleMediaClick : undefined} - onCancelUpload={onCancelMediaTransfer} isDownloading={isDownloading} isProtected={isProtected} - withAspectRatio theme={theme} + onClick={isMediaInteractive ? handleMediaClick : undefined} + onCancelUpload={onCancelMediaTransfer} /> )} {isArticle && ( @@ -126,11 +128,11 @@ const WebPage: FC = ({ canAutoLoad={canAutoLoad} canAutoPlay={canAutoPlay} lastSyncTime={lastSyncTime} - onClick={isMediaInteractive ? handleMediaClick : undefined} - onCancelUpload={onCancelMediaTransfer} + asForwarded={asForwarded} isDownloading={isDownloading} isProtected={isProtected} - withAspectRatio + onClick={isMediaInteractive ? handleMediaClick : undefined} + onCancelUpload={onCancelMediaTransfer} /> )}
diff --git a/src/components/middle/message/helpers/calculateAlbumLayout.ts b/src/components/middle/message/helpers/calculateAlbumLayout.ts index fa12d86eb..10e97e4c2 100644 --- a/src/components/middle/message/helpers/calculateAlbumLayout.ts +++ b/src/components/middle/message/helpers/calculateAlbumLayout.ts @@ -93,7 +93,7 @@ function calculateContainerSize(layout: IMediaLayout[]) { export function calculateAlbumLayout( isOwn: boolean, - isForwarded: boolean, + asForwarded: boolean, noAvatars: boolean, album: IAlbum, ): IAlbumLayout { @@ -103,7 +103,7 @@ export function calculateAlbumLayout( const averageRatio = getAverageRatio(ratios); const albumCount = ratios.length; const forceCalc = ratios.some((ratio) => ratio > 2); - const maxWidth = getAvailableWidth(isOwn, isForwarded, false, noAvatars) - (isForwarded ? 2.5 : 0) * REM; + const maxWidth = getAvailableWidth(isOwn, asForwarded, false, noAvatars) - (asForwarded ? 2.5 : 0) * REM; const maxHeight = maxWidth; let layout; diff --git a/src/components/middle/message/helpers/mediaDimensions.ts b/src/components/middle/message/helpers/mediaDimensions.ts index c46a7699a..4c387a090 100644 --- a/src/components/middle/message/helpers/mediaDimensions.ts +++ b/src/components/middle/message/helpers/mediaDimensions.ts @@ -4,9 +4,9 @@ import { getMessageText, getMessagePhoto, getMessageWebPagePhoto, - isForwardedMessage, isOwnMessage, getMessageVideo, + getMessageWebPageVideo, } from '../../../../global/helpers'; const MIN_MEDIA_WIDTH = 100; @@ -22,16 +22,16 @@ export function getMinMediaWidth(hasText?: boolean, hasCommentButton?: boolean) : (hasCommentButton ? MIN_MEDIA_WIDTH_WITH_COMMENTS : MIN_MEDIA_WIDTH); } -export function calculateMediaDimensions(message: ApiMessage, noAvatars?: boolean) { +export function calculateMediaDimensions(message: ApiMessage, asForwarded?: boolean, noAvatars?: boolean) { const isOwn = isOwnMessage(message); - const isForwarded = isForwardedMessage(message); const photo = getMessagePhoto(message) || getMessageWebPagePhoto(message); const video = getMessageVideo(message); const isWebPagePhoto = Boolean(getMessageWebPagePhoto(message)); + const isWebPageVideo = Boolean(getMessageWebPageVideo(message)); const { width, height } = photo - ? calculateInlineImageDimensions(photo, isOwn, isForwarded, isWebPagePhoto, noAvatars) - : calculateVideoDimensions(video!, isOwn, isForwarded, noAvatars); + ? calculateInlineImageDimensions(photo, isOwn, asForwarded, isWebPagePhoto, noAvatars) + : calculateVideoDimensions(video!, isOwn, asForwarded, isWebPageVideo, noAvatars); const hasText = Boolean(getMessageText(message)); const minMediaWidth = getMinMediaWidth(hasText); diff --git a/src/styles/_common.scss b/src/styles/_common.scss index c39cb8d86..952cfcd11 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -5,7 +5,10 @@ position: relative; video, - img { + img, + canvas { + width: 100%; + height: 100%; display: block; object-fit: cover; }