62 lines
2.2 KiB
HTML
62 lines
2.2 KiB
HTML
<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) {
|
|
<span class="main-name">{{'@'+store.uploaderData().username}}</span>
|
|
} @else {
|
|
<span class="main-name">{{store.uploaderData().displayName}}</span>
|
|
<span class="alt-name">{{'@'+store.uploaderData().username}}</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="items-right">
|
|
</div>
|
|
</navbar>
|
|
|
|
<main>
|
|
@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>
|
|
}
|
|
</main>
|