stream-chat-react
Version:
React components to create chat conversations or livestream style chat
35 lines (34 loc) • 3.33 kB
JavaScript
import { useEffect } from 'react';
import { useRef, useState } from 'react';
import React from 'react';
import { useChatContext, useTranslationContext } from '../../context';
import { ExternalLinkIcon, GeolocationIcon } from './icons';
export const Geolocation = ({ GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder, GeolocationMap, location, }) => {
const { channel, client } = useChatContext();
const { t } = useTranslationContext();
const [stoppedSharing, setStoppedSharing] = useState(!!location.end_at && new Date(location.end_at).getTime() < new Date().getTime());
const timeoutRef = useRef(undefined);
const isMyLocation = location.user_id === client.userID;
const isLiveLocation = !!location.end_at;
useEffect(() => {
if (!location.end_at)
return;
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => setStoppedSharing(true), new Date(location.end_at).getTime() - Date.now());
}, [location.end_at]);
return (React.createElement("div", { className: 'str-chat__message-attachment-geolocation', "data-testid": 'attachment-geolocation' },
React.createElement("div", { className: 'str-chat__message-attachment-geolocation__location-preview' }, GeolocationMap ? (React.createElement(GeolocationMap, { latitude: location.latitude, longitude: location.longitude })) : (React.createElement(GeolocationAttachmentMapPlaceholder, { location: location }))),
React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status' }, isLiveLocation ? (stoppedSharing ? (t('Location sharing ended')) : isMyLocation ? (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active' },
React.createElement("button", { className: 'str-chat__message-attachment-geolocation__stop-sharing-button', onClick: () => channel?.stopLiveLocationSharing(location) }, t('Stop sharing')),
React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-until' }, t('Live until {{ timestamp }}', {
timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),
})))) : (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active' },
React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-status' }, t('Live location')),
React.createElement("div", { className: 'str-chat__message-attachment-geolocation__status--active-until' }, t('Live until {{ timestamp }}', {
timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),
}))))) : (t('Current location')))));
};
const DefaultGeolocationAttachmentMapPlaceholder = ({ location, }) => (React.createElement("div", { className: 'str-chat__message-attachment-geolocation__placeholder', "data-testid": 'geolocation-attachment-map-placeholder' },
React.createElement(GeolocationIcon, null),
React.createElement("a", { className: 'str-chat__message-attachment-geolocation__placeholder-link', href: `https://maps.google.com?q=${[location.latitude, location.longitude].join()}`, rel: 'noreferrer', target: '_blank' },
React.createElement(ExternalLinkIcon, null))));