/* 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 ( {liveTimeRemaining} ); }; export default LiveTimeRemaining;