Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 4b7840b

Browse files
author
Kerry
authored
Live location sharing - extract live time UI for reuse (#8283)
* extract livetimeremaining into own component Signed-off-by: Kerry Archibald <[email protected]> * extract LiveTimeRemaining for reuse in beacon timeline Signed-off-by: Kerry Archibald <[email protected]>
1 parent e90ee38 commit 4b7840b

File tree

5 files changed

+100
-63
lines changed

5 files changed

+100
-63
lines changed

‎res/css/components/views/beacon/_LiveTimeRemaining.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_LiveTimeRemaining {
18+
color: $secondary-content;
19+
font-size: $font-12px;
20+
}

‎res/css/components/views/beacon/_RoomLiveShareWarning.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,6 @@ limitations under the License.
3939
font-size: $font-15px;
4040
}
4141

42-
.mx_RoomLiveShareWarning_expiry {
43-
color: $secondary-content;
44-
font-size: $font-12px;
45-
margin-right: $spacing-16;
46-
}
47-
4842
.mx_RoomLiveShareWarning_spinner {
4943
margin-right: $spacing-16;
5044
}

‎src/components/views/beacon/LiveTimeRemaining.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React, { useCallback, useEffect, useState } from 'react';
18+
import { BeaconEvent, Beacon } from 'matrix-js-sdk/src/matrix';
19+
20+
import { formatDuration } from '../../../DateUtils';
21+
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
22+
import { useInterval } from '../../../hooks/useTimeout';
23+
import { _t } from '../../../languageHandler';
24+
import { getBeaconMsUntilExpiry } from '../../../utils/beacon';
25+
26+
const MINUTE_MS = 60000;
27+
const HOUR_MS = MINUTE_MS * 60;
28+
const getUpdateInterval = (ms: number) => {
29+
// every 10 mins when more than an hour
30+
if (ms > HOUR_MS) {
31+
return MINUTE_MS * 10;
32+
}
33+
// every minute when more than a minute
34+
if (ms > MINUTE_MS) {
35+
return MINUTE_MS;
36+
}
37+
// otherwise every second
38+
return 1000;
39+
};
40+
const useMsRemaining = (beacon: Beacon): number => {
41+
const beaconInfo = useEventEmitterState(
42+
beacon,
43+
BeaconEvent.Update,
44+
() => beacon.beaconInfo,
45+
);
46+
47+
const [msRemaining, setMsRemaining] = useState(() => getBeaconMsUntilExpiry(beaconInfo));
48+
49+
useEffect(() => {
50+
setMsRemaining(getBeaconMsUntilExpiry(beaconInfo));
51+
}, [beaconInfo]);
52+
53+
const updateMsRemaining = useCallback(() => {
54+
const ms = getBeaconMsUntilExpiry(beaconInfo);
55+
setMsRemaining(ms);
56+
}, [beaconInfo]);
57+
58+
useInterval(updateMsRemaining, getUpdateInterval(msRemaining));
59+
60+
return msRemaining;
61+
};
62+
63+
const LiveTimeRemaining: React.FC<{ beacon: Beacon }> = ({ beacon }) => {
64+
const msRemaining = useMsRemaining(beacon);
65+
66+
const timeRemaining = formatDuration(msRemaining);
67+
const liveTimeRemaining = _t(`%(timeRemaining)s left`, { timeRemaining });
68+
69+
return <span
70+
data-test-id='room-live-share-expiry'
71+
className="mx_LiveTimeRemaining"
72+
>{ liveTimeRemaining }</span>;
73+
};
74+
75+
export default LiveTimeRemaining;

‎src/components/views/beacon/RoomLiveShareWarning.tsx‎

Lines changed: 3 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -14,63 +14,23 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import React, { useCallback, useEffect, useState } from 'react';
17+
import React, { useEffect, useState } from 'react';
1818
import classNames from 'classnames';
1919
import {
2020
Room,
2121
Beacon,
22-
BeaconEvent,
2322
BeaconIdentifier,
2423
} from 'matrix-js-sdk/src/matrix';
2524

26-
import { formatDuration } from '../../../DateUtils';
2725
import { _t } from '../../../languageHandler';
2826
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
29-
import { useInterval } from '../../../hooks/useTimeout';
3027
import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
31-
import { getBeaconMsUntilExpiry, sortBeaconsByLatestExpiry } from '../../../utils/beacon';
28+
import { sortBeaconsByLatestExpiry } from '../../../utils/beacon';
3229
import AccessibleButton from '../elements/AccessibleButton';
3330
import Spinner from '../elements/Spinner';
3431
import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
3532
import { Icon as CloseIcon } from '../../../../res/img/image-view/close.svg';
36-
37-
const MINUTE_MS = 60000;
38-
const HOUR_MS = MINUTE_MS * 60;
39-
40-
const getUpdateInterval = (ms: number) => {
41-
// every 10 mins when more than an hour
42-
if (ms > HOUR_MS) {
43-
return MINUTE_MS * 10;
44-
}
45-
// every minute when more than a minute
46-
if (ms > MINUTE_MS) {
47-
return MINUTE_MS;
48-
}
49-
// otherwise every second
50-
return 1000;
51-
};
52-
const useMsRemaining = (beacon: Beacon): number => {
53-
const beaconInfo = useEventEmitterState(
54-
beacon,
55-
BeaconEvent.Update,
56-
() => beacon.beaconInfo,
57-
);
58-
59-
const [msRemaining, setMsRemaining] = useState(() => getBeaconMsUntilExpiry(beaconInfo));
60-
61-
useEffect(() => {
62-
setMsRemaining(getBeaconMsUntilExpiry(beaconInfo));
63-
}, [beaconInfo]);
64-
65-
const updateMsRemaining = useCallback(() => {
66-
const ms = getBeaconMsUntilExpiry(beaconInfo);
67-
setMsRemaining(ms);
68-
}, [beaconInfo]);
69-
70-
useInterval(updateMsRemaining, getUpdateInterval(msRemaining));
71-
72-
return msRemaining;
73-
};
33+
import LiveTimeRemaining from './LiveTimeRemaining';
7434

7535
/**
7636
* It's technically possible to have multiple live beacons in one room
@@ -134,18 +94,6 @@ const useLiveBeacons = (liveBeaconIds: BeaconIdentifier[], roomId: string): Live
13494
};
13595
};
13696

137-
const LiveTimeRemaining: React.FC<{ beacon: Beacon }> = ({ beacon }) => {
138-
const msRemaining = useMsRemaining(beacon);
139-
140-
const timeRemaining = formatDuration(msRemaining);
141-
const liveTimeRemaining = _t(`%(timeRemaining)s left`, { timeRemaining });
142-
143-
return <span
144-
data-test-id='room-live-share-expiry'
145-
className="mx_RoomLiveShareWarning_expiry"
146-
>{ liveTimeRemaining }</span>;
147-
};
148-
14997
const getLabel = (hasWireError: boolean, hasStopSharingError: boolean): string => {
15098
if (hasWireError) {
15199
return _t('An error occured whilst sharing your live location, please try again');

‎test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with one live beacon in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_RoomLiveShareWarning_expiry\\">1h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
3+
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with one live beacon in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_LiveTimeRemaining\\">1h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
44
5-
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with two live beacons in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_RoomLiveShareWarning_expiry\\">12h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
5+
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with two live beacons in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_LiveTimeRemaining\\">12h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
66
77
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available stopping beacons displays error when stop sharing fails 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">An error occurred while stopping your live location, please try again</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Retry</button></div>"`;
88

0 commit comments

Comments
 (0)