3.0 Beta 5

src/app/chat/picture/see/see.html

@@ -1,10 +1,14 @@
+<ng-template [(tuiDialog)]="viewerOpen">
+  <oimg [src]="viewedPicture!.path" height="100%" width="100%" [radius]="0"></oimg>
+</ng-template>
+
 <main>
   @defer (when store) {
     <navbar backButtonDest="/chat">
       <div class="data">
         <oimg [src]="store.uploaderData().pfp" height="50px" width="50px" [radius]="15"></oimg>
         <div class="uploader-data">
-          @if (store.uploaderData().displayName == "") {
+          @if (!store.uploaderData().displayName) {
             <span class="main-name">{{'@'+store.uploaderData().username}}</span>
           } @else {
             <span class="main-name">{{store.uploaderData().displayName}}</span>
@@ -18,17 +22,39 @@
     </navbar>
 
     <main>
-      @for (album of store.albums(); track album) {
-        <div class="album">
-          <masonry [maxColSize]="3" style="height: 300px; pointer-events: none;">
-            @for (file of album.images; track file) {
-              <img [src]="file.path+'_thumbnail.png'" style="filter: blur(5px)"/>
-            }
-          </masonry>
-          <div class="album-name">
-            <h2>{{album.name}}</h2>
-          </div>
+      @if (openedAlbum) {
+        <div style="display: flex; align-items: center; gap: 10px">
+          <button tuiButton appearance="flat" iconStart="@tui.chevron-left" (click)="exitAlbum()"></button>
+          <h1 style="padding: 0; margin: 0">{{openedAlbum.name}}</h1>
         </div>
+
+        <div id="pictureList">
+          @for (picture of openedAlbum.images; track picture) {
+            <oimg (click)="viewPicture(picture)" [src]="picture.path" height="200px" width="200px" [radius]="25" objectFit="none"></oimg>
+          }
+        </div>
+      } @else {
+        @if (store.albums().length == 0) {
+          <tui-block-status style="height: 300px">
+            <tui-icon icon="@tui.frown" tuiSlot="top" style="font-size: 150px"></tui-icon>
+            <h4>{{"chat.pictures.albumList.noAlbum"|translate}}</h4>
+          </tui-block-status>
+        } @else {
+          <div id="albumList">
+            @for (album of store.albums(); track album) {
+              <div class="album" (click)="enterAlbum(album.albumId)">
+                <masonry [maxColSize]="3" style="height: 300px; pointer-events: none;">
+                  @for (file of album.images; track file) {
+                    <img [src]="file.path+'_thumbnail.png'" style="filter: blur(5px)"/>
+                  }
+                </masonry>
+                <div class="album-name">
+                  <h2>{{album.name}}</h2>
+                </div>
+              </div>
+            }
+          </div>
+        }
       }
     </main>
   }

src/app/chat/picture/see/see.scss

@@ -31,7 +31,7 @@ main {
     }
   }
 
-  main {
+  #albumList {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
@@ -45,6 +45,7 @@ main {
       border-radius: 30px;
       overflow: hidden;
       position: relative;
+      cursor: pointer;
 
       .album-name {
         position: absolute;
@@ -66,4 +67,19 @@ main {
       }
     }
   }
+
+  #pictureList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-content: flex-start;
+    overflow-y: scroll;
+
+    oimg {
+      background: var(--tui-background-base-alt);
+      height: 200px;
+      border-radius: 25px;
+      cursor: pointer;
+    }
+  }
 }

src/app/chat/picture/see/see.ts

@@ -1,12 +1,17 @@
 import {Component, inject, signal} from '@angular/core';
 import {DmStorage, PictureStorage, ServiceManager} from '../../../service-manager';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {IndexedDB} from '../../../storage/indexed-db';
-import {TUI_BREAKPOINT, TuiButton, TuiIcon} from '@taiga-ui/core';
+import {TUI_BREAKPOINT, TuiButton, TuiDialog, TuiIcon} from '@taiga-ui/core';
 import {PictureService} from '@chatenium/chatenium-sdk/services/pictureService';
 import {Navbar} from '../../elements/navbar/navbar';
 import {Oimg} from '../../elements/oimg/oimg';
 import {Masonry} from '../../elements/masonry/masonry';
+import {Album, Image} from '@chatenium/chatenium-sdk/domain/pictureService.schema';
+import {pictureHandlers} from '@chatenium/chatenium-sdk/mocks/handlers/picture.http';
+import {TuiBlockStatusComponent} from '@taiga-ui/layout';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TuiBadgedContentDirective} from '@taiga-ui/kit';
 
 @Component({
   selector: 'app-see',
@@ -15,7 +20,11 @@ import {Masonry} from '../../elements/masonry/masonry';
     Oimg,
     TuiButton,
     TuiIcon,
-    Masonry
+    Masonry,
+    TuiDialog,
+    TuiBlockStatusComponent,
+    TranslatePipe,
+    TuiBadgedContentDirective
   ],
   templateUrl: './see.html',
   styleUrl: './see.scss',
@@ -25,13 +34,50 @@ export class See {
   route = inject(ActivatedRoute)
   indexedDb = inject(IndexedDB)
   breakpoint = inject(TUI_BREAKPOINT)
+  router = inject(Router)
 
   uploaderId = ""
+  openedAlbum: Album | null = null
+
+  viewedPicture: Image | null = null
+  get viewerOpen() {
+    return this.viewedPicture != null
+  }
+  set viewerOpen(_: any) {
+    this.viewedPicture = null
+    this.router.navigate([], {
+      queryParams: { pictureId: null },
+      queryParamsHandling: "merge"
+    })
+  }
 
   get store(): PictureStorage {
     return this.serviceManager.pictureServices()[this.uploaderId]
   }
 
+  enterAlbum(albumId: string) {
+    this.router.navigate([], {
+      queryParams: { albumId: albumId },
+      queryParamsHandling: "merge"
+    })
+  }
+
+  exitAlbum() {
+    this.openedAlbum = null
+    this.router.navigate([], {
+      queryParams: { albumId: null },
+      queryParamsHandling: "merge"
+    })
+  }
+
+  viewPicture(picture: Image) {
+    this.viewedPicture = picture
+    this.router.navigate([], {
+      queryParams: { pictureId: picture.imageId },
+      queryParamsHandling: "merge"
+    })
+  }
+
   ngOnInit() {
     this.route.params.subscribe(async params => {
       const uploaderId = params['uploaderId'];
@@ -60,7 +106,28 @@ export class See {
             service: newService,
           } as PictureStorage
         }));
+
+        // Show album
+        this.route.queryParams.subscribe(params => {
+          const albumId = params['albumId'];
+          if (albumId) {
+            const album = uploaderInfo.pictures.find(a => a.albumId === albumId)
+            if (album) {
+              this.openedAlbum = album
+
+              const pictureId = params['pictureId'];
+              if (pictureId) {
+                const picture = album.images.find(img => img.imageId === pictureId)
+                if (picture) {
+                  this.viewedPicture = picture
+                }
+              }
+            }
+          }
+        })
       }
     });
   }
+
+  protected readonly pictureHandlers = pictureHandlers;
 }