Hook up a clock and implement proper design

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -22,6 +22,8 @@ import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import classNames from "classnames";
 import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
 
 interface IProps {
     room: Room;
@@ -32,6 +34,10 @@ interface IState {
     recorder?: VoiceRecorder;
 }
 
+/**
+ * Container tile for rendering the voice message recorder in the composer.
+ */
+@replaceableComponent("views.rooms.VoiceRecordComposerTile")
 export default class VoiceRecordComposerTile extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
@@ -61,6 +67,15 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         this.setState({recorder});
     };
 
+    private renderWaveformArea() {
+        if (!this.state.recorder) return null;
+
+        return <div className='mx_VoiceRecordComposerTile_waveformContainer'>
+            <LiveRecordingClock recorder={this.state.recorder} />
+            <LiveRecordingWaveform recorder={this.state.recorder} />
+        </div>;
+    }
+
     public render() {
         const classes = classNames({
             'mx_MessageComposer_button': !this.state.recorder,
@@ -68,16 +83,14 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             'mx_VoiceRecordComposerTile_stop': !!this.state.recorder,
         });
 
-        let waveform = null;
         let tooltip = _t("Record a voice message");
         if (!!this.state.recorder) {
             // TODO: @@ TravisR: Change to match behaviour
             tooltip = _t("Stop & send recording");
-            waveform = <LiveRecordingWaveform recorder={this.state.recorder} />;
         }
 
         return (<>
-            {waveform}
+            {this.renderWaveformArea()}
             <AccessibleTooltipButton
                 className={classes}
                 onClick={this.onStartStopVoiceMessage}

src/components/views/voice_messages/Clock.tsx

@@ -0,0 +1,42 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+interface IProps {
+    seconds: number;
+}
+
+interface IState {
+}
+
+/**
+ * Simply converts seconds into minutes and seconds. Note that hours will not be
+ * displayed, making it possible to see "82:29".
+ */
+@replaceableComponent("views.voice_messages.Clock")
+export default class Clock extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+    }
+
+    public render() {
+        const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
+        const seconds = Math.round(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
+        return <span className='mx_Clock'>{minutes}:{seconds}</span>;
+    }
+}

src/components/views/voice_messages/LiveRecordingClock.tsx

@@ -0,0 +1,55 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {IRecordingUpdate, VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+
+interface IProps {
+    recorder: VoiceRecorder;
+}
+
+interface IState {
+    seconds: number;
+}
+
+/**
+ * A clock for a live recording.
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingClock")
+export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {seconds: 0};
+        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
+    }
+
+    shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
+        const currentFloor = Math.floor(this.state.seconds);
+        const nextFloor = Math.floor(nextState.seconds);
+        return currentFloor !== nextFloor;
+    }
+
+    private onRecordingUpdate = (update: IRecordingUpdate) => {
+        this.setState({seconds: update.timeSeconds});
+    };
+
+    public render() {
+        return <Clock seconds={this.state.seconds} />;
+    }
+}

src/components/views/voice_messages/LiveRecordingWaveform.tsx

@@ -49,12 +49,12 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
         const bars = arrayFastResample(Array.from(update.waveform), DOWNSAMPLE_TARGET);
         this.setState({
             // The incoming data is between zero and one, but typically even screaming into a
-            // microphone won't send you over 0.6, so we "cap" the graph at about 0.4 for a
+            // microphone won't send you over 0.6, so we "cap" the graph at about 0.35 for a
             // point where the average user can still see feedback and be perceived as peaking
             // when talking "loudly".
             //
             // We multiply by 100 because the Waveform component wants values in 0-100 (percentages)
-            heights: bars.map(b => percentageOf(b, 0, 0.40) * 100),
+            heights: bars.map(b => percentageOf(b, 0, 0.35) * 100),
         });
     };