flicker fix for RadioBrowser actions

Author: sf666

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

@@ -432,9 +432,15 @@ export class DisplayContainerHeaderComponent implements OnInit {
 
   private cdsBrowseFinished() {
     console.log('cdsBrowseFinished ... ');
-    // A fresh browse result starts at the top, so show the full hero header.
-    this.condensed.set(false);
-    this.clearSearch();
+    // The listing on screen was re-read where it stands - nobody navigated anywhere. Everything
+    // below that belongs to arriving at a container has to stay put for it, or the header pops back
+    // open and the quick search empties itself while the user is looking at it.
+    const inPlace = this.contentDirectoryService().isInPlaceRefresh();
+    if (!inPlace) {
+      // A fresh browse result starts at the top, so show the full hero header.
+      this.condensed.set(false);
+      this.clearSearch();
+    }
     this.fillGenres();
     this.readContainerRating();
     // A result set has no cover of its own. Blowing one hit's artwork up behind
@@ -446,8 +452,7 @@ export class DisplayContainerHeaderComponent implements OnInit {
     // so a reply without a cover means "not reported this time", not "has none". Clearing on that
     // drops the wash to black for a moment and it flickers back - keep what is up instead. Only a
     // real navigation may clear, because there the empty genuinely belongs to the new container.
-    const keepLastImage =
-      !artUrl && this.contentDirectoryService().isInPlaceRefresh();
+    const keepLastImage = !artUrl && inPlace;
     if (!keepLastImage) {
       this.backgroundImageService.setDisplayContainerHeaderImage(artUrl);
       // Drive the full-screen "living canvas" wash from the item currently being

frontend/nextcp-ui/src/app/service/cds-update.service.ts

@@ -88,12 +88,30 @@ export class CdsUpdateService {
    */
   public announceRatingChange(change: RatingChange): void {
     if (change.containerId) {
-      this.pruneExpired();
-      this.selfInflicted.set(change.containerId, Date.now());
+      this.markOwnChange(change.containerId);
     }
     this.itemRatingChanged$.next(change);
   }
 
+  /**
+   * Announces content this browser has written into a container - a radio station appended to a
+   * playlist, a cover replaced. The view showing it browses again once, here; the media server's
+   * echo of the same write is ignored, so the listing is not replaced another six times while the
+   * server re-reads the file it was just told to change.
+   */
+  public announceContainerChange(containerId: string): void {
+    if (!containerId) {
+      return;
+    }
+    this.markOwnChange(containerId);
+    this.containerContentChanged$.next(containerId);
+  }
+
+  private markOwnChange(containerId: string): void {
+    this.pruneExpired();
+    this.selfInflicted.set(containerId, Date.now());
+  }
+
   private isOwnChange(containerId: string): boolean {
     const changedAt = this.selfInflicted.get(containerId);
     if (changedAt === undefined) {
@@ -136,7 +154,7 @@ export class CdsUpdateService {
       // The media server stores the picture before it answers, so the browse
       // that follows already sees it.
       result.subscribe({
-        next: () => this.containerContentChanged$.next(containerId),
+        next: () => this.announceContainerChange(containerId),
         error: () => {},
       });
     }

frontend/nextcp-ui/src/app/service/radio-browser.service.ts

@@ -117,9 +117,12 @@ export class RadioBrowserService {
       request,
       'add radio station',
     );
-    // the media server writes the entry before it answers, so the browse that follows sees it
+    // The media server writes the entry before it answers, so the browse that follows sees it.
+    // Announced rather than pushed: UMS re-reads the playlist file it was just told to change and
+    // bumps its update id several times over, and acting on that echo browses the listing away
+    // under the user again and again - the flicker.
     result.subscribe({
-      next: () => this.cdsUpdateService.containerContentChanged$.next(playlistObjectId),
+      next: () => this.cdsUpdateService.announceContainerChange(playlistObjectId),
       error: () => {},
     });
     return result;