danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2025-01-22 05:11:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Spoiler: Make auto-hiding timeout respect text length

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-02-02 22:48:05 +01:00
parent 3778abad5b
commit 23b96505df
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/common/spoiler/Spoiler.tsx
View File

@ -1,6 +1,6 @@
import { MouseEvent as ReactMouseEvent } from 'react';
import React, {
FC, memo, useCallback, useEffect,
FC, memo, useCallback, useEffect, useRef,
} from '../../../lib/teact/teact';
import { createClassNameBuilder } from '../../../util/buildClassName';
@ -13,7 +13,9 @@ type OwnProps = {
messageId?: number;
};
const AUTO_HIDE_TIMEOUT = 5000; // 5s
const READING_SYMBOLS_PER_SECOND = 23; // Heuristics
const MIN_HIDE_TIMEOUT = 5000; // 5s
const MAX_HIDE_TIMEOUT = 60000; // 1m
const actionsByMessageId: Map<number, {
reveal: VoidFunction;
@ -26,6 +28,9 @@ const Spoiler: FC<OwnProps> = ({
children,
messageId,
}) => {
// eslint-disable-next-line no-null/no-null
const contentRef = useRef<HTMLDivElement>(null);
const [isRevealed, reveal, conceal] = useFlag();
const handleClick = useCallback((e: ReactMouseEvent<HTMLDivElement, MouseEvent>) => {
@ -34,10 +39,14 @@ const Spoiler: FC<OwnProps> = ({
actionsByMessageId.get(messageId!)?.forEach((actions) => actions.reveal());
const contentLength = contentRef.current!.innerText.length;
const readingMs = Math.round(contentLength / READING_SYMBOLS_PER_SECOND) * 1000;
const timeoutMs = Math.max(MIN_HIDE_TIMEOUT, Math.min(readingMs, MAX_HIDE_TIMEOUT));
setTimeout(() => {
actionsByMessageId.get(messageId!)?.forEach((actions) => actions.conceal());
conceal();
}, AUTO_HIDE_TIMEOUT);
}, timeoutMs);
}, [conceal, messageId]);
useEffect(() => {
@ -65,7 +74,7 @@ const Spoiler: FC<OwnProps> = ({
)}
onClick={messageId && !isRevealed ? handleClick : undefined}
>
<span className={buildClassName('content')}>
<span className={buildClassName('content')} ref={contentRef}>
{children}
</span>
</span>