Use a more noticeable shadow when displaying one tile on top another

So that the local tile in 1:1 calls is more discernable against the background, especially when both participants have their video off

src/video-grid/NewVideoGrid.tsx

@@ -245,6 +245,7 @@ export const NewVideoGrid: FC<Props> = ({
         opacity: 0,
         scale: 0,
         shadow: 1,
+        shadowSpread: 0,
         zIndex: 1,
         x,
         y,

src/video-grid/VideoGrid.tsx

@@ -51,6 +51,7 @@ export interface TileSpring {
   opacity: number;
   scale: number;
   shadow: number;
+  shadowSpread: number;
   zIndex: number;
   x: number;
   y: number;
@@ -892,6 +893,8 @@ export function VideoGrid({
       // Whether the tile positions were valid at the time of the previous
       // animation
       const tilePositionsWereValid = tilePositionsValid.current;
+      const oneOnOneLayout =
+        tiles.length === 2 && !tiles.some((t) => t.presenter || t.focused);
 
       return (tileIndex: number) => {
         const tile = tiles[tileIndex];
@@ -911,12 +914,14 @@ export function VideoGrid({
             opacity: 1,
             zIndex: 2,
             shadow: 15,
+            shadowSpread: 0,
             immediate: (key: string) =>
               disableAnimations ||
               key === "zIndex" ||
               key === "x" ||
               key === "y" ||
-              key === "shadow",
+              key === "shadow" ||
+              key === "shadowSpread",
             from: {
               shadow: 0,
               scale: 0,
@@ -974,10 +979,14 @@ export function VideoGrid({
             opacity: remove ? 0 : 1,
             zIndex: tilePosition.zIndex,
             shadow: 1,
+            shadowSpread: oneOnOneLayout && tile.item.isLocal ? 1 : 0,
             from,
             reset,
             immediate: (key: string) =>
-              disableAnimations || key === "zIndex" || key === "shadow",
+              disableAnimations ||
+              key === "zIndex" ||
+              key === "shadow" ||
+              key === "shadowSpread",
             // If we just stopped dragging a tile, give it time for the
             // animation to settle before pushing its z-index back down
             delay: (key: string) => (key === "zIndex" ? 500 : 0),

src/video-grid/VideoTile.module.css

@@ -22,6 +22,8 @@ limitations under the License.
   height: var(--tileHeight);
   --tileRadius: 8px;
   border-radius: var(--tileRadius);
+  box-shadow: rgba(0, 0, 0, 0.5) 0px var(--tileShadow)
+    calc(2 * var(--tileShadow)) var(--tileShadowSpread);
   overflow: hidden;
   cursor: pointer;
 

src/video-grid/VideoTile.tsx

@@ -47,6 +47,7 @@ interface Props {
   opacity?: SpringValue<number>;
   scale?: SpringValue<number>;
   shadow?: SpringValue<number>;
+  shadowSpread?: SpringValue<number>;
   zIndex?: SpringValue<number>;
   x?: SpringValue<number>;
   y?: SpringValue<number>;
@@ -79,6 +80,7 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
       opacity,
       scale,
       shadow,
+      shadowSpread,
       zIndex,
       x,
       y,
@@ -141,9 +143,6 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
         style={{
           opacity,
           scale,
-          boxShadow: shadow?.to(
-            (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
-          ),
           zIndex,
           x,
           y,
@@ -152,6 +151,8 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
           // but React's types say no
           "--tileWidth": width?.to((w) => `${w}px`),
           "--tileHeight": height?.to((h) => `${h}px`),
+          "--tileShadow": shadow?.to((s) => `${s}px`),
+          "--tileShadowSpread": shadowSpread?.to((s) => `${s}px`),
         }}
         ref={ref as ForwardedRef<HTMLDivElement>}
         data-testid="videoTile"

src/video-grid/VideoTileContainer.tsx

@@ -47,6 +47,7 @@ interface Props {
   opacity?: SpringValue<number>;
   scale?: SpringValue<number>;
   shadow?: SpringValue<number>;
+  shadowSpread?: SpringValue<number>;
   zIndex?: SpringValue<number>;
   x?: SpringValue<number>;
   y?: SpringValue<number>;