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 e8e944dbe..3d208ac5d 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,12 @@ export class HomePage {
.subscribe();
}
+ private shouldNavigateBackExploreIframe(): void {
+ if (this.selectedTabIndex === 0 && this.router.url === '/home') {
+ this.iframeService.navigateBackExploreTabIframe();
+ }
+ }
+
// 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) {}
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);
+ }
}