Live location share - set time limit (#8082)
* add mocking helpers for platform peg Signed-off-by: Kerry Archibald <kerrya@element.io> * basic working live duration dropdown Signed-off-by: Kerry Archibald <kerrya@element.io> * add duration format utility Signed-off-by: Kerry Archibald <kerrya@element.io> * add duration dropdown to live location picker Signed-off-by: Kerry Archibald <kerrya@element.io> * adjust style to allow overflow and variable height chin Signed-off-by: Kerry Archibald <kerrya@element.io> * tidy comments Signed-off-by: Kerry Archibald <kerrya@element.io> * arrow fn change Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
8418b4fd71
commit
14653d1378
13 changed files with 366 additions and 37 deletions
|
|
@ -201,3 +201,25 @@ export function formatRelativeTime(date: Date, showTwelveHour = false): string {
|
|||
return relativeDate;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats duration in ms to human readable string
|
||||
* Returns value in biggest possible unit (day, hour, min, second)
|
||||
* Rounds values up until unit threshold
|
||||
* ie. 23:13:57 -> 23h, 24:13:57 -> 1d, 44:56:56 -> 2d
|
||||
*/
|
||||
const MINUTE_MS = 60000;
|
||||
const HOUR_MS = MINUTE_MS * 60;
|
||||
const DAY_MS = HOUR_MS * 24;
|
||||
export function formatDuration(durationMs: number): string {
|
||||
if (durationMs >= DAY_MS) {
|
||||
return _t('%(value)sd', { value: Math.round(durationMs / DAY_MS) });
|
||||
}
|
||||
if (durationMs >= HOUR_MS) {
|
||||
return _t('%(value)sh', { value: Math.round(durationMs / HOUR_MS) });
|
||||
}
|
||||
if (durationMs >= MINUTE_MS) {
|
||||
return _t('%(value)sm', { value: Math.round(durationMs / MINUTE_MS) });
|
||||
}
|
||||
return _t('%(value)ss', { value: Math.round(durationMs / 1000) });
|
||||
}
|
||||
|
|
|
|||
72
src/components/views/location/LiveDurationDropdown.tsx
Normal file
72
src/components/views/location/LiveDurationDropdown.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/*
|
||||
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 { formatDuration } from '../../../DateUtils';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import Dropdown from '../elements/Dropdown';
|
||||
|
||||
const DURATION_MS = {
|
||||
fifteenMins: 900000,
|
||||
oneHour: 3600000,
|
||||
eightHours: 28800000,
|
||||
};
|
||||
|
||||
export const DEFAULT_DURATION_MS = DURATION_MS.fifteenMins;
|
||||
|
||||
interface Props {
|
||||
timeout: number;
|
||||
onChange: (timeout: number) => void;
|
||||
}
|
||||
|
||||
const getLabel = (durationMs: number) => {
|
||||
return _t('Share for %(duration)s', { duration: formatDuration(durationMs) });
|
||||
};
|
||||
|
||||
const LiveDurationDropdown: React.FC<Props> = ({ timeout, onChange }) => {
|
||||
const options = Object.values(DURATION_MS).map((duration) =>
|
||||
({ key: duration.toString(), duration, label: getLabel(duration) }),
|
||||
);
|
||||
|
||||
// timeout is not one of our default values
|
||||
// eg it was set by another client
|
||||
if (!Object.values(DURATION_MS).includes(timeout)) {
|
||||
options.push({
|
||||
key: timeout.toString(), duration: timeout, label: getLabel(timeout),
|
||||
});
|
||||
}
|
||||
|
||||
const onOptionChange = (key: string) => {
|
||||
// stringified value back to number
|
||||
onChange(+key);
|
||||
};
|
||||
|
||||
return <Dropdown
|
||||
id='live-duration'
|
||||
data-test-id='live-duration-dropdown'
|
||||
label={getLabel(timeout)}
|
||||
value={timeout.toString()}
|
||||
onOptionChange={onOptionChange}
|
||||
className='mx_LiveDurationDropdown'
|
||||
>
|
||||
{ options.map(({ key, label }) =>
|
||||
<div data-test-id={`live-duration-option-${key}`} key={key}>{ label }</div>,
|
||||
) }
|
||||
</Dropdown>;
|
||||
};
|
||||
|
||||
export default LiveDurationDropdown;
|
||||
|
|
@ -35,6 +35,7 @@ import { LocationShareError } from './LocationShareErrors';
|
|||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import { MapError } from './MapError';
|
||||
import { getUserNameColorClass } from '../../../utils/FormattingUtils';
|
||||
import LiveDurationDropdown, { DEFAULT_DURATION_MS } from './LiveDurationDropdown';
|
||||
export interface ILocationPickerProps {
|
||||
sender: RoomMember;
|
||||
shareType: LocationShareType;
|
||||
|
|
@ -50,6 +51,7 @@ interface IPosition {
|
|||
timestamp: number;
|
||||
}
|
||||
interface IState {
|
||||
timeout: number;
|
||||
position?: IPosition;
|
||||
error?: LocationShareError;
|
||||
}
|
||||
|
|
@ -70,6 +72,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
|
||||
this.state = {
|
||||
position: undefined,
|
||||
timeout: DEFAULT_DURATION_MS,
|
||||
error: undefined,
|
||||
};
|
||||
}
|
||||
|
|
@ -206,10 +209,17 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
}
|
||||
};
|
||||
|
||||
private onOk = () => {
|
||||
const position = this.state.position;
|
||||
private onTimeoutChange = (timeout: number): void => {
|
||||
this.setState({ timeout });
|
||||
};
|
||||
|
||||
this.props.onChoose(position ? { uri: getGeoUri(position), timestamp: position.timestamp } : {});
|
||||
private onOk = () => {
|
||||
const { timeout, position } = this.state;
|
||||
|
||||
this.props.onChoose(
|
||||
position ? { uri: getGeoUri(position), timestamp: position.timestamp, timeout } : {
|
||||
timeout,
|
||||
});
|
||||
this.props.onFinished();
|
||||
};
|
||||
|
||||
|
|
@ -235,7 +245,12 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
}
|
||||
<div className="mx_LocationPicker_footer">
|
||||
<form onSubmit={this.onOk}>
|
||||
|
||||
{ this.props.shareType === LocationShareType.Live &&
|
||||
<LiveDurationDropdown
|
||||
onChange={this.onTimeoutChange}
|
||||
timeout={this.state.timeout}
|
||||
/>
|
||||
}
|
||||
<AccessibleButton
|
||||
data-test-id="location-picker-submit-button"
|
||||
type="submit"
|
||||
|
|
@ -253,21 +268,32 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
`mx_MLocationBody_marker-${this.props.shareType}`,
|
||||
userColorClass,
|
||||
)}
|
||||
id={this.getMarkerId()}>
|
||||
<div className="mx_MLocationBody_markerBorder">
|
||||
{ isSharingOwnLocation(this.props.shareType) ?
|
||||
<MemberAvatar
|
||||
member={this.props.sender}
|
||||
width={27}
|
||||
height={27}
|
||||
viewUserOnClick={false}
|
||||
/>
|
||||
: <LocationIcon className="mx_MLocationBody_markerIcon" />
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
className="mx_MLocationBody_pointer"
|
||||
/>
|
||||
id={this.getMarkerId()}
|
||||
>
|
||||
{ /*
|
||||
maplibregl hijacks the div above to style the marker
|
||||
it must be in the dom when the map is initialised
|
||||
and keep a consistent class
|
||||
we want to hide the marker until it is set in the case of pin drop
|
||||
so hide the internal visible elements
|
||||
*/ }
|
||||
|
||||
{ !!this.marker && <>
|
||||
<div className="mx_MLocationBody_markerBorder">
|
||||
{ isSharingOwnLocation(this.props.shareType) ?
|
||||
<MemberAvatar
|
||||
member={this.props.sender}
|
||||
width={27}
|
||||
height={27}
|
||||
viewUserOnClick={false}
|
||||
/>
|
||||
: <LocationIcon className="mx_MLocationBody_markerIcon" />
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
className="mx_MLocationBody_pointer"
|
||||
/>
|
||||
</> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -106,6 +106,10 @@
|
|||
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
|
||||
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s",
|
||||
"%(date)s at %(time)s": "%(date)s at %(time)s",
|
||||
"%(value)sd": "%(value)sd",
|
||||
"%(value)sh": "%(value)sh",
|
||||
"%(value)sm": "%(value)sm",
|
||||
"%(value)ss": "%(value)ss",
|
||||
"Who would you like to add to this community?": "Who would you like to add to this community?",
|
||||
"Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID",
|
||||
"Invite new community members": "Invite new community members",
|
||||
|
|
@ -2172,6 +2176,7 @@
|
|||
"Submit logs": "Submit logs",
|
||||
"Can't load this message": "Can't load this message",
|
||||
"toggle event": "toggle event",
|
||||
"Share for %(duration)s": "Share for %(duration)s",
|
||||
"Location": "Location",
|
||||
"Could not fetch location": "Could not fetch location",
|
||||
"Click to move the pin": "Click to move the pin",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue