Implement new Pip Layout (with control buttons)

src/button/Button.tsx

@@ -23,6 +23,7 @@ import styles from "./Button.module.css";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
   muted: boolean;
+  size: "sm" | "lg";
 }
 
 export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
@@ -47,6 +48,7 @@ export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
 
 interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
   muted: boolean;
+  size: "sm" | "lg";
 }
 
 export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
@@ -71,6 +73,7 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
 
 interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
+  size: "sm" | "lg";
 }
 
 export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
@@ -94,7 +97,11 @@ export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
   );
 };
 
-export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
+interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> {
+  size: "sm" | "lg";
+}
+
+export const EndCallButton: FC<EndCallButtonProps> = ({
   className,
   ...props
 }) => {

src/room/InCallView.module.css

@@ -108,22 +108,9 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-@media (max-width: 370px) {
+@media (max-height: 800px) {
-  .shareScreen {
+  .footer {
-    display: none;
+    padding-block: var(--cpd-space-8x);
-  }
-
-  @media (max-height: 400px) {
-    .footer {
-      display: none;
-    }
-  }
-}
-
-@media (max-width: 320px) {
-  .invite,
-  .raiseHand {
-    display: none;
   }
 }
 
@@ -133,9 +120,27 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-@media (max-height: 800px) {
+@media (max-width: 370px) {
-  .footer {
+  .shareScreen {
-    padding-block: var(--cpd-space-8x);
+    display: none;
+  }
+
+  /* PIP custom css */
+  @media (max-height: 400px) {
+    .shareScreen {
+      display: flex;
+    }
+    .footer {
+      padding-block-start: var(--cpd-space-3x);
+      padding-block-end: var(--cpd-space-2x);
+    }
+  }
+}
+
+@media (max-width: 320px) {
+  .invite,
+  .raiseHand {
+    display: none;
   }
 }
 

src/room/InCallView.tsx

@@ -640,8 +640,10 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const buttons: JSX.Element[] = [];
 
+  const buttonSize = layout.type === "pip" ? "sm" : "lg";
   buttons.push(
     <MicButton
+      size={buttonSize}
       key="audio"
       muted={!audioEnabled}
       onClick={toggleAudio ?? undefined}
@@ -649,6 +651,7 @@ export const InCallView: FC<InCallViewProps> = ({
       data-testid="incall_mute"
     />,
     <VideoButton
+      size={buttonSize}
       key="video"
       muted={!videoEnabled}
       onClick={toggleVideo ?? undefined}
@@ -659,6 +662,7 @@ export const InCallView: FC<InCallViewProps> = ({
   if (vm.toggleScreenSharing !== null) {
     buttons.push(
       <ShareScreenButton
+        size={buttonSize}
         key="share_screen"
         className={styles.shareScreen}
         enabled={sharingScreen}
@@ -670,6 +674,7 @@ export const InCallView: FC<InCallViewProps> = ({
   if (supportsReactions) {
     buttons.push(
       <ReactionToggleButton
+        size={buttonSize}
         vm={vm}
         key="raise_hand"
         className={styles.raiseHand}
@@ -678,10 +683,17 @@ export const InCallView: FC<InCallViewProps> = ({
     );
   }
   if (layout.type !== "pip")
-    buttons.push(<SettingsButton key="settings" onClick={openSettings} />);
+    buttons.push(
+      <SettingsButton
+        size={buttonSize}
+        key="settings"
+        onClick={openSettings}
+      />,
+    );
 
   buttons.push(
     <EndCallButton
+      size={buttonSize}
       key="end_call"
       onClick={function (): void {
         vm.hangup();

src/state/CallViewModel/CallViewModel.ts

@@ -1271,7 +1271,7 @@ export function createCallViewModel$(
       switchMap((mode) => {
         switch (mode) {
           case "pip":
-            return of(false);
+            return of(true);
           case "normal":
           case "narrow":
             return of(true);

src/state/PipLayout.ts

@@ -16,7 +16,8 @@ export function pipLayout(
   prevTiles: TileStore,
 ): [PipLayout, TileStore] {
   const update = prevTiles.from(0);
-  update.registerSpotlight(media.spotlight, true);
+  // Dont maximise in pip since we want the rounded corners and the footer
+  update.registerSpotlight(media.spotlight, false);
   const tiles = update.build();
   return [
     {