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

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

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<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">
+            <time
-                {/* formatFn set by defaultProps */}
+                dateTime={this.calculateDuration(seconds)}
-                {this.props.formatFn!(this.props.seconds)}
+                aria-live={this.props["aria-live"]}
-            </span>
+                role={role}
+                className="mx_Clock"
+            >
+                {this.props.formatFn(seconds)}
+            </time>
         );
     }
 }

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

@@ -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>
+      </time>
-      <span
+      <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>
+      </time>
-      <span
+      <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>
+      </time>
-      <span
+      <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>
+      </time>
-      <span
+      <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>
+      </time>
-      <span
+      <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>
+      </time>
-      <span
+      <time
         class="mx_Clock"
+        datetime="-PT23M42S"
       >
         -23:42
-      </span>
+      </time>
     </div>
   </div>
 </div>

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

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

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"