Added media item modal when user clicks on an item to save/subscribe a new media.

2025-06-26 14:31:16 +00:00
parent 89b29c58dc
commit f735d1631f
8 changed files with 305 additions and 26 deletions
--- a/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.ts
+++ b/frontend/angular-seshat/src/app/library/add-new-page/add-new-page.component.ts
@ -1,12 +1,21 @@
 import { Component, ElementRef, inject, NgZone, OnDestroy, signal, ViewChild } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, combineLatest, debounceTime, distinctUntilChanged, filter, scan, Subscription, throttleTime } from 'rxjs';
+import { BehaviorSubject, combineLatest, debounceTime, distinctUntilChanged, filter, map, scan, Subscription, tap, throttleTime } from 'rxjs';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { BookSearchResultDto } from '../../shared/dto/book-search-result.dto';
 import { MediaSearchItemComponent } from '../media-search-item/media-search-item.component';
 import { SearchBoxComponent } from "../search-box/search-box.component";
 import { SearchContextDto } from '../../shared/dto/search-context.dto';

+const DEFAULT_MAX_RESULTS = 10;
+
+const PROVIDER_SETTINGS = {
+  google: {
+    FilterSearchParams: ['inauthor', 'inpublisher', 'intitle', 'isbn', 'subject'],
+    FilterNoUpdateParams: ['maxResults'],
+  }
+}
+
@Component({
  selector: 'add-new-page',
  standalone: true,
@ -35,24 +44,36 @@ export class AddNewPageComponent implements OnDestroy {
  searchError = signal<string | null>(null);

  constructor() {
-    this._zone.runOutsideAngular(() =>
+    this._zone.runOutsideAngular(() => {
+      // Subscription for max results.
+      this._subscriptions.push(
+        this.filters.pipe(
+          map(filters => 'maxResults' in filters.values ? parseInt(filters.values['maxResults']) : DEFAULT_MAX_RESULTS)
+        ).subscribe(maxResults => {
+          this.resultsPerPage.set(maxResults);
+        })
+      );
+
      // Subscription for the search bar.
      this._subscriptions.push(
        combineLatest({
          search: this.search.pipe(
            filter(value => value != null),
          ),
-          filters: this.filters,
+          filters: this.filters.pipe(
+            map(filters => ({ values: { ...filters.values } }))
+          ),
          page: this.page.pipe(
-            throttleTime(1500, undefined, { leading: false, trailing: true }),
+            throttleTime(3000, undefined, { leading: false, trailing: true }),
          ),
        }).pipe(
-          filter(entry => entry.search!.length > 1),
          debounceTime(1000),
+          filter(entry => entry.search.length > 1 || this.isUsingSearchParamsInFilters(entry.filters)),
          scan((acc, next) => {
-            // New searches means resetting to page 0.
-            // Ignore if user is busy loading new pages.
-            if (acc.search != next.search) {
+            // Different search or filters means resetting to page 0.
+            const searchChanged = acc.search != next.search && next.search && next.search.length > 1;
+            const filtersChanged = this.hasFiltersMismatched(acc.filters, next.filters);
+            if (searchChanged || filtersChanged) {
              this.results = [];
              return {
                ...next,
@ -60,21 +81,22 @@ export class AddNewPageComponent implements OnDestroy {
              };
            }

-            // Keep searching the same page until error stops.
-            if (this.searchError() != null) {
-              return acc;
-            }
-
            // Ignore further page searching if:
            // - there are no more results;
-            // - user is still busy loading new pages.
-            if (this.endOfResults() || this.busy()) {
+            // - user is still busy loading new pages;
+            // - only max results filter changed.
+            if (this.endOfResults() || this.busy() || acc.filters.values['maxResults'] != next.filters.values['maxResults']) {
              return {
                ...next,
                page: -1,
              };
            }

+            // Keep searching the same page until error stops.
+            if (this.searchError() != null) {
+              return acc;
+            }
+
            // Next page.
            return {
              ...next,
@ -86,15 +108,18 @@ export class AddNewPageComponent implements OnDestroy {
        ).subscribe((entry) => {
          this.busy.set(true);
          this.endOfResults.set(false);
-          this.searchContentRef.nativeElement.scrollTop = 0;
+          if (this.searchContentRef) {
+            this.searchContentRef.nativeElement.scrollTop = 0;
+          }
+
          this._http.get('/api/providers/search',
            {
              params: {
-                ...this.filters.value.values,
+                ...entry.filters.values,
                provider: 'google',
                search: entry.search!,
                startIndex: entry.page * this.resultsPerPage(),
-              }
+              },
            }
          ).subscribe({
            next: (results: any) => {
@ -103,6 +128,7 @@ export class AddNewPageComponent implements OnDestroy {
              if (results.length < this.resultsPerPage()) {
                this.endOfResults.set(true);
              }
+              this.searchError.set(null);
              this.busy.set(false);
            },
            error: (err) => {
@ -121,8 +147,8 @@ export class AddNewPageComponent implements OnDestroy {
            }
          });
        })
-      )
-    );
+      );
+    });
  }

  ngOnDestroy(): void {
@ -142,4 +168,34 @@ export class AddNewPageComponent implements OnDestroy {

    this.page.next(this.page.getValue() + 1);
  }
+
+  private hasFiltersMismatched(prev: SearchContextDto, next: SearchContextDto) {
+    if (prev == next) {
+      return false;
+    }
+
+    for (let key in prev.values) {
+      if (PROVIDER_SETTINGS.google.FilterNoUpdateParams.includes(key))
+        continue;
+      if (!(key in next.values))
+        return true;
+      if (prev.values[key] != next.values[key])
+        return true;
+    }
+
+    for (let key in next.values) {
+      if (!PROVIDER_SETTINGS.google.FilterNoUpdateParams.includes(key) && !(key in prev.values))
+        return true;
+    }
+
+    return false;
+  }
+
+  private isUsingSearchParamsInFilters(context: SearchContextDto) {
+    if (!context)
+      return false;
+
+    const keys = Object.keys(context.values);
+    return keys.some(key => PROVIDER_SETTINGS.google.FilterSearchParams.includes(key));
+  }
 }
--- a/frontend/angular-seshat/src/app/library/media-item-modal/media-item-modal.component.css
+++ b/frontend/angular-seshat/src/app/library/media-item-modal/media-item-modal.component.css
@ -0,0 +1,81 @@
+.modal {
+    background-color: #EEE;
+}
+
+.header {
+    display: flex;
+    padding: 8px 15px 2px;
+}
+
+.title {
+    display: inline;
+    --webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    margin: 0;
+}
+
+.volume {
+    background-color: hsl(0, 0%, 84%);
+    display: inline;
+    margin-left: 10px;
+    padding: 3px;
+    border-radius: 4px;
+}
+
+.year {
+    color: grey;
+    margin-left: 10px;
+}
+
+.close-button {
+    max-width: 24px;
+    max-height: 24px;
+    align-self: center;
+    margin-left: auto;
+}
+
+.close-button>img {
+    max-width: 24px;
+    max-height: 24px;
+    filter: brightness(0) saturate(100%) invert(42%) sepia(75%) saturate(5087%) hue-rotate(340deg) brightness(101%) contrast(109%);
+}
+
+.result-item {
+    padding: 10px 25px 0;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: row;
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+}
+
+.result-image {
+    align-self: start;
+    object-fit: scale-down;
+}
+
+.result-info {
+    margin-left: 10px;
+}
+
+.body {
+    margin: 5px 10px;
+}
+
+.footer {
+    display: flex;
+    text-align: center;
+    padding: 10px 20px 15px;
+    justify-content: end;
+}
+
+button {
+    padding: 10px;
+    border-radius: 5px;
+    border: 0;
+    cursor: pointer;
+}
+
+.subscribe {
+    background-color: aquamarine;
+}
--- a/frontend/angular-seshat/src/app/library/media-item-modal/media-item-modal.component.html
+++ b/frontend/angular-seshat/src/app/library/media-item-modal/media-item-modal.component.html
@ -0,0 +1,30 @@
+<div class="modal">
+  <div class="header">
+    <div class="subheader">
+      <h2 class="title">{{data.title}}</h2>
+      @if (!isSeries && data.volume != null) {
+      <label class="volume">volume {{data.volume}}</label>
+      }
+      <label class="year">({{data.publishedAt.substring(0, 4)}})</label>
+    </div>
+    <div class="close-button"
+         (click)="dialogRef.close()">
+      <img src="/icons/close_icon.svg"
+           alt="close button" />
+    </div>
+  </div>
+  <hr />
+  <div class="result-item">
+    <img class="result-image"
+         [src]="data.thumbnail" />
+    <div class="result-info">
+      <p class="body description">{{data.desc}}</p>
+    </div>
+  </div>
+  <hr />
+  <div class="footer">
+    <button type="submit"
+            class="subscribe"
+            (click)="subscribe()">{{isSeries ? 'Subscribe' : 'Save'}}</button>
+  </div>
+</div>
--- a/frontend/angular-seshat/src/app/library/media-item-modal/media-item-modal.component.spec.ts
+++ b/frontend/angular-seshat/src/app/library/media-item-modal/media-item-modal.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaItemModalComponent } from './media-item-modal.component';
+
+describe('MediaItemModalComponent', () => {
+  let component: MediaItemModalComponent;
+  let fixture: ComponentFixture<MediaItemModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaItemModalComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaItemModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/frontend/angular-seshat/src/app/library/media-item-modal/media-item-modal.component.ts
+++ b/frontend/angular-seshat/src/app/library/media-item-modal/media-item-modal.component.ts
@ -0,0 +1,46 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { BookSearchResultDto } from '../../shared/dto/book-search-result.dto';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-media-item-modal',
+  standalone: true,
+  imports: [],
+  templateUrl: './media-item-modal.component.html',
+  styleUrl: './media-item-modal.component.css'
+})
+export class MediaItemModalComponent implements OnInit {
+  private readonly _http = inject(HttpClient);
+
+  readonly data = inject<BookSearchResultDto>(MAT_DIALOG_DATA);
+  readonly dialogRef = inject(MatDialogRef<MediaItemModalComponent>);
+
+  isSeries: boolean = false;
+
+  ngOnInit(): void {
+    this.isSeries = this.data.providerSeriesId != null;
+  }
+
+
+  subscribe() {
+    console.log('data for subscribe:', this.data);
+    if (this.isSeries) {
+      this._http.post('/api/library/series', this.data)
+        .subscribe({
+          next: response => {
+            console.log('subscribe series:', response);
+          },
+          error: err => console.log('error on subscribing series:', err)
+        });
+    } else {
+      this._http.post('/api/library/books', this.data)
+        .subscribe({
+          next: response => {
+            console.log('save book:', response);
+          },
+          error: err => console.log('error on saving book:', err)
+        });
+    }
+  }
+}
--- a/frontend/angular-seshat/src/app/library/media-search-item/media-search-item.component.css
+++ b/frontend/angular-seshat/src/app/library/media-search-item/media-search-item.component.css
@ -1,13 +1,23 @@
 .result-item {
    background-color: #EEE;
-    padding: 10px;
+    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
+    cursor: pointer;
+}
+
+.result-image {
+    align-self: start;
+    object-fit: scale-down;
 }

 .result-info {
    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
 }

 .title {
@ -24,20 +34,36 @@

 .tags {
    display: inline-flex;
+    flex-wrap: wrap;
    margin-bottom: 15px;
 }

 .tag {
    padding: 0 5px;
-    margin: 0 3px;
+    margin: 3px;
    background-color: rgb(199, 199, 199);
    border-radius: 4px;
+    text-wrap: nowrap;
 }

 .body {
    margin: 5px 10px;
 }

+.description {
+    overflow: hidden;
+    display: -webkit-box;
+    line-clamp: 4;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+}
+
+.spacing {
+    flex: 1;
+}
+
 .footer {
+    width: 100%;
+    height: 100%;
    text-align: right;
 }
--- a/frontend/angular-seshat/src/app/library/media-search-item/media-search-item.component.html
+++ b/frontend/angular-seshat/src/app/library/media-search-item/media-search-item.component.html
@ -1,5 +1,7 @@
-<div class="result-item">
-  <img class="result-image" [src]="media().thumbnail" />
+<div class="result-item"
+     (click)="open()">
+  <img class="result-image"
+       [src]="media().thumbnail" />
  <div class="result-info">
    <div class="header">
      <h2 class="title">{{media().title}}</h2>
@ -13,6 +15,7 @@
      }
    </div>
    <p class="body description">{{media().desc}}</p>
+    <span class="spacing"></span>
    <p class="footer">Metadata provided by {{provider()}}</p>
  </div>
 </div>
--- a/frontend/angular-seshat/src/app/library/media-search-item/media-search-item.component.ts
+++ b/frontend/angular-seshat/src/app/library/media-search-item/media-search-item.component.ts
@ -1,14 +1,20 @@
-import { Component, computed, input } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { BookSearchResultDto } from '../../shared/dto/book-search-result.dto';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MediaItemModalComponent } from '../media-item-modal/media-item-modal.component';

@Component({
  selector: 'media-search-item',
  standalone: true,
-  imports: [],
+  imports: [
+    MatDialogModule,
+  ],
  templateUrl: './media-search-item.component.html',
  styleUrl: './media-search-item.component.css'
 })
 export class MediaSearchItemComponent {
+  private readonly _dialog = inject(MatDialog);
+
  media = input.required<BookSearchResultDto>();

  tags = computed(() => {
@ -17,6 +23,8 @@ export class MediaSearchItemComponent {
      tags.push(this.media().language);
    if (this.media().publisher)
      tags.push(this.media().publisher);
+    if (this.media().authors)
+      tags.push.apply(tags, this.media().authors.map(author => 'author: ' + author));
    if (this.media().categories)
      tags.push.apply(tags, this.media().categories);
    if (this.media().maturityRating.replaceAll('_', ' '))
@ -36,4 +44,10 @@ export class MediaSearchItemComponent {
      .map(s => s[0].toUpperCase() + s.substring(1))
      .join('-');
  });
+
+  open(): void {
+    this._dialog.open(MediaItemModalComponent, {
+      data: { ...this.media() }
+    });
+  }
 }