@ -5,31 +5,27 @@
@@ -5,31 +5,27 @@
* /
import { SliderSuperTab } from "../../slider" ;
import AvatarElement from "../../avatar" ;
import ButtonCorner from "../../buttonCorner" ;
import { InputUser } from "../../../layer" ;
import apiManager from "../../../lib/mtproto/mtprotoworker" ;
import appUsersManager from "../../../lib/appManagers/appUsersManager" ;
import appDialogsManager from "../../../lib/appManagers/appDialogsManager" ;
import appImManager from "../../../lib/appManagers/appImManager" ;
import ButtonMenuToggle from "../../buttonMenuToggle" ;
import { SearchGroup } from "../../appSearch" ;
import Button from "../../button" ;
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 { i18n , join , _i18n } from "../../../lib/langPack" ;
import rootScope from '../../../lib/rootScope' ;
import { wrapSticker } from "../../wrappers" ;
import appStickersManager from "../../../lib/appManagers/appStickersManager" ;
import SortedUserList from "../../sortedUserList" ;
import { PeerLocated , Update , Updates } from "../../../layer" ;
import appPeersManager from "../../../lib/appManagers/appPeersManager" ;
import { SettingChatListSection } from ".." ;
import appProfileManager from "../../../lib/appManagers/appProfileManager" ;
import appDialogsManager from "../../../lib/appManagers/appDialogsManager" ;
import { attachClickEvent } from "../../../helpers/dom/clickEvent" ;
import confirmationPopup from "../../confirmationPopup" ;
export default class AppPeopleNearby extends SliderSuperTab {
private usersCategory = new SearchGroup ( true , 'contacts' , true , 'people-nearby-users' , false ) ;
private groupsCategory = new SearchGroup ( true , 'contacts' , true , 'people-nearby-groups' , false ) ;
private latestLocationSaved : { latitude : number , longitude : number , accuracy : number } ;
export default class AppPeopleNearbyTab extends SliderSuperTab {
private latestLocationSaved : { latitude : number , longitude : number , accuracy : number } ;
private isLocationWatched : boolean = false ;
private errorCategory : HTMLElement ;
private retryBtn : HTMLButtonElement ;
@ -37,102 +33,155 @@ export default class AppPeopleNearby extends SliderSuperTab {
@@ -37,102 +33,155 @@ export default class AppPeopleNearby extends SliderSuperTab {
private menuButtons : ( ButtonMenuItemOptions & { verify ? : ( ) = > boolean } ) [ ] ;
protected lazyLoadQueue : LazyLoadQueueIntersector ;
protected peopleSection : SettingChatListSection ;
protected chatsSection : SettingChatListSection ;
protected locatedPeers : Map < PeerId , PeerLocated.peerLocated > ;
protected init() {
this . container . classList . add ( 'peoplenearby-container' ) ;
this . container . classList . add ( 'people- nearby-container' ) ;
this . setTitle ( 'PeopleNearby' ) ;
this . menuButtons = [ {
icon : 'tip' ,
text : 'MakeMyselfVisible' ,
onClick : ( ) = > this . startWatching ( ) ,
verify : ( ) = > ! this . isLocationWatched
} ,
{
icon : 'tip' ,
text : 'StopShowingMe' ,
onClick : ( ) = > this . stopWatching ( ) ,
verify : ( ) = > this . isLocationWatched
} ,
{
icon : 'newgroup' ,
text : 'NearbyCreateGroup' ,
onClick : ( ) = > {
new AppNewGroupTab ( this . slider ) . open ( [ ] , true ) ;
}
} ] ;
this . errorCategory = document . createElement ( 'div' ) ;
this . errorCategory . classList . add ( 'text' , 'hide' , 'nearby-error' ) ;
this . retryBtn = ButtonCorner ( { icon : 'check' } ) ;
const emoji = '🧭' ;
const doc = appStickersManager . getAnimatedEmojiSticker ( emoji ) ;
const stickerContainer = document . createElement ( 'div' ) ;
stickerContainer . classList . add ( 'sticker-container' ) ;
if ( doc ) {
wrapSticker ( {
doc ,
div : stickerContainer ,
loop : false ,
play : true ,
width : 86 ,
height : 86 ,
emoji ,
needUpscale : true
} ) . then ( ( ) = > {
// this.animation = player;
} ) ;
} else {
stickerContainer . classList . add ( 'media-sticker-wrapper' ) ;
}
const caption = document . createElement ( 'div' ) ;
caption . classList . add ( 'caption' ) ;
_i18n ( caption , 'PeopleNearbyInfo2' ) ;
this . locatedPeers = new Map ( ) ;
const m = ( ) = > {
const sortedUserList = new SortedUserList ( {
avatarSize : 42 ,
createChatListOptions : {
dialogSize : 48 ,
new : true
} ,
autonomous : false ,
onUpdate : ( element ) = > {
const peer = this . locatedPeers . get ( element . id ) ;
const elements : HTMLElement [ ] = [
this . parseDistance ( peer . distance )
] ;
if ( ! element . id . isUser ( ) ) {
elements . push ( appProfileManager . getChatMembersString ( element . id . toChatId ( ) ) ) ;
}
element . dom . lastMessageSpan . textContent = '' ;
element . dom . lastMessageSpan . append ( . . . join ( elements , false ) ) ;
} ,
getIndex : ( element ) = > {
const peer = this . locatedPeers . get ( element . id ) ;
return 0x7FFFFFFF - peer . distance ;
}
} ) ;
appDialogsManager . setListClickListener ( sortedUserList . list , undefined , undefined , false ) ;
return sortedUserList ;
} ;
this . btnOptions = ButtonMenuToggle ( { } , 'bottom-left' , this . menuButtons , ( ) = > this . verifyButtons ( ) ) ;
const peopleSection = this . peopleSection = new SettingChatListSection ( {
name : 'PeopleNearbyHeader' ,
sortedList : m ( )
} ) ;
this . header . append ( this . btnOptions ) ;
const chatsSection = this . chatsSection = new SettingChatListSection ( {
name : 'ChatsNearbyHeader' ,
sortedList : m ( )
} ) ;
const locatingIcon = document . createElement ( 'span' ) ;
locatingIcon . classList . add ( 'tgico' , 'tgico-location' ) ;
const btnMakeVisible = peopleSection . makeButton ( {
text : 'MakeMyselfVisible' ,
icon : 'location'
} ) ;
const locatingAnimation = document . createElement ( 'div' ) ;
locatingAnimation . classList . add ( 'locating-animation-container' ) ;
locatingAnimation . appendChild ( locatingIcon ) ;
const btnMakeInvisible = peopleSection . makeButton ( {
text : 'StopShowingMe' ,
icon : 'location'
} ) ;
for ( let i = 1 ; i <= 4 ; i ++ ) {
let animatingWaves = document . createElement ( 'div' ) ;
animatingWaves . classList . add ( 'locating-animation-waves' , 'wave-' + i ) ;
locatingAnimation . appendChild ( animatingWaves ) ;
}
const btnCreateGroup = chatsSection . makeButton ( {
text : 'NearbyCreateGroup' ,
icon : 'newgroup'
} ) ;
this . errorCategory = document . createElement ( 'div' ) ;
this . errorCategory . classList . add ( 'text' , 'hide' , 'nearby-error' ) ;
attachClickEvent ( btnMakeVisible , ( ) = > {
confirmationPopup ( {
titleLangKey : 'MakeMyselfVisibleTitle' ,
descriptionLangKey : 'MakeMyselfVisibleInfo' ,
button : {
langKey : 'OK'
}
} ) . then ( ( ) = > {
this . startWatching ( ) ;
} ) ;
} , { listenerSetter : this.listenerSetter } ) ;
this . retryBtn = ButtonCorner ( { icon : 'check' } ) ;
attachClickEvent ( btnMakeInvisible , ( ) = > {
this . stopWatching ( ) ;
} , { listenerSetter : this.listenerSetter } ) ;
const textContainer = document . createElement ( 'div' ) ;
textContainer . classList . add ( 'text' , 'nearby-description' ) ;
textContainer . appendChild ( i18n ( 'PeopleNearbyInfo2' ) ) ;
attachClickEvent ( btnCreateGroup , ( ) = > {
new AppNewGroupTab ( this . slider ) . open ( [ ] , true ) ;
} , { listenerSetter : this.listenerSetter } ) ;
const chatsContainer = document . createElement ( 'div' ) ;
chatsContainer . classList . add ( 'chatlist-container' ) ;
chatsContainer . append ( this . usersCategory . container ) ;
chatsContainer . append ( this . groupsCategory . container ) ;
btnMakeVisible . classList . add ( 'primary' ) ;
btnMakeInvisible . classList . add ( 'danger' ) ;
btnCreateGroup . classList . add ( 'primary' ) ;
this . content . append ( this . retryBtn ) ;
this . scrollable . append (
locatingAnimation ,
textContainer ,
this . errorCategory ,
chatsContainer
stickerContainer ,
caption ,
peopleSection . container ,
chatsSection . container ,
this . errorCategory
) ;
}
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 ) {
if ( rootScope . settings . distanceUnit == 'miles' ) {
private parseDistance ( distance : number ) {
if ( rootScope . settings . distanceUnit === 'miles' ) {
if ( distance > 1609.34 ) {
return i18n ( 'MilesAway' , [ Math . round ( distance / 1609 ) ] ) ;
} else {
} else {
return i18n ( 'FootsAway' , [ Math . round ( distance * 3.281 ) ] ) ;
}
} else {
if ( distance >= 1000 ) {
} else {
if ( distance >= 1000 ) {
return i18n ( 'KMetersAway2' , [ distance / 1000 ] ) ;
} else {
} else {
return i18n ( 'MetersAway2' , [ distance ] ) ;
}
}
}
// @ts-ignore
public open() {
const result = super . open ( ) ;
result . then ( ( ) = > {
@ -151,69 +200,37 @@ export default class AppPeopleNearby extends SliderSuperTab {
@@ -151,69 +200,37 @@ export default class AppPeopleNearby extends SliderSuperTab {
location . coords . longitude ,
location . coords . accuracy
) . then ( ( response ) = > {
// @ts-ignore
const orderedPeers = response ? . updates [ 0 ] ? . peers . sort ( ( a , b ) = > a . distance - b . distance ) ;
// @ts-ignore
const groupsCounter = response ? . updates [ 0 ] ? . peers . filter ( ( e ) = > e . peer . _ == 'peerChannel' ) . length ;
// @ts-ignore
const usersCounter = response ? . updates [ 0 ] ? . peers . filter ( ( e ) = > e . peer . _ != 'peerChannel' ) . length ;
// @ts-ignore
const update = ( response as Updates . updates ) . updates [ 0 ] as Update . updatePeerLocated ;
const peers = update . peers as PeerLocated . peerLocated [ ] ;
const orderedPeers = peers . sort ( ( a , b ) = > a . distance - b . distance ) ;
const groupsCounter = peers . filter ( ( e ) = > e . peer . _ == 'peerChannel' ) . length ;
const usersCounter = peers . filter ( ( e ) = > e . peer . _ != 'peerChannel' ) . length ;
orderedPeers ? . forEach ( peer = > {
const isChannel = peer . peer . _ == 'peerChannel' ;
const peerId = ( isChannel ? - peer.peer.channel_id : peer.peer.user_id ) ;
let { dialog , dom } = appDialogsManager . addDialogNew ( {
dialog : peerId ,
container : ( isChannel ? this . groupsCategory : this.usersCategory ) . list ,
drawStatus : false ,
rippleEnabled : true ,
meAsSaved : true ,
avatarSize : 48 ,
lazyLoadQueue : this.lazyLoadQueue
} ) ;
dom . lastMessageSpan . append ( this . parseDistance ( peer . distance ) ) ;
dom . containerEl . onclick = ( ) = > appImManager . setPeer ( peerId ) ;
if ( isChannel ) {
let participantsCount = 0 ;
// @ts-ignore
for ( let chat of response . chats ) {
if ( chat . id == peer . peer . channel_id ) {
participantsCount = chat . participants_count ;
break ;
}
}
dom . lastMessageSpan . append ( ', ' , i18n ( 'Members' , [ participantsCount ] ) ) ;
}
const peerId = appPeersManager . getPeerId ( peer . peer ) ;
const section = peerId . isUser ( ) ? this . peopleSection : this.chatsSection ;
this . locatedPeers . set ( peerId , peer ) ;
section . sortedList . add ( peerId ) ;
} ) ;
this . usersCategory . nameEl . textContent = '' ;
this . usersCategory . nameEl . append ( i18n ( 'PeopleNearbyHeader' ) ) ;
usersCounter && this . usersCategory . setActive ( ) ;
this . groupsCategory . nameEl . textContent = '' ;
this . groupsCategory . nameEl . append ( i18n ( 'ChatsNearbyHeader' ) ) ;
groupsCounter && this . groupsCategory . setActive ( ) ;
this . errorCategory . classList . toggle ( 'hide' , ( usersCounter || groupsCounter ) ) ;
this . errorCategory . classList . toggle ( 'hide' , ! ! ( usersCounter || groupsCounter ) ) ;
this . errorCategory . innerHTML = "No groups or channels found around you." ;
} ) ;
} , ( error ) = > {
this . errorCategory . classList . remove ( 'hide' ) ;
this . retryBtn . classList . add ( 'is-visible' ) ;
this . retryBtn . addEventListener ( 'click' , this . open ) ;
if ( error instanceof GeolocationPositionError ) {
if ( error instanceof GeolocationPositionError ) {
this . errorCategory . innerHTML = "Location permission denied. Click below to retry." ;
} else {
} else {
this . errorCategory . innerHTML = "An error has occurred. Please retry later clicking the button below." ;
}
} ) ;
} ) ;
return result ;
}
private startWatching ( ) {
private startWatching() {
if ( ! this . latestLocationSaved || this . isLocationWatched ) return ;
this . isLocationWatched = true ;
@ -227,33 +244,32 @@ export default class AppPeopleNearby extends SliderSuperTab {
@@ -227,33 +244,32 @@ export default class AppPeopleNearby extends SliderSuperTab {
0x7fffffff // self_expires parameter
) ;
navigator . geolocation . watchPosition (
( result ) = > {
const isLongitudeDifferent = result . coords . longitude != this . latestLocationSaved . longitude ;
const isLatitudeDifferent = result . coords . latitude != this . latestLocationSaved . latitude ;
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
0x7fffffff // self_expires parameter
) ;
this . latestLocationSaved = {
latitude : result.coords.latitude ,
longitude : result.coords.longitude ,
accuracy : result.coords.accuracy
}
navigator . geolocation . watchPosition ( ( result ) = > {
const isLongitudeDifferent = result . coords . longitude !== this . latestLocationSaved . longitude ;
const isLatitudeDifferent = result . coords . latitude !== this . latestLocationSaved . latitude ;
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
0x7fffffff // self_expires parameter
) ;
this . latestLocationSaved = {
latitude : result.coords.latitude ,
longitude : result.coords.longitude ,
accuracy : result.coords.accuracy
}
}
) ;
} ) ;
}
private stopWatching ( ) {
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.' ) ;
@ -266,12 +282,12 @@ export default class AppPeopleNearby extends SliderSuperTab {
@@ -266,12 +282,12 @@ export default class AppPeopleNearby extends SliderSuperTab {
) ;
}
private calculateDistance ( lat1 : number , long1 : number , lat2 : number , long2 : number ) {
private calculateDistance ( lat1 : number , long1 : number , lat2 : number , long2 : number ) {
const p = 0.017453292519943295 ; // Math.PI/180
return (
12742 * Math . asin (
Math . sqrt (
( 0.5 - Math . cos ( ( lat2 - lat1 ) * p ) ) +
( 0.5 - Math . cos ( ( lat2 - lat1 ) * p ) ) +
(
Math . cos ( lat1 * p ) * Math . cos ( lat2 * p )
* ( 1 - Math . cos ( ( long2 - long1 ) * p ) / 2 )
Eduard Kuzmenko
2 years ago