Let page background shine through spotlight tiles

By giving spotlight tiles a transparent background in certain layouts.

src/tile/SpotlightTile.tsx

@@ -65,6 +65,7 @@ interface SpotlightItemBaseProps {
   displayName: string;
   mxcAvatarUrl: string | undefined;
   showNameTags: boolean;
+  bgStyle: "solid" | "transparent";
   focusable: boolean;
   "aria-hidden"?: boolean;
 }
@@ -243,6 +244,7 @@ interface SpotlightItemProps {
   targetHeight: number;
   showNameTags: boolean;
   showRingingStatus: boolean;
+  bgStyle: "solid" | "transparent";
   focusable: boolean;
   intersectionObserver$: Observable<IntersectionObserver>;
   /**
@@ -259,6 +261,7 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
   targetHeight,
   showNameTags,
   showRingingStatus,
+  bgStyle,
   focusable,
   intersectionObserver$,
   snap,
@@ -295,6 +298,7 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
     displayName,
     mxcAvatarUrl,
     showNameTags,
+    bgStyle,
     focusable,
     "aria-hidden": ariaHidden,
   };
@@ -412,6 +416,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 media = useBehavior(vm.media$);
   const [visibleId, setVisibleId] = useState<string | undefined>(media[0]?.id);
   const latestMedia = useLatest(media);
@@ -516,6 +521,7 @@ export const SpotlightTile: FC<Props> = ({
             targetHeight={targetHeight}
             showRingingStatus={showRingingStatus}
             showNameTags={showNameTags}
+            bgStyle={bgStyle}
             focusable={focusable}
             intersectionObserver$={intersectionObserver$}
             // This is how we get the container to scroll to the right media