Simplifie code and use formatSeconds()

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-08-27 16:21:29 +02:00
parent 9c107ae615
commit 49defd7b5a
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D

View file

@ -15,34 +15,30 @@ limitations under the License.
*/ */
import React from "react"; import React from "react";
import { formatSeconds } from "../../../DateUtils";
import { replaceableComponent } from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
export interface IProps { export interface IProps {
seconds: number; seconds: number;
} }
interface IState {
}
/** /**
* Simply converts seconds into minutes and seconds. Note that hours will not be * Simply converts seconds into minutes and seconds. Note that hours will not be
* displayed, making it possible to see "82:29". * displayed, making it possible to see "82:29".
*/ */
@replaceableComponent("views.audio_messages.Clock") @replaceableComponent("views.audio_messages.Clock")
export default class Clock extends React.Component<IProps, IState> { export default class Clock extends React.Component<IProps> {
public constructor(props) { public constructor(props) {
super(props); super(props);
} }
shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean { shouldComponentUpdate(nextProps: Readonly<IProps>): boolean {
const currentFloor = Math.floor(this.props.seconds); const currentFloor = Math.floor(this.props.seconds);
const nextFloor = Math.floor(nextProps.seconds); const nextFloor = Math.floor(nextProps.seconds);
return currentFloor !== nextFloor; return currentFloor !== nextFloor;
} }
public render() { public render() {
const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0'); return <span className='mx_Clock'>{ formatSeconds(this.props.seconds) }</span>;
const seconds = Math.floor(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
return <span className='mx_Clock'>{ minutes }:{ seconds }</span>;
} }
} }