Live location sharing: live share warning in room (#8100)
* add duration dropdown to live location picker Signed-off-by: Kerry Archibald <kerrya@element.io> * tidy comments Signed-off-by: Kerry Archibald <kerrya@element.io> * setup component Signed-off-by: Kerry Archibald <kerrya@element.io> * replace references to beaconInfoId with beacon.identifier Signed-off-by: Kerry Archibald <kerrya@element.io> * icon Signed-off-by: Kerry Archibald <kerrya@element.io> * component for styled live beacon icon Signed-off-by: Kerry Archibald <kerrya@element.io> * emit liveness change whenever livebeaconIds changes Signed-off-by: Kerry Archibald <kerrya@element.io> * Handle multiple live beacons in room share warning, test Signed-off-by: Kerry Archibald <kerrya@element.io> * un xdescribe beaconstore tests Signed-off-by: Kerry Archibald <kerrya@element.io> * missed copyrights Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * tidy Signed-off-by: Kerry Archibald <kerrya@element.io>watcha-feature/make-nextcloud-documents-integration-a-local-widget
Kerry
4 years ago
committed by
GitHub
parent
c8d3b51640
commit
b04d31b5be
@ -0,0 +1,50 @@ |
||||
/* |
||||
Copyright 2022 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. |
||||
*/ |
||||
|
||||
.mx_RoomLiveShareWarning { |
||||
width: 100%; |
||||
|
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
box-sizing: border-box; |
||||
padding: $spacing-12 $spacing-16; |
||||
|
||||
color: $primary-content; |
||||
background-color: $system; |
||||
} |
||||
|
||||
.mx_RoomLiveShareWarning_icon { |
||||
height: 32px; |
||||
width: 32px; |
||||
margin-right: $spacing-8; |
||||
} |
||||
|
||||
.mx_RoomLiveShareWarning_label { |
||||
flex: 1; |
||||
font-size: $font-15px; |
||||
} |
||||
|
||||
.mx_RoomLiveShareWarning_expiry { |
||||
color: $secondary-content; |
||||
font-size: $font-12px; |
||||
margin-right: $spacing-16; |
||||
} |
||||
|
||||
.mx_RoomLiveShareWarning_spinner { |
||||
margin-right: $spacing-16; |
||||
} |
||||
@ -0,0 +1,127 @@ |
||||
/* |
||||
Copyright 2022 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, { useEffect, useState } from 'react'; |
||||
import classNames from 'classnames'; |
||||
import { Room } from 'matrix-js-sdk/src/matrix'; |
||||
|
||||
import { _t } from '../../../languageHandler'; |
||||
import { useEventEmitterState } from '../../../hooks/useEventEmitter'; |
||||
import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore'; |
||||
import AccessibleButton from '../elements/AccessibleButton'; |
||||
import StyledLiveBeaconIcon from './StyledLiveBeaconIcon'; |
||||
import { formatDuration } from '../../../DateUtils'; |
||||
import { getBeaconMsUntilExpiry, sortBeaconsByLatestExpiry } from '../../../utils/beacon'; |
||||
import Spinner from '../elements/Spinner'; |
||||
|
||||
interface Props { |
||||
roomId: Room['roomId']; |
||||
} |
||||
|
||||
/** |
||||
* It's technically possible to have multiple live beacons in one room |
||||
* Select the latest expiry to display, |
||||
* and kill all beacons on stop sharing |
||||
*/ |
||||
type LiveBeaconsState = { |
||||
liveBeaconIds: string[]; |
||||
msRemaining?: number; |
||||
onStopSharing?: () => void; |
||||
stoppingInProgress?: boolean; |
||||
}; |
||||
|
||||
const useLiveBeacons = (roomId: Room['roomId']): LiveBeaconsState => { |
||||
const [stoppingInProgress, setStoppingInProgress] = useState(false); |
||||
const liveBeaconIds = useEventEmitterState( |
||||
OwnBeaconStore.instance, |
||||
OwnBeaconStoreEvent.LivenessChange, |
||||
() => OwnBeaconStore.instance.getLiveBeaconIds(roomId), |
||||
); |
||||
|
||||
// reset stopping in progress on change in live ids
|
||||
useEffect(() => { |
||||
setStoppingInProgress(false); |
||||
}, [liveBeaconIds]); |
||||
|
||||
if (!liveBeaconIds?.length) { |
||||
return { liveBeaconIds }; |
||||
} |
||||
|
||||
// select the beacon with latest expiry to display expiry time
|
||||
const beacon = liveBeaconIds.map(beaconId => OwnBeaconStore.instance.getBeaconById(beaconId)) |
||||
.sort(sortBeaconsByLatestExpiry) |
||||
.shift(); |
||||
|
||||
const onStopSharing = async () => { |
||||
setStoppingInProgress(true); |
||||
try { |
||||
await Promise.all(liveBeaconIds.map(beaconId => OwnBeaconStore.instance.stopBeacon(beaconId))); |
||||
} catch (error) { |
||||
// only clear loading in case of error
|
||||
// to avoid flash of not-loading state
|
||||
// after beacons have been stopped but we wait for sync
|
||||
setStoppingInProgress(false); |
||||
} |
||||
}; |
||||
|
||||
const msRemaining = getBeaconMsUntilExpiry(beacon); |
||||
|
||||
return { liveBeaconIds, onStopSharing, msRemaining, stoppingInProgress }; |
||||
}; |
||||
|
||||
const RoomLiveShareWarning: React.FC<Props> = ({ roomId }) => { |
||||
const { |
||||
liveBeaconIds, |
||||
onStopSharing, |
||||
msRemaining, |
||||
stoppingInProgress, |
||||
} = useLiveBeacons(roomId); |
||||
|
||||
if (!liveBeaconIds?.length) { |
||||
return null; |
||||
} |
||||
|
||||
const timeRemaining = formatDuration(msRemaining); |
||||
const liveTimeRemaining = _t(`%(timeRemaining)s left`, { timeRemaining }); |
||||
|
||||
return <div |
||||
className={classNames('mx_RoomLiveShareWarning')} |
||||
> |
||||
<StyledLiveBeaconIcon className="mx_RoomLiveShareWarning_icon" /> |
||||
<span className="mx_RoomLiveShareWarning_label"> |
||||
{ _t('You are sharing %(count)s live locations', { count: liveBeaconIds.length }) } |
||||
</span> |
||||
|
||||
{ stoppingInProgress ? |
||||
<span className='mx_RoomLiveShareWarning_spinner'><Spinner h={16} w={16} /></span> : |
||||
<span |
||||
data-test-id='room-live-share-expiry' |
||||
className="mx_RoomLiveShareWarning_expiry" |
||||
>{ liveTimeRemaining }</span> |
||||
} |
||||
<AccessibleButton |
||||
data-test-id='room-live-share-stop-sharing' |
||||
onClick={onStopSharing} |
||||
kind='danger' |
||||
element='button' |
||||
disabled={stoppingInProgress} |
||||
> |
||||
{ _t('Stop sharing') } |
||||
</AccessibleButton> |
||||
</div>; |
||||
}; |
||||
|
||||
export default RoomLiveShareWarning; |
||||
@ -0,0 +1,209 @@ |
||||
/* |
||||
Copyright 2022 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 { act } from 'react-dom/test-utils'; |
||||
import { mount } from 'enzyme'; |
||||
import { Room, Beacon, BeaconEvent } from 'matrix-js-sdk/src/matrix'; |
||||
|
||||
import '../../../skinned-sdk'; |
||||
import RoomLiveShareWarning from '../../../../src/components/views/beacon/RoomLiveShareWarning'; |
||||
import { OwnBeaconStore } from '../../../../src/stores/OwnBeaconStore'; |
||||
import { |
||||
findByTestId, |
||||
getMockClientWithEventEmitter, |
||||
makeBeaconInfoEvent, |
||||
resetAsyncStoreWithClient, |
||||
setupAsyncStoreWithClient, |
||||
} from '../../../test-utils'; |
||||
|
||||
jest.useFakeTimers(); |
||||
describe('<RoomLiveShareWarning />', () => { |
||||
const aliceId = '@alice:server.org'; |
||||
const room1Id = '$room1:server.org'; |
||||
const room2Id = '$room2:server.org'; |
||||
const room3Id = '$room3:server.org'; |
||||
const mockClient = getMockClientWithEventEmitter({ |
||||
getVisibleRooms: jest.fn().mockReturnValue([]), |
||||
getUserId: jest.fn().mockReturnValue(aliceId), |
||||
unstable_setLiveBeacon: jest.fn().mockResolvedValue({ event_id: '1' }), |
||||
}); |
||||
|
||||
// 14.03.2022 16:15
|
||||
const now = 1647270879403; |
||||
const HOUR_MS = 3600000; |
||||
// mock the date so events are stable for snapshots etc
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now); |
||||
const room1Beacon1 = makeBeaconInfoEvent(aliceId, room1Id, { isLive: true, timeout: HOUR_MS }); |
||||
const room2Beacon1 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS }); |
||||
const room2Beacon2 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS * 12 }); |
||||
const room3Beacon1 = makeBeaconInfoEvent(aliceId, room3Id, { isLive: true, timeout: HOUR_MS }); |
||||
|
||||
// make fresh rooms every time
|
||||
// as we update room state
|
||||
const makeRoomsWithStateEvents = (stateEvents = []): [Room, Room] => { |
||||
const room1 = new Room(room1Id, mockClient, aliceId); |
||||
const room2 = new Room(room2Id, mockClient, aliceId); |
||||
|
||||
room1.currentState.setStateEvents(stateEvents); |
||||
room2.currentState.setStateEvents(stateEvents); |
||||
mockClient.getVisibleRooms.mockReturnValue([room1, room2]); |
||||
|
||||
return [room1, room2]; |
||||
}; |
||||
|
||||
const advanceDateAndTime = (ms: number) => { |
||||
// bc liveness check uses Date.now we have to advance this mock
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now + ms); |
||||
// then advance time for the interval by the same amount
|
||||
jest.advanceTimersByTime(ms); |
||||
}; |
||||
|
||||
const makeOwnBeaconStore = async () => { |
||||
const store = OwnBeaconStore.instance; |
||||
|
||||
await setupAsyncStoreWithClient(store, mockClient); |
||||
return store; |
||||
}; |
||||
|
||||
const defaultProps = { |
||||
roomId: room1Id, |
||||
}; |
||||
const getComponent = (props = {}) => { |
||||
let component; |
||||
// component updates on render
|
||||
// wrap in act
|
||||
act(() => { |
||||
component = mount(<RoomLiveShareWarning {...defaultProps} {...props} />); |
||||
}); |
||||
return component; |
||||
}; |
||||
|
||||
beforeEach(() => { |
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now); |
||||
mockClient.unstable_setLiveBeacon.mockClear(); |
||||
}); |
||||
|
||||
afterEach(async () => { |
||||
await resetAsyncStoreWithClient(OwnBeaconStore.instance); |
||||
}); |
||||
|
||||
afterAll(() => { |
||||
jest.spyOn(global.Date, 'now').mockRestore(); |
||||
}); |
||||
|
||||
it('renders nothing when user has no live beacons at all', async () => { |
||||
await makeOwnBeaconStore(); |
||||
const component = getComponent(); |
||||
expect(component.html()).toBe(null); |
||||
}); |
||||
|
||||
it('renders nothing when user has no live beacons in room', async () => { |
||||
await act(async () => { |
||||
await makeRoomsWithStateEvents([room2Beacon1]); |
||||
await makeOwnBeaconStore(); |
||||
}); |
||||
const component = getComponent({ roomId: room1Id }); |
||||
expect(component.html()).toBe(null); |
||||
}); |
||||
|
||||
describe('when user has live beacons', () => { |
||||
beforeEach(async () => { |
||||
await act(async () => { |
||||
await makeRoomsWithStateEvents([room1Beacon1, room2Beacon1, room2Beacon2]); |
||||
await makeOwnBeaconStore(); |
||||
}); |
||||
}); |
||||
|
||||
it('renders correctly with one live beacon in room', () => { |
||||
const component = getComponent({ roomId: room1Id }); |
||||
expect(component).toMatchSnapshot(); |
||||
}); |
||||
|
||||
it('renders correctly with two live beacons in room', () => { |
||||
const component = getComponent({ roomId: room2Id }); |
||||
expect(component).toMatchSnapshot(); |
||||
// later expiry displayed
|
||||
expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('12h left'); |
||||
}); |
||||
|
||||
it('removes itself when user stops having live beacons', async () => { |
||||
const component = getComponent({ roomId: room1Id }); |
||||
// started out rendered
|
||||
expect(component.html()).toBeTruthy(); |
||||
|
||||
// time travel until room1Beacon1 is expired
|
||||
advanceDateAndTime(HOUR_MS + 1); |
||||
act(() => { |
||||
mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1)); |
||||
component.setProps({}); |
||||
}); |
||||
|
||||
expect(component.html()).toBe(null); |
||||
}); |
||||
|
||||
it('renders when user adds a live beacon', async () => { |
||||
const component = getComponent({ roomId: room3Id }); |
||||
// started out not rendered
|
||||
expect(component.html()).toBeFalsy(); |
||||
|
||||
act(() => { |
||||
mockClient.emit(BeaconEvent.New, room3Beacon1, new Beacon(room3Beacon1)); |
||||
component.setProps({}); |
||||
}); |
||||
|
||||
expect(component.html()).toBeTruthy(); |
||||
}); |
||||
|
||||
describe('stopping beacons', () => { |
||||
it('stops beacon on stop sharing click', () => { |
||||
const component = getComponent({ roomId: room2Id }); |
||||
|
||||
act(() => { |
||||
findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click'); |
||||
component.setProps({}); |
||||
}); |
||||
|
||||
expect(mockClient.unstable_setLiveBeacon).toHaveBeenCalledTimes(2); |
||||
expect(component.find('Spinner').length).toBeTruthy(); |
||||
expect(findByTestId(component, 'room-live-share-stop-sharing').at(0).props().disabled).toBeTruthy(); |
||||
}); |
||||
|
||||
it('displays again with correct state after stopping a beacon', () => { |
||||
// make sure the loading state is reset correctly after removing a beacon
|
||||
const component = getComponent({ roomId: room2Id }); |
||||
|
||||
act(() => { |
||||
findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click'); |
||||
}); |
||||
// time travel until room1Beacon1 is expired
|
||||
advanceDateAndTime(HOUR_MS + 1); |
||||
act(() => { |
||||
mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1)); |
||||
}); |
||||
|
||||
const newLiveBeacon = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true }); |
||||
act(() => { |
||||
mockClient.emit(BeaconEvent.New, newLiveBeacon, new Beacon(newLiveBeacon)); |
||||
}); |
||||
|
||||
// button not disabled and expiry time shown
|
||||
expect(findByTestId(component, 'room-live-share-stop-sharing').at(0).props().disabled).toBeFalsy(); |
||||
expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('11h left'); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,32 @@ |
||||
/* |
||||
Copyright 2022 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 { mount } from 'enzyme'; |
||||
|
||||
import '../../../skinned-sdk'; |
||||
import StyledLiveBeaconIcon from '../../../../src/components/views/beacon/StyledLiveBeaconIcon'; |
||||
|
||||
describe('<StyledLiveBeaconIcon />', () => { |
||||
const defaultProps = {}; |
||||
const getComponent = (props = {}) => |
||||
mount(<StyledLiveBeaconIcon {...defaultProps} {...props} />); |
||||
|
||||
it('renders', () => { |
||||
const component = getComponent(); |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,101 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`<RoomLiveShareWarning /> when user has live beacons renders correctly with one live beacon in room 1`] = ` |
||||
<RoomLiveShareWarning |
||||
roomId="$room1:server.org" |
||||
> |
||||
<div |
||||
className="mx_RoomLiveShareWarning" |
||||
> |
||||
<StyledLiveBeaconIcon |
||||
className="mx_RoomLiveShareWarning_icon" |
||||
> |
||||
<div |
||||
className="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon" |
||||
/> |
||||
</StyledLiveBeaconIcon> |
||||
<span |
||||
className="mx_RoomLiveShareWarning_label" |
||||
> |
||||
You are sharing your live location |
||||
</span> |
||||
<span |
||||
className="mx_RoomLiveShareWarning_expiry" |
||||
data-test-id="room-live-share-expiry" |
||||
> |
||||
1h left |
||||
</span> |
||||
<AccessibleButton |
||||
data-test-id="room-live-share-stop-sharing" |
||||
disabled={false} |
||||
element="button" |
||||
kind="danger" |
||||
onClick={[Function]} |
||||
role="button" |
||||
tabIndex={0} |
||||
> |
||||
<button |
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger" |
||||
data-test-id="room-live-share-stop-sharing" |
||||
onClick={[Function]} |
||||
onKeyDown={[Function]} |
||||
onKeyUp={[Function]} |
||||
role="button" |
||||
tabIndex={0} |
||||
> |
||||
Stop sharing |
||||
</button> |
||||
</AccessibleButton> |
||||
</div> |
||||
</RoomLiveShareWarning> |
||||
`; |
||||
|
||||
exports[`<RoomLiveShareWarning /> when user has live beacons renders correctly with two live beacons in room 1`] = ` |
||||
<RoomLiveShareWarning |
||||
roomId="$room2:server.org" |
||||
> |
||||
<div |
||||
className="mx_RoomLiveShareWarning" |
||||
> |
||||
<StyledLiveBeaconIcon |
||||
className="mx_RoomLiveShareWarning_icon" |
||||
> |
||||
<div |
||||
className="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon" |
||||
/> |
||||
</StyledLiveBeaconIcon> |
||||
<span |
||||
className="mx_RoomLiveShareWarning_label" |
||||
> |
||||
You are sharing 2 live locations |
||||
</span> |
||||
<span |
||||
className="mx_RoomLiveShareWarning_expiry" |
||||
data-test-id="room-live-share-expiry" |
||||
> |
||||
12h left |
||||
</span> |
||||
<AccessibleButton |
||||
data-test-id="room-live-share-stop-sharing" |
||||
disabled={false} |
||||
element="button" |
||||
kind="danger" |
||||
onClick={[Function]} |
||||
role="button" |
||||
tabIndex={0} |
||||
> |
||||
<button |
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger" |
||||
data-test-id="room-live-share-stop-sharing" |
||||
onClick={[Function]} |
||||
onKeyDown={[Function]} |
||||
onKeyUp={[Function]} |
||||
role="button" |
||||
tabIndex={0} |
||||
> |
||||
Stop sharing |
||||
</button> |
||||
</AccessibleButton> |
||||
</div> |
||||
</RoomLiveShareWarning> |
||||
`; |
||||
Loading…
Reference in new issue