Add simple live share warning

res/css/_components.scss

@@ -4,6 +4,7 @@
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
+@import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
 @import "./components/views/location/_MapError.scss";
 @import "./components/views/location/_ShareDialogButtons.scss";

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

@@ -0,0 +1,31 @@
+/*
+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_LeftPanelLiveShareWarning {
+ width: 100%;
+ box-sizing: border-box;
+
+ padding: $spacing-4;
+ text-align: center;
+
+ background-color: $accent;
+ color: #fff;
+ font-size: $font-10px;
+
+ // panel backdrops overlay the whole sidepanel
+ // go above to get hover for title
+ z-index: 1;
+}

res/css/structures/_LeftPanel.scss

@@ -23,13 +23,20 @@ $roomListCollapsedWidth: 68px;
  }
 }
 
-.mx_LeftPanel_wrapper {
+.mx_LeftPanel_outerWrapper {
  display: flex;
+ flex-direction: column;
  max-width: 50%;
  position: relative;
 
  // Contain the amount of layers rendered by constraining what actually needs re-layering via css
  contain: layout paint;
+}
+
+.mx_LeftPanel_wrapper {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
 
  .mx_LeftPanel_wrapper--user {
  background-color: $roomlist-bg-color;

res/css/structures/_MatrixChat.scss

@@ -63,7 +63,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
  background-color: $background;
 
  flex: 1 1 0;

src/components/structures/LoggedInView.tsx

@@ -75,6 +75,7 @@ import RightPanelStore from '../../stores/right-panel/RightPanelStore';
 import { TimelineRenderingType } from "../../contexts/RoomContext";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
+import LeftPanelLiveShareWarning from '../views/beacon/LeftPanelLiveShareWarning';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // 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> {
  >
  <ToastContainer />
  <div className={bodyClasses}>
- <div className='mx_LeftPanel_wrapper'>
- { SettingsStore.getValue('TagPanel.enableTagPanel') &&
+ <div className='mx_LeftPanel_outerWrapper'>
+ <LeftPanelLiveShareWarning isMinimized={this.props.collapseLhs || false} />
+ <div className='mx_LeftPanel_wrapper'>
+ { SettingsStore.getValue('TagPanel.enableTagPanel') &&
  (<div className="mx_GroupFilterPanelContainer">
  <BackdropPanel
  blurMultiplier={0.5}
@@ -704,26 +707,27 @@ class LoggedInView extends React.Component<IProps, IState> {
  <GroupFilterPanel />
  { SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
  </div>)
- }
- { SpaceStore.spacesEnabled ? <>
+ }
+ { SpaceStore.spacesEnabled ? <>
+ <BackdropPanel
+ blurMultiplier={0.5}
+ backgroundImage={this.state.backgroundImage}
+ />
+ <SpacePanel />
+ </> : null }
  <BackdropPanel
- blurMultiplier={0.5}
  backgroundImage={this.state.backgroundImage}
  />
- <SpacePanel />
- </> : null }
- <BackdropPanel
- backgroundImage={this.state.backgroundImage}
- />
- <div
- className="mx_LeftPanel_wrapper--user"
- ref={this._resizeContainer}
- data-collapsed={this.props.collapseLhs ? true : undefined}
- >
- <LeftPanel
- isMinimized={this.props.collapseLhs || false}
- resizeNotifier={this.props.resizeNotifier}
- />
+ <div
+ className="mx_LeftPanel_wrapper--user"
+ ref={this._resizeContainer}
+ data-collapsed={this.props.collapseLhs ? true : undefined}
+ >
+ <LeftPanel
+ isMinimized={this.props.collapseLhs || false}
+ resizeNotifier={this.props.resizeNotifier}
+ />
+ </div>
  </div>
  </div>
  <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />

src/components/views/beacon/LeftPanelLiveShareWarning.tsx

@@ -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.
+*/
+
+import classNames from 'classnames';
+import React from 'react';
+
+import { useEventEmitterState } from '../../../hooks/useEventEmitter';
+import { _t } from '../../../languageHandler';
+import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
+import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
+
+interface Props {
+ isMinimized?: boolean;
+}
+
+const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
+ const hasLiveBeacons = useEventEmitterState(
+ OwnBeaconStore.instance,
+ OwnBeaconStoreEvent.LivenessChange,
+ () => OwnBeaconStore.instance.hasLiveBeacons(),
+ );
+
+ if (!hasLiveBeacons) {
+ return null;
+ }
+
+ return <div
+ className={classNames('mx_LeftPanelLiveShareWarning', {
+ 'mx_LeftPanelLiveShareWarning__minimized': isMinimized,
+ })}
+ title={isMinimized ? _t('You are sharing your live location') : undefined}
+ >
+ { isMinimized ? <LiveLocationIcon height={10} /> : _t('You are sharing your live location') }
+ </div>;
+};
+
+export default LeftPanelLiveShareWarning;

src/i18n/strings/en_EN.json

@@ -2956,6 +2956,7 @@
  "Beta": "Beta",
  "Leave the beta": "Leave the beta",
  "Join the beta": "Join the beta",
+ "You are sharing your live location": "You are sharing your live location",
  "Avatar": "Avatar",
  "This room is public": "This room is public",
  "Away": "Away",

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

@@ -0,0 +1,80 @@
+/*
+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 { mocked } from 'jest-mock';
+import { mount } from 'enzyme';
+
+import '../../../skinned-sdk';
+import LeftPanelLiveShareWarning from '../../../../src/components/views/beacon/LeftPanelLiveShareWarning';
+import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../../src/stores/OwnBeaconStore';
+import { flushPromises } from '../../../test-utils';
+
+jest.mock('../../../../src/stores/OwnBeaconStore', () => {
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
+ const EventEmitter = require("events");
+ class MockOwnBeaconStore extends EventEmitter {
+ public hasLiveBeacons = jest.fn().mockReturnValue(false);
+ }
+ return {
+ // @ts-ignore
+ ...jest.requireActual('../../../../src/stores/OwnBeaconStore'),
+ OwnBeaconStore: {
+ instance: new MockOwnBeaconStore() as unknown as OwnBeaconStore,
+ },
+ };
+},
+);
+
+describe('<LeftPanelLiveShareWarning />', () => {
+ const defaultProps = {};
+ const getComponent = (props = {}) =>
+ mount(<LeftPanelLiveShareWarning {...defaultProps} {...props} />);
+
+ it('renders nothing when user has no live beacons', () => {
+ const component = getComponent();
+ expect(component.html()).toBe(null);
+ });
+
+ describe('when user has live beacons', () => {
+ beforeEach(() => {
+ mocked(OwnBeaconStore.instance).hasLiveBeacons.mockReturnValue(true);
+ });
+ it('renders correctly when not minimized', () => {
+ const component = getComponent();
+ expect(component).toMatchSnapshot();
+ });
+
+ it('renders correctly when minimized', () => {
+ const component = getComponent({ isMinimized: true });
+ expect(component).toMatchSnapshot();
+ });
+
+ it('removes itself when user stops having live beacons', async () => {
+ const component = getComponent({ isMinimized: true });
+ // started out rendered
+ expect(component.html()).toBeTruthy();
+
+ mocked(OwnBeaconStore.instance).hasLiveBeacons.mockReturnValue(false);
+ OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.LivenessChange, false);
+
+ await flushPromises();
+ component.setProps({});
+
+ expect(component.html()).toBe(null);
+ });
+ });
+});

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LeftPanelLiveShareWarning /> when user has live beacons renders correctly when minimized 1`] = `
+<LeftPanelLiveShareWarning
+ isMinimized={true}
+>
+ <div
+ className="mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
+ title="You are sharing your live location"
+ >
+ <div
+ height={10}
+ />
+ </div>
+</LeftPanelLiveShareWarning>
+`;
+
+exports[`<LeftPanelLiveShareWarning /> when user has live beacons renders correctly when not minimized 1`] = `
+<LeftPanelLiveShareWarning>
+ <div
+ className="mx_LeftPanelLiveShareWarning"
+ >
+ You are sharing your live location
+ </div>
+</LeftPanelLiveShareWarning>
+`;