ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message / Document: Support progressive video, fix thumbnail

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-11-27 19:17:07 +01:00
parent 73f112ced9
commit 77bd8b3a0a
3 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/Document.tsx
View File

@ -6,6 +6,10 @@ import { getActions } from '../../global';
import type { ApiMessage } from '../../api/types'; import type { ApiMessage } from '../../api/types';
import {
SUPPORTED_IMAGE_CONTENT_TYPES,
SUPPORTED_VIDEO_CONTENT_TYPES,
} from '../../config';
import { getDocumentExtension, getDocumentHasPreview } from './helpers/documentInfo'; import { getDocumentExtension, getDocumentHasPreview } from './helpers/documentInfo';
import { import {
getMediaTransferState, getMediaTransferState,
@ -100,7 +104,9 @@ const Document: FC<OwnProps> = ({
const localBlobUrl = hasPreview ? document.previewBlobUrl : undefined; const localBlobUrl = hasPreview ? document.previewBlobUrl : undefined;
const previewData = useMedia(getMessageMediaHash(message, 'pictogram'), !isIntersecting); const previewData = useMedia(getMessageMediaHash(message, 'pictogram'), !isIntersecting);
const withMediaViewer = onMediaClick && Boolean(document.mediaType); const withMediaViewer = onMediaClick && Boolean(document.mediaType) && (
SUPPORTED_VIDEO_CONTENT_TYPES.has(document.mimeType) || SUPPORTED_IMAGE_CONTENT_TYPES.has(document.mimeType)
);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
if (isUploading) { if (isUploading) {

25
src/components/common/File.tsx
View File

@ -1,7 +1,8 @@
import type { RefObject } from 'react'; import type { RefObject } from 'react';
import type { FC } from '../../lib/teact/teact'; import type { FC } from '../../lib/teact/teact';
import React, { memo, useRef } from '../../lib/teact/teact'; import React, { memo, useRef, useState } from '../../lib/teact/teact';
import { IS_CANVAS_FILTER_SUPPORTED, IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
import useShowTransition from '../../hooks/useShowTransition'; import useShowTransition from '../../hooks/useShowTransition';
import useMediaTransition from '../../hooks/useMediaTransition'; import useMediaTransition from '../../hooks/useMediaTransition';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
@ -10,6 +11,7 @@ import { getColorFromExtension, getFileSizeString } from './helpers/documentInfo
import { getDocumentThumbnailDimensions } from './helpers/mediaDimensions'; import { getDocumentThumbnailDimensions } from './helpers/mediaDimensions';
import renderText from './helpers/renderText'; import renderText from './helpers/renderText';
import useLang from '../../hooks/useLang'; import useLang from '../../hooks/useLang';
import useCanvasBlur from '../../hooks/useCanvasBlur';
import ProgressSpinner from '../ui/ProgressSpinner'; import ProgressSpinner from '../ui/ProgressSpinner';
import Link from '../ui/Link'; import Link from '../ui/Link';
@ -64,7 +66,11 @@ const File: FC<OwnProps> = ({
elementRef = ref; elementRef = ref;
} }
const transitionClassNames = useMediaTransition(previewData); const [withThumb] = useState(!previewData);
const noThumb = Boolean(previewData);
const thumbRef = useCanvasBlur(thumbnailDataUri, noThumb, IS_SINGLE_COLUMN_LAYOUT && !IS_CANVAS_FILTER_SUPPORTED);
const thumbClassNames = useMediaTransition(!noThumb);
const { const {
shouldRender: shouldSpinnerRender, shouldRender: shouldSpinnerRender,
transitionClassNames: spinnerClassNames, transitionClassNames: spinnerClassNames,
@ -93,20 +99,19 @@ const File: FC<OwnProps> = ({
<div className="file-icon-container" onClick={isUploading ? undefined : onClick}> <div className="file-icon-container" onClick={isUploading ? undefined : onClick}>
{thumbnailDataUri || previewData ? ( {thumbnailDataUri || previewData ? (
<div className="file-preview media-inner"> <div className="file-preview media-inner">
<img
src={thumbnailDataUri}
width={width}
height={height}
className="thumbnail"
alt=""
/>
<img <img
src={previewData} src={previewData}
className={buildClassName('full-media', transitionClassNames)} className="full-media"
width={width} width={width}
height={height} height={height}
alt="" alt=""
/> />
{withThumb && (
<canvas
ref={thumbRef}
className={buildClassName('thumbnail', thumbClassNames)}
/>
)}
</div> </div>
) : ( ) : (
<div className={`file-icon ${color}`}> <div className={`file-icon ${color}`}>

4
src/global/helpers/messageMedia.ts
View File

@ -315,7 +315,7 @@ export function getMessageMediaFormat(
const { const {
video, audio, voice, document, video, audio, voice, document,
} = message.content; } = message.content;
const fullVideo = video || getMessageWebPageVideo(message); const isVideo = Boolean(video || getMessageWebPageVideo(message) || isMessageDocumentVideo(message));
const size = (video || audio || document)?.size!; const size = (video || audio || document)?.size!;
if (target === 'download') { if (target === 'download') {
if (IS_PROGRESSIVE_SUPPORTED && size > MAX_BUFFER_SIZE && !IS_OPFS_SUPPORTED) { if (IS_PROGRESSIVE_SUPPORTED && size > MAX_BUFFER_SIZE && !IS_OPFS_SUPPORTED) {
@ -324,7 +324,7 @@ export function getMessageMediaFormat(
return ApiMediaFormat.BlobUrl; return ApiMediaFormat.BlobUrl;
} }
if (fullVideo && IS_PROGRESSIVE_SUPPORTED && ( if (isVideo && IS_PROGRESSIVE_SUPPORTED && (
target === 'full' || target === 'inline' target === 'full' || target === 'inline'
)) { )) {
return ApiMediaFormat.Progressive; return ApiMediaFormat.Progressive;