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

Commit 9f6c238

Browse files
author
Kerry
authored
Add simple live share warning (#8066)
* add simple live share warning Signed-off-by: Kerry Archibald <[email protected]> * rough first cut of OwnBeaconStore Signed-off-by: Kerry Archibald <[email protected]> * working (?) has live beacons status Signed-off-by: Kerry Archibald <[email protected]> * lint Signed-off-by: Kerry Archibald <[email protected]> * add left panel share warning Signed-off-by: Kerry Archibald <[email protected]> * setup for tests Signed-off-by: Kerry Archibald <[email protected]> * test ownbeaconstore Signed-off-by: Kerry Archibald <[email protected]> * add copyright Signed-off-by: Kerry Archibald <[email protected]> * add copyright Signed-off-by: Kerry Archibald <[email protected]> * remove warning banner Signed-off-by: Kerry Archibald <[email protected]> * fix test Signed-off-by: Kerry Archibald <[email protected]> * fix tests for weird asyncstore closure issues Signed-off-by: Kerry Archibald <[email protected]> * fix OwnBeaconStore more... Signed-off-by: Kerry Archibald <[email protected]> * revert loose change to LeftPanel Signed-off-by: Kerry Archibald <[email protected]> * Revert "remove warning banner" This reverts commit 4529813. * test live share warning Signed-off-by: Kerry Archibald <[email protected]>
1 parent 59584cd commit 9f6c238

File tree

9 files changed

+221
-21
lines changed

9 files changed

+221
-21
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "./_font-sizes.scss";
55
@import "./_font-weights.scss";
66
@import "./_spacing.scss";
7+
@import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
78
@import "./components/views/location/_LocationShareMenu.scss";
89
@import "./components/views/location/_MapError.scss";
910
@import "./components/views/location/_ShareDialogButtons.scss";

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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_LeftPanelLiveShareWarning {
18+
width: 100%;
19+
box-sizing: border-box;
20+
21+
padding: $spacing-4;
22+
text-align: center;
23+
24+
background-color: $accent;
25+
color: #fff;
26+
font-size: $font-10px;
27+
28+
// panel backdrops overlay the whole sidepanel
29+
// go above to get hover for title
30+
z-index: 1;
31+
}

‎res/css/structures/_LeftPanel.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,20 @@ $roomListCollapsedWidth: 68px;
2323
}
2424
}
2525

26-
.mx_LeftPanel_wrapper {
26+
.mx_LeftPanel_outerWrapper {
2727
display: flex;
28+
flex-direction: column;
2829
max-width: 50%;
2930
position: relative;
3031

3132
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
3233
contain: layout paint;
34+
}
35+
36+
.mx_LeftPanel_wrapper {
37+
display: flex;
38+
flex-direction: row;
39+
flex: 1;
3340

3441
.mx_LeftPanel_wrapper--user {
3542
background-color: $roomlist-bg-color;

‎res/css/structures/_MatrixChat.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ limitations under the License.
6363
}
6464

6565
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
66-
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
66+
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
6767
background-color: $background;
6868

6969
flex: 1 1 0;

‎src/components/structures/LoggedInView.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ import RightPanelStore from '../../stores/right-panel/RightPanelStore';
7575
import { TimelineRenderingType } from "../../contexts/RoomContext";
7676
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
7777
import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
78+
import LeftPanelLiveShareWarning from '../views/beacon/LeftPanelLiveShareWarning';
7879

7980
// We need to fetch each pinned message individually (if we don't already have it)
8081
// so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -694,8 +695,10 @@ class LoggedInView extends React.Component<IProps, IState> {
694695
>
695696
<ToastContainer />
696697
<div className={bodyClasses}>
697-
<div className='mx_LeftPanel_wrapper'>
698-
{ SettingsStore.getValue('TagPanel.enableTagPanel') &&
698+
<div className='mx_LeftPanel_outerWrapper'>
699+
<LeftPanelLiveShareWarning isMinimized={this.props.collapseLhs || false} />
700+
<div className='mx_LeftPanel_wrapper'>
701+
{ SettingsStore.getValue('TagPanel.enableTagPanel') &&
699702
(<div className="mx_GroupFilterPanelContainer">
700703
<BackdropPanel
701704
blurMultiplier={0.5}
@@ -704,26 +707,27 @@ class LoggedInView extends React.Component<IProps, IState> {
704707
<GroupFilterPanel />
705708
{ SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
706709
</div>)
707-
}
708-
{ SpaceStore.spacesEnabled ? <>
710+
}
711+
{ SpaceStore.spacesEnabled ? <>
712+
<BackdropPanel
713+
blurMultiplier={0.5}
714+
backgroundImage={this.state.backgroundImage}
715+
/>
716+
<SpacePanel />
717+
</> : null }
709718
<BackdropPanel
710-
blurMultiplier={0.5}
711719
backgroundImage={this.state.backgroundImage}
712720
/>
713-
<SpacePanel />
714-
</> : null }
715-
<BackdropPanel
716-
backgroundImage={this.state.backgroundImage}
717-
/>
718-
<div
719-
className="mx_LeftPanel_wrapper--user"
720-
ref={this._resizeContainer}
721-
data-collapsed={this.props.collapseLhs ? true : undefined}
722-
>
723-
<LeftPanel
724-
isMinimized={this.props.collapseLhs || false}
725-
resizeNotifier={this.props.resizeNotifier}
726-
/>
721+
<div
722+
className="mx_LeftPanel_wrapper--user"
723+
ref={this._resizeContainer}
724+
data-collapsed={this.props.collapseLhs ? true : undefined}
725+
>
726+
<LeftPanel
727+
isMinimized={this.props.collapseLhs || false}
728+
resizeNotifier={this.props.resizeNotifier}
729+
/>
730+
</div>
727731
</div>
728732
</div>
729733
<ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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 classNames from 'classnames';
18+
import React from 'react';
19+
20+
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
21+
import { _t } from '../../../languageHandler';
22+
import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
23+
import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
24+
25+
interface Props {
26+
isMinimized?: boolean;
27+
}
28+
29+
const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
30+
const hasLiveBeacons = useEventEmitterState(
31+
OwnBeaconStore.instance,
32+
OwnBeaconStoreEvent.LivenessChange,
33+
() => OwnBeaconStore.instance.hasLiveBeacons(),
34+
);
35+
36+
if (!hasLiveBeacons) {
37+
return null;
38+
}
39+
40+
return <div
41+
className={classNames('mx_LeftPanelLiveShareWarning', {
42+
'mx_LeftPanelLiveShareWarning__minimized': isMinimized,
43+
})}
44+
title={isMinimized ? _t('You are sharing your live location') : undefined}
45+
>
46+
{ isMinimized ? <LiveLocationIcon height={10} /> : _t('You are sharing your live location') }
47+
</div>;
48+
};
49+
50+
export default LeftPanelLiveShareWarning;

‎src/i18n/strings/en_EN.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2956,6 +2956,7 @@
29562956
"Beta": "Beta",
29572957
"Leave the beta": "Leave the beta",
29582958
"Join the beta": "Join the beta",
2959+
"You are sharing your live location": "You are sharing your live location",
29592960
"Avatar": "Avatar",
29602961
"This room is public": "This room is public",
29612962
"Away": "Away",

‎test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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 from 'react';
18+
import { mocked } from 'jest-mock';
19+
import { mount } from 'enzyme';
20+
21+
import '../../../skinned-sdk';
22+
import LeftPanelLiveShareWarning from '../../../../src/components/views/beacon/LeftPanelLiveShareWarning';
23+
import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../../src/stores/OwnBeaconStore';
24+
import { flushPromises } from '../../../test-utils';
25+
26+
jest.mock('../../../../src/stores/OwnBeaconStore', () => {
27+
// eslint-disable-next-line @typescript-eslint/no-var-requires
28+
const EventEmitter = require("events");
29+
class MockOwnBeaconStore extends EventEmitter {
30+
public hasLiveBeacons = jest.fn().mockReturnValue(false);
31+
}
32+
return {
33+
// @ts-ignore
34+
...jest.requireActual('../../../../src/stores/OwnBeaconStore'),
35+
OwnBeaconStore: {
36+
instance: new MockOwnBeaconStore() as unknown as OwnBeaconStore,
37+
},
38+
};
39+
},
40+
);
41+
42+
describe('<LeftPanelLiveShareWarning />', () => {
43+
const defaultProps = {};
44+
const getComponent = (props = {}) =>
45+
mount(<LeftPanelLiveShareWarning {...defaultProps} {...props} />);
46+
47+
it('renders nothing when user has no live beacons', () => {
48+
const component = getComponent();
49+
expect(component.html()).toBe(null);
50+
});
51+
52+
describe('when user has live beacons', () => {
53+
beforeEach(() => {
54+
mocked(OwnBeaconStore.instance).hasLiveBeacons.mockReturnValue(true);
55+
});
56+
it('renders correctly when not minimized', () => {
57+
const component = getComponent();
58+
expect(component).toMatchSnapshot();
59+
});
60+
61+
it('renders correctly when minimized', () => {
62+
const component = getComponent({ isMinimized: true });
63+
expect(component).toMatchSnapshot();
64+
});
65+
66+
it('removes itself when user stops having live beacons', async () => {
67+
const component = getComponent({ isMinimized: true });
68+
// started out rendered
69+
expect(component.html()).toBeTruthy();
70+
71+
mocked(OwnBeaconStore.instance).hasLiveBeacons.mockReturnValue(false);
72+
OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.LivenessChange, false);
73+
74+
await flushPromises();
75+
component.setProps({});
76+
77+
expect(component.html()).toBe(null);
78+
});
79+
});
80+
});

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<LeftPanelLiveShareWarning /> when user has live beacons renders correctly when minimized 1`] = `
4+
<LeftPanelLiveShareWarning
5+
isMinimized={true}
6+
>
7+
<div
8+
className="mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
9+
title="You are sharing your live location"
10+
>
11+
<div
12+
height={10}
13+
/>
14+
</div>
15+
</LeftPanelLiveShareWarning>
16+
`;
17+
18+
exports[`<LeftPanelLiveShareWarning /> when user has live beacons renders correctly when not minimized 1`] = `
19+
<LeftPanelLiveShareWarning>
20+
<div
21+
className="mx_LeftPanelLiveShareWarning"
22+
>
23+
You are sharing your live location
24+
</div>
25+
</LeftPanelLiveShareWarning>
26+
`;

0 commit comments

Comments
 (0)