Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 8783021

Browse files
t3chguyt3chguy
authored
Fix Clock being read as an absolute time rather than duration (#10706)
* Fix Clock being read as an absolute time rather than duration * Round durations and update snapshots
1 parent 86ea059 commit 8783021

File tree

5 files changed

+75
-34
lines changed

5 files changed

+75
-34
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
"parse5": "^6.0.1",
105105
"png-chunks-extract": "^1.0.0",
106106
"posthog-js": "1.53.2",
107+
"proposal-temporal": "^0.9.0",
107108
"qrcode": "1.5.1",
108109
"re-resizable": "^6.9.0",
109110
"react": "17.0.2",

‎src/components/views/audio_messages/Clock.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,17 @@ limitations under the License.
1515
*/
1616

1717
import React, { HTMLProps } from "react";
18+
import { Temporal } from "proposal-temporal";
1819

1920
import { formatSeconds } from "../../../DateUtils";
2021

2122
interface Props extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "role"> {
2223
seconds: number;
23-
formatFn?: (seconds: number) => string;
24+
formatFn: (seconds: number) => string;
2425
}
2526

2627
/**
28+
* Clock which represents time periods rather than absolute time.
2729
* Simply converts seconds using formatFn.
2830
* Defaulting to formatSeconds().
2931
* Note that in this case hours will not be displayed, making it possible to see "82:29".
@@ -43,12 +45,23 @@ export default class Clock extends React.Component<Props> {
4345
return currentFloor !== nextFloor;
4446
}
4547

48+
private calculateDuration(seconds: number): string {
49+
return new Temporal.Duration(0, 0, 0, 0, 0, 0, seconds)
50+
.round({ smallestUnit: "seconds", largestUnit: "hours" })
51+
.toString();
52+
}
53+
4654
public render(): React.ReactNode {
55+
const { seconds, role } = this.props;
4756
return (
48-
<span aria-live={this.props["aria-live"]} role={this.props.role} className="mx_Clock">
49-
{/* formatFn set by defaultProps */}
50-
{this.props.formatFn!(this.props.seconds)}
51-
</span>
57+
<time
58+
dateTime={this.calculateDuration(seconds)}
59+
aria-live={this.props["aria-live"]}
60+
role={role}
61+
className="mx_Clock"
62+
>
63+
{this.props.formatFn(seconds)}
64+
</time>
5265
);
5366
}
5467
}

‎test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap‎

Lines changed: 36 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -112,16 +112,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
112112
<div
113113
class="mx_VoiceBroadcastBody_timerow"
114114
>
115-
<span
115+
<time
116116
class="mx_Clock"
117+
datetime="PT0S"
117118
>
118119
00:00
119-
</span>
120-
<span
120+
</time>
121+
<time
121122
class="mx_Clock"
123+
datetime="-PT23M42S"
122124
>
123125
-23:42
124-
</span>
126+
</time>
125127
</div>
126128
</div>
127129
</div>
@@ -223,16 +225,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
223225
<div
224226
class="mx_VoiceBroadcastBody_timerow"
225227
>
226-
<span
228+
<time
227229
class="mx_Clock"
230+
datetime="PT0S"
228231
>
229232
00:00
230-
</span>
231-
<span
233+
</time>
234+
<time
232235
class="mx_Clock"
236+
datetime="-PT23M42S"
233237
>
234238
-23:42
235-
</span>
239+
</time>
236240
</div>
237241
</div>
238242
</div>
@@ -346,16 +350,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
346350
<div
347351
class="mx_VoiceBroadcastBody_timerow"
348352
>
349-
<span
353+
<time
350354
class="mx_Clock"
355+
datetime="PT0S"
351356
>
352357
00:00
353-
</span>
354-
<span
358+
</time>
359+
<time
355360
class="mx_Clock"
361+
datetime="-PT23M42S"
356362
>
357363
-23:42
358-
</span>
364+
</time>
359365
</div>
360366
</div>
361367
</div>
@@ -457,16 +463,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
457463
<div
458464
class="mx_VoiceBroadcastBody_timerow"
459465
>
460-
<span
466+
<time
461467
class="mx_Clock"
468+
datetime="PT0S"
462469
>
463470
00:00
464-
</span>
465-
<span
471+
</time>
472+
<time
466473
class="mx_Clock"
474+
datetime="-PT23M42S"
467475
>
468476
-23:42
469-
</span>
477+
</time>
470478
</div>
471479
</div>
472480
</div>
@@ -576,16 +584,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
576584
<div
577585
class="mx_VoiceBroadcastBody_timerow"
578586
>
579-
<span
587+
<time
580588
class="mx_Clock"
589+
datetime="PT0S"
581590
>
582591
00:00
583-
</span>
584-
<span
592+
</time>
593+
<time
585594
class="mx_Clock"
595+
datetime="-PT23M42S"
586596
>
587597
-23:42
588-
</span>
598+
</time>
589599
</div>
590600
</div>
591601
</div>
@@ -667,16 +677,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
667677
<div
668678
class="mx_VoiceBroadcastBody_timerow"
669679
>
670-
<span
680+
<time
671681
class="mx_Clock"
682+
datetime="PT0S"
672683
>
673684
00:00
674-
</span>
675-
<span
685+
</time>
686+
<time
676687
class="mx_Clock"
688+
datetime="-PT23M42S"
677689
>
678690
-23:42
679-
</span>
691+
</time>
680692
</div>
681693
</div>
682694
</div>

‎test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,12 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
4444
<div
4545
class="mx_Icon mx_Icon_16"
4646
/>
47-
<span
47+
<time
4848
class="mx_Clock"
49+
datetime="PT4H"
4950
>
5051
4h 0m 0s left
51-
</span>
52+
</time>
5253
</div>
5354
</div>
5455
<div
@@ -145,11 +146,12 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
145146
<div
146147
class="mx_Icon mx_Icon_16"
147148
/>
148-
<span
149+
<time
149150
class="mx_Clock"
151+
datetime="PT4H"
150152
>
151153
4h 0m 0s left
152-
</span>
154+
</time>
153155
</div>
154156
</div>
155157
<div

‎yarn.lock‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2932,6 +2932,11 @@ before-after-hook@^2.2.0:
29322932
resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c"
29332933
integrity sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==
29342934

2935+
big-integer@^1.6.48:
2936+
version "1.6.51"
2937+
resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
2938+
integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
2939+
29352940
big.js@^5.2.2:
29362941
version "5.2.2"
29372942
resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -3928,7 +3933,7 @@ error-ex@^1.3.1:
39283933
dependencies:
39293934
is-arrayish "^0.2.1"
39303935

3931-
es-abstract@^1.19.0, es-abstract@^1.20.4:
3936+
es-abstract@^1.18.3, es-abstract@^1.19.0, es-abstract@^1.20.4:
39323937
version "1.21.2"
39333938
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.2.tgz#a56b9695322c8a185dc25975aa3b8ec31d0e7eff"
39343939
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:
71917196
object-assign "^4.1.1"
71927197
react-is "^16.13.1"
71937198

7199+
proposal-temporal@^0.9.0:
7200+
version "0.9.0"
7201+
resolved "https://registry.yarnpkg.com/proposal-temporal/-/proposal-temporal-0.9.0.tgz#4841cf83cf270f85a829e9283843ea8796d3d86f"
7202+
integrity sha512-AyNg3NmmBDCDbABQDmsnsY1B8VciwO9wZm+C3rClAgkPre+SpZDcIGje0WLZwroyqUFDySqW7VV6vcvAv8Bi+Q==
7203+
dependencies:
7204+
big-integer "^1.6.48"
7205+
es-abstract "^1.18.3"
7206+
71947207
protocol-buffers-schema@^3.3.1:
71957208
version "3.6.0"
71967209
resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz#77bc75a48b2ff142c1ad5b5b90c94cd0fa2efd03"

0 commit comments

Comments
 (0)