From 890eba70df851f1613896c3df84e137538dead09 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 9 Sep 2024 10:46:29 +0700 Subject: [PATCH 01/14] Feature: add loading indicator when ReconnectApp is running --- src/pages/home/ReportScreen.tsx | 3 +++ .../sidebar/SidebarScreen/BaseSidebarScreen.tsx | 4 ++++ src/styles/index.ts | 13 +++++++++++++ 3 files changed, 20 insertions(+) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 4eaf3633af38..be4cf15787a5 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -13,6 +13,7 @@ import DragAndDropProvider from '@components/DragAndDrop/Provider'; import MoneyReportHeader from '@components/MoneyReportHeader'; import MoneyRequestHeader from '@components/MoneyRequestHeader'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import ProgressBar from '@components/ProgressBar'; import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView'; import ScreenWrapper from '@components/ScreenWrapper'; import TaskHeaderActionButton from '@components/TaskHeaderActionButton'; @@ -128,6 +129,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); const [workspaceTooltip] = useOnyx(ONYXKEYS.NVP_WORKSPACE_TOOLTIP); const wasLoadingApp = usePrevious(isLoadingApp); + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true}); const finishedLoadingApp = wasLoadingApp && !isLoadingApp; const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(parentReportAction); const prevIsDeletedParentAction = usePrevious(isDeletedParentAction); @@ -756,6 +758,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro needsOffscreenAlphaCompositing > {headerView} + {shouldUseNarrowLayout && } {ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx index edc8dfb3cb3a..4626429fb53c 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx @@ -1,6 +1,7 @@ import React, {useEffect} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; +import ProgressBar from '@components/ProgressBar'; import ScreenWrapper from '@components/ScreenWrapper'; import useActiveWorkspaceFromNavigationState from '@hooks/useActiveWorkspaceFromNavigationState'; import useLocalize from '@hooks/useLocalize'; @@ -29,6 +30,8 @@ function BaseSidebarScreen() { const {translate} = useLocalize(); const [activeWorkspace] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activeWorkspaceID ?? -1}`); + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true}); + useEffect(() => { Performance.markStart(CONST.TIMING.SIDEBAR_LOADED); Timing.start(CONST.TIMING.SIDEBAR_LOADED); @@ -57,6 +60,7 @@ function BaseSidebarScreen() { breadcrumbLabel={translate('common.inbox')} activeWorkspaceID={activeWorkspaceID} /> + top: 80, left: 12, }, + progressBarWrapper: { + height: 2, + width: '100%', + backgroundColor: '#1A3D32', + borderRadius: 5, + overflow: 'hidden', + }, + progressBar: { + height: '100%', + backgroundColor: '#03D47C', + borderRadius: 5, + width: '100%', + }, } satisfies Styles); type ThemeStyles = ReturnType; From 7a77276bd2414483144892228d98584faac03b9d Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 9 Sep 2024 10:55:23 +0700 Subject: [PATCH 02/14] fix ts check --- src/components/ProgressBar.tsx | 78 ++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/components/ProgressBar.tsx diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx new file mode 100644 index 000000000000..d37d34887c03 --- /dev/null +++ b/src/components/ProgressBar.tsx @@ -0,0 +1,78 @@ +import React, {useEffect} from 'react'; +import Animated, {cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming} from 'react-native-reanimated'; +import useThemeStyles from '@hooks/useThemeStyles'; + +function ProgressBar({shouldShow}: {shouldShow: boolean}) { + const left = useSharedValue(0); + const width = useSharedValue(0); + const opacity = useSharedValue(0); + const isVisible = useSharedValue(false); + const styles = useThemeStyles(); + + useEffect(() => { + if (shouldShow) { + // eslint-disable-next-line react-compiler/react-compiler + isVisible.value = true; + left.value = 0; + width.value = 0; + opacity.value = withTiming(1, {duration: 300}); + left.value = withDelay( + 300, // 0.3s delay + withRepeat( + withSequence( + withTiming(0, {duration: 0}), + withTiming(0, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(100, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + ), + -1, + false, + ), + ); + + width.value = withDelay( + 300, // 0.3s delay + withRepeat( + withSequence( + withTiming(0, {duration: 0}), + withTiming(100, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(0, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + ), + -1, + false, + ), + ); + } else if (isVisible.value) { + opacity.value = withTiming(0, {duration: 300}, () => { + runOnJS(() => { + isVisible.value = false; + cancelAnimation(left); + cancelAnimation(width); + }); + }); + } + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, [shouldShow]); + + const animatedIndicatorStyle = useAnimatedStyle(() => { + return { + left: `${left.value}%`, + width: `${width.value}%`, + }; + }); + + const animatedContainerStyle = useAnimatedStyle(() => { + return { + opacity: opacity.value, + }; + }); + + return isVisible.value ? ( + + + + ) : null; +} + +ProgressBar.displayName = 'ProgressBar'; + +export default ProgressBar; From 0265bc6133f6e93382e98105646ba484831fd173 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 9 Sep 2024 16:53:46 +0700 Subject: [PATCH 03/14] fix style of progress bar --- src/styles/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 8a742934739c..825f17701740 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5202,13 +5202,13 @@ const styles = (theme: ThemeColors) => progressBarWrapper: { height: 2, width: '100%', - backgroundColor: '#1A3D32', + backgroundColor: theme.buttonDefaultBG, borderRadius: 5, overflow: 'hidden', }, progressBar: { height: '100%', - backgroundColor: '#03D47C', + backgroundColor: theme.success, borderRadius: 5, width: '100%', }, From af9b5b8a2f9406d1bf39b01727b3efeb65036bfe Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 9 Sep 2024 17:26:43 +0700 Subject: [PATCH 04/14] fix style progress bar --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 825f17701740..b086d4cfd9b3 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5202,7 +5202,7 @@ const styles = (theme: ThemeColors) => progressBarWrapper: { height: 2, width: '100%', - backgroundColor: theme.buttonDefaultBG, + backgroundColor: theme.border, borderRadius: 5, overflow: 'hidden', }, From c177829d889eb4a1998d524d17c4b453ff82d5bf Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 10 Sep 2024 22:05:34 +0700 Subject: [PATCH 05/14] add new const and fix style progress bar --- src/CONST.ts | 3 +++ src/components/ProgressBar.tsx | 17 +++++++++-------- src/styles/index.ts | 1 - 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index d0695b1e285f..a6578118e7c8 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -180,6 +180,9 @@ const CONST = { ANIMATED_HIGHLIGHT_END_DURATION: 2000, ANIMATED_TRANSITION: 300, ANIMATED_TRANSITION_FROM_VALUE: 100, + ANIMATED_PROGRESS_BAR_DELAY: 300, + ANIMATED_PROGRESS_BAR_OPACITY_DURATION: 300, + ANIMATED_PROGRESS_BAR_DURATION: 750, ANIMATION_IN_TIMING: 100, ANIMATION_DIRECTION: { IN: 'in', diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index d37d34887c03..63d3d1142d30 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -1,6 +1,7 @@ import React, {useEffect} from 'react'; import Animated, {cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming} from 'react-native-reanimated'; import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; function ProgressBar({shouldShow}: {shouldShow: boolean}) { const left = useSharedValue(0); @@ -15,14 +16,14 @@ function ProgressBar({shouldShow}: {shouldShow: boolean}) { isVisible.value = true; left.value = 0; width.value = 0; - opacity.value = withTiming(1, {duration: 300}); + opacity.value = withTiming(1, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}); left.value = withDelay( - 300, // 0.3s delay + CONST.ANIMATED_PROGRESS_BAR_DELAY, withRepeat( withSequence( withTiming(0, {duration: 0}), - withTiming(0, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}), - withTiming(100, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), ), -1, false, @@ -30,19 +31,19 @@ function ProgressBar({shouldShow}: {shouldShow: boolean}) { ); width.value = withDelay( - 300, // 0.3s delay + CONST.ANIMATED_PROGRESS_BAR_DELAY, withRepeat( withSequence( withTiming(0, {duration: 0}), - withTiming(100, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}), - withTiming(0, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), ), -1, false, ), ); } else if (isVisible.value) { - opacity.value = withTiming(0, {duration: 300}, () => { + opacity.value = withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}, () => { runOnJS(() => { isVisible.value = false; cancelAnimation(left); diff --git a/src/styles/index.ts b/src/styles/index.ts index b086d4cfd9b3..9221f480ab8e 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5209,7 +5209,6 @@ const styles = (theme: ThemeColors) => progressBar: { height: '100%', backgroundColor: theme.success, - borderRadius: 5, width: '100%', }, } satisfies Styles); From 32117b20050e7bce79e80d93ff9cb0cf0a87d153 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 30 Sep 2024 16:02:17 +0700 Subject: [PATCH 06/14] fix style progress bar --- src/components/ProgressBar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index 63d3d1142d30..885fe337c002 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -67,11 +67,11 @@ function ProgressBar({shouldShow}: {shouldShow: boolean}) { }; }); - return isVisible.value ? ( + return ( - + {isVisible.value ? : null} - ) : null; + ); } ProgressBar.displayName = 'ProgressBar'; From 2aae1d409243f0f610330c7ba91cee104feeb746 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 4 Nov 2024 14:33:49 +0700 Subject: [PATCH 07/14] fix logic show progress bar --- src/pages/home/ReportScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 02ef0b8cf40b..9535bf7e00d8 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -755,7 +755,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro needsOffscreenAlphaCompositing > {headerView} - {shouldUseNarrowLayout && } + {shouldUseNarrowLayout && isLoadingReportData && } {!!report && ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( From 29bc67c66d14e36c4af67b7d122384fe5e7ab177 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 4 Nov 2024 16:37:50 +0700 Subject: [PATCH 08/14] fix lint --- src/pages/home/ReportScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 9535bf7e00d8..46146e046391 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -755,7 +755,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro needsOffscreenAlphaCompositing > {headerView} - {shouldUseNarrowLayout && isLoadingReportData && } + {shouldUseNarrowLayout && !!isLoadingReportData && } {!!report && ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( From bf4e10851406fe7ea68871ed7b1049e365212fa6 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 5 Nov 2024 10:59:15 +0700 Subject: [PATCH 09/14] add comment --- src/components/ProgressBar.tsx | 79 ------------------- .../VideoPlayer/VideoPlayerControls/index.tsx | 4 +- src/pages/home/ReportScreen.tsx | 4 +- .../SidebarScreen/BaseSidebarScreen.tsx | 4 +- 4 files changed, 6 insertions(+), 85 deletions(-) delete mode 100644 src/components/ProgressBar.tsx diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx deleted file mode 100644 index 885fe337c002..000000000000 --- a/src/components/ProgressBar.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, {useEffect} from 'react'; -import Animated, {cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming} from 'react-native-reanimated'; -import useThemeStyles from '@hooks/useThemeStyles'; -import CONST from '@src/CONST'; - -function ProgressBar({shouldShow}: {shouldShow: boolean}) { - const left = useSharedValue(0); - const width = useSharedValue(0); - const opacity = useSharedValue(0); - const isVisible = useSharedValue(false); - const styles = useThemeStyles(); - - useEffect(() => { - if (shouldShow) { - // eslint-disable-next-line react-compiler/react-compiler - isVisible.value = true; - left.value = 0; - width.value = 0; - opacity.value = withTiming(1, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}); - left.value = withDelay( - CONST.ANIMATED_PROGRESS_BAR_DELAY, - withRepeat( - withSequence( - withTiming(0, {duration: 0}), - withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), - withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), - ), - -1, - false, - ), - ); - - width.value = withDelay( - CONST.ANIMATED_PROGRESS_BAR_DELAY, - withRepeat( - withSequence( - withTiming(0, {duration: 0}), - withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), - withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), - ), - -1, - false, - ), - ); - } else if (isVisible.value) { - opacity.value = withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}, () => { - runOnJS(() => { - isVisible.value = false; - cancelAnimation(left); - cancelAnimation(width); - }); - }); - } - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, [shouldShow]); - - const animatedIndicatorStyle = useAnimatedStyle(() => { - return { - left: `${left.value}%`, - width: `${width.value}%`, - }; - }); - - const animatedContainerStyle = useAnimatedStyle(() => { - return { - opacity: opacity.value, - }; - }); - - return ( - - {isVisible.value ? : null} - - ); -} - -ProgressBar.displayName = 'ProgressBar'; - -export default ProgressBar; diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/index.tsx index 04cb69a96f8b..68daac292008 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/index.tsx +++ b/src/components/VideoPlayer/VideoPlayerControls/index.tsx @@ -14,7 +14,7 @@ import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContex import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import ProgressBar from './ProgressBar'; +import LoadingBar from './LoadingBar'; import VolumeButton from './VolumeButton'; type VideoPlayerControlsProps = { @@ -135,7 +135,7 @@ function VideoPlayerControls({ )} - {headerView} - {shouldUseNarrowLayout && !!isLoadingReportData && } + {shouldUseNarrowLayout && !!isLoadingReportData && } {!!report && ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx index 41867c109ccd..77c21d4ab2e1 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx @@ -1,7 +1,7 @@ import React, {useEffect} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; -import ProgressBar from '@components/ProgressBar'; +import LoadingBar from '@components/LoadingBar'; import ScreenWrapper from '@components/ScreenWrapper'; import useActiveWorkspaceFromNavigationState from '@hooks/useActiveWorkspaceFromNavigationState'; import useLocalize from '@hooks/useLocalize'; @@ -65,7 +65,7 @@ function BaseSidebarScreen() { activeWorkspaceID={activeWorkspaceID} shouldDisplaySearch={shouldDisplaySearch} /> - + Date: Tue, 5 Nov 2024 11:03:02 +0700 Subject: [PATCH 10/14] rename --- src/components/LoadingBar.tsx | 85 +++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/components/LoadingBar.tsx diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx new file mode 100644 index 000000000000..1a7d6aa00455 --- /dev/null +++ b/src/components/LoadingBar.tsx @@ -0,0 +1,85 @@ +import React, {useEffect} from 'react'; +import Animated, {cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming} from 'react-native-reanimated'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; + +type LoadingBarProps = { + // Should show loading bar + shouldShow: boolean; +}; + +function LoadingBar({shouldShow}: LoadingBarProps) { + const left = useSharedValue(0); + const width = useSharedValue(0); + const opacity = useSharedValue(0); + const isVisible = useSharedValue(false); + const styles = useThemeStyles(); + + useEffect(() => { + if (shouldShow) { + // eslint-disable-next-line react-compiler/react-compiler + isVisible.value = true; + left.value = 0; + width.value = 0; + opacity.value = withTiming(1, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}); + left.value = withDelay( + CONST.ANIMATED_PROGRESS_BAR_DELAY, + withRepeat( + withSequence( + withTiming(0, {duration: 0}), + withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + ), + -1, + false, + ), + ); + + width.value = withDelay( + CONST.ANIMATED_PROGRESS_BAR_DELAY, + withRepeat( + withSequence( + withTiming(0, {duration: 0}), + withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}), + ), + -1, + false, + ), + ); + } else if (isVisible.value) { + opacity.value = withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}, () => { + runOnJS(() => { + isVisible.value = false; + cancelAnimation(left); + cancelAnimation(width); + }); + }); + } + // we want to update only when shouldShow change + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, [shouldShow]); + + const animatedIndicatorStyle = useAnimatedStyle(() => { + return { + left: `${left.value}%`, + width: `${width.value}%`, + }; + }); + + const animatedContainerStyle = useAnimatedStyle(() => { + return { + opacity: opacity.value, + }; + }); + + return ( + + {isVisible.value ? : null} + + ); +} + +LoadingBar.displayName = 'ProgressBar'; + +export default LoadingBar; From 40f5fd532296ea4aa45d259eb41f43b3f4f8c876 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 5 Nov 2024 11:43:00 +0700 Subject: [PATCH 11/14] fix lint --- src/components/VideoPlayer/VideoPlayerControls/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/index.tsx index 68daac292008..23072f52bab2 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/index.tsx +++ b/src/components/VideoPlayer/VideoPlayerControls/index.tsx @@ -14,7 +14,7 @@ import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContex import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import LoadingBar from './LoadingBar'; +import ProgressBar from './ProgressBar'; import VolumeButton from './VolumeButton'; type VideoPlayerControlsProps = { From eff6ce238a02171cdc3f423822e05feb48b3d5d5 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 5 Nov 2024 11:45:21 +0700 Subject: [PATCH 12/14] fix test --- src/components/VideoPlayer/VideoPlayerControls/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/index.tsx index 23072f52bab2..04cb69a96f8b 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/index.tsx +++ b/src/components/VideoPlayer/VideoPlayerControls/index.tsx @@ -135,7 +135,7 @@ function VideoPlayerControls({ )} - Date: Tue, 5 Nov 2024 15:37:34 +0700 Subject: [PATCH 13/14] Update src/components/LoadingBar.tsx Co-authored-by: Getabalew <75031127+getusha@users.noreply.github.com> --- src/components/LoadingBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx index 1a7d6aa00455..5cf4f79fd1e9 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -4,7 +4,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; type LoadingBarProps = { - // Should show loading bar + /** Whether to show the loading bar with fade out animation */ shouldShow: boolean; }; From 31335cffc725b9fa31f8dff7e1390d73b7a3b316 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 5 Nov 2024 15:56:34 +0700 Subject: [PATCH 14/14] minor change --- src/components/LoadingBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx index 5cf4f79fd1e9..163ffe2aa66b 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -4,7 +4,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; type LoadingBarProps = { - /** Whether to show the loading bar with fade out animation */ + // Whether or not to show the loading bar shouldShow: boolean; }; @@ -56,7 +56,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) { }); }); } - // we want to update only when shouldShow change + // we want to update only when shouldShow changes // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [shouldShow]);