From 41344d641be64ade7c8a8c10c36caba6d0f0c3d3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 25 Apr 2023 12:56:46 +0100 Subject: [PATCH 1/2] Fix Clock being read as an absolute time rather than duration --- package.json | 1 + src/components/views/audio_messages/Clock.tsx | 21 ++++++++++++++----- yarn.lock | 15 ++++++++++++- 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 25873acd7f6..d7b7997d878 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "parse5": "^6.0.1", "png-chunks-extract": "^1.0.0", "posthog-js": "1.53.2", + "proposal-temporal": "^0.9.0", "qrcode": "1.5.1", "re-resizable": "^6.9.0", "react": "17.0.2", diff --git a/src/components/views/audio_messages/Clock.tsx b/src/components/views/audio_messages/Clock.tsx index 4aad6349038..4dbb227e4eb 100644 --- a/src/components/views/audio_messages/Clock.tsx +++ b/src/components/views/audio_messages/Clock.tsx @@ -15,15 +15,17 @@ limitations under the License. */ import React, { HTMLProps } from "react"; +import { Temporal } from "proposal-temporal"; import { formatSeconds } from "../../../DateUtils"; interface Props extends Pick, "aria-live" | "role"> { seconds: number; - formatFn?: (seconds: number) => string; + formatFn: (seconds: number) => string; } /** + * Clock which represents time periods rather than absolute time. * Simply converts seconds using formatFn. * Defaulting to formatSeconds(). * Note that in this case hours will not be displayed, making it possible to see "82:29". @@ -43,12 +45,21 @@ export default class Clock extends React.Component { return currentFloor !== nextFloor; } + private calculateDuration(seconds: number): string { + return new Temporal.Duration(0, 0, 0, 0, 0, 0, seconds).toString(); + } + public render(): React.ReactNode { + const { seconds, role } = this.props; return ( - - {/* formatFn set by defaultProps */} - {this.props.formatFn!(this.props.seconds)} - + ); } } diff --git a/yarn.lock b/yarn.lock index 675e4d2db0a..fe034d20548 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2932,6 +2932,11 @@ before-after-hook@^2.2.0: resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c" integrity sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ== +big-integer@^1.6.48: + version "1.6.51" + resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686" + integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg== + big.js@^5.2.2: version "5.2.2" resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" @@ -3928,7 +3933,7 @@ error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" -es-abstract@^1.19.0, es-abstract@^1.20.4: +es-abstract@^1.18.3, es-abstract@^1.19.0, es-abstract@^1.20.4: version "1.21.2" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.2.tgz#a56b9695322c8a185dc25975aa3b8ec31d0e7eff" integrity sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg== @@ -7191,6 +7196,14 @@ prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: object-assign "^4.1.1" react-is "^16.13.1" +proposal-temporal@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/proposal-temporal/-/proposal-temporal-0.9.0.tgz#4841cf83cf270f85a829e9283843ea8796d3d86f" + integrity sha512-AyNg3NmmBDCDbABQDmsnsY1B8VciwO9wZm+C3rClAgkPre+SpZDcIGje0WLZwroyqUFDySqW7VV6vcvAv8Bi+Q== + dependencies: + big-integer "^1.6.48" + es-abstract "^1.18.3" + protocol-buffers-schema@^3.3.1: version "3.6.0" resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz#77bc75a48b2ff142c1ad5b5b90c94cd0fa2efd03" From 33a6615af4e2637ed1e18e86539bf3d11ef350c3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 25 Apr 2023 13:35:19 +0100 Subject: [PATCH 2/2] Round durations and update snapshots --- src/components/views/audio_messages/Clock.tsx | 4 +- .../VoiceBroadcastPlaybackBody-test.tsx.snap | 60 +++++++++++-------- .../VoiceBroadcastRecordingPip-test.tsx.snap | 10 ++-- 3 files changed, 45 insertions(+), 29 deletions(-) diff --git a/src/components/views/audio_messages/Clock.tsx b/src/components/views/audio_messages/Clock.tsx index 4dbb227e4eb..19902e7e7a6 100644 --- a/src/components/views/audio_messages/Clock.tsx +++ b/src/components/views/audio_messages/Clock.tsx @@ -46,7 +46,9 @@ export default class Clock extends React.Component { } private calculateDuration(seconds: number): string { - return new Temporal.Duration(0, 0, 0, 0, 0, 0, seconds).toString(); + return new Temporal.Duration(0, 0, 0, 0, 0, 0, seconds) + .round({ smallestUnit: "seconds", largestUnit: "hours" }) + .toString(); } public render(): React.ReactNode { diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap index c7d2d43bd2e..2850c944a25 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap @@ -112,16 +112,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
- 00:00 - - + +
@@ -223,16 +225,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
- 00:00 - - + +
@@ -346,16 +350,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
- 00:00 - - + +
@@ -457,16 +463,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
- 00:00 - - + +
@@ -576,16 +584,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
- 00:00 - - + +
@@ -667,16 +677,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
- 00:00 - - + +
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap index 478a66e990f..043dd0bbc83 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap @@ -44,11 +44,12 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
- 4h 0m 0s left - +
- 4h 0m 0s left - +