Fix Clock being read as an absolute time rather than duration ()

* Fix Clock being read as an absolute time rather than duration

* Round durations and update snapshots
This commit is contained in:
Michael Telatynski 2023-04-25 17:10:46 +01:00 committed by GitHub
parent 86ea059de6
commit 8783021e53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 34 deletions
package.json
src/components/views/audio_messages
test/voice-broadcast/components/molecules/__snapshots__
yarn.lock

View file

@ -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",

View file

@ -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<HTMLProps<HTMLSpanElement>, "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,23 @@ export default class Clock extends React.Component<Props> {
return currentFloor !== nextFloor;
}
private calculateDuration(seconds: number): string {
return new Temporal.Duration(0, 0, 0, 0, 0, 0, seconds)
.round({ smallestUnit: "seconds", largestUnit: "hours" })
.toString();
}
public render(): React.ReactNode {
const { seconds, role } = this.props;
return (
<span aria-live={this.props["aria-live"]} role={this.props.role} className="mx_Clock">
{/* formatFn set by defaultProps */}
{this.props.formatFn!(this.props.seconds)}
</span>
<time
dateTime={this.calculateDuration(seconds)}
aria-live={this.props["aria-live"]}
role={role}
className="mx_Clock"
>
{this.props.formatFn(seconds)}
</time>
);
}
}

View file

@ -112,16 +112,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
<div
class="mx_VoiceBroadcastBody_timerow"
>
<span
<time
class="mx_Clock"
datetime="PT0S"
>
00:00
</span>
<span
</time>
<time
class="mx_Clock"
datetime="-PT23M42S"
>
-23:42
</span>
</time>
</div>
</div>
</div>
@ -223,16 +225,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
<div
class="mx_VoiceBroadcastBody_timerow"
>
<span
<time
class="mx_Clock"
datetime="PT0S"
>
00:00
</span>
<span
</time>
<time
class="mx_Clock"
datetime="-PT23M42S"
>
-23:42
</span>
</time>
</div>
</div>
</div>
@ -346,16 +350,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
<div
class="mx_VoiceBroadcastBody_timerow"
>
<span
<time
class="mx_Clock"
datetime="PT0S"
>
00:00
</span>
<span
</time>
<time
class="mx_Clock"
datetime="-PT23M42S"
>
-23:42
</span>
</time>
</div>
</div>
</div>
@ -457,16 +463,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
<div
class="mx_VoiceBroadcastBody_timerow"
>
<span
<time
class="mx_Clock"
datetime="PT0S"
>
00:00
</span>
<span
</time>
<time
class="mx_Clock"
datetime="-PT23M42S"
>
-23:42
</span>
</time>
</div>
</div>
</div>
@ -576,16 +584,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
<div
class="mx_VoiceBroadcastBody_timerow"
>
<span
<time
class="mx_Clock"
datetime="PT0S"
>
00:00
</span>
<span
</time>
<time
class="mx_Clock"
datetime="-PT23M42S"
>
-23:42
</span>
</time>
</div>
</div>
</div>
@ -667,16 +677,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
<div
class="mx_VoiceBroadcastBody_timerow"
>
<span
<time
class="mx_Clock"
datetime="PT0S"
>
00:00
</span>
<span
</time>
<time
class="mx_Clock"
datetime="-PT23M42S"
>
-23:42
</span>
</time>
</div>
</div>
</div>

View file

@ -44,11 +44,12 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
<div
class="mx_Icon mx_Icon_16"
/>
<span
<time
class="mx_Clock"
datetime="PT4H"
>
4h 0m 0s left
</span>
</time>
</div>
</div>
<div
@ -145,11 +146,12 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
<div
class="mx_Icon mx_Icon_16"
/>
<span
<time
class="mx_Clock"
datetime="PT4H"
>
4h 0m 0s left
</span>
</time>
</div>
</div>
<div

View file

@ -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"