folder options synchronized

Author: sf666

frontend/nextcp-ui/src/app/mediaserver/display-container/container-tile/container-tile.component.html

@@ -21,17 +21,17 @@
         <span class="likeBadge material-symbols-outlined" aria-label="Liked">favorite</span>
       }
       <!--
-        Makes the rating sheet findable. On the artwork, like Roon's overflow
+        Makes the options menu findable. On the artwork, like Roon's overflow
         menu — the biggest target on the tile, and it leaves the title its full
         width. Unlike Roon it does not wait for hover: the main target here is a
         tablet, where the long press was the only way in and nothing announced
         it.
       -->
-      @if (ratingPossible()) {
+      @if (optionsPossible()) {
         <button type="button" class="tileOptions" (click)="openOptions($event, container)"
                 (pointerdown)="$event.stopPropagation()"
-                [title]="'Rate ' + container.title"
-                [attr.aria-label]="'Rate ' + container.title">
+                [title]="'Options for ' + container.title"
+                [attr.aria-label]="'Options for ' + container.title">
           <span class="material-symbols-outlined">more_horiz</span>
         </button>
       }

frontend/nextcp-ui/src/app/mediaserver/display-container/container-tile/container-tile.component.ts

@@ -19,10 +19,11 @@ import { DeviceService } from 'src/app/service/device.service';
 import {
   RATING_LIKED,
   RatingFilter,
+  RatingServiceService,
 } from 'src/app/service/rating-service.service';
 import { filterContainers } from 'src/app/util/browse-filter';
 import { AlbumArtService } from 'src/app/util/album-art.service';
-import { ContainerRatingComponent } from '../../popup/container-rating/container-rating.component';
+import { DisplayHeaderOptionsComponent } from '../../popup/display-header-options/display-header-options.component';
 
 @Component({
   selector: 'container-tile',
@@ -54,25 +55,33 @@ export class ContainerTileComponent {
   );
 
   browseClicked = output<ContainerDto>();
+  /** Handed to the options menu, which emits on it - the tile itself has no queue to add to. */
+  addToPlaylistClicked = output<ContainerDto>();
 
   //
-  // Rating by long press
+  // Options menu, by long press or by the tile's options button
   // ============================================================================
   // A tap on a tile navigates into the container, so the only spare gesture for
-  // rating is a long press. The press is cancelled as soon as the finger moves,
+  // the menu is a long press. The press is cancelled as soon as the finger moves,
   // otherwise it would fire while scrolling the grid.
 
   private readonly dialog = inject(MatDialog);
   readonly albumArt = inject(AlbumArtService);
   private readonly deviceService = inject(DeviceService);
+  private readonly ratingService = inject(RatingServiceService);
   private readonly LONG_PRESS_MS = 500;
   private readonly MOVE_TOLERANCE_PX = 10;
 
   private pressTimer: ReturnType<typeof setTimeout> | undefined;
   private pressStart: { x: number; y: number } | undefined;
   private pressHandled = false;
 
-  ratingPossible(): boolean {
+  /**
+   * Everything the menu offers - the like, the radio station, the album art - is an extension of
+   * the standard the media server either has or has not. Without it the button would open a menu
+   * with nothing in it that works.
+   */
+  optionsPossible(): boolean {
     return this.deviceService.selectedMediaServerDevice().extendedApi;
   }
 
@@ -100,15 +109,16 @@ export class ContainerTileComponent {
   }
 
   onPressStart(event: PointerEvent, container: ContainerDto): void {
-    if (!this.ratingPossible()) {
+    if (!this.optionsPossible()) {
       return;
     }
     this.cancelPress();
     this.pressHandled = false;
     this.pressStart = { x: event.clientX, y: event.clientY };
+    const trigger = event.currentTarget;
     this.pressTimer = setTimeout(() => {
       this.pressHandled = true;
-      this.openRatingDialog(container);
+      this.openOptionsMenu(container, trigger);
     }, this.LONG_PRESS_MS);
   }
 
@@ -136,31 +146,78 @@ export class ContainerTileComponent {
   }
 
   /**
-   * Same sheet as the long press, reached by tapping the tile's options button.
+   * Same menu as the long press, reached by tapping the tile's options button.
    * Stops the event so the tile does not also navigate into the container.
    */
   openOptions(event: Event, container: ContainerDto): void {
     event.stopPropagation();
     event.preventDefault();
     this.cancelPress();
-    this.openRatingDialog(container);
+    this.openOptionsMenu(container, event.currentTarget);
   }
 
-  private openRatingDialog(container: ContainerDto): void {
-    const dialogRef = this.dialog.open(ContainerRatingComponent, {
-      data: { container: container, rating: this.effectiveRating(container) },
-      panelClass: ['popup', 'popup-glass'],
+  /**
+   * The menu the header opens for the container being browsed, on the tile of one that is not -
+   * the two offer the same actions, so there is one component for both.
+   *
+   * The menu places itself next to what it came out of, so the trigger goes along: the options
+   * button for a tap, the tile for a long press.
+   */
+  private openOptionsMenu(container: ContainerDto, trigger: EventTarget | null): void {
+    const dialogRef = this.dialog.open(DisplayHeaderOptionsComponent, {
+      hasBackdrop: true,
+      panelClass: ['popup-glass'],
+      data: {
+        trigger: new ElementRef(trigger),
+        addToPlaylistOutput: this.addToPlaylistClicked,
+        currentContainer: container,
+        // What is on screen is the container this one is listed in, so that is what a change here
+        // has to re-read.
+        listingContainerId: container.parentID,
+        canLike: this.optionsPossible(),
+        isLiked: this.isLiked(container),
+        // A tile knows the container, not what is in it - and "Set artist folder" is decided by the
+        // number of folders inside. It stays with the header of the folder itself.
+        childFolderCount: 0,
+      },
     });
-    dialogRef.afterClosed().subscribe((newRating) => {
-      if (newRating !== undefined) {
-        // Reflect the new state on the tile without re-browsing.
-        const next = new Map(this.ratingOverrides());
-        next.set(container.id, newRating === null ? undefined : newRating);
-        this.ratingOverrides.set(next);
+    // The menu only reports the choice; the rating call stays with the view that holds the entry.
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result === 'toggleLike') {
+        this.toggleLike(container);
       }
     });
   }
 
+  /**
+   * Likes the container, or takes the like back - which clears the rating rather than storing a
+   * dislike. Same two states as everywhere else in the app.
+   */
+  private toggleLike(container: ContainerDto): void {
+    if (!this.optionsPossible()) {
+      return;
+    }
+    const previousRating = this.effectiveRating(container);
+    const newRating = this.isLiked(container) ? undefined : RATING_LIKED;
+    this.ratingService
+      .setResourceRating(
+        container.id,
+        previousRating,
+        newRating,
+        container.parentID,
+        container.objectClass,
+      )
+      .subscribe({
+        next: () => {
+          // Reflect the new state on the tile without re-browsing.
+          const next = new Map(this.ratingOverrides());
+          next.set(container.id, newRating);
+          this.ratingOverrides.set(next);
+        },
+        error: (err) => console.error('cannot rate container', err),
+      });
+  }
+
   //
   // Virtual scrolling (windowing)
   // ============================================================================

frontend/nextcp-ui/src/app/mediaserver/display-container/display-container-header/display-container-header.component.ts

@@ -70,7 +70,7 @@ export class DisplayContainerHeaderComponent implements OnInit {
   // Kept short on purpose: a digit plus the heart says it without a sentence. ANY
   // has no digit, it is the switched-off state and carries an icon instead. The
   // trailing plus is what tells the reader the entry is a lower bound; 5 has none
-  // because there is nothing above it, and 0 is the disliked bucket, not a bound.
+  // because there is nothing above it, and 0 is what carries no rating, not a bound.
   readonly ratingOptions: ReadonlyArray<{
     value: RatingFilter;
     digits?: string;
@@ -83,7 +83,7 @@ export class DisplayContainerHeaderComponent implements OnInit {
     { value: '3', digits: '3+', title: '3 and better' },
     { value: '2', digits: '2+', title: '2 and better' },
     { value: '1', digits: '1+', title: '1 and better' },
-    { value: '0', digits: '0', title: 'Disliked, 0' },
+    { value: '0', digits: '0', title: 'Not rated' },
   ];
 
   ratingOption = computed(
@@ -721,7 +721,6 @@ export class DisplayContainerHeaderComponent implements OnInit {
       data: {
         trigger: target,
         addToPlaylistOutput: this.addToPlaylistClicked,
-        event: event,
         currentContainer: this.currentContainer,
         // The like only shows up here for containers that do not wear it next
         // to their title (see showTitleLike).

frontend/nextcp-ui/src/app/mediaserver/display-container/display-container.component.html

@@ -48,7 +48,8 @@
         [quickSearchString]="displayFilterString()"
         [selectedGenres]="selectedGenres()"
         [ratingFilter]="ratingFilter()"
-        (browseClicked)="browseTo($event)">
+        (browseClicked)="browseTo($event)"
+        (addToPlaylistClicked)="addContainerToPlaylist($event)">
       </container-tile>
     </div>
     }
@@ -70,7 +71,8 @@
         [ratingFilter]="ratingFilter()"
         [sortCriteria]="sortCriteria()"
         [virtualize]="true"
-        (browseClicked)="browseTo($event)">
+        (browseClicked)="browseTo($event)"
+        (addToPlaylistClicked)="addContainerToPlaylist($event)">
       </container-tile>
     </div>
     }
@@ -91,7 +93,8 @@
         [selectedGenres]="selectedGenres()"
         [ratingFilter]="ratingFilter()"
         [virtualize]="true"
-        (browseClicked)="browseTo($event)">
+        (browseClicked)="browseTo($event)"
+        (addToPlaylistClicked)="addContainerToPlaylist($event)">
       </container-tile>
     </div>
     }
@@ -134,7 +137,8 @@
         [ratingFilter]="ratingFilter()"
         [quickSearchString]="displayFilterString()"
         [virtualize]="true"
-        (browseClicked)="browseTo($event)">
+        (browseClicked)="browseTo($event)"
+        (addToPlaylistClicked)="addContainerToPlaylist($event)">
       </container-tile>
     </div>
     }

frontend/nextcp-ui/src/app/mediaserver/display-container/display-container.component.ts

@@ -517,6 +517,15 @@ export class DisplayContainerComponent {
     );
   }
 
+  /**
+   * Adds a container from the listing - not the one on screen - to the renderer's queue. It goes as
+   * it stands on the server: the quick filter narrows the tracks of the container being browsed,
+   * which says nothing about what belongs in another one.
+   */
+  addContainerToPlaylist(container: ContainerDto): void {
+    this.playlistService.addContainerToPlaylist(container);
+  }
+
   addItemToPlaylist(item: MusicItemDto): void {
     this.playlistService.addToPlaylist(item);
   }