made a working masonry component

2026-05-07 05:07:40 +02:00 · 2022-05-10 11:12:15 +02:00
parent 9e5d6c6f89
commit a5aac2da1d
9 changed files with 177 additions and 234 deletions
--- a/frontend/src/app/components/masonry/masonry.component.html
+++ b/frontend/src/app/components/masonry/masonry.component.html
@@ -1 +1,3 @@
-<ng-content></ng-content>
+<!-- <ng-content></ng-content> -->
+<div #column class="column" *ngFor="let item of [].constructor(column_count); let i = index">
+</div>
--- a/frontend/src/app/components/masonry/masonry.component.scss
+++ b/frontend/src/app/components/masonry/masonry.component.scss
@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: row;
+}
+
+.column {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 0;
+  flex-direction: column;
+}
--- a/frontend/src/app/components/masonry/masonry.component.ts
+++ b/frontend/src/app/components/masonry/masonry.component.ts
@@ -3,13 +3,15 @@ import {
  Component,
  ContentChildren,
  ElementRef,
-  OnChanges,
-  OnInit,
+  Input,
+  OnDestroy,
  QueryList,
-  SimpleChanges,
-  ViewChild,
+  ViewChildren
 } from '@angular/core';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
+import { combineLatest, Subscription } from 'rxjs';
+import { RemoveChildren } from 'src/app/util/remove-children';
+import { Throttle } from 'src/app/util/throttle';
 import { MasonryItemDirective } from './masonry-item.directive';

@Component({
@@ -17,9 +19,17 @@ import { MasonryItemDirective } from './masonry-item.directive';
  templateUrl: './masonry.component.html',
  styleUrls: ['./masonry.component.scss'],
 })
-export class MasonryComponent implements AfterViewInit {
+export class MasonryComponent implements AfterViewInit, OnDestroy {
+  @Input('columns') column_count: number = 1;
+  @Input('update-speed') update_speed: number = 200;
+
  @ContentChildren(MasonryItemDirective)
-  content: QueryList<MasonryItemDirective>;
+  private content: QueryList<MasonryItemDirective>;
+
+  @ViewChildren('column')
+  private columns: QueryList<ElementRef<HTMLDivElement>>;
+
+  private sizesSubscription: Subscription | null = null;

  ngAfterViewInit(): void {
    this.subscribeContent();
@@ -27,8 +37,58 @@ export class MasonryComponent implements AfterViewInit {

  @AutoUnsubscribe()
  private subscribeContent() {
-    return this.content.changes.subscribe((items) => {
-      console.log('a', items.toArray());
-    });
+    return this.content.changes.subscribe(
+      (items: QueryList<MasonryItemDirective>) => {
+        const sizes = items.map((i) => i.getSize());
+
+        if (this.sizesSubscription) {
+          this.sizesSubscription.unsubscribe();
+        }
+
+        this.sizesSubscription = combineLatest(sizes)
+          .pipe(Throttle(this.update_speed))
+          .subscribe((output) => {
+            this.resortItems(items);
+          });
+
+        this.resortItems(items);
+      }
+    );
+  }
+
+  private resortItems(items: QueryList<MasonryItemDirective>) {
+    const itemsArray = items.toArray();
+    const columnsArray = this.columns.map((c) => c.nativeElement);
+
+    for (let i = 0; i < columnsArray.length; i++) {
+      RemoveChildren(columnsArray[i]);
+    }
+
+    const columnSizes = columnsArray.map((c) => 0);
+
+    for (let i = 0; i < itemsArray.length; i++) {
+      const item = itemsArray[i];
+
+      let smallestColumn = 0;
+      let smallestColumnSize = columnSizes[0];
+      for (let j = 1; j < columnSizes.length; j++) {
+        let better_j = (j + i) % columnSizes.length;
+
+        if (columnSizes[better_j] <= smallestColumnSize) {
+          smallestColumn = better_j;
+          smallestColumnSize = columnSizes[better_j];
+        }
+      }
+
+      columnsArray[smallestColumn].appendChild(item.getElement());
+      columnSizes[smallestColumn] +=
+        item.getLastSize()?.contentRect.height ?? 0;
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.sizesSubscription) {
+      this.sizesSubscription.unsubscribe();
+    }
  }
 }
--- a/frontend/src/app/routes/images/images.component.html
+++ b/frontend/src/app/routes/images/images.component.html
@@ -1,5 +1,5 @@
-<masonry>
-  <div *ngFor="let image of sourceImages" class="m-2" masonry-item>
+<masonry [columns]="columns">
+  <div *ngFor="let image of images" class="m-2" masonry-item>
    <mat-card>
      <mat-card-header>
        <mat-card-title>Image by you</mat-card-title>
@@ -21,35 +21,6 @@
  </div>
 </masonry>

-<div class="column-wrapper" *ngIf="images !== null">
-  <div
-    *ngFor="let column of images"
-    class="column"
-    #column
-  >
-    <div *ngFor="let image of column" class="m-2" #imgdiv (waResizeObserver)="onResize($event, image, imgdiv)">
-      <mat-card>
-        <mat-card-header>
-          <mat-card-title>Image by you</mat-card-title>
-          <mat-card-subtitle>
-            Uploaded {{ image.created | amTimeAgo }}
-          </mat-card-subtitle>
-        </mat-card-header>
-        <picsur-img
-          mat-card-image
-          [src]="getThumbnailUrl(image)"
-          alt="Image uploaded by you"
-        >
-        </picsur-img>
-        <mat-card-actions>
-          <button mat-stroked-button (click)="viewImage(image)">View</button>
-          <button mat-button color="warn">Delete</button>
-        </mat-card-actions>
-      </mat-card>
-    </div>
-  </div>
-</div>
-
 <!-- <div class="paginator">
  <button class="mat-stroked-button" mat-icon-button>
    <mat-icon>first_page</mat-icon>
--- a/frontend/src/app/routes/images/images.component.scss
+++ b/frontend/src/app/routes/images/images.component.scss
@@ -18,4 +18,4 @@
  button {
    margin-inline: .5em;
  }
-}
+}
--- a/frontend/src/app/routes/images/images.component.ts
+++ b/frontend/src/app/routes/images/images.component.ts
@@ -1,10 +1,5 @@
 import {
-  Component,
-  ElementRef,
-  OnInit,
-  QueryList,
-  ViewChildren,
-  ViewRef,
+  Component, OnInit
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
@@ -15,9 +10,8 @@ import { ImageService } from 'src/app/services/api/image.service';
 import { Logger } from 'src/app/services/logger/logger.service';
 import {
  BootstrapService,
-  BSScreenSize,
+  BSScreenSize
 } from 'src/app/util/util-module/bootstrap.service';
-import { UtilService } from 'src/app/util/util-module/util.service';

@Component({
  templateUrl: './images.component.html',
@@ -26,15 +20,8 @@ import { UtilService } from 'src/app/util/util-module/util.service';
 export class ImagesComponent implements OnInit {
  private readonly logger: Logger = new Logger('ImagesComponent');

-  @ViewChildren('column')
-  columnsChild: QueryList<ElementRef<HTMLDivElement>>;
-
-  sourceImages: EImage[] | null = null;
-  private elementSizes: { [key: string]: number } = {};
-  private elements: { [key: string]: HTMLElement } = {};
-  private desiredColumns = 1;
-
-  images: EImage[][] | null = null;
+  images: EImage[] | null = null;
+  columns = 1;

  constructor(
    private readonly route: ActivatedRoute,
@@ -51,95 +38,27 @@ export class ImagesComponent implements OnInit {

    this.subscribeMobile();

-    const result = await this.imageService.ListImages(24, page);
+    const result = await this.imageService.ListMyImages(24, page);
    if (HasFailed(result)) {
      return this.logger.error(result.getReason());
    }

-    this.sourceImages = result.images;
-    this.sortMasonryRender();
+    this.images = result.images;
  }

  @AutoUnsubscribe()
  private subscribeMobile() {
    return this.bootstrapService.screenSize().subscribe((size) => {
      if (size <= BSScreenSize.sm) {
-        this.desiredColumns = 1;
+        this.columns = 1;
      } else if (size <= BSScreenSize.lg) {
-        this.desiredColumns = 2;
+        this.columns = 2;
      } else {
-        this.desiredColumns = 3;
+        this.columns = 3;
      }
-      this.sortMasonryRender();
    });
  }

-  private sortMasonryRender() {
-    if (!this.sourceImages) {
-      this.images = null;
-      return;
-    }
-
-    this.elements = {};
-    this.elementSizes = {};
-
-    const columnSizes: number[] = [];
-    const columns: EImage[][] = [];
-    for (let i = 0; i < this.desiredColumns; i++) {
-      columnSizes.push(0);
-      columns.push([]);
-    }
-
-    for (let i = 0; i < this.sourceImages.length; i++) {
-      columns[i % this.desiredColumns].push(this.sourceImages[i]);
-    }
-
-    this.images = columns;
-  }
-
-  private sortMasonry() {
-    if (!this.sourceImages) {
-      this.images = null;
-      return;
-    }
-
-    const elementImages = this.sourceImages.map((img) => ({
-      element: this.elements[img.id],
-      height: this.elementSizes[img.id],
-    }));
-    if (
-      elementImages.find(
-        (test) => test.element === undefined || test.height === undefined
-      ) !== undefined
-    ) {
-      return;
-    }
-
-    for (let { element } of elementImages) {
-      element.parentElement?.removeChild(element);
-    }
-
-    const columnSizes: number[] = this.columnsChild.map((column) => 0);
-    for (let i = 0; i < elementImages.length; i++) {
-      const { element, height } = elementImages[i];
-
-      let minColumn = 0;
-      let minColumnSize = columnSizes[0];
-      for (let j = 0; j < columnSizes.length; j++) {
-        const distributed_j = (j + i) % columnSizes.length;
-
-        const columnSize = columnSizes[distributed_j];
-        if (columnSize <= minColumnSize) {
-          minColumn = distributed_j;
-          minColumnSize = columnSize;
-        }
-      }
-
-      this.columnsChild.toArray()[minColumn].nativeElement.appendChild(element);
-      columnSizes[minColumn] += height;
-    }
-  }
-
  getThumbnailUrl(image: EImage) {
    return (
      this.imageService.GetImageURL(image.id, SupportedMime.QOI) + '?height=480'
@@ -149,17 +68,4 @@ export class ImagesComponent implements OnInit {
  viewImage(image: EImage) {
    this.router.navigate(['/view', image.id]);
  }
-
-  onResize(
-    [event]: ResizeObserverEntry[],
-    image: EImage,
-    element: HTMLElement
-  ) {
-    this.elements[image.id] = element;
-
-    if (this.elementSizes[image.id] !== event.contentRect.height) {
-      this.elementSizes[image.id] = event.contentRect.height;
-      this.sortMasonry();
-    }
-  }
 }
--- a/frontend/src/app/services/api/image.service.ts
+++ b/frontend/src/app/services/api/image.service.ts
@@ -1,11 +1,11 @@
 import { Inject, Injectable } from '@angular/core';
-import { LOCATION, WINDOW } from '@ng-web-apis/common';
+import { LOCATION } from '@ng-web-apis/common';
 import {
  ImageDeleteRequest,
  ImageDeleteResponse,
  ImageListRequest,
  ImageListResponse,
-  ImageUploadResponse,
+  ImageUploadResponse
 } from 'picsur-shared/dist/dto/api/image-manage.dto';
 import { ImageMetaResponse } from 'picsur-shared/dist/dto/api/image.dto';
 import { ImageLinks } from 'picsur-shared/dist/dto/image-links.dto';
@@ -15,6 +15,7 @@ import { AsyncFailable } from 'picsur-shared/dist/types';
 import { Fail, HasFailed, Open } from 'picsur-shared/dist/types/failable';
 import { ImageUploadRequest } from '../../models/dto/image-upload-request.dto';
 import { ApiService } from './api.service';
+import { UserService } from './user.service';

@Injectable({
  providedIn: 'root',
@@ -23,6 +24,8 @@ export class ImageService {
  constructor(
    private api: ApiService,
    @Inject(LOCATION) readonly location: Location,
+
+    private userService: UserService
  ) {}

  public async UploadImage(image: File): AsyncFailable<string> {
@@ -39,7 +42,7 @@ export class ImageService {
    return await this.api.get(ImageMetaResponse, `/i/meta/${image}`);
  }

-  public async ListImages(
+  public async ListAllImages(
    count: number,
    page: number,
    userID?: string
@@ -56,6 +59,18 @@ export class ImageService {
    );
  }

+  public async ListMyImages(
+    count: number,
+    page: number
+  ): AsyncFailable<ImageListResponse> {
+    const userID = await this.userService.snapshot?.id;
+    if (userID === undefined) {
+      return Fail('User not logged in');
+    }
+
+    return await this.ListAllImages(count, page, userID);
+  }
+
  public async DeleteImages(
    images: string[]
  ): AsyncFailable<ImageDeleteResponse> {
--- a/frontend/src/app/util/remove-children.ts
+++ b/frontend/src/app/util/remove-children.ts
@@ -0,0 +1,5 @@
+export const RemoveChildren = (parent: HTMLElement) => {
+  while (parent.lastChild) {
+    parent.removeChild(parent.lastChild);
+  }
+};
--- a/yarn.lock
+++ b/yarn.lock
@@ -1373,8 +1373,7 @@
    secure-json-parse "^2.4.0"
    stream-wormhole "^1.1.0"

-"@fastify/static@^5.0.0", "fastify-static@npm:@fastify/static":
-  name fastify-static
+"@fastify/static@^5.0.0", fastify-static@^4.7.0, "fastify-static@npm:@fastify/static":
  version "5.0.2"
  resolved "https://registry.yarnpkg.com/@fastify/static/-/static-5.0.2.tgz#46cee887393b422f4b10a46a14e970a64dd086d4"
  integrity sha512-HvyXZ5a7hUHoSBRq9jKUuKIUCkHMkCDcmiAeEmixXlGOx8pEWx3NYOIaiivcjWa6/NLvfdUT+t/jzfVQ2PA7Gw==
@@ -1469,9 +1468,9 @@
    "@jridgewell/sourcemap-codec" "^1.4.10"

 "@leichtgewicht/ip-codec@^2.0.1":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz#0300943770e04231041a51bd39f0439b5c7ab4f0"
-  integrity sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
+  integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==

 "@mapbox/node-pre-gyp@^1.0.0":
  version "1.0.9"
@@ -2024,13 +2023,13 @@
    "@types/node" "*"

 "@typescript-eslint/eslint-plugin@^5.21.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.22.0.tgz#7b52a0de2e664044f28b36419210aea4ab619e2a"
-  integrity sha512-YCiy5PUzpAeOPGQ7VSGDEY2NeYUV1B0swde2e0HzokRsHBYjSdF6DZ51OuRZxVPHx0032lXGLvOMls91D8FXlg==
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.23.0.tgz#bc4cbcf91fbbcc2e47e534774781b82ae25cc3d8"
+  integrity sha512-hEcSmG4XodSLiAp1uxv/OQSGsDY6QN3TcRU32gANp+19wGE1QQZLRS8/GV58VRUoXhnkuJ3ZxNQ3T6Z6zM59DA==
  dependencies:
-    "@typescript-eslint/scope-manager" "5.22.0"
-    "@typescript-eslint/type-utils" "5.22.0"
-    "@typescript-eslint/utils" "5.22.0"
+    "@typescript-eslint/scope-manager" "5.23.0"
+    "@typescript-eslint/type-utils" "5.23.0"
+    "@typescript-eslint/utils" "5.23.0"
    debug "^4.3.2"
    functional-red-black-tree "^1.0.1"
    ignore "^5.1.8"
@@ -2039,68 +2038,68 @@
    tsutils "^3.21.0"

 "@typescript-eslint/parser@^5.21.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.22.0.tgz#7bedf8784ef0d5d60567c5ba4ce162460e70c178"
-  integrity sha512-piwC4krUpRDqPaPbFaycN70KCP87+PC5WZmrWs+DlVOxxmF+zI6b6hETv7Quy4s9wbkV16ikMeZgXsvzwI3icQ==
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.23.0.tgz#443778e1afc9a8ff180f91b5e260ac3bec5e2de1"
+  integrity sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==
  dependencies:
-    "@typescript-eslint/scope-manager" "5.22.0"
-    "@typescript-eslint/types" "5.22.0"
-    "@typescript-eslint/typescript-estree" "5.22.0"
+    "@typescript-eslint/scope-manager" "5.23.0"
+    "@typescript-eslint/types" "5.23.0"
+    "@typescript-eslint/typescript-estree" "5.23.0"
    debug "^4.3.2"

-"@typescript-eslint/scope-manager@5.22.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.22.0.tgz#590865f244ebe6e46dc3e9cab7976fc2afa8af24"
-  integrity sha512-yA9G5NJgV5esANJCO0oF15MkBO20mIskbZ8ijfmlKIvQKg0ynVKfHZ15/nhAJN5m8Jn3X5qkwriQCiUntC9AbA==
+"@typescript-eslint/scope-manager@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz#4305e61c2c8e3cfa3787d30f54e79430cc17ce1b"
+  integrity sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==
  dependencies:
-    "@typescript-eslint/types" "5.22.0"
-    "@typescript-eslint/visitor-keys" "5.22.0"
+    "@typescript-eslint/types" "5.23.0"
+    "@typescript-eslint/visitor-keys" "5.23.0"

-"@typescript-eslint/type-utils@5.22.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.22.0.tgz#0c0e93b34210e334fbe1bcb7250c470f4a537c19"
-  integrity sha512-iqfLZIsZhK2OEJ4cQ01xOq3NaCuG5FQRKyHicA3xhZxMgaxQazLUHbH/B2k9y5i7l3+o+B5ND9Mf1AWETeMISA==
+"@typescript-eslint/type-utils@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.23.0.tgz#f852252f2fc27620d5bb279d8fed2a13d2e3685e"
+  integrity sha512-iuI05JsJl/SUnOTXA9f4oI+/4qS/Zcgk+s2ir+lRmXI+80D8GaGwoUqs4p+X+4AxDolPpEpVUdlEH4ADxFy4gw==
  dependencies:
-    "@typescript-eslint/utils" "5.22.0"
+    "@typescript-eslint/utils" "5.23.0"
    debug "^4.3.2"
    tsutils "^3.21.0"

-"@typescript-eslint/types@5.22.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.22.0.tgz#50a4266e457a5d4c4b87ac31903b28b06b2c3ed0"
-  integrity sha512-T7owcXW4l0v7NTijmjGWwWf/1JqdlWiBzPqzAWhobxft0SiEvMJB56QXmeCQjrPuM8zEfGUKyPQr/L8+cFUBLw==
+"@typescript-eslint/types@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.23.0.tgz#8733de0f58ae0ed318dbdd8f09868cdbf9f9ad09"
+  integrity sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==

-"@typescript-eslint/typescript-estree@5.22.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.22.0.tgz#e2116fd644c3e2fda7f4395158cddd38c0c6df97"
-  integrity sha512-EyBEQxvNjg80yinGE2xdhpDYm41so/1kOItl0qrjIiJ1kX/L/L8WWGmJg8ni6eG3DwqmOzDqOhe6763bF92nOw==
+"@typescript-eslint/typescript-estree@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz#dca5f10a0a85226db0796e8ad86addc9aee52065"
+  integrity sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==
  dependencies:
-    "@typescript-eslint/types" "5.22.0"
-    "@typescript-eslint/visitor-keys" "5.22.0"
+    "@typescript-eslint/types" "5.23.0"
+    "@typescript-eslint/visitor-keys" "5.23.0"
    debug "^4.3.2"
    globby "^11.0.4"
    is-glob "^4.0.3"
    semver "^7.3.5"
    tsutils "^3.21.0"

-"@typescript-eslint/utils@5.22.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.22.0.tgz#1f2c4897e2cf7e44443c848a13c60407861babd8"
-  integrity sha512-HodsGb037iobrWSUMS7QH6Hl1kppikjA1ELiJlNSTYf/UdMEwzgj0WIp+lBNb6WZ3zTwb0tEz51j0Wee3iJ3wQ==
+"@typescript-eslint/utils@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.23.0.tgz#4691c3d1b414da2c53d8943310df36ab1c50648a"
+  integrity sha512-dbgaKN21drqpkbbedGMNPCtRPZo1IOUr5EI9Jrrh99r5UW5Q0dz46RKXeSBoPV+56R6dFKpbrdhgUNSJsDDRZA==
  dependencies:
    "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.22.0"
-    "@typescript-eslint/types" "5.22.0"
-    "@typescript-eslint/typescript-estree" "5.22.0"
+    "@typescript-eslint/scope-manager" "5.23.0"
+    "@typescript-eslint/types" "5.23.0"
+    "@typescript-eslint/typescript-estree" "5.23.0"
    eslint-scope "^5.1.1"
    eslint-utils "^3.0.0"

-"@typescript-eslint/visitor-keys@5.22.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.22.0.tgz#f49c0ce406944ffa331a1cfabeed451ea4d0909c"
-  integrity sha512-DbgTqn2Dv5RFWluG88tn0pP6Ex0ROF+dpDO1TNNZdRtLjUr6bdznjA6f/qNqJLjd2PgguAES2Zgxh/JzwzETDg==
+"@typescript-eslint/visitor-keys@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz#057c60a7ca64667a39f991473059377a8067c87b"
+  integrity sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==
  dependencies:
-    "@typescript-eslint/types" "5.22.0"
+    "@typescript-eslint/types" "5.23.0"
    eslint-visitor-keys "^3.0.0"

 "@webassemblyjs/ast@1.11.1":
@@ -2838,9 +2837,9 @@ camelcase@^5.3.1:
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

 caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001335:
-  version "1.0.30001338"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz#b5dd7a7941a51a16480bdf6ff82bded1628eec0d"
-  integrity sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ==
+  version "1.0.30001339"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001339.tgz#f9aece4ea8156071613b27791547ba0b33f176cf"
+  integrity sha512-Es8PiVqCe+uXdms0Gu5xP5PF2bxLR7OBp3wUzUnuO7OHzhOfCyg3hdiGWVPVxhiuniOzng+hTc1u3fEQ0TlkSQ==

 chalk@3.0.0:
  version "3.0.0"
@@ -4026,27 +4025,6 @@ fastify-plugin@^3.0.0:
  resolved "https://registry.yarnpkg.com/fastify-plugin/-/fastify-plugin-3.0.1.tgz#79e84c29f401020f38b524f59f2402103fd21ed2"
  integrity sha512-qKcDXmuZadJqdTm6vlCqioEbyewF60b/0LOFCcYN1B6BIZGlYJumWWOYs70SFYLDAH4YqdE1cxH/RKMG7rFxgA==

-"fastify-static-deprecated@npm:fastify-static@4.6.1":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/fastify-static/-/fastify-static-4.6.1.tgz#687131da76f1d4391fb8b47f71ea2118cdc85803"
-  integrity sha512-vy7N28U4AMhuOim12ZZWHulEE6OQKtzZbHgiB8Zj4llUuUQXPka0WHAQI3njm1jTCx4W6fixUHfpITxweMtAIA==
-  dependencies:
-    content-disposition "^0.5.3"
-    encoding-negotiator "^2.0.1"
-    fastify-plugin "^3.0.0"
-    glob "^7.1.4"
-    p-limit "^3.1.0"
-    readable-stream "^3.4.0"
-    send "^0.17.1"
-
-fastify-static@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/fastify-static/-/fastify-static-4.7.0.tgz#e802658d69c1dcddb380b9afc2456d467a3494be"
-  integrity sha512-zZhCfJv/hkmud2qhWqpU3K9XVAuy3+IV8Tp9BC5J5U+GyA2XwoB6h8lh9GqpEIqdXOw01WyWQllV7dOWVyAlXg==
-  dependencies:
-    fastify-static-deprecated "npm:fastify-static@4.6.1"
-    process-warning "^1.0.0"
-
 fastify@3.28.0:
  version "3.28.0"
  resolved "https://registry.yarnpkg.com/fastify/-/fastify-3.28.0.tgz#14d939a2f176b82af1094de7abcb0b2d83bcff8f"
@@ -4810,9 +4788,9 @@ interpret@^1.0.0:
  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==

 ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.6.tgz#5a651a37644586e18b6ba3b48ca122bf56495f67"
+  integrity sha512-/dAvCivFs/VexXAtiAoMIqyhkhStNC9CPD0h1noonimOgB1xrCkexF2c5CjlqQ72GgMPjN6tiV+oreoPv3Ft1g==

 ipaddr.js@1.9.1:
  version "1.9.1"
@@ -5317,9 +5295,9 @@ make-error@^1.1.1:
  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==

 make-fetch-happen@^10.0.3, make-fetch-happen@^10.0.6:
-  version "10.1.2"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-10.1.2.tgz#acffef43f86250602b932eecc0ad3acc992ae233"
-  integrity sha512-GWMGiZsKVeJACQGJ1P3Z+iNec7pLsU6YW1q11eaPn3RR8nRXHppFWfP7Eu0//55JK3hSjrAQRl8sDa5uXpq1Ew==
+  version "10.1.3"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-10.1.3.tgz#d7ecd4a22563b2c05b74735eda46569da26a46f6"
+  integrity sha512-s/UjmGjUHn9m52cctFhN2ITObbT+axoUhgeir8xGrOlPbKDyJsdhQzb8PGncPQQ28uduHybFJ6Iumy2OZnreXw==
  dependencies:
    agentkeepalive "^4.2.1"
    cacache "^16.0.2"
@@ -5445,12 +5423,7 @@ minimatch@^3.0.4, minimatch@^3.1.2:
  dependencies:
    brace-expansion "^1.1.7"

-minimist@1.2.6, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
-  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
-
-"minimist@npm:minimist-lite":
+minimist@1.2.6, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6, "minimist@npm:minimist-lite":
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/minimist-lite/-/minimist-lite-2.2.1.tgz#abb71db2c9b454d7cf4496868c03e9802de9934d"
  integrity sha512-RSrWIRWGYoM2TDe102s7aIyeSipXMIXKb1fSHYx1tAbxAV0z4g2xR6ra3oPzkTqFb0EIUz1H3A/qvYYeDd+/qQ==