Fix iframe android back button navigation

src/app/features/home/explore-tab/explore-tab/explore-tab.component.html

@@ -13,6 +13,7 @@
     "
   >
     <iframe
+      #exploreIframe
       [src]="bubbleIframeUrlWithCachedJWTToken"
       class="bubble-iframe"
     ></iframe>

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<HTMLIFrameElement>;
+
   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
+    );
+  }
 }

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) {

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) {}
 

src/app/shared/iframe/iframe.service.ts

@@ -1,13 +1,23 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, ReplaySubject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class IframeService {
   readonly exploreTabRefreshRequested$ = new BehaviorSubject(new Date());
 
+  private readonly _exploreTabIframeNavigateBack$ = new ReplaySubject<boolean>(
+    1
+  );
+  readonly exploreTabIframeNavigateBack$ =
+    this._exploreTabIframeNavigateBack$.asObservable();
+
   refreshExploreTabIframe() {
     this.exploreTabRefreshRequested$.next(new Date());
   }
+
+  navigateBackExploreTabIframe() {
+    this._exploreTabIframeNavigateBack$.next(true);
+  }
 }