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
This commit is contained in:
parent
86ea059de6
commit
8783021e53
5 changed files with 75 additions and 34 deletions
package.json
src/components/views/audio_messages
test/voice-broadcast/components/molecules/__snapshots__
yarn.lock
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
15
yarn.lock
15
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"
|
||||
|
|
Loading…
Reference in a new issue