Let page background shine through spotlight tiles

By giving spotlight tiles a transparent background in certain layouts.

src/state/OneOnOnePortraitLayout.ts

@@ -26,7 +26,7 @@ export function oneOnOnePortraitLayout(
   prevTiles: TileStore,
 ): [OneOnOnePortraitLayout, TileStore] {
   const update = prevTiles.from(media.pip === undefined ? 0 : 1);
-  update.registerSpotlight([media.spotlight], true);
+  update.registerSpotlight([media.spotlight], true, "transparent");
   if (media.pip !== undefined) update.registerGridTile(media.pip);
   const tiles = update.build();
 

src/state/PipLayout.ts

@@ -21,6 +21,7 @@ export function pipLayout(
   update.registerSpotlight(
     media.spotlight,
     platform === "desktop" ? false : true,
+    "transparent",
   );
   const tiles = update.build();
   return [

src/state/SpotlightExpandedLayout.ts

@@ -23,7 +23,7 @@ export function spotlightExpandedLayout(
   prevTiles: TileStore,
 ): [SpotlightExpandedLayout, TileStore] {
   const update = prevTiles.from(1);
-  update.registerSpotlight(media.spotlight, true);
+  update.registerSpotlight(media.spotlight, true, "transparent");
   if (media.pip !== undefined) update.registerPipTile(media.pip);
   const tiles = update.build();
 

src/state/TileStore.ts

@@ -39,12 +39,29 @@ class SpotlightTileData {
     this.maximised$.next(value);
   }
 
+  private readonly bgStyle$: BehaviorSubject<"solid" | "transparent">;
+  public get bgStyle(): "solid" | "transparent" {
+    return this.bgStyle$.value;
+  }
+  public set bgStyle(value: "solid" | "transparent") {
+    this.bgStyle$.next(value);
+  }
+
   public readonly vm: SpotlightTileViewModel;
 
-  public constructor(media: MediaViewModel[], maximised: boolean) {
+  public constructor(
+    media: MediaViewModel[],
+    maximised: boolean,
+    bgStyle: "solid" | "transparent",
+  ) {
     this.media$ = new BehaviorSubject(media);
     this.maximised$ = new BehaviorSubject(maximised);
-    this.vm = new SpotlightTileViewModel(this.media$, this.maximised$);
+    this.bgStyle$ = new BehaviorSubject(bgStyle);
+    this.vm = new SpotlightTileViewModel(
+      this.media$,
+      this.maximised$,
+      this.bgStyle$,
+    );
   }
 }
 
@@ -157,7 +174,11 @@ export class TileStoreBuilder {
    * Sets the contents of the spotlight tile. If this is never called, there
    * will be no spotlight tile.
    */
-  public registerSpotlight(media: MediaViewModel[], maximised: boolean): void {
+  public registerSpotlight(
+    media: MediaViewModel[],
+    maximised: boolean,
+    bgStyle: "solid" | "transparent" = "solid",
+  ): void {
     if (DEBUG_ENABLED)
       logger.debug(
         `[TileStore, ${this.generation}] register spotlight: ${media.map((m) => m.displayName$.value)}`,
@@ -169,11 +190,12 @@ export class TileStoreBuilder {
 
     // Reuse the previous spotlight tile if it exists
     if (this.prevSpotlight === null) {
-      this.spotlight = new SpotlightTileData(media, maximised);
+      this.spotlight = new SpotlightTileData(media, maximised, bgStyle);
     } else {
       this.spotlight = this.prevSpotlight;
       this.spotlight.media = media;
       this.spotlight.maximised = maximised;
+      this.spotlight.bgStyle = bgStyle;
     }
   }
 

src/state/TileViewModel.ts

@@ -37,6 +37,7 @@ export class SpotlightTileViewModel {
   public constructor(
     public readonly media$: Behavior<MediaViewModel[]>,
     public readonly maximised$: Behavior<boolean>,
+    public readonly bgStyle$: Behavior<"solid" | "transparent">,
   ) {}
 }