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 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 AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 };
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 useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
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 { getMinMediaWidth, calculateMediaDimensions } from './helpers/mediaDimensions';
import { calculateAlbumLayout } from './helpers/calculateAlbumLayout';
@ -428,7 +428,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
width = calculateMediaDimensions(message, noAvatars).width;
} else if (video) {
if (video.isRound) {
width = ROUND_VIDEO_DIMENSIONS;
width = ROUND_VIDEO_DIMENSIONS_PX;
} else {
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 { ROUND_VIDEO_DIMENSIONS } from '../../common/helpers/mediaDimensions';
import { ROUND_VIDEO_DIMENSIONS_PX } from '../../common/helpers/mediaDimensions';
import { formatMediaDuration } from '../../../util/dateFormat';
import { getMessageMediaFormat, getMessageMediaHash } from '../../../modules/helpers';
import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver';
@ -105,7 +105,9 @@ const RoundVideo: FC<OwnProps> = ({
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 playerEl = playerRef.current!;
@ -113,8 +115,10 @@ const RoundVideo: FC<OwnProps> = ({
const svgEl = playingProgressEl.firstElementChild;
if (!svgEl) {
playingProgressEl.innerHTML = `<svg width="200px" height="200px">
<circle cx="100" cy="100" r="94" class="progress-circle" transform="rotate(-90, 100, 100)"
playingProgressEl.innerHTML = `
<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-dashoffset="${circumference}"
/>
@ -208,7 +212,7 @@ const RoundVideo: FC<OwnProps> = ({
ref={thumbRef}
className="thumbnail"
// @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>
)}
@ -218,8 +222,8 @@ const RoundVideo: FC<OwnProps> = ({
<video
ref={playerRef}
className={videoClassName}
width={ROUND_VIDEO_DIMENSIONS}
height={ROUND_VIDEO_DIMENSIONS}
width={ROUND_VIDEO_DIMENSIONS_PX}
height={ROUND_VIDEO_DIMENSIONS_PX}
autoPlay
muted={!isActivated}
loop={!isActivated}