Maximise the active speaker when the window is small

src/video-grid/VideoGrid.stories.tsx

@@ -77,6 +77,7 @@ export const ParticipantsTest = () => {
               key={item.id}
               name={`User ${item.id}`}
               disableSpeakingIndicator={items.length < 3}
+              maximised={false}
               {...rest}
             />
           )}

src/video-grid/VideoTile.module.css

@@ -40,7 +40,7 @@
   box-shadow: inset 0 0 0 4px var(--accent) !important;
 }
 
-.videoTile.fullscreen {
+.videoTile.maximised {
   position: relative;
   border-radius: 0;
 }

src/video-grid/VideoTile.tsx

@@ -33,7 +33,8 @@ interface Props {
   mediaRef?: React.RefObject<MediaElement>;
   onOptionsPress?: () => void;
   localVolume?: number;
-  isFullscreen?: boolean;
+  maximised: boolean;
+  fullscreen?: boolean;
   onFullscreen?: () => void;
   className?: string;
   showOptions?: boolean;
@@ -53,7 +54,8 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
       mediaRef,
       onOptionsPress,
       localVolume,
-      isFullscreen,
+      maximised,
+      fullscreen,
       onFullscreen,
       className,
       showOptions,
@@ -71,7 +73,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
           [styles.speaking]: speaking,
           [styles.muted]: audioMuted,
           [styles.screenshare]: screenshare,
-          [styles.fullscreen]: isFullscreen,
+          [styles.maximised]: maximised,
         })}
         ref={ref}
         {...rest}
@@ -88,7 +90,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
             {screenshare && (
               <FullscreenButton
                 className={styles.button}
-                fullscreen={isFullscreen}
+                fullscreen={fullscreen}
                 onPress={onFullscreen}
               />
             )}
@@ -100,17 +102,18 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
             {avatar}
           </>
         )}
-        {screenshare ? (
-          <div className={styles.presenterLabel}>
-            <span>{`${name} is presenting`}</span>
-          </div>
-        ) : (
-          <div className={classNames(styles.infoBubble, styles.memberName)}>
-            {audioMuted && !videoMuted && <MicMutedIcon />}
-            {videoMuted && <VideoMutedIcon />}
-            <span title={name}>{name}</span>
-          </div>
-        )}
+        {!maximised &&
+          (screenshare ? (
+            <div className={styles.presenterLabel}>
+              <span>{`${name} is presenting`}</span>
+            </div>
+          ) : (
+            <div className={classNames(styles.infoBubble, styles.memberName)}>
+              {audioMuted && !videoMuted && <MicMutedIcon />}
+              {videoMuted && <VideoMutedIcon />}
+              <span title={name}>{name}</span>
+            </div>
+          ))}
         <video ref={mediaRef} playsInline disablePictureInPicture />
       </animated.div>
     );

src/video-grid/VideoTileContainer.tsx

@@ -39,9 +39,11 @@ interface Props {
   audioContext: AudioContext;
   audioDestination: AudioNode;
   disableSpeakingIndicator: boolean;
-  isFullscreen: boolean;
+  maximised: boolean;
+  fullscreen: boolean;
   onFullscreen: (item: Participant) => void;
 }
+
 export function VideoTileContainer({
   item,
   width,
@@ -50,7 +52,8 @@ export function VideoTileContainer({
   audioContext,
   audioDestination,
   disableSpeakingIndicator,
-  isFullscreen,
+  maximised,
+  fullscreen,
   onFullscreen,
   ...rest
 }: Props) {
@@ -101,7 +104,8 @@ export function VideoTileContainer({
         avatar={getAvatar && getAvatar(member, width, height)}
         onOptionsPress={onOptionsPress}
         localVolume={localVolume}
-        isFullscreen={isFullscreen}
+        maximised={maximised}
+        fullscreen={fullscreen}
         onFullscreen={onFullscreenCallback}
         {...rest}
       />