Metadata Downloading (#3525)

UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html

@@ -1,4 +1,5 @@
 <ng-container *transloco="let t; read:'match-series-result-item'">
+
   <div class="d-flex p-1 clickable" (click)="selectItem()">
     <div style="width: 32px" class="me-1">
       @if (item.series.coverUrl) {
@@ -11,7 +12,7 @@
         @for(synm of item.series.synonyms; track synm; let last = $last) {
           {{synm}}
           @if (!last) {
-           <span>, </span>
+            <span>, </span>
           }
         }
       </div>
@@ -23,16 +24,27 @@
     </div>
   </div>
 
-  <div class="d-flex p-1 justify-content-between">
-    <span class="me-1"><a (click)="$event.stopPropagation()" [href]="item.series.siteUrl" rel="noreferrer noopener" target="_blank">{{t('details')}}</a></span>
-    @if ((item.series.volumeCount || 0) > 0 || (item.series.chapterCount || 0) > 0) {
-      <span class="me-1">{{t('volume-count', {num: item.series.volumeCount})}}</span>
-      <span class="me-1">{{t('chapter-count', {num: item.series.chapterCount})}}</span>
-    } @else {
-      <span class="me-1">{{t('releasing')}}</span>
-    }
+  @if (isSelected) {
+    <div class="d-flex p-1 justify-content-center">
+      <app-loading [absolute]="false" [loading]="true"></app-loading>
+      <span class="ms-2">{{t('updating-metadata-status')}}</span>
+    </div>
+  } @else {
+    <div class="d-flex p-1 justify-content-between">
+      <span class="me-1"><a (click)="$event.stopPropagation()" [href]="item.series.siteUrl" rel="noreferrer noopener" target="_blank">{{t('details')}}</a></span>
+      @if ((item.series.volumeCount || 0) > 0 || (item.series.chapterCount || 0) > 0) {
+        <span class="me-1">{{t('volume-count', {num: item.series.volumeCount})}}</span>
+        <span class="me-1">{{t('chapter-count', {num: item.series.chapterCount})}}</span>
+      } @else {
+        <span class="me-1">{{t('releasing')}}</span>
+      }
+
+      <span class="me-1">{{item.series.plusMediaFormat | plusMediaFormat}}</span>
+      <span class="me-1">({{item.matchRating | translocoPercent}})</span>
+    </div>
+  }
+
+
+
 
-    <span class="me-1">{{item.series.plusMediaFormat | plusMediaFormat}}</span>
-    <span class="me-1">({{item.matchRating | translocoPercent}})</span>
-  </div>
 </ng-container>

UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts

@@ -15,6 +15,7 @@ import {TranslocoPercentPipe} from "@jsverse/transloco-locale";
 import {ReadMoreComponent} from "../../shared/read-more/read-more.component";
 import {TranslocoDirective} from "@jsverse/transloco";
 import {PlusMediaFormatPipe} from "../../_pipes/plus-media-format.pipe";
+import {LoadingComponent} from "../../shared/loading/loading.component";
 
 @Component({
   selector: 'app-match-series-result-item',
@@ -24,7 +25,8 @@ import {PlusMediaFormatPipe} from "../../_pipes/plus-media-format.pipe";
     TranslocoPercentPipe,
     ReadMoreComponent,
     TranslocoDirective,
-    PlusMediaFormatPipe
+    PlusMediaFormatPipe,
+    LoadingComponent
   ],
   templateUrl: './match-series-result-item.component.html',
   styleUrl: './match-series-result-item.component.scss',
@@ -37,7 +39,13 @@ export class MatchSeriesResultItemComponent {
   @Input({required: true}) item!: ExternalSeriesMatch;
   @Output() selected: EventEmitter<ExternalSeriesMatch> = new EventEmitter();
 
+  isSelected = false;
+
   selectItem() {
+    if (this.isSelected) return;
+
+    this.isSelected = true;
+    this.cdRef.markForCheck();
     this.selected.emit(this.item);
   }
 

UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html

@@ -8,6 +8,8 @@
 
   @if (tokenExpired) {
     <p class="alert alert-warning">{{t('token-expired')}}</p>
+  } @else if (!(accountService.currentUser$ | async)!.preferences.aniListScrobblingEnabled) {
+    <p class="alert alert-warning">{{t('scrobbling-disabled')}}</p>
   }
 
   <p>{{t('description')}}</p>

UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts

@@ -18,6 +18,8 @@ import {ToastrService} from "ngx-toastr";
 import {LooseLeafOrDefaultNumber, SpecialVolumeNumber} from "../../_models/chapter";
 import {ColumnMode, NgxDatatableModule} from "@siemens/ngx-datatable";
 import {CardActionablesComponent} from "../card-actionables/card-actionables.component";
+import {AsyncPipe} from "@angular/common";
+import {AccountService} from "../../_services/account.service";
 
 export interface DataTablePage {
   pageNumber: number,
@@ -29,8 +31,8 @@ export interface DataTablePage {
 @Component({
   selector: 'app-user-scrobble-history',
   standalone: true,
-    imports: [ScrobbleEventTypePipe, ReactiveFormsModule, TranslocoModule,
-        DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe, NgbTooltip, NgxDatatableModule, CardActionablesComponent],
+  imports: [ScrobbleEventTypePipe, ReactiveFormsModule, TranslocoModule,
+    DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe, NgbTooltip, NgxDatatableModule, CardActionablesComponent, AsyncPipe],
   templateUrl: './user-scrobble-history.component.html',
   styleUrls: ['./user-scrobble-history.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -40,12 +42,14 @@ export class UserScrobbleHistoryComponent implements OnInit {
   protected readonly SpecialVolumeNumber = SpecialVolumeNumber;
   protected readonly LooseLeafOrDefaultNumber = LooseLeafOrDefaultNumber;
   protected readonly ColumnMode = ColumnMode;
+  protected readonly ScrobbleEventType = ScrobbleEventType;
 
   private readonly scrobblingService = inject(ScrobblingService);
   private readonly cdRef = inject(ChangeDetectorRef);
   private readonly destroyRef = inject(DestroyRef);
   private readonly toastr = inject(ToastrService);
-  protected readonly ScrobbleEventType = ScrobbleEventType;
+  protected readonly accountService = inject(AccountService);
+
 
 
   tokenExpired = false;