Skip to content

Commit bd3d7a2

Browse files
committed
Refine ProgressBar component to improve progress synchronization logic
- Enhanced the logic for detecting significant progress changes, including forward and backward jumps, to ensure accurate synchronization with external track updates. - Added checks for rapid changes and reasonable progress adjustments to prevent unnecessary flickering. - Updated state management to handle minor changes without synchronization, improving user experience during playback. - Improved overall readability and maintainability of the ProgressBar component.
1 parent c5210c0 commit bd3d7a2

File tree

1 file changed

+30
-6
lines changed

1 file changed

+30
-6
lines changed

src/components/OBS_Components/SoundRequest/CurrentTrack/ProgressBar.tsx

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,43 @@ export const ProgressBar = ({ track }: Props) => {
2525
if (!track.duration || track.duration === 0) return;
2626

2727
const externalProgress = track.progress || 0;
28-
const progressDiff = Math.abs(
29-
externalProgress - lastExternalProgressRef.current
30-
);
28+
const lastProgress = lastExternalProgressRef.current;
29+
const progressDiff = externalProgress - lastProgress;
3130

32-
// Если прогресс изменился значительно (перемотка), синхронизируемся
33-
if (progressDiff > 0.1) {
31+
// Проверяем значительные изменения вперед (перемотка вперед на 3+ секунд)
32+
const isSignificantForwardJump = progressDiff > 3;
33+
34+
// Проверяем значительные изменения назад (перемотка назад на 3+ секунд)
35+
const isSignificantBackwardJump = progressDiff < -3;
36+
37+
// Проверяем резкие изменения в любом направлении (более 1 секунды)
38+
const isRapidChange = Math.abs(progressDiff) > 1;
39+
40+
// Дополнительная проверка для отмотки назад - если прогресс резко уменьшился
41+
const isRewindBack = progressDiff < -0.5 && externalProgress < lastProgress;
42+
43+
// Проверяем, что изменение не слишком большое (не больше половины трека)
44+
const isReasonableChange = Math.abs(progressDiff) < track.duration / 2;
45+
46+
// Синхронизируемся при значительных перемотках, резких изменениях или отмотке назад
47+
if (
48+
(isSignificantForwardJump ||
49+
isSignificantBackwardJump ||
50+
isRapidChange ||
51+
isRewindBack) &&
52+
isReasonableChange
53+
) {
3454
lastExternalProgressRef.current = externalProgress;
3555
setProgress(externalProgress);
3656

3757
// Пересчитываем время начала для корректного продолжения анимации
3858
if (track.status === "playing") {
3959
startTimeRef.current = Date.now() - externalProgress * 1000;
4060
}
61+
} else {
62+
// Если изменение незначительное, просто обновляем отслеживаемое значение
63+
// но не синхронизируемся, чтобы избежать бликов
64+
lastExternalProgressRef.current = externalProgress;
4165
}
4266
}, [track.progress, track.duration, track.status]);
4367

@@ -111,7 +135,7 @@ export const ProgressBar = ({ track }: Props) => {
111135
cancelAnimationFrame(animationRef.current);
112136
}
113137
};
114-
}, [track.status, track.duration, trackKey, track.progress]);
138+
}, [track.status, track.duration, trackKey, track.progress, progress]);
115139

116140
// Очищаем анимацию при размонтировании
117141
useEffect(

0 commit comments

Comments
 (0)