Live location sharing - render users own beacons in timeline

res/css/_components.scss

@@ -7,6 +7,7 @@
 @import "./components/views/beacon/_BeaconStatus.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/beacon/_LiveTimeRemaining.scss";
+@import "./components/views/beacon/_OwnBeaconStatus.scss";
 @import "./components/views/beacon/_RoomLiveShareWarning.scss";
 @import "./components/views/beacon/_StyledLiveBeaconIcon.scss";
 @import "./components/views/location/_LiveDurationDropdown.scss";

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

@@ -45,16 +45,17 @@ limitations under the License.
     margin-right: $spacing-8;
 }
 
-.mx_BeaconStatus_activeDescription {
+.mx_BeaconStatus_description {
     flex: 1;
     display: flex;
     flex-direction: column;
     line-height: $font-14px;
+
+    padding-right: $spacing-8;
+
+    // TODO handle text-overflow
 }
 
-.mx_BeaconStatus_stopButton {
-    // override button link_inline styles
-    color: $alert !important;
-    font-weight: $font-semi-bold !important;
-    text-transform: uppercase;
+.mx_BeaconStatus_expiryTime {
+    color: $secondary-content;
 }

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

@@ -0,0 +1,27 @@
+/*
+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_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
+    // align to top to make room for timestamp
+    // in bubble view
+    align-self: start;
+}
+
+.mx_OwnBeaconStatus_destructiveButton {
+    // override button link_inline styles
+    color: $alert !important;
+    font-weight: $font-semi-bold !important;
+}

src/components/views/beacon/BeaconStatus.tsx

@@ -20,20 +20,33 @@ 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';
+import { getBeaconExpiryTimestamp } from '../../../utils/beacon';
+import { formatTime } from '../../../DateUtils';
 
 interface Props {
     displayStatus: BeaconDisplayStatus;
+    displayLiveTimeRemaining?: boolean;
     beacon?: Beacon;
     label?: string;
-    // assumes permission to stop was checked by parent
-    stopBeacon?: () => void;
 }
 
+const BeaconExpiryTime: React.FC<{ beacon: Beacon }> = ({ beacon }) => {
+    const expiryTime = formatTime(new Date(getBeaconExpiryTimestamp(beacon)));
+    return <span className='mx_BeaconStatus_expiryTime'>{ _t('Live until %(expiryTime)s', { expiryTime }) }</span>;
+};
+
 const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
-    ({ beacon, displayStatus, label, stopBeacon, className, ...rest }) => {
+    ({
+        beacon,
+        displayStatus,
+        displayLiveTimeRemaining,
+        label,
+        className,
+        children,
+        ...rest
+    }) => {
         const isIdle = displayStatus === BeaconDisplayStatus.Loading ||
             displayStatus === BeaconDisplayStatus.Stopped;
 
@@ -46,25 +59,25 @@ const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
                 withError={displayStatus === BeaconDisplayStatus.Error}
                 isIdle={isIdle}
             />
-            { displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> }
-            { displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> }
+            <div className='mx_BeaconStatus_description'>
+
+                { displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> }
+                { displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> }
 
-            { /* TODO error */ }
+                { displayStatus === BeaconDisplayStatus.Error && <span>{ _t('Live location error') }</span> }
 
-            { 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>
+                { displayStatus === BeaconDisplayStatus.Active && beacon && <>
+                    <>
+                        { label }
+                        { displayLiveTimeRemaining ?
+                            <LiveTimeRemaining beacon={beacon} /> :
+                            <BeaconExpiryTime beacon={beacon} />
+                        }
+                    </>
+                </>
                 }
-            </>
-            }
+            </div>
+            { children }
         </div>;
     };
 

src/components/views/beacon/OwnBeaconStatus.tsx

@@ -0,0 +1,89 @@
+/*
+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 { Beacon } from 'matrix-js-sdk/src/matrix';
+import React, { HTMLProps } from 'react';
+
+import { _t } from '../../../languageHandler';
+import { useOwnLiveBeacons } from '../../../utils/beacon';
+import BeaconStatus from './BeaconStatus';
+import { BeaconDisplayStatus } from './displayStatus';
+import AccessibleButton from '../elements/AccessibleButton';
+
+interface Props {
+    displayStatus: BeaconDisplayStatus;
+    beacon?: Beacon;
+}
+
+/**
+ * Wraps BeaconStatus with more capabilities
+ * for errors and actions available for users own live beacons
+ */
+const OwnBeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({
+    beacon, displayStatus, className, ...rest
+}) => {
+    const {
+        hasWireError,
+        hasStopSharingError,
+        stoppingInProgress,
+        onStopSharing,
+        onResetWireError,
+    } = useOwnLiveBeacons([beacon?.identifier]);
+
+    // combine display status with errors that only occur for user's own beacons
+    const ownDisplayStatus = hasWireError || hasStopSharingError ?
+        BeaconDisplayStatus.Error :
+        displayStatus;
+
+    return <BeaconStatus
+        className='mx_MBeaconBody_chin'
+        beacon={beacon}
+        displayStatus={ownDisplayStatus}
+        label={_t('Live location enabled')}
+        displayLiveTimeRemaining
+        {...rest}
+    >
+        { ownDisplayStatus === BeaconDisplayStatus.Active && <AccessibleButton
+            data-test-id='beacon-status-stop-beacon'
+            kind='link'
+            onClick={onStopSharing}
+            className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
+            disabled={stoppingInProgress}
+        >
+            { _t('Stop') }
+        </AccessibleButton>
+        }
+        { hasWireError && <AccessibleButton
+            data-test-id='beacon-status-reset-wire-error'
+            kind='link'
+            onClick={onResetWireError}
+            className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
+        >
+            { _t('Retry') }
+        </AccessibleButton>
+        }
+        { hasStopSharingError && <AccessibleButton
+            data-test-id='beacon-status-stop-beacon-retry'
+            kind='link'
+            onClick={onStopSharing}
+            className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
+        >
+            { _t('Retry') }
+        </AccessibleButton> }
+    </BeaconStatus>;
+};
+
+export default OwnBeaconStatus;

src/components/views/messages/MBeaconBody.tsx

@@ -14,22 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Beacon, BeaconEvent, MatrixEvent } from 'matrix-js-sdk/src/matrix';
 import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers';
 import { randomString } from 'matrix-js-sdk/src/randomstring';
 
 import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/location.svg';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import { useEventEmitterState } from '../../../hooks/useEventEmitter';
+import { _t } from '../../../languageHandler';
 import { useBeacon } from '../../../utils/beacon';
 import { isSelfLocation } from '../../../utils/location';
 import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displayStatus';
+import BeaconStatus from '../beacon/BeaconStatus';
 import Spinner from '../elements/Spinner';
 import Map from '../location/Map';
 import SmartMarker from '../location/SmartMarker';
-import BeaconStatus from '../beacon/BeaconStatus';
+import OwnBeaconStatus from '../beacon/OwnBeaconStatus';
 import { IBodyProps } from "./IBodyProps";
-import { _t } from '../../../languageHandler';
 
 const useBeaconState = (beaconInfoEvent: MatrixEvent): {
     beacon?: Beacon;
@@ -83,13 +85,13 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
         latestLocationState,
     } = useBeaconState(mxEvent);
     const mapId = useUniqueId(mxEvent.getId());
-
     const [error, setError] = useState<Error>();
-
+    const matrixClient = useContext(MatrixClientContext);
     const displayStatus = getBeaconDisplayStatus(isLive, latestLocationState, error);
-
     const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
 
+    const isOwnBeacon = beacon?.beaconInfoOwner === matrixClient.getUserId();
+
     return (
         <div className='mx_MBeaconBody' ref={ref}>
             { displayStatus === BeaconDisplayStatus.Active ?
@@ -106,6 +108,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
                                 id={`${mapId}-marker`}
                                 geoUri={latestLocationState.uri}
                                 roomMember={markerRoomMember}
+                                useMemberColor
                             />
                     }
                 </Map>
@@ -116,12 +119,19 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
                     }
                 </div>
             }
-            <BeaconStatus
-                className='mx_MBeaconBody_chin'
-                beacon={beacon}
-                displayStatus={displayStatus}
-                label={_t('View live location')}
-            />
+            { isOwnBeacon ?
+                <OwnBeaconStatus
+                    className='mx_MBeaconBody_chin'
+                    beacon={beacon}
+                    displayStatus={displayStatus}
+                /> :
+                <BeaconStatus
+                    className='mx_MBeaconBody_chin'
+                    beacon={beacon}
+                    displayStatus={displayStatus}
+                    label={_t('View live location')}
+                />
+            }
         </div>
     );
 });

src/i18n/strings/en_EN.json

@@ -2901,11 +2901,14 @@
     "Beta": "Beta",
     "Leave the beta": "Leave the beta",
     "Join the beta": "Join the beta",
+    "Live until %(expiryTime)s": "Live until %(expiryTime)s",
     "Loading live location...": "Loading live location...",
     "Live location ended": "Live location ended",
+    "Live location error": "Live location error",
     "An error occured whilst sharing your live location": "An error occured whilst sharing your live location",
     "You are sharing your live location": "You are sharing your live location",
     "%(timeRemaining)s left": "%(timeRemaining)s left",
+    "Live location enabled": "Live location enabled",
     "An error occured whilst sharing your live location, please try again": "An error occured whilst sharing your live location, please try again",
     "An error occurred while stopping your live location, please try again": "An error occurred while stopping your live location, please try again",
     "Stop sharing": "Stop sharing",