danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-12-13 17:47:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Round Video: Make larger (Follow-up) (#1511)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-10-22 02:24:42 +03:00
parent 74a0f96b6c
commit fd93b47b3f
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/helpers/mediaDimensions.ts
View File

@ -9,7 +9,7 @@ import { getPhotoInlineDimensions, getVideoDimensions } from '../../../modules/h
export const MEDIA_VIEWER_MEDIA_QUERY = '(max-height: 640px)'; export const MEDIA_VIEWER_MEDIA_QUERY = '(max-height: 640px)';
export const REM = parseInt(getComputedStyle(document.documentElement).fontSize, 10); export const REM = parseInt(getComputedStyle(document.documentElement).fontSize, 10);
export const ROUND_VIDEO_DIMENSIONS = 240; export const ROUND_VIDEO_DIMENSIONS_PX = 240;
export const GIF_MIN_WIDTH = 300; export const GIF_MIN_WIDTH = 300;
export const AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 }; export const AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 };
export const LIKE_STICKER_ID = '1258816259753933'; export const LIKE_STICKER_ID = '1258816259753933';

4
src/components/middle/message/Message.tsx
View File

@ -64,7 +64,7 @@ import buildClassName from '../../../util/buildClassName';
import useEnsureMessage from '../../../hooks/useEnsureMessage'; import useEnsureMessage from '../../../hooks/useEnsureMessage';
import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers'; import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
import { renderMessageText } from '../../common/helpers/renderMessageText'; import { renderMessageText } from '../../common/helpers/renderMessageText';
import { ROUND_VIDEO_DIMENSIONS } from '../../common/helpers/mediaDimensions'; import { ROUND_VIDEO_DIMENSIONS_PX } from '../../common/helpers/mediaDimensions';
import { buildContentClassName, isEmojiOnlyMessage } from './helpers/buildContentClassName'; import { buildContentClassName, isEmojiOnlyMessage } from './helpers/buildContentClassName';
import { getMinMediaWidth, calculateMediaDimensions } from './helpers/mediaDimensions'; import { getMinMediaWidth, calculateMediaDimensions } from './helpers/mediaDimensions';
import { calculateAlbumLayout } from './helpers/calculateAlbumLayout'; import { calculateAlbumLayout } from './helpers/calculateAlbumLayout';
@ -428,7 +428,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
width = calculateMediaDimensions(message, noAvatars).width; width = calculateMediaDimensions(message, noAvatars).width;
} else if (video) { } else if (video) {
if (video.isRound) { if (video.isRound) {
width = ROUND_VIDEO_DIMENSIONS; width = ROUND_VIDEO_DIMENSIONS_PX;
} else { } else {
width = calculateMediaDimensions(message, noAvatars).width; width = calculateMediaDimensions(message, noAvatars).width;
} }

18
src/components/middle/message/RoundVideo.tsx
View File

@ -9,7 +9,7 @@ import { getDispatch } from '../../../lib/teact/teactn';
import { ApiMediaFormat, ApiMessage } from '../../../api/types'; import { ApiMediaFormat, ApiMessage } from '../../../api/types';
import { ROUND_VIDEO_DIMENSIONS } from '../../common/helpers/mediaDimensions'; import { ROUND_VIDEO_DIMENSIONS_PX } from '../../common/helpers/mediaDimensions';
import { formatMediaDuration } from '../../../util/dateFormat'; import { formatMediaDuration } from '../../../util/dateFormat';
import { getMessageMediaFormat, getMessageMediaHash } from '../../../modules/helpers'; import { getMessageMediaFormat, getMessageMediaHash } from '../../../modules/helpers';
import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver';
@ -105,7 +105,9 @@ const RoundVideo: FC<OwnProps> = ({
return; return;
} }
const circumference = 94 * 2 * Math.PI; const svgCenter = ROUND_VIDEO_DIMENSIONS_PX / 2;
const svgMargin = 6;
const circumference = (svgCenter - svgMargin) * 2 * Math.PI;
const strokeDashOffset = circumference - progress * circumference; const strokeDashOffset = circumference - progress * circumference;
const playerEl = playerRef.current!; const playerEl = playerRef.current!;
@ -113,8 +115,10 @@ const RoundVideo: FC<OwnProps> = ({
const svgEl = playingProgressEl.firstElementChild; const svgEl = playingProgressEl.firstElementChild;
if (!svgEl) { if (!svgEl) {
playingProgressEl.innerHTML = `<svg width="200px" height="200px"> playingProgressEl.innerHTML = `
<circle cx="100" cy="100" r="94" class="progress-circle" transform="rotate(-90, 100, 100)" <svg width="${ROUND_VIDEO_DIMENSIONS_PX}px" height="${ROUND_VIDEO_DIMENSIONS_PX}px">
<circle cx="${svgCenter}" cy="${svgCenter}" r="${svgCenter - svgMargin}" class="progress-circle"
transform="rotate(-90, ${svgCenter}, ${svgCenter})"
stroke-dasharray="${circumference} ${circumference}" stroke-dasharray="${circumference} ${circumference}"
stroke-dashoffset="${circumference}" stroke-dashoffset="${circumference}"
/> />
@ -208,7 +212,7 @@ const RoundVideo: FC<OwnProps> = ({
ref={thumbRef} ref={thumbRef}
className="thumbnail" className="thumbnail"
// @ts-ignore teact feature // @ts-ignore teact feature
style={`width: ${ROUND_VIDEO_DIMENSIONS}px; height: ${ROUND_VIDEO_DIMENSIONS}px`} style={`width: ${ROUND_VIDEO_DIMENSIONS_PX}px; height: ${ROUND_VIDEO_DIMENSIONS_PX}px`}
/> />
</div> </div>
)} )}
@ -218,8 +222,8 @@ const RoundVideo: FC<OwnProps> = ({
<video <video
ref={playerRef} ref={playerRef}
className={videoClassName} className={videoClassName}
width={ROUND_VIDEO_DIMENSIONS} width={ROUND_VIDEO_DIMENSIONS_PX}
height={ROUND_VIDEO_DIMENSIONS} height={ROUND_VIDEO_DIMENSIONS_PX}
autoPlay autoPlay
muted={!isActivated} muted={!isActivated}
loop={!isActivated} loop={!isActivated}