From 9dc322f409d2bb63bd96b02ac2c930bb7a5871c6 Mon Sep 17 00:00:00 2001 From: sultanmyrza Date: Tue, 8 Nov 2022 16:25:03 +0800 Subject: [PATCH 1/2] listen for android back button events from explore tab --- src/app/features/home/home.page.ts | 18 +++++++++++++++++- .../android-back-button.service.ts | 5 +---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/app/features/home/home.page.ts b/src/app/features/home/home.page.ts index e8e944dbe..97c271825 100644 --- a/src/app/features/home/home.page.ts +++ b/src/app/features/home/home.page.ts @@ -20,6 +20,7 @@ import { switchMap, tap, } from 'rxjs/operators'; +import { AndroidBackButtonService } from '../../shared/android-back-button/android-back-button.service'; import { CameraService } from '../../shared/camera/camera.service'; import { CaptureService, Media } from '../../shared/capture/capture.service'; import { ConfirmAlert } from '../../shared/confirm-alert/confirm-alert.service'; @@ -87,7 +88,8 @@ export class HomePage { private readonly diaBackendWalletService: DiaBackendWalletService, private readonly userGuideService: UserGuideService, private readonly platform: Platform, - private readonly iframeService: IframeService + private readonly iframeService: IframeService, + private readonly androidBackButtonService: AndroidBackButtonService ) { this.downloadExpiredPostCaptures(); } @@ -106,6 +108,13 @@ export class HomePage { untilDestroyed(this) ) .subscribe(); + + this.androidBackButtonService.androidBackButtonEvent$ + .pipe( + tap(_ => this.shouldNavigateBackExploreIframe()), + untilDestroyed(this) + ) + .subscribe(); } private async onboardingRedirect() { @@ -343,6 +352,13 @@ export class HomePage { .subscribe(); } + private shouldNavigateBackExploreIframe(): void { + if (this.selectedTabIndex === 0 && this.router.url === '/home') { + // eslint-disable-next-line no-console + console.log('TODO: send post message to explore iframe'); + } + } + // eslint-disable-next-line class-methods-use-this navigateToExploreTab() { if (this.selectedTabIndex === 0) { diff --git a/src/app/shared/android-back-button/android-back-button.service.ts b/src/app/shared/android-back-button/android-back-button.service.ts index 50e42d48d..2e543810c 100644 --- a/src/app/shared/android-back-button/android-back-button.service.ts +++ b/src/app/shared/android-back-button/android-back-button.service.ts @@ -7,10 +7,7 @@ import { mapTo, tap } from 'rxjs/operators'; providedIn: 'root', }) export class AndroidBackButtonService { - private readonly androidBackButtonEvent$ = fromEvent( - document, - 'ionBackButton' - ); + readonly androidBackButtonEvent$ = fromEvent(document, 'ionBackButton'); constructor(private readonly zone: NgZone) {} From 9989394b5ab307558be5d365f226d9aa8496bb22 Mon Sep 17 00:00:00 2001 From: sultanmyrza Date: Tue, 8 Nov 2022 16:59:24 +0800 Subject: [PATCH 2/2] navigate back explore iframe on android back button press --- .../explore-tab/explore-tab.component.html | 1 + .../explore-tab/explore-tab.component.ts | 24 ++++++++++++++++--- src/app/features/home/home.page.ts | 3 +-- src/app/shared/iframe/iframe.service.ts | 12 +++++++++- 4 files changed, 34 insertions(+), 6 deletions(-) diff --git a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.html b/src/app/features/home/explore-tab/explore-tab/explore-tab.component.html index 9b09469c2..6629f88e0 100644 --- a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.html +++ b/src/app/features/home/explore-tab/explore-tab/explore-tab.component.html @@ -13,6 +13,7 @@ " > diff --git a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts b/src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts index 24dbbc5af..5d073fc54 100644 --- a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts +++ b/src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts @@ -1,12 +1,14 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; +import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { combineLatest } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { map, tap } from 'rxjs/operators'; import { DiaBackendAuthService } from '../../../../shared/dia-backend/auth/dia-backend-auth.service'; import { BUBBLE_IFRAME_URL } from '../../../../shared/dia-backend/secret'; import { IframeService } from '../../../../shared/iframe/iframe.service'; import { NetworkService } from '../../../../shared/network/network.service'; +@UntilDestroy() @Component({ selector: 'app-explore-tab', templateUrl: './explore-tab.component.html', @@ -25,10 +27,26 @@ export class ExploreTabComponent { readonly networkConnected$ = this.networkService.connected$; + @ViewChild('exploreIframe') exploreIframe?: ElementRef; + constructor( private readonly networkService: NetworkService, private readonly diaBackendAuthService: DiaBackendAuthService, private readonly iframeService: IframeService, private readonly sanitizer: DomSanitizer - ) {} + ) { + iframeService.exploreTabIframeNavigateBack$ + .pipe( + tap(_ => this.navigateBackExploreIframe()), + untilDestroyed(this) + ) + .subscribe(); + } + + navigateBackExploreIframe() { + this.exploreIframe?.nativeElement.contentWindow?.postMessage( + 'android-back-button', + BUBBLE_IFRAME_URL + ); + } } diff --git a/src/app/features/home/home.page.ts b/src/app/features/home/home.page.ts index 97c271825..3d208ac5d 100644 --- a/src/app/features/home/home.page.ts +++ b/src/app/features/home/home.page.ts @@ -354,8 +354,7 @@ export class HomePage { private shouldNavigateBackExploreIframe(): void { if (this.selectedTabIndex === 0 && this.router.url === '/home') { - // eslint-disable-next-line no-console - console.log('TODO: send post message to explore iframe'); + this.iframeService.navigateBackExploreTabIframe(); } } diff --git a/src/app/shared/iframe/iframe.service.ts b/src/app/shared/iframe/iframe.service.ts index 818e8c52f..ddaa1420d 100644 --- a/src/app/shared/iframe/iframe.service.ts +++ b/src/app/shared/iframe/iframe.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; +import { BehaviorSubject, ReplaySubject } from 'rxjs'; @Injectable({ providedIn: 'root', @@ -7,7 +7,17 @@ import { BehaviorSubject } from 'rxjs'; export class IframeService { readonly exploreTabRefreshRequested$ = new BehaviorSubject(new Date()); + private readonly _exploreTabIframeNavigateBack$ = new ReplaySubject( + 1 + ); + readonly exploreTabIframeNavigateBack$ = + this._exploreTabIframeNavigateBack$.asObservable(); + refreshExploreTabIframe() { this.exploreTabRefreshRequested$.next(new Date()); } + + navigateBackExploreTabIframe() { + this._exploreTabIframeNavigateBack$.next(true); + } }