Live location sharing - beacon in timeline happy path (#8285)

* extract location markers into generic Marker Signed-off-by: Kerry Archibald <kerrya@element.io> * wrap marker in smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * test smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * working map in location body Signed-off-by: Kerry Archibald <kerrya@element.io> * remove skinned sdk Signed-off-by: Kerry Archibald <kerrya@element.io> * use new ZoomButtons in MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * test LocationViewDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * update commentt Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * extract livetimeremaining into own component Signed-off-by: Kerry Archibald <kerrya@element.io> * extract more beacon state utils Signed-off-by: Kerry Archibald <kerrya@element.io> * update tests for roomlivesharewarning Signed-off-by: Kerry Archibald <kerrya@element.io> * add idle status to live beacon icon * add beacon map and status chin Signed-off-by: Kerry Archibald <kerrya@element.io> * add handling for bubbles Signed-off-by: Kerry Archibald <kerrya@element.io> * tests for BeaconBody Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * move displaystatus check up to mbeaconbody Signed-off-by: Kerry Archibald <kerrya@element.io> * test BeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * rename BeaconStatusChin -> BeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * make BeaconStatus generic Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * adjust spinner size Signed-off-by: Kerry Archibald <kerrya@element.io> * polish and copyrights Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * better comment Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-04-13 10:44:15 +02:00 · 2022-04-13 10:44:15 +02:00 · e59edb7101
commit e59edb7101
parent b4a91ea442
22 changed files with 562 additions and 91 deletions
--- a/src/components/views/beacon/BeaconStatus.tsx
+++ b/src/components/views/beacon/BeaconStatus.tsx
@ -0,0 +1,71 @@
+/*
+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, { HTMLProps } from 'react';
+import classNames from 'classnames';
+import { Beacon } from 'matrix-js-sdk/src/matrix';
+
+import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
+import LiveTimeRemaining from './LiveTimeRemaining';
+import { BeaconDisplayStatus } from './displayStatus';
+
+interface Props {
+    displayStatus: BeaconDisplayStatus;
+    beacon?: Beacon;
+    label?: string;
+    // assumes permission to stop was checked by parent
+    stopBeacon?: () => void;
+}
+
+const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
+    ({ beacon, displayStatus, label, stopBeacon, className, ...rest }) => {
+        const isIdle = displayStatus === BeaconDisplayStatus.Loading ||
+            displayStatus === BeaconDisplayStatus.Stopped;
+
+        return <div
+            {...rest}
+            className={classNames('mx_BeaconStatus', `mx_BeaconStatus_${displayStatus}`, className)}
+        >
+            <StyledLiveBeaconIcon
+                className='mx_BeaconStatus_icon'
+                withError={displayStatus === BeaconDisplayStatus.Error}
+                isIdle={isIdle}
+            />
+            { displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> }
+            { displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> }
+
+            { /* TODO error */ }
+
+            { displayStatus === BeaconDisplayStatus.Active && beacon && <>
+                <div className='mx_BeaconStatus_activeDescription'>
+                    { label }
+                    <LiveTimeRemaining beacon={beacon} />
+                </div>
+                { stopBeacon && <AccessibleButton
+                    data-test-id='beacon-status-stop-beacon'
+                    kind='link'
+                    onClick={stopBeacon}
+                    className='mx_BeaconStatus_stopButton'
+                >{ _t('Stop') }</AccessibleButton>
+                }
+            </>
+            }
+        </div>;
+    };
+
+export default BeaconStatus;