element-portable/src/components/views/beacon/LiveTimeRemaining.tsx
David Langley 491f0cd08a
Change license (#13)
* Copyright headers 1

* Licence headers 2

* Copyright Headers 3

* Copyright Headers 4

* Copyright Headers 5

* Copyright Headers 6

* Copyright headers 7

* Add copyright headers for html and config file

* Replace license files and update package.json

* Update with CLA

* lint
2024-09-09 13:57:16 +00:00

70 lines
2.1 KiB
TypeScript

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import React, { useCallback, useEffect, useState } from "react";
import { BeaconEvent, Beacon } from "matrix-js-sdk/src/matrix";
import { formatDuration } from "../../../DateUtils";
import { useEventEmitterState } from "../../../hooks/useEventEmitter";
import { useInterval } from "../../../hooks/useTimeout";
import { _t } from "../../../languageHandler";
import { getBeaconMsUntilExpiry } from "../../../utils/beacon";
const MINUTE_MS = 60000;
const HOUR_MS = MINUTE_MS * 60;
const getUpdateInterval = (ms: number): number => {
// every 10 mins when more than an hour
if (ms > HOUR_MS) {
return MINUTE_MS * 10;
}
// every minute when more than a minute
if (ms > MINUTE_MS) {
return MINUTE_MS;
}
// otherwise every second
return 1000;
};
const useMsRemaining = (beacon: Beacon): number => {
const beaconInfo = useEventEmitterState(beacon, BeaconEvent.Update, () => beacon.beaconInfo);
const [msRemaining, setMsRemaining] = useState(() => (beaconInfo ? getBeaconMsUntilExpiry(beaconInfo) : 0));
useEffect(() => {
if (!beaconInfo) {
return;
}
setMsRemaining(getBeaconMsUntilExpiry(beaconInfo));
}, [beaconInfo]);
const updateMsRemaining = useCallback(() => {
if (!beaconInfo) {
return;
}
const ms = getBeaconMsUntilExpiry(beaconInfo);
setMsRemaining(ms);
}, [beaconInfo]);
useInterval(updateMsRemaining, getUpdateInterval(msRemaining));
return msRemaining;
};
const LiveTimeRemaining: React.FC<{ beacon: Beacon }> = ({ beacon }) => {
const msRemaining = useMsRemaining(beacon);
const timeRemaining = formatDuration(msRemaining);
const liveTimeRemaining = _t("time|left", { timeRemaining });
return (
<span data-testid="room-live-share-expiry" className="mx_LiveTimeRemaining">
{liveTimeRemaining}
</span>
);
};
export default LiveTimeRemaining;