diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 03748185..fb8376dc 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -147,7 +147,7 @@ export class AppSidebarLeft extends SidebarSlider { icon: 'group', text: 'PeopleNearby', onClick: () => { - new AppPeopleNearby(this).opeddn(); + new AppPeopleNearby(this).open(); } }, { icon: 'settings', diff --git a/src/components/sidebarLeft/tabs/PeopleNearby.ts b/src/components/sidebarLeft/tabs/PeopleNearby.ts index 18dbd2c3..3f844ab8 100644 --- a/src/components/sidebarLeft/tabs/PeopleNearby.ts +++ b/src/components/sidebarLeft/tabs/PeopleNearby.ts @@ -6,6 +6,7 @@ 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"; @@ -19,13 +20,14 @@ import lottieLoader from "../../../lib/rlottie/lottieLoader"; import PopupPeer from "../../popups/peer"; import AppNewGroupTab from "./newGroup"; import type { LazyLoadQueueIntersector } from "../../lazyLoadQueue"; -//import AppMediaViewer from "../../appMediaViewerNew"; 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 }; private isLocationWatched: boolean = false; + private errorCategory: HTMLElement; + private retryBtn: HTMLButtonElement; protected lazyLoadQueue: LazyLoadQueueIntersector; @@ -59,21 +61,29 @@ export default class AppPeopleNearby extends SliderSuperTab { locatingAnimation.appendChild(animatingWaves); } + this.errorCategory = document.createElement('div'); + this.errorCategory.classList.add('text', 'hide', 'nearby-error'); + + this.retryBtn = ButtonCorner({icon: 'check'}); + //this.retryBtn.classList.remove('is-visible'); + const chatsContainer = document.createElement('div'); chatsContainer.classList.add('chatlist-container'); chatsContainer.append(this.usersCategory.container); chatsContainer.append(this.groupsCategory.container); - this.scrollable.append(locatingAnimation, chatsContainer); + this.content.append(this.retryBtn); + this.scrollable.append(locatingAnimation, this.errorCategory, chatsContainer); } private parseDistance(distance: number){ return (distance >= 1000 ? String(distance/1000)+' km' : String(distance)+' m'); } - public opeddn() { + public open() { const result = super.open(); result.then(() => { + this.retryBtn.classList.remove('is-visible'); navigator.geolocation.getCurrentPosition(location => { this.latestLocationSaved = { latitude: location.coords.latitude, @@ -88,9 +98,13 @@ export default class AppPeopleNearby extends SliderSuperTab { ).then((response) => { // @ts-ignore - const orderedPeers = response.updates[0].peers.sort((a, b) => a.distance-b.distance); + 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 - orderedPeers.forEach(peer => { + const usersCounter = response?.updates[0]?.peers.filter((e) => e.peer._ != 'peerChannel').length; + // @ts-ignore + orderedPeers?.forEach(peer => { const isChannel = peer.peer._ == 'peerChannel'; const peerId = (isChannel ? -peer.peer.channel_id : peer.peer.user_id); @@ -122,12 +136,24 @@ export default class AppPeopleNearby extends SliderSuperTab { this.usersCategory.nameEl.textContent = ''; this.usersCategory.nameEl.append('Users'); - this.usersCategory.setActive(); + usersCounter && this.usersCategory.setActive(); this.groupsCategory.nameEl.textContent = ''; this.groupsCategory.nameEl.append('Groups'); - this.groupsCategory.setActive(); + groupsCounter && this.groupsCategory.setActive(); + + 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.opeddn); + if(error instanceof GeolocationPositionError){ + this.errorCategory.innerHTML = "Location permission denied. Click below to retry."; + }else{ + this.errorCategory.innerHTML = "An error has occurred. Please retry later clicking the button below."; + } }); }); } @@ -157,7 +183,8 @@ export default class AppPeopleNearby extends SliderSuperTab { result.coords.latitude, result.coords.longitude, result.coords.accuracy, - true // background parameter + true, // background parameter + 3600 // self_expires parameter ); this.latestLocationSaved = { latitude: result.coords.latitude, diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index bbb62bb5..084a0c59 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -1364,72 +1364,4 @@ $chat-helper-size: 36px; margin-bottom: 1rem; } } -} - -.locating-animation-container { - min-height: 140px; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - & .tgico.tgico-location { - padding: 50px; - background: var(--avatar-color-bottom); - width: 140px; - height: 140px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - - &::before { - font-size: 58px; - color: white; - } - } - - & .locating-animation-waves { - position: fixed; - - &.wave-1, - &.wave-3 { - animation: 3s waves-animation infinite; - width: 50px; - height: 50px; - border: 5px solid white; - border-radius: 50%; - clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%); - margin-left: 36px; - } - - &.wave-2, - &.wave-4 { - animation: 5s waves-animation infinite; - width: 66px; - height: 71px; - border: 5px solid white; - border-radius: 50%; - clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%); - margin-left: 51px; - margin-top: 1px; - animation-delay: 2s; - } - - &.wave-3 { - margin-left: -36px !important; - transform: rotateY(180deg); - } - - &.wave-4 { - margin-left: -51px !important; - transform: rotateY(180deg); - } - } -} - -@keyframes waves-animation { - from { opacity: 100%; } - 50% { opacity: 0%; } - to { opacity: 100%; } } \ No newline at end of file diff --git a/src/scss/partials/_peopleNearby.scss b/src/scss/partials/_peopleNearby.scss new file mode 100644 index 00000000..76847182 --- /dev/null +++ b/src/scss/partials/_peopleNearby.scss @@ -0,0 +1,73 @@ +div.text.nearby-error { + color: var(--gc-secondary-text-color); + margin-top: 10px; + text-align: center; +} + +.locating-animation-container { + min-height: 140px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + & .tgico.tgico-location { + padding: 50px; + background: var(--avatar-color-bottom); + width: 140px; + height: 140px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + + &::before { + font-size: 58px; + color: white; + } + } + + & .locating-animation-waves { + position: fixed; + + &.wave-1, + &.wave-3 { + animation: 3s waves-animation infinite; + width: 50px; + height: 50px; + border: 5px solid white; + border-radius: 50%; + clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%); + margin-left: 36px; + } + + &.wave-2, + &.wave-4 { + animation: 5s waves-animation infinite; + width: 66px; + height: 71px; + border: 5px solid white; + border-radius: 50%; + clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%); + margin-left: 51px; + margin-top: 1px; + animation-delay: 2s; + } + + &.wave-3 { + margin-left: -36px !important; + transform: rotateY(180deg); + } + + &.wave-4 { + margin-left: -51px !important; + transform: rotateY(180deg); + } + } +} + +@keyframes waves-animation { + from { opacity: 100%; } + 50% { opacity: 0%; } + to { opacity: 100%; } +} \ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index b5993bcb..d20f1665 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -292,6 +292,7 @@ $chat-input-inner-padding-handhelds: .25rem; @import "partials/row"; @import "partials/colorPicker"; @import "partials/replyKeyboard"; +@import "partials/peopleNearby"; @import "partials/popups/popup"; @import "partials/popups/editAvatar";