From c03e38154ec26c55ede5be614170cf544d7890ea Mon Sep 17 00:00:00 2001 From: Pujan Date: Mon, 4 Mar 2024 21:13:19 +0530 Subject: [PATCH 1/5] time conversion changes --- .../VideoPlayer/VideoPlayerControls/index.js | 6 +++--- src/components/VideoPlayer/utils.ts | 10 +++++----- src/styles/index.ts | 3 --- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.js b/src/components/VideoPlayer/VideoPlayerControls/index.js index 5a926123feef..2eb112b79bf0 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/index.js +++ b/src/components/VideoPlayer/VideoPlayerControls/index.js @@ -82,9 +82,9 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying /> {shouldShowTime && ( - {convertMillisecondsToTime(position)} - / - {durationFormatted} + {convertMillisecondsToTime(position)} + / + {durationFormatted} )} diff --git a/src/components/VideoPlayer/utils.ts b/src/components/VideoPlayer/utils.ts index 57f5422d0ce5..5ff0349003e6 100644 --- a/src/components/VideoPlayer/utils.ts +++ b/src/components/VideoPlayer/utils.ts @@ -1,9 +1,9 @@ -import {format} from 'date-fns'; - -// Converts milliseconds to 'minutes:seconds' format +// Converts milliseconds to '[hours:]minutes:seconds' format const convertMillisecondsToTime = (milliseconds: number) => { - const date = new Date(milliseconds); - return format(date, 'mm:ss'); + const hours = Math.floor(milliseconds / 3600000); + const minutes = Math.floor((milliseconds % 3600000) / 60000); + const seconds = String(((milliseconds % 60000) / 1000).toFixed(0)).padStart(2, '0'); + return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`; }; export default convertMillisecondsToTime; diff --git a/src/styles/index.ts b/src/styles/index.ts index 405a05cfce78..733927c006db 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4639,9 +4639,6 @@ const styles = (theme: ThemeColors) => padding: 8, }, - videoPlayerTimeComponentWidth: { - width: 40, - }, colorSchemeStyle: (colorScheme: ColorScheme) => ({colorScheme}), updateAnimation: { From 12f92708d1edbe5fc4a88129e1f1470b5bf4fe85 Mon Sep 17 00:00:00 2001 From: Pujan Date: Tue, 5 Mar 2024 15:14:54 +0530 Subject: [PATCH 2/5] revert timer width changes --- src/components/VideoPlayer/VideoPlayerControls/index.js | 6 +++--- src/styles/index.ts | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.js b/src/components/VideoPlayer/VideoPlayerControls/index.js index 2eb112b79bf0..5a926123feef 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/index.js +++ b/src/components/VideoPlayer/VideoPlayerControls/index.js @@ -82,9 +82,9 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying /> {shouldShowTime && ( - {convertMillisecondsToTime(position)} - / - {durationFormatted} + {convertMillisecondsToTime(position)} + / + {durationFormatted} )} diff --git a/src/styles/index.ts b/src/styles/index.ts index 733927c006db..fd1720cb5c4c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4639,6 +4639,10 @@ const styles = (theme: ThemeColors) => padding: 8, }, + videoPlayerTimeComponentWidth: { + width: 40, + }, + colorSchemeStyle: (colorScheme: ColorScheme) => ({colorScheme}), updateAnimation: { From 051ae6a9dd6c6696b70fe22162a35b9fa342bc82 Mon Sep 17 00:00:00 2001 From: Pujan Date: Wed, 6 Mar 2024 21:42:08 +0530 Subject: [PATCH 3/5] added math floor for seconds --- src/components/VideoPlayer/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/utils.ts b/src/components/VideoPlayer/utils.ts index 5ff0349003e6..ff38c6e45018 100644 --- a/src/components/VideoPlayer/utils.ts +++ b/src/components/VideoPlayer/utils.ts @@ -2,7 +2,7 @@ const convertMillisecondsToTime = (milliseconds: number) => { const hours = Math.floor(milliseconds / 3600000); const minutes = Math.floor((milliseconds % 3600000) / 60000); - const seconds = String(((milliseconds % 60000) / 1000).toFixed(0)).padStart(2, '0'); + const seconds = String((Math.floor(milliseconds % 60000) / 1000).toFixed(0)).padStart(2, '0'); return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`; }; From 3ce99c5e76f1daf7261d9ed970d5bb0e5dc9782a Mon Sep 17 00:00:00 2001 From: Pujan Date: Thu, 7 Mar 2024 18:07:45 +0530 Subject: [PATCH 4/5] fixed time conversion calculation --- src/components/VideoPlayer/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/VideoPlayer/utils.ts b/src/components/VideoPlayer/utils.ts index ff38c6e45018..fc20e82744a9 100644 --- a/src/components/VideoPlayer/utils.ts +++ b/src/components/VideoPlayer/utils.ts @@ -1,8 +1,8 @@ // Converts milliseconds to '[hours:]minutes:seconds' format const convertMillisecondsToTime = (milliseconds: number) => { const hours = Math.floor(milliseconds / 3600000); - const minutes = Math.floor((milliseconds % 3600000) / 60000); - const seconds = String((Math.floor(milliseconds % 60000) / 1000).toFixed(0)).padStart(2, '0'); + const minutes = Math.floor((milliseconds / 60000) % 60); + const seconds = Math.floor((milliseconds / 1000) % 60).toFixed(0).padStart(2, '0'); return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`; }; From 73d8becf897063790d02262862b30ed405260d2e Mon Sep 17 00:00:00 2001 From: Pujan Date: Thu, 7 Mar 2024 18:14:03 +0530 Subject: [PATCH 5/5] prettier --- src/components/VideoPlayer/utils.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/utils.ts b/src/components/VideoPlayer/utils.ts index fc20e82744a9..c13af0f874d1 100644 --- a/src/components/VideoPlayer/utils.ts +++ b/src/components/VideoPlayer/utils.ts @@ -2,7 +2,9 @@ const convertMillisecondsToTime = (milliseconds: number) => { const hours = Math.floor(milliseconds / 3600000); const minutes = Math.floor((milliseconds / 60000) % 60); - const seconds = Math.floor((milliseconds / 1000) % 60).toFixed(0).padStart(2, '0'); + const seconds = Math.floor((milliseconds / 1000) % 60) + .toFixed(0) + .padStart(2, '0'); return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`; };