Fixing constantly updating navigator bar. This should fix the button not working problem for IOS #493

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -1,20 +1,20 @@
 <div class="container-fluid mb-2 pt-1 pb-1 pe-0 ps-0">
   <nav class="d-md-flex row" aria-label="breadcrumb">
     <div class="col-12 col-md-auto">
-    <ol *ngIf="isDirectory" id="directory-path" class="mb-0 mt-1 breadcrumb">
-      <li *ngFor="let path of Routes" class="breadcrumb-item">
-        <a *ngIf="path.route" [routerLink]="['/gallery',path.route]"
-           [queryParams]="queryService.getParams()">{{path.name}}</a>
-        <ng-container *ngIf="!path.route">{{path.name}}</ng-container>
-      </li>
-    </ol>
+      <ol *ngIf="isDirectory" id="directory-path" class="mb-0 mt-1 breadcrumb">
+        <li *ngFor="let path of routes | async" class="breadcrumb-item">
+          <a *ngIf="path.route" [routerLink]="['/gallery',path.route]"
+             [queryParams]="queryService.getParams()">{{path.name}}</a>
+          <ng-container *ngIf="!path.route">{{path.name}}</ng-container>
+        </li>
+      </ol>
 
-    <ol *ngIf="!isDirectory" class="mb-0 mt-1 breadcrumb">
-      <li class="active">
-        <ng-container i18n>Searching for:</ng-container>
-        <strong> {{galleryService.content.value?.searchResult?.searchQuery | searchQuery}}</strong>
-      </li>
-    </ol>
+      <ol *ngIf="!isDirectory" class="mb-0 mt-1 breadcrumb">
+        <li class="active">
+          <ng-container i18n>Searching for:</ng-container>
+          <strong> {{galleryService.content.value?.searchResult?.searchQuery | searchQuery}}</strong>
+        </li>
+      </ol>
 
     </div>
     <div class="ms-auto text-end col-12 col-md-auto">
@@ -77,4 +77,4 @@
 
 </div>
 
-  <app-gallery-filter *ngIf="showFilters && ItemCount> 0"></app-gallery-filter>
+<app-gallery-filter *ngIf="showFilters && ItemCount> 0"></app-gallery-filter>

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts

@@ -34,6 +34,7 @@ export class GalleryNavigatorComponent {
   public readonly SearchQueryTypes = SearchQueryTypes;
   public wrappedContent: Observable<ContentWrapperWithError>;
   public directoryContent: Observable<DirectoryContent>;
+  public routes: Observable<NavigatorPath[]>;
   public showFilters = false;
   private readonly RootFolderName: string;
 
@@ -49,6 +50,59 @@ export class GalleryNavigatorComponent {
     this.directoryContent = this.wrappedContent.pipe(
       map((c) => (c.directory ? c.directory : c.searchResult))
     );
+    this.routes = this.galleryService.content.pipe(
+      map((c) => {
+        if (!c.directory) {
+          return [];
+        }
+
+        const path = c.directory.path.replace(new RegExp('\\\\', 'g'), '/');
+
+        const dirs = path.split('/');
+        dirs.push(c.directory.name);
+
+        // removing empty strings
+        for (let i = 0; i < dirs.length; i++) {
+          if (!dirs[i] || 0 === dirs[i].length || '.' === dirs[i]) {
+            dirs.splice(i, 1);
+            i--;
+          }
+        }
+
+        const user = this.authService.user.value;
+        const arr: NavigatorPath[] = [];
+
+        // create root link
+        if (dirs.length === 0) {
+          arr.push({name: this.RootFolderName, route: null});
+        } else {
+          arr.push({
+            name: this.RootFolderName,
+            route: UserDTOUtils.isDirectoryPathAvailable('/', user.permissions)
+              ? '/'
+              : null,
+          });
+        }
+
+        // create rest navigation
+        dirs.forEach((name, index) => {
+          const route = dirs.slice(0, dirs.indexOf(name) + 1).join('/');
+          if (dirs.length - 1 === index) {
+            arr.push({name, route: null});
+          } else {
+            arr.push({
+              name,
+              route: UserDTOUtils.isDirectoryPathAvailable(route, user.permissions)
+                ? route
+                : null,
+            });
+          }
+        });
+
+        return arr;
+
+      })
+    );
   }
 
   get isDirectory(): boolean {
@@ -64,58 +118,6 @@ export class GalleryNavigatorComponent {
         : 0;
   }
 
-  get Routes(): NavigatorPath[] {
-    const c = this.galleryService.content.value;
-    if (!c.directory) {
-      return [];
-    }
-
-    const path = c.directory.path.replace(new RegExp('\\\\', 'g'), '/');
-
-    const dirs = path.split('/');
-    dirs.push(c.directory.name);
-
-    // removing empty strings
-    for (let i = 0; i < dirs.length; i++) {
-      if (!dirs[i] || 0 === dirs[i].length || '.' === dirs[i]) {
-        dirs.splice(i, 1);
-        i--;
-      }
-    }
-
-    const user = this.authService.user.value;
-    const arr: NavigatorPath[] = [];
-
-    // create root link
-    if (dirs.length === 0) {
-      arr.push({name: this.RootFolderName, route: null});
-    } else {
-      arr.push({
-        name: this.RootFolderName,
-        route: UserDTOUtils.isDirectoryPathAvailable('/', user.permissions)
-          ? '/'
-          : null,
-      });
-    }
-
-    // create rest navigation
-    dirs.forEach((name, index) => {
-      const route = dirs.slice(0, dirs.indexOf(name) + 1).join('/');
-      if (dirs.length - 1 === index) {
-        arr.push({name, route: null});
-      } else {
-        arr.push({
-          name,
-          route: UserDTOUtils.isDirectoryPathAvailable(route, user.permissions)
-            ? route
-            : null,
-        });
-      }
-    });
-
-    return arr;
-  }
-
   get DefaultSorting(): SortingMethods {
     return this.sortingService.getDefaultSorting(
       this.galleryService.content.value