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

Larger max distance for animateScroll

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-09-19 20:43:53 +02:00
parent e56461a43c
commit f5675ca3fc
4 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/middle/message/hooks/useFocusMessage.ts
View File

@ -3,6 +3,7 @@ import { addExtraClass } from '../../../../lib/teact/teact-dom';
import type { FocusDirection, ScrollTargetPosition } from '../../../../types'; import type { FocusDirection, ScrollTargetPosition } from '../../../../types';
import { SCROLL_MAX_DISTANCE } from '../../../../config';
import { import {
requestForcedReflow, requestMeasure, requestMutation, requestForcedReflow, requestMeasure, requestMutation,
} from '../../../../lib/fasterdom/fasterdom'; } from '../../../../lib/fasterdom/fasterdom';
@ -10,7 +11,7 @@ import animateScroll from '../../../../util/animateScroll';
// This is used when the viewport was replaced. // This is used when the viewport was replaced.
const BOTTOM_FOCUS_OFFSET = 500; const BOTTOM_FOCUS_OFFSET = 500;
const RELOCATED_FOCUS_OFFSET = 750; const RELOCATED_FOCUS_OFFSET = SCROLL_MAX_DISTANCE;
const FOCUS_MARGIN = 20; const FOCUS_MARGIN = 20;
export default function useFocusMessage( export default function useFocusMessage(

10
src/config.ts
View File

@ -168,13 +168,13 @@ export const TMP_CHAT_ID = '0';
export const ANIMATION_END_DELAY = 100; export const ANIMATION_END_DELAY = 100;
export const FAST_SMOOTH_MIN_DURATION = 300; export const SCROLL_MIN_DURATION = 300;
export const FAST_SMOOTH_MAX_DURATION = 600; export const SCROLL_MAX_DURATION = 600;
export const FAST_SMOOTH_MAX_DISTANCE = 750; export const SCROLL_MAX_DISTANCE = 800;
export const FAST_SMOOTH_SHORT_TRANSITION_MAX_DISTANCE = 300; // px export const SCROLL_SHORT_TRANSITION_MAX_DISTANCE = 300; // px
// Average duration of message sending animation // Average duration of message sending animation
export const API_UPDATE_THROTTLE = Math.round((FAST_SMOOTH_MIN_DURATION + FAST_SMOOTH_MAX_DURATION) / 2); export const API_UPDATE_THROTTLE = Math.round((SCROLL_MIN_DURATION + SCROLL_MAX_DURATION) / 2);
export const API_THROTTLE_RESET_UPDATES = new Set([ export const API_THROTTLE_RESET_UPDATES = new Set([
'newMessage', 'newScheduledMessage', 'deleteMessages', 'deleteScheduledMessages', 'deleteHistory', 'newMessage', 'newScheduledMessage', 'deleteMessages', 'deleteScheduledMessages', 'deleteHistory',
]); ]);

4
src/global/actions/ui/messages.ts
View File

@ -9,8 +9,8 @@ import { FocusDirection } from '../../../types';
import { import {
ANIMATION_END_DELAY, ANIMATION_END_DELAY,
FAST_SMOOTH_MAX_DURATION,
RELEASE_DATETIME, RELEASE_DATETIME,
SCROLL_MAX_DURATION,
SERVICE_NOTIFICATIONS_USER_ID, SERVICE_NOTIFICATIONS_USER_ID,
} from '../../../config'; } from '../../../config';
import { copyHtmlToClipboard } from '../../../util/clipboard'; import { copyHtmlToClipboard } from '../../../util/clipboard';
@ -73,7 +73,7 @@ import {
import { getIsMobile } from '../../../hooks/useAppLayout'; import { getIsMobile } from '../../../hooks/useAppLayout';
const FOCUS_DURATION = 1500; const FOCUS_DURATION = 1500;
const FOCUS_NO_HIGHLIGHT_DURATION = FAST_SMOOTH_MAX_DURATION + ANIMATION_END_DELAY; const FOCUS_NO_HIGHLIGHT_DURATION = SCROLL_MAX_DURATION + ANIMATION_END_DELAY;
const POLL_RESULT_OPEN_DELAY_MS = 450; const POLL_RESULT_OPEN_DELAY_MS = 450;
const VERSION_NOTIFICATION_DURATION = 1000 * 60 * 60 * 24 * 3; // 3 days const VERSION_NOTIFICATION_DURATION = 1000 * 60 * 60 * 24 * 3; // 3 days
const SERVICE_NOTIFICATIONS_MAX_AMOUNT = 1e3; const SERVICE_NOTIFICATIONS_MAX_AMOUNT = 1e3;

20
src/util/animateScroll.ts
View File

@ -5,10 +5,10 @@ import type { ScrollTargetPosition } from '../types';
import { FocusDirection } from '../types'; import { FocusDirection } from '../types';
import { import {
FAST_SMOOTH_MAX_DISTANCE, SCROLL_MAX_DISTANCE,
FAST_SMOOTH_MAX_DURATION, SCROLL_MAX_DURATION,
FAST_SMOOTH_MIN_DURATION, SCROLL_MIN_DURATION,
FAST_SMOOTH_SHORT_TRANSITION_MAX_DISTANCE, SCROLL_SHORT_TRANSITION_MAX_DISTANCE,
} from '../config'; } from '../config';
import { requestMeasure, requestMutation } from '../lib/fasterdom/fasterdom'; import { requestMeasure, requestMutation } from '../lib/fasterdom/fasterdom';
import { selectCanAnimateInterface } from '../global/selectors'; import { selectCanAnimateInterface } from '../global/selectors';
@ -52,7 +52,7 @@ function createMutateFunction(
element: HTMLElement, element: HTMLElement,
position: ScrollTargetPosition, position: ScrollTargetPosition,
margin = 0, margin = 0,
maxDistance = FAST_SMOOTH_MAX_DISTANCE, maxDistance = SCROLL_MAX_DISTANCE,
forceDirection?: FocusDirection, forceDirection?: FocusDirection,
forceDuration?: number, forceDuration?: number,
forceNormalContainerHeight?: boolean, forceNormalContainerHeight?: boolean,
@ -117,10 +117,10 @@ function createMutateFunction(
return; return;
} }
const transition = absPath <= FAST_SMOOTH_SHORT_TRANSITION_MAX_DISTANCE ? shortTransition : longTransition; const transition = absPath <= SCROLL_SHORT_TRANSITION_MAX_DISTANCE ? shortTransition : longTransition;
const duration = forceDuration || ( const duration = forceDuration || (
FAST_SMOOTH_MIN_DURATION SCROLL_MIN_DURATION
+ (absPath / FAST_SMOOTH_MAX_DISTANCE) * (FAST_SMOOTH_MAX_DURATION - FAST_SMOOTH_MIN_DURATION) + (absPath / SCROLL_MAX_DISTANCE) * (SCROLL_MAX_DURATION - SCROLL_MIN_DURATION)
); );
const startAt = Date.now(); const startAt = Date.now();
@ -158,7 +158,7 @@ export function isAnimatingScroll() {
function calculateScrollFrom( function calculateScrollFrom(
container: HTMLElement, container: HTMLElement,
scrollTo: number, scrollTo: number,
maxDistance = FAST_SMOOTH_MAX_DISTANCE, maxDistance = SCROLL_MAX_DISTANCE,
forceDirection?: FocusDirection, forceDirection?: FocusDirection,
) { ) {
const { scrollTop } = container; const { scrollTop } = container;
@ -185,5 +185,5 @@ function shortTransition(t: number) {
} }
function longTransition(t: number) { function longTransition(t: number) {
return 1 - ((1 - t) ** 6.5); return 1 - ((1 - t) ** 6);
} }