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

Message Input: Various fixes for custom emoji (#2188)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-12-07 17:38:33 +01:00
parent 3aac8ccd6e
commit cdcce94f1a
3 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/middle/composer/Composer.scss
View File

@ -260,10 +260,6 @@
margin-right: -0.5rem; margin-right: -0.5rem;
} }
.inline-bot-spinner {
margin-right: 3rem;
}
> .AttachMenu > .Button, > .AttachMenu > .Button,
> .Button { > .Button {
flex-shrink: 0; flex-shrink: 0;

2
src/components/middle/composer/Composer.tsx
View File

@ -1261,7 +1261,7 @@ const Composer: FC<OwnProps & StateProps> = ({
onSuppressedFocus={closeSymbolMenu} onSuppressedFocus={closeSymbolMenu}
/> />
{isInlineBotLoading && Boolean(inlineBotId) && ( {isInlineBotLoading && Boolean(inlineBotId) && (
<Spinner color="gray" className="inline-bot-spinner" /> <Spinner color="gray" />
)} )}
{withScheduledButton && ( {withScheduledButton && (
<Button <Button

13
src/components/middle/composer/hooks/useInputCustomEmojis.ts
View File

@ -7,7 +7,6 @@ import type { ApiSticker } from '../../../../api/types';
import { getGlobal } from '../../../../global'; import { getGlobal } from '../../../../global';
import { selectIsAlwaysHighPriorityEmoji } from '../../../../global/selectors'; import { selectIsAlwaysHighPriorityEmoji } from '../../../../global/selectors';
import generateIdFor from '../../../../util/generateIdFor';
import { import {
addCustomEmojiInputRenderCallback, addCustomEmojiInputRenderCallback,
getCustomEmojiMediaDataForInput, getCustomEmojiMediaDataForInput,
@ -16,14 +15,14 @@ import {
import { round } from '../../../../util/math'; import { round } from '../../../../util/math';
import { fastRaf } from '../../../../util/schedulers'; import { fastRaf } from '../../../../util/schedulers';
import AbsoluteVideo from '../../../../util/AbsoluteVideo'; import AbsoluteVideo from '../../../../util/AbsoluteVideo';
import { REM } from '../../../common/helpers/mediaDimensions';
import { useResizeObserver } from '../../../../hooks/useResizeObserver'; import { useResizeObserver } from '../../../../hooks/useResizeObserver';
import useBackgroundMode from '../../../../hooks/useBackgroundMode'; import useBackgroundMode from '../../../../hooks/useBackgroundMode';
const ID_STORE = {}; const SIZE = 1.25 * REM;
const SIZE = 20;
type Player = { type CustomEmojiPlayer = {
play: () => void; play: () => void;
pause: () => void; pause: () => void;
destroy: () => void; destroy: () => void;
@ -37,7 +36,7 @@ export default function useInputCustomEmojis(
sharedCanvasHqRef: React.RefObject<HTMLCanvasElement>, sharedCanvasHqRef: React.RefObject<HTMLCanvasElement>,
absoluteContainerRef: React.RefObject<HTMLElement>, absoluteContainerRef: React.RefObject<HTMLElement>,
) { ) {
const mapRef = useRef<Map<string, Player>>(new Map()); const mapRef = useRef<Map<string, CustomEmojiPlayer>>(new Map());
const removeContainers = useCallback((ids: string[]) => { const removeContainers = useCallback((ids: string[]) => {
ids.forEach((id) => { ids.forEach((id) => {
@ -162,13 +161,13 @@ function createPlayer({
mediaUrl: string; mediaUrl: string;
position: { x: number; y: number }; position: { x: number; y: number };
isHq?: boolean; isHq?: boolean;
}): Player { }): CustomEmojiPlayer {
if (customEmoji.isLottie) { if (customEmoji.isLottie) {
const lottie = RLottie.init( const lottie = RLottie.init(
uniqueId, uniqueId,
isHq ? sharedCanvasHqRef.current! : sharedCanvasRef.current!, isHq ? sharedCanvasHqRef.current! : sharedCanvasRef.current!,
undefined, undefined,
generateIdFor(ID_STORE, true), customEmoji.id,
mediaUrl, mediaUrl,
{ {
size: SIZE, size: SIZE,