new feature: show artist image as background

src/app/ui/components/collection/album-browser/album-browser.component.html

@@ -1,3 +1,7 @@
+<div class="app-selected-artist__backgroundimage"
+     *ngIf="showArtistBackground"
+     [ngStyle]="{ 'background-image': 'url(' + artistBackground + ')' }"></div>
+
 <div class="h-100 w-100 d-flex flex-column" #albumBrowserElement>
     <div class="h-24px align-items-center justify-content-between d-flex flex-row m-1">
         <div class="d-flex flex-row align-items-center">

src/app/ui/components/collection/album-browser/album-browser.component.scss

@@ -0,0 +1,12 @@
+.app-selected-artist__backgroundimage {
+    filter: blur(8px);
+    opacity: 0.15;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}

src/app/ui/components/collection/album-browser/album-browser.component.spec.ts

@@ -19,6 +19,7 @@ import { SettingsMock } from '../../../../testing/settings-mock';
 import { TrackServiceBase } from '../../../../services/track/track.service.base';
 import { TrackModels } from '../../../../services/track/track-models';
 import { DialogServiceBase } from '../../../../services/dialog/dialog.service.base';
+import { ArtistModel } from '../../../../services/artist/artist-model';
 
 describe('AlbumBrowserComponent', () => {
     let trackServiceMock: IMock<TrackServiceBase>;
@@ -833,4 +834,49 @@ describe('AlbumBrowserComponent', () => {
             playbackServiceMock.verify((x) => x.enqueueAndPlayTracksAsync(tracks.tracks), Times.once());
         });
     });
+
+    describe('selectedArtists', () => {
+        it('should set the artist image as background when one artist is selected', () => {
+            // Arrange
+            const artworkId: string = 'artwork-1';
+            const artists: ArtistModel[] = [new ArtistModel('Metallica', artworkId, translatorServiceMock.object, applicationPathsMock.object)];
+
+            applicationPathsMock.setup((x) => x.artistArtFullPath(artworkId)).returns(() => `Cache/ArtistArt/${artworkId}.jpg`);
+
+            const component: AlbumBrowserComponent = createComponent();
+            expect(component.artistBackground).toEqual('');
+
+            // Act
+            component.selectedArtists = artists;
+
+            // Assert
+            expect(component.artistBackground).toEqual(`file:///Cache/ArtistArt/${artworkId}.jpg`);
+        });
+
+        it('should clear the background when multiple artists are selected', () => {
+            // Arrange
+            const artists: ArtistModel[] = [
+                new ArtistModel('Apocalyptica', 'artwork-1', translatorServiceMock.object, applicationPathsMock.object),
+                new ArtistModel('Metallica', 'artwork-2', translatorServiceMock.object, applicationPathsMock.object),
+            ];
+            const component: AlbumBrowserComponent = createComponent();
+
+            // Act
+            component.selectedArtists = artists;
+
+            // Assert
+            expect(component.artistBackground).toEqual('');
+        });
+
+        it('should clear the background when no artist is selected', () => {
+            // Arrange
+            const component: AlbumBrowserComponent = createComponent();
+
+            // Act
+            component.selectedArtists = [];
+
+            // Assert
+            expect(component.artistBackground).toEqual('');
+        });
+    });
 });

src/app/ui/components/collection/album-browser/album-browser.component.ts

@@ -19,6 +19,7 @@ import { PlaybackService } from '../../../../services/playback/playback.service'
 import { SettingsBase } from '../../../../common/settings/settings.base';
 import { TrackModels } from '../../../../services/track/track-models';
 import { TrackServiceBase } from '../../../../services/track/track.service.base';
+import {ArtistModel} from "../../../../services/artist/artist-model";
 import { DialogServiceBase } from '../../../../services/dialog/dialog.service.base';
 
 @Component({
@@ -52,8 +53,9 @@ export class AlbumBrowserComponent implements OnInit, AfterViewInit, OnChanges,
     public readonly albumOrderKey = albumOrderKey;
 
     public albumOrderEnum: typeof AlbumOrder = AlbumOrder;
-
     public useCompactYearView: boolean = false;
+    public artistBackground: string = '';
+    public showArtistBackground: boolean = false;
 
     public ngOnDestroy(): void {
         this.destroy$.next();
@@ -103,6 +105,22 @@ export class AlbumBrowserComponent implements OnInit, AfterViewInit, OnChanges,
         this.mouseSelectionWatcher.initialize(this.albums, false);
     }
 
+    @Input()
+    public set selectedArtists(selectedArtists: ArtistModel[]) {
+        this.artistBackground = '';
+        if (selectedArtists.length == 1) {
+            const artworkPath: string = selectedArtists[0].artworkPath;
+            if (artworkPath !== Constants.emptyImage) {
+                this.artistBackground = artworkPath.replace(/\\/g, '/');
+            }
+        }
+    }
+
+    @Input()
+    public set showArtistBackgroundImage(showArtistBackground: boolean) {
+        this.showArtistBackground = this.settings.showArtistImages && showArtistBackground;
+    }
+
     public get isSortedByYear(): boolean {
         return this.selectedAlbumOrder === AlbumOrder.byYearAscending || this.selectedAlbumOrder === AlbumOrder.byYearDescending;
     }
@@ -227,9 +245,9 @@ export class AlbumBrowserComponent implements OnInit, AfterViewInit, OnChanges,
             return;
         }
 
-        const albumKeys = this.albums.map(album => album.albumKey);
+        const albumKeys = this.albums.map((album) => album.albumKey);
         const tracks: TrackModels = this.trackService.getTracksForAlbums(albumKeys);
-        
+
         this.playbackService.forceShuffled();
         await this.playbackService.enqueueAndPlayTracksAsync(tracks.tracks);
     }

src/app/ui/components/collection/collection-artists/collection-artists.component.html

@@ -12,6 +12,8 @@
             ><app-album-browser
                 class="p-3 fill"
                 [albums]="this.albums | albumsFilter: this.searchService.delayedSearchText"
+                [showArtistBackgroundImage]="true"
+                [selectedArtists]="this.selectedArtists"
                 [(albumsPersister)]="this.albumsPersister"
             ></app-album-browser
         ></as-split-area>

src/app/ui/components/collection/collection-artists/collection-artists.component.scss

@@ -0,0 +1,3 @@
+as-split-area {
+    position: relative;
+}

src/app/ui/components/collection/collection-artists/collection-artists.component.spec.ts

@@ -991,5 +991,49 @@ describe('CollectionArtistsComponent', () => {
             expect(component.tracks.tracks[0]).toEqual(track1);
             expect(component.tracks.tracks[1]).toEqual(track2);
         });
+
+        it('should keep the selected artists if the selected artists have changed', async () => {
+            // Arrange
+            const artist1: ArtistModel = createArtistModel('artist1');
+            const artist2: ArtistModel = createArtistModel('artist2');
+            artistServiceMock.setup((x) => x.getArtists(ArtistType.allArtists)).returns(() => [artist1, artist2]);
+            artistsPersisterMock.setup((x) => x.getSelectedArtistType()).returns(() => ArtistType.allArtists);
+
+            const component: CollectionArtistsComponent = createComponent();
+            await component.ngOnInit();
+            expect(component.selectedArtists.length).toEqual(0);
+
+            // Act
+            selectedArtistsChangedMock.next([artist1.name, artist2.name]);
+
+            // Assert
+            expect(component.selectedArtists.length).toEqual(2);
+            expect(component.selectedArtists[0]).toEqual(artist1);
+            expect(component.selectedArtists[1]).toEqual(artist2);
+        });
+    });
+
+    describe('ngOnDestroy', () => {
+        it('should reset the selected artists', async () => {
+            // Arrange
+            const artist1: ArtistModel = createArtistModel('artist1');
+            const artist2: ArtistModel = createArtistModel('artist2');
+            artistServiceMock.setup((x) => x.getArtists(ArtistType.allArtists)).returns(() => [artist1, artist2]);
+            artistsPersisterMock.setup((x) => x.getSelectedArtistType()).returns(() => ArtistType.allArtists);
+            artistsPersisterMock.setup((x) => x.getSelectedArtists([artist1, artist2])).returns(() => [artist1, artist2]);
+
+            const component: CollectionArtistsComponent = createComponent();
+            await component.ngOnInit();
+
+            expect(component.selectedArtists.length).toEqual(2);
+            expect(component.selectedArtists[0]).toEqual(artist1);
+            expect(component.selectedArtists[1]).toEqual(artist2);
+
+            // Act
+            component.ngOnDestroy();
+
+            // Assert
+            expect(component.selectedArtists.length).toEqual(0);
+        });
     });
 });

src/app/ui/components/collection/collection-artists/collection-artists.component.ts

@@ -56,10 +56,12 @@ export class CollectionArtistsComponent implements OnInit, OnDestroy {
     public artists: ArtistModel[] = [];
     public albums: AlbumModel[] = [];
     public tracks: TrackModels = new TrackModels();
+    public selectedArtists: ArtistModel[] = [];
 
     public get selectedAlbumOrder(): AlbumOrder {
         return this._selectedAlbumOrder;
     }
+
     public set selectedAlbumOrder(v: AlbumOrder) {
         this._selectedAlbumOrder = v;
         this.albumsPersister.setSelectedAlbumOrder(v);
@@ -78,6 +80,7 @@ export class CollectionArtistsComponent implements OnInit, OnDestroy {
                 const artists: ArtistModel[] = this.getArtistsByDisplayNames(displayNames);
                 this.getAlbumsForArtists(artists);
                 this.getTracksForArtists(artists);
+                this.selectedArtists = artists;
             }),
         );
 
@@ -136,6 +139,7 @@ export class CollectionArtistsComponent implements OnInit, OnDestroy {
         this.artists = [];
         this.albums = [];
         this.tracks = new TrackModels();
+        this.selectedArtists = [];
     }
 
     private getArtists(): void {
@@ -146,6 +150,7 @@ export class CollectionArtistsComponent implements OnInit, OnDestroy {
     private getAlbums(): void {
         const selectedArtists: ArtistModel[] = this.artistsPersister.getSelectedArtists(this.artists);
         this.getAlbumsForArtists(selectedArtists);
+        this.selectedArtists = selectedArtists;
     }
 
     private getTracks(): void {