Move clock into shared components (#30480)

* refactor: extract `formatSeconds` from `DateUtils`

* refactor: move clock into shared-components

* refactor: update clock imports

* test(e2e): add screenshots

src/components/views/audio_messages/Clock.tsx

@@ -1,56 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021-2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type HTMLProps } from "react";
-import { Temporal } from "temporal-polyfill";
-
-import { formatSeconds } from "../../../DateUtils";
-
-interface Props extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "role"> {
-    seconds: number;
-    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".
- */
-export default class Clock extends React.Component<Props> {
-    public static defaultProps = {
-        formatFn: formatSeconds,
-    };
-
-    public shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
-        const currentFloor = Math.floor(this.props.seconds);
-        const nextFloor = Math.floor(nextProps.seconds);
-        return currentFloor !== nextFloor;
-    }
-
-    private calculateDuration(seconds: number): string | undefined {
-        if (isNaN(seconds)) return undefined;
-        return new Temporal.Duration(0, 0, 0, 0, 0, 0, Math.round(seconds))
-            .round({ smallestUnit: "seconds", largestUnit: "hours" })
-            .toString();
-    }
-
-    public render(): React.ReactNode {
-        const { seconds, role } = this.props;
-        return (
-            <time
-                dateTime={this.calculateDuration(seconds)}
-                aria-live={this.props["aria-live"]}
-                role={role}
-                className="mx_Clock"
-            >
-                {this.props.formatFn(seconds)}
-            </time>
-        );
-    }
-}

src/components/views/audio_messages/DurationClock.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 
-import Clock from "./Clock";
+import { Clock } from "../../../shared-components/audio/Clock";
 import { type Playback } from "../../../audio/Playback";
 
 interface IProps {

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 
 import { type IRecordingUpdate } from "../../../audio/VoiceRecording";
-import Clock from "./Clock";
+import { Clock } from "../../../shared-components/audio/Clock";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
 import { type VoiceMessageRecording } from "../../../audio/VoiceMessageRecording";
 

src/components/views/audio_messages/PlaybackClock.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 
-import Clock from "./Clock";
+import { Clock } from "../../../shared-components/audio/Clock";
 import { type Playback, PlaybackState } from "../../../audio/Playback";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 

src/components/views/messages/LegacyCallEvent.tsx

@@ -18,7 +18,7 @@ import { LegacyCallEventGrouperEvent } from "../../structures/LegacyCallEventGro
 import AccessibleButton from "../elements/AccessibleButton";
 import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip";
 import { formatPreciseDuration } from "../../../DateUtils";
-import Clock from "../audio_messages/Clock";
+import { Clock } from "../../../shared-components/audio/Clock";
 
 const MAX_NON_NARROW_WIDTH = (450 / 70) * 100;