Rename bgStyle to 'background'

src/room/InCallView.module.css

@@ -21,7 +21,7 @@ spotlight tile is maximised and displaying video, apply a gradient background. *
 .overflowing > .footer,
 .fixedGrid:has(
     > .tile[data-maximised="true"]
-      .spotlightItem[data-bg-style="transparent"][data-video-enabled="true"][aria-hidden="false"]
+      .spotlightItem[data-background="transparent"][data-video-enabled="true"][aria-hidden="false"]
   )
   ~ .footer {
   background: linear-gradient(

src/state/TileStore.ts

@@ -15,7 +15,7 @@ import { type MediaViewModel } from "./media/MediaViewModel";
 import { type UserMediaViewModel } from "./media/UserMediaViewModel";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel";
 
-type BackgroundStyle = "solid" | "transparent";
+type SpotlightBackground = "solid" | "transparent";
 
 function debugEntries(entries: GridTileData[]): string[] {
   return entries.map((e) => e.media.displayName$.value);
@@ -41,12 +41,12 @@ class SpotlightTileData {
     this.maximised$.next(value);
   }
 
-  private readonly bgStyle$: BehaviorSubject<BackgroundStyle>;
-  public get bgStyle(): BackgroundStyle {
-    return this.bgStyle$.value;
+  private readonly background$: BehaviorSubject<SpotlightBackground>;
+  public get background(): SpotlightBackground {
+    return this.background$.value;
   }
-  public set bgStyle(value: BackgroundStyle) {
-    this.bgStyle$.next(value);
+  public set background(value: SpotlightBackground) {
+    this.background$.next(value);
   }
 
   public readonly vm: SpotlightTileViewModel;
@@ -54,15 +54,15 @@ class SpotlightTileData {
   public constructor(
     media: MediaViewModel[],
     maximised: boolean,
-    bgStyle: BackgroundStyle,
+    background: SpotlightBackground,
   ) {
     this.media$ = new BehaviorSubject(media);
     this.maximised$ = new BehaviorSubject(maximised);
-    this.bgStyle$ = new BehaviorSubject(bgStyle);
+    this.background$ = new BehaviorSubject(background);
     this.vm = new SpotlightTileViewModel(
       this.media$,
       this.maximised$,
-      this.bgStyle$,
+      this.background$,
     );
   }
 }
@@ -179,7 +179,7 @@ export class TileStoreBuilder {
   public registerSpotlight(
     media: MediaViewModel[],
     maximised: boolean,
-    bgStyle: BackgroundStyle = "solid",
+    background: SpotlightBackground = "solid",
   ): void {
     if (DEBUG_ENABLED)
       logger.debug(
@@ -192,12 +192,12 @@ export class TileStoreBuilder {
 
     // Reuse the previous spotlight tile if it exists
     if (this.prevSpotlight === null) {
-      this.spotlight = new SpotlightTileData(media, maximised, bgStyle);
+      this.spotlight = new SpotlightTileData(media, maximised, background);
     } else {
       this.spotlight = this.prevSpotlight;
       this.spotlight.media = media;
       this.spotlight.maximised = maximised;
-      this.spotlight.bgStyle = bgStyle;
+      this.spotlight.background = background;
     }
   }
 

src/state/TileViewModel.ts

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

src/tile/MediaView.module.css

@@ -51,7 +51,7 @@ Please see LICENSE in the repository root for full details.
   contain: strict;
 }
 
-.media[data-bg-style="solid"] .bg {
+.media[data-background="solid"] .bg {
   background-color: var(--video-tile-background);
 }
 

src/tile/MediaView.tsx

@@ -44,7 +44,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   displayName: string;
   mxcAvatarUrl: string | undefined;
   avatarStyle?: "solid" | "translucent";
-  bgStyle?: "solid" | "transparent";
+  background?: "solid" | "transparent";
   focusable: boolean;
   primaryButton?: ReactNode;
   raisedHandTime?: Date;
@@ -76,7 +76,7 @@ export const MediaView: FC<Props> = ({
   displayName,
   mxcAvatarUrl,
   avatarStyle = "solid",
-  bgStyle = "solid",
+  background = "solid",
   focusable,
   primaryButton,
   status,
@@ -126,7 +126,7 @@ export const MediaView: FC<Props> = ({
       data-testid="videoTile"
       data-video-enabled={video && videoEnabled}
       data-video-fit={videoFit}
-      data-bg-style={bgStyle}
+      data-background={background}
       {...props}
     >
       <div className={styles.bg}>

src/tile/SpotlightTile.tsx

@@ -65,7 +65,7 @@ interface SpotlightItemBaseProps {
   displayName: string;
   mxcAvatarUrl: string | undefined;
   showNameTags: boolean;
-  bgStyle: "solid" | "transparent";
+  background: "solid" | "transparent";
   focusable: boolean;
   "aria-hidden"?: boolean;
 }
@@ -135,7 +135,7 @@ const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
     RefAttributes<HTMLDivElement> = {
     videoFit,
     videoEnabled,
-    soundWaves: props.bgStyle === "transparent" ? speaking : undefined,
+    soundWaves: props.background === "transparent" ? speaking : undefined,
     targetWidth,
     targetHeight,
     ...props,
@@ -247,7 +247,7 @@ interface SpotlightItemProps {
   targetHeight: number;
   showNameTags: boolean;
   showRingingStatus: boolean;
-  bgStyle: "solid" | "transparent";
+  background: "solid" | "transparent";
   focusable: boolean;
   intersectionObserver$: Observable<IntersectionObserver>;
   /**
@@ -265,7 +265,7 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
   targetHeight,
   showNameTags,
   showRingingStatus,
-  bgStyle,
+  background,
   focusable,
   intersectionObserver$,
   snap,
@@ -303,7 +303,7 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
     displayName,
     mxcAvatarUrl,
     showNameTags,
-    bgStyle,
+    background,
     focusable,
     "aria-hidden": ariaHidden,
   };
@@ -426,7 +426,7 @@ export const SpotlightTile: FC<Props> = ({
   const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
   const ref = useMergedRefs(ourRef, theirRef);
   const maximised = useBehavior(vm.maximised$);
-  const bgStyle = useBehavior(vm.bgStyle$);
+  const background = useBehavior(vm.background$);
   const media = useBehavior(vm.media$);
   const [visibleId, setVisibleId] = useState<string | undefined>(media[0]?.id);
   const latestMedia = useLatest(media);
@@ -530,7 +530,7 @@ export const SpotlightTile: FC<Props> = ({
             targetHeight={targetHeight}
             showRingingStatus={showRingingStatus}
             showNameTags={showNameTags}
-            bgStyle={bgStyle}
+            background={background}
             focusable={focusable}
             intersectionObserver$={intersectionObserver$}
             // This is how we get the container to scroll to the right media