Browse Source

Support for people nearby

master
Global Server 3 years ago
parent
commit
3e0fa8ec46
  1. 2
      src/components/peerProfile.ts
  2. 5
      src/components/sidebarLeft/index.ts
  3. 108
      src/components/sidebarLeft/tabs/PeopleNearby.ts
  4. 30
      src/components/sidebarLeft/tabs/generalSettings.ts
  5. 18
      src/components/sidebarLeft/tabs/newGroup.ts
  6. 18
      src/lang.ts
  7. 2
      src/lib/appManagers/appStateManager.ts
  8. 6
      src/scss/partials/_peopleNearby.scss

2
src/components/peerProfile.ts

@ -126,7 +126,7 @@ export default class PeerProfile { @@ -126,7 +126,7 @@ export default class PeerProfile {
this.location = new Row({
title: ' ',
subtitleLangKey: 'AttachLocation',
subtitleLangKey: 'ChatLocation',
icon: 'location'
});

5
src/components/sidebarLeft/index.ts

@ -43,7 +43,6 @@ import { closeBtnMenu } from "../misc"; @@ -43,7 +43,6 @@ import { closeBtnMenu } from "../misc";
import { indexOfAndSplice } from "../../helpers/array";
import ButtonIcon from "../buttonIcon";
import confirmationPopup from "../confirmationPopup";
import AppUsersManager from "../../lib/appManagers/appUsersManager";
export const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
@ -255,10 +254,6 @@ export class AppSidebarLeft extends SidebarSlider { @@ -255,10 +254,6 @@ export class AppSidebarLeft extends SidebarSlider {
icon: 'newgroup',
text: 'NewGroup',
onClick: onNewGroupClick
},{
icon: 'newgroup',
text: 'NewGeoGroup',
onClick: onNewGeoGroupClick
}, {
icon: 'newprivate',
text: 'NewPrivateChat',

108
src/components/sidebarLeft/tabs/PeopleNearby.ts

@ -19,7 +19,12 @@ import PeerTitle from "../../peerTitle"; @@ -19,7 +19,12 @@ import PeerTitle from "../../peerTitle";
import lottieLoader from "../../../lib/rlottie/lottieLoader";
import PopupPeer from "../../popups/peer";
import AppNewGroupTab from "./newGroup";
import { toast } from "../../toast";
import { ButtonMenuItemOptions } from "../../buttonMenu";
import { cancelEvent } from "../../../helpers/dom/cancelEvent";
import type { LazyLoadQueueIntersector } from "../../lazyLoadQueue";
import I18n, { i18n } from "../../../lib/langPack";
import rootScope from '../../../lib/rootScope';
export default class AppPeopleNearby extends SliderSuperTab {
private usersCategory = new SearchGroup(true, 'contacts', true, 'people-nearby-users', false);
@ -28,6 +33,8 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -28,6 +33,8 @@ export default class AppPeopleNearby extends SliderSuperTab {
private isLocationWatched: boolean = false;
private errorCategory: HTMLElement;
private retryBtn: HTMLButtonElement;
private btnOptions: HTMLButtonElement;
private menuButtons: (ButtonMenuItemOptions & {verify?: () => boolean})[];
protected lazyLoadQueue: LazyLoadQueueIntersector;
@ -35,18 +42,29 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -35,18 +42,29 @@ export default class AppPeopleNearby extends SliderSuperTab {
this.container.classList.add('peoplenearby-container');
this.setTitle('PeopleNearby');
const btnMenu = ButtonMenuToggle({}, 'bottom-left', [{
this.menuButtons = [{
icon: 'tip',
text: 'PeopleNearby.VisibilityYes',
onClick: this.startWatching
text: 'MakeMyselfVisible',
onClick: () => this.startWatching(),
verify: () => !this.isLocationWatched
},
{
icon: 'tip',
text: 'PeopleNearby.VisibilityNo',
onClick: this.startWatching
}]);
text: 'StopShowingMe',
onClick: () => this.stopWatching(),
verify: () => this.isLocationWatched
},
{
icon: 'newgroup',
text: 'NearbyCreateGroup',
onClick: () => {
new AppNewGroupTab(this.slider).open([], true);
}
}];
this.header.append(btnMenu);
this.btnOptions = ButtonMenuToggle({}, 'bottom-left', this.menuButtons, () => this.verifyButtons());
this.header.append(this.btnOptions);
const locatingIcon = document.createElement('span');
locatingIcon.classList.add('tgico', 'tgico-location');
@ -65,7 +83,10 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -65,7 +83,10 @@ export default class AppPeopleNearby extends SliderSuperTab {
this.errorCategory.classList.add('text', 'hide', 'nearby-error');
this.retryBtn = ButtonCorner({icon: 'check'});
//this.retryBtn.classList.remove('is-visible');
const textContainer = document.createElement('div');
textContainer.classList.add('text', 'nearby-description');
textContainer.appendChild(i18n('PeopleNearbyInfo2'));
const chatsContainer = document.createElement('div');
chatsContainer.classList.add('chatlist-container');
@ -73,24 +94,58 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -73,24 +94,58 @@ export default class AppPeopleNearby extends SliderSuperTab {
chatsContainer.append(this.groupsCategory.container);
this.content.append(this.retryBtn);
this.scrollable.append(locatingAnimation, this.errorCategory, chatsContainer);
this.scrollable.append(
locatingAnimation,
textContainer,
this.errorCategory,
chatsContainer
);
}
public onCloseAfterTimeout() {
this.usersCategory.clear();
this.groupsCategory.clear();
}
private verifyButtons(e?: Event){
const isMenuOpen = !!e || !!(this.btnOptions && this.btnOptions.classList.contains('menu-open'));
e && cancelEvent(e);
this.menuButtons.filter(button => button.verify).forEach(button => {
button.element.classList.toggle('hide', !button.verify());
});
}
private parseDistance(distance: number){
return (distance >= 1000 ? String(distance/1000)+' km' : String(distance)+' m');
if(rootScope.settings.distanceUnit == 'miles'){
if(distance > 1609.34) {
return i18n('MilesAway', [Math.round(distance / 1609)]);
}else{
return i18n('FootsAway', [Math.round(distance * 3.281)]);
}
}else{
if(distance >= 1000){
return i18n('KMetersAway2', [distance / 1000]);
}else{
return i18n('MetersAway2', [distance]);
}
}
}
// @ts-ignore
public open() {
const result = super.open();
result.then(() => {
this.retryBtn.classList.remove('is-visible');
navigator.geolocation.getCurrentPosition(location => {
navigator.geolocation.getCurrentPosition((location) => {
this.latestLocationSaved = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
accuracy: location.coords.accuracy
};
console.log(this.latestLocationSaved);
appUsersManager.getLocated(
location.coords.latitude,
location.coords.longitude,
@ -130,16 +185,16 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -130,16 +185,16 @@ export default class AppPeopleNearby extends SliderSuperTab {
break;
}
}
dom.lastMessageSpan.append(', '+String(participantsCount)+' members');
dom.lastMessageSpan.append(', '+i18n('Members', [participantsCount]));
}
});
this.usersCategory.nameEl.textContent = '';
this.usersCategory.nameEl.append('Users');
this.usersCategory.nameEl.append(i18n('PeopleNearbyHeader'));
usersCounter && this.usersCategory.setActive();
this.groupsCategory.nameEl.textContent = '';
this.groupsCategory.nameEl.append('Groups');
this.groupsCategory.nameEl.append(i18n('ChatsNearbyHeader'));
groupsCounter && this.groupsCategory.setActive();
this.errorCategory.classList.toggle('hide', (usersCounter || groupsCounter));
@ -148,7 +203,7 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -148,7 +203,7 @@ export default class AppPeopleNearby extends SliderSuperTab {
}, (error) => {
this.errorCategory.classList.remove('hide');
this.retryBtn.classList.add('is-visible');
this.retryBtn.addEventListener('click', this.opeddn);
this.retryBtn.addEventListener('click', this.open);
if(error instanceof GeolocationPositionError){
this.errorCategory.innerHTML = "Location permission denied. Click below to retry.";
}else{
@ -162,12 +217,14 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -162,12 +217,14 @@ export default class AppPeopleNearby extends SliderSuperTab {
if(!this.latestLocationSaved || this.isLocationWatched) return;
this.isLocationWatched = true;
toast('Your position is now being shared. Do not close the page or it will be suspended.');
appUsersManager.getLocated(
this.latestLocationSaved.latitude,
this.latestLocationSaved.longitude,
this.latestLocationSaved.accuracy,
true, // background parameter
3600 // self_expires parameter
0x7fffffff // self_expires parameter
);
navigator.geolocation.watchPosition(
@ -177,14 +234,14 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -177,14 +234,14 @@ export default class AppPeopleNearby extends SliderSuperTab {
const distanceCheck = this.calculateDistance(
result.coords.latitude, result.coords.longitude,
this.latestLocationSaved.latitude, this.latestLocationSaved.longitude
) > 100;
);
if((isLatitudeDifferent || isLongitudeDifferent) && distanceCheck){
appUsersManager.getLocated(
result.coords.latitude,
result.coords.longitude,
result.coords.accuracy,
true, // background parameter
3600 // self_expires parameter
0x7fffffff // self_expires parameter
);
this.latestLocationSaved = {
latitude: result.coords.latitude,
@ -193,7 +250,20 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -193,7 +250,20 @@ export default class AppPeopleNearby extends SliderSuperTab {
}
}
}
)
);
}
private stopWatching(){
if(!this.isLocationWatched) return;
this.isLocationWatched = false;
toast('The sharing of your position has been stopped. You will no longer be visible to other users.');
appUsersManager.getLocated(
0, // latitude parameter
0, // longitude parameter
0, // accuracy parameter
false, // background parameter
0 // self_expires parameter
);
}
private calculateDistance(lat1: number, long1: number, lat2: number, long2: number){

30
src/components/sidebarLeft/tabs/generalSettings.ts

@ -134,6 +134,36 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable { @@ -134,6 +134,36 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
container.append(form);
}
{
const container = section('DistanceUnitsTitle');
const form = document.createElement('form');
const name = 'distance-unit';
const stateKey = 'settings.distanceUnit';
const kilometersRow = new Row({
radioField: new RadioField({
langKey: 'DistanceUnitsKilometers',
name,
value: 'kilometers',
stateKey
})
});
const milesRow = new Row({
radioField: new RadioField({
langKey: 'DistanceUnitsMiles',
name,
value: 'miles',
stateKey
})
});
form.append(kilometersRow.container, milesRow.container);
container.append(form);
}
{
const container = section('General.TimeFormat');

18
src/components/sidebarLeft/tabs/newGroup.ts

@ -13,7 +13,7 @@ import { SearchGroup } from "../../appSearch"; @@ -13,7 +13,7 @@ import { SearchGroup } from "../../appSearch";
import InputField from "../../inputField";
import { SliderSuperTab } from "../../slider";
import AvatarEdit from "../../avatarEdit";
import { i18n } from "../../../lib/langPack";
import I18n, { i18n } from "../../../lib/langPack";
import ButtonCorner from "../../buttonCorner";
interface OpenStreetMapInterface {
@ -57,7 +57,7 @@ export default class AppNewGroupTab extends SliderSuperTab { @@ -57,7 +57,7 @@ export default class AppNewGroupTab extends SliderSuperTab {
});
this.groupLocationInputField = new InputField({
label: 'ChannelGeoGroupLocation',
label: 'ChatLocation',
name: 'location',
canBeEdited: false
});
@ -134,9 +134,9 @@ export default class AppNewGroupTab extends SliderSuperTab { @@ -134,9 +134,9 @@ export default class AppNewGroupTab extends SliderSuperTab {
this.peerIds = peerIds;
if(isGeoChat){
this.setTitle('NewGeoGroup');
this.setTitle('NearbyCreateGroup');
this.groupLocationInputField.container.classList.remove('hide');
this.groupLocationInputField.setValueSilently('Locating...');
this.groupLocationInputField.setValueSilently(I18n.format('Loading', true));
this.startLocating();
}else{
this.groupLocationInputField.container.classList.add('hide');
@ -156,14 +156,14 @@ export default class AppNewGroupTab extends SliderSuperTab { @@ -156,14 +156,14 @@ export default class AppNewGroupTab extends SliderSuperTab {
this.searchGroup.nameEl.textContent = '';
this.searchGroup.nameEl.append(i18n('Members', [this.peerIds.length]));
this.searchGroup.setActive();
this.peerIds.length && this.searchGroup.setActive();
});
return result;
}
private startLocating(){
navigator.geolocation.getCurrentPosition(location => {
navigator.geolocation.getCurrentPosition((location) => {
this.userLocationCoords = {
lat: location.coords.latitude,
long: location.coords.longitude
@ -184,6 +184,12 @@ export default class AppNewGroupTab extends SliderSuperTab { @@ -184,6 +184,12 @@ export default class AppNewGroupTab extends SliderSuperTab {
this.groupLocationInputField.setValueSilently(response.display_name);
}
);
}, (error) => {
if(error instanceof GeolocationPositionError){
this.groupLocationInputField.setValueSilently('Location permission denied. Please retry later.');
}else{
this.groupLocationInputField.setValueSilently('An error has occurred. Please retry later.');
}
});
}
}

18
src/lang.ts

@ -1,8 +1,21 @@ @@ -1,8 +1,21 @@
const lang = {
"DistanceUnitsTitle":"Distance units",
"DistanceUnitsKilometers":"Kilometers",
"DistanceUnitsMiles":"Miles",
"PeopleNearby":"PeopleNearby",
"PeopleNearby.VisibilityYes":"Make me visible",
"PeopleNearby.VisibilityNo":"Disable visibility",
"MakeMyselfVisible":"Make myself visible",
"StopShowingMe":"Stop showing me",
"PeopleNearbyInfo2":"Exchange contact info with people nearby and find new friends.",
"NearbyCreateGroup":"Create a Local group",
"GrantPermissions":"Grant me permissions",
"AwayTo":"%1$s away",
"KMetersAway2":"%1$s km away",
"MetersAway2":"%1$s m away",
"MilesAway":"%1$s mi away",
"FootsAway":"%1$s ft away",
"PeopleNearbyHeader":"People nearby",
"ChatsNearbyHeader":"Groups nearby",
"ChatLocation":"Location",
"Animations": "Animations",
"AttachAlbum": "Album",
"Appearance.Color.Hex": "HEX",
@ -235,7 +248,6 @@ const lang = { @@ -235,7 +248,6 @@ const lang = {
"UsernameHelpLink": "This link opens a chat with you:\n%1$s",
"NewChannel": "New Channel",
"NewGroup": "New Group",
"NewGeoGroup": "New Geo-Group",
"Contacts": "Contacts",
"SavedMessages": "Saved Messages",
"Settings": "Settings",

2
src/lib/appManagers/appStateManager.ts

@ -70,6 +70,7 @@ export type State = { @@ -70,6 +70,7 @@ export type State = {
hiddenPinnedMessages: {[peerId: PeerId]: number},
settings: {
messagesTextSize: number,
distanceUnit: 'kilometers' | 'miles',
sendShortcut: 'enter' | 'ctrlEnter',
animationsEnabled: boolean,
autoDownload: {
@ -123,6 +124,7 @@ export const STATE_INIT: State = { @@ -123,6 +124,7 @@ export const STATE_INIT: State = {
hiddenPinnedMessages: {},
settings: {
messagesTextSize: 16,
distanceUnit: 'kilometers',
sendShortcut: 'enter',
animationsEnabled: true,
autoDownload: {

6
src/scss/partials/_peopleNearby.scss

@ -1,3 +1,9 @@ @@ -1,3 +1,9 @@
div.text.nearby-description {
margin-top: 15px;
text-align: center;
color: var(--primary-text-color);
}
div.text.nearby-error {
color: var(--gc-secondary-text-color);
margin-top: 10px;

Loading…
Cancel
Save