From 9e367db32413840a4a6bd936021e5eedef6b70e4 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Wed, 14 Sep 2022 19:05:05 -0400
Subject: [PATCH 1/3] Maximise the active speaker when the window is small

---
 src/room/InCallView.module.css        | 14 +++--
 src/room/InCallView.tsx               | 78 +++++++++++++++++----------
 src/video-grid/VideoGrid.stories.tsx  |  1 +
 src/video-grid/VideoTile.module.css   |  2 +-
 src/video-grid/VideoTile.tsx          | 33 ++++++------
 src/video-grid/VideoTileContainer.tsx | 10 ++--
 6 files changed, 86 insertions(+), 52 deletions(-)

diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index f8783bf..8c37d46 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -43,7 +43,7 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 64px;
+  height: calc(50px + 2 * 8px);
 }
 
 .footer > * {
@@ -54,7 +54,7 @@ limitations under the License.
   margin-right: 0px;
 }
 
-.footerFullscreen {
+.maximised .footer {
   position: absolute;
   width: 100%;
   bottom: 0;
@@ -67,8 +67,14 @@ limitations under the License.
   transform: translate(-50%, -50%);
 }
 
-@media (min-width: 800px) {
+@media (min-height: 300px) {
   .footer {
-    height: 118px;
+    height: calc(50px + 2 * 24px);
+  }
+}
+
+@media (min-width: 800px) {
+  .footer {
+    height: calc(50px + 2 * 32px);
   }
 }
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 647136e..2460825 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -16,6 +16,8 @@ limitations under the License.
 
 import React, { useEffect, useCallback, useMemo, useRef } from "react";
 import { usePreventScroll } from "@react-aria/overlays";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
@@ -111,9 +113,20 @@ export function InCallView({
   hideHeader,
 }: Props) {
   usePreventScroll();
-  const elementRef = useRef<HTMLDivElement>();
+  const containerRef1 = useRef<HTMLDivElement | null>(null);
+  const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
+  // Merge the refs so they can attach to the same element
+  const containerRef = useCallback(
+    (el: HTMLDivElement) => {
+      containerRef1.current = el;
+      containerRef2(el);
+    },
+    [containerRef1, containerRef2]
+  );
+
   const { layout, setLayout } = useVideoGridLayout(screenshareFeeds.length > 0);
-  const { toggleFullscreen, fullscreenParticipant } = useFullscreen(elementRef);
+  const { toggleFullscreen, fullscreenParticipant } =
+    useFullscreen(containerRef1);
 
   const [spatialAudio] = useSpatialAudio();
 
@@ -170,9 +183,7 @@ export function InCallView({
         id: callFeed.stream.id,
         callFeed,
         focused:
-          screenshareFeeds.length === 0 && layout === "spotlight"
-            ? callFeed.userId === activeSpeaker
-            : false,
+          screenshareFeeds.length === 0 && callFeed.userId === activeSpeaker,
         isLocal: callFeed.isLocal(),
         presenter: false,
       });
@@ -197,7 +208,20 @@ export function InCallView({
     }
 
     return participants;
-  }, [userMediaFeeds, activeSpeaker, screenshareFeeds, layout]);
+  }, [userMediaFeeds, activeSpeaker, screenshareFeeds]);
+
+  // The maximised participant: either the participant that the user has
+  // manually put in fullscreen, or the focused (active) participant if the
+  // window is too small to show everyone
+  const maximisedParticipant = useMemo(
+    () =>
+      fullscreenParticipant ?? bounds.height <= 500
+        ? items.find((item) => item.focused) ??
+          items.find((item) => item.callFeed) ??
+          null
+        : null,
+    [fullscreenParticipant, bounds, items]
+  );
 
   const renderAvatar = useCallback(
     (roomMember: RoomMember, width: number, height: number) => {
@@ -217,7 +241,7 @@ export function InCallView({
     []
   );
 
-  const renderContent = useCallback((): JSX.Element => {
+  const renderContent = (): JSX.Element => {
     if (items.length === 0) {
       return (
         <div className={styles.centerMessage}>
@@ -225,16 +249,19 @@ export function InCallView({
         </div>
       );
     }
-    if (fullscreenParticipant) {
+    if (maximisedParticipant) {
       return (
         <VideoTileContainer
-          key={fullscreenParticipant.id}
-          item={fullscreenParticipant}
+          height={bounds.height}
+          width={bounds.width}
+          key={maximisedParticipant.id}
+          item={maximisedParticipant}
           getAvatar={renderAvatar}
           audioContext={audioContext}
           audioDestination={audioDestination}
           disableSpeakingIndicator={true}
-          isFullscreen={!!fullscreenParticipant}
+          maximised={Boolean(maximisedParticipant)}
+          fullscreen={maximisedParticipant === fullscreenParticipant}
           onFullscreen={toggleFullscreen}
         />
       );
@@ -250,43 +277,36 @@ export function InCallView({
             audioContext={audioContext}
             audioDestination={audioDestination}
             disableSpeakingIndicator={items.length < 3}
-            isFullscreen={!!fullscreenParticipant}
+            maximised={false}
+            fullscreen={false}
             onFullscreen={toggleFullscreen}
             {...rest}
           />
         )}
       </VideoGrid>
     );
-  }, [
-    fullscreenParticipant,
-    items,
-    audioContext,
-    audioDestination,
-    layout,
-    renderAvatar,
-    toggleFullscreen,
-  ]);
+  };
 
   const {
     modalState: rageshakeRequestModalState,
     modalProps: rageshakeRequestModalProps,
   } = useRageshakeRequestModal(groupCall.room.roomId);
 
-  const footerClassNames = classNames(styles.footer, {
-    [styles.footerFullscreen]: fullscreenParticipant,
+  const containerClasses = classNames(styles.inRoom, {
+    [styles.maximised]: maximisedParticipant,
   });
 
   return (
-    <div className={styles.inRoom} ref={elementRef}>
+    <div className={containerClasses} ref={containerRef}>
       <audio ref={audioRef} />
-      {(!spatialAudio || fullscreenParticipant) && (
+      {(!spatialAudio || maximisedParticipant) && (
         <AudioContainer
           items={items}
           audioContext={audioContext}
           audioDestination={audioDestination}
         />
       )}
-      {!hideHeader && !fullscreenParticipant && (
+      {!hideHeader && !maximisedParticipant && (
         <Header>
           <LeftNav>
             <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
@@ -302,16 +322,16 @@ export function InCallView({
         </Header>
       )}
       {renderContent()}
-      <div className={footerClassNames}>
+      <div className={styles.footer}>
         <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
         <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
-        {canScreenshare && !isSafari && !fullscreenParticipant && (
+        {canScreenshare && !isSafari && !maximisedParticipant && (
           <ScreenshareButton
             enabled={isScreensharing}
             onPress={toggleScreensharing}
           />
         )}
-        {!fullscreenParticipant && (
+        {!maximisedParticipant && (
           <OverflowMenu
             inCall
             roomIdOrAlias={roomIdOrAlias}
diff --git a/src/video-grid/VideoGrid.stories.tsx b/src/video-grid/VideoGrid.stories.tsx
index 916ba68..215db00 100644
--- a/src/video-grid/VideoGrid.stories.tsx
+++ b/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}
             />
           )}
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 4a594bd..8998f06 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/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;
 }
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index b75713a..c7d0ed3 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/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>
     );
diff --git a/src/video-grid/VideoTileContainer.tsx b/src/video-grid/VideoTileContainer.tsx
index 9d64cf6..76673a4 100644
--- a/src/video-grid/VideoTileContainer.tsx
+++ b/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}
       />

From 4a08ae75b38ce1c62e8d7ce528b7013d7c9d2933 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Fri, 16 Sep 2022 10:21:41 -0400
Subject: [PATCH 2/3] Make the maximised prop of VideoTile optional

---
 src/video-grid/VideoGrid.stories.tsx | 1 -
 src/video-grid/VideoTile.tsx         | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/video-grid/VideoGrid.stories.tsx b/src/video-grid/VideoGrid.stories.tsx
index 215db00..916ba68 100644
--- a/src/video-grid/VideoGrid.stories.tsx
+++ b/src/video-grid/VideoGrid.stories.tsx
@@ -77,7 +77,6 @@ export const ParticipantsTest = () => {
               key={item.id}
               name={`User ${item.id}`}
               disableSpeakingIndicator={items.length < 3}
-              maximised={false}
               {...rest}
             />
           )}
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index c7d0ed3..44980b7 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -33,7 +33,7 @@ interface Props {
   mediaRef?: React.RefObject<MediaElement>;
   onOptionsPress?: () => void;
   localVolume?: number;
-  maximised: boolean;
+  maximised?: boolean;
   fullscreen?: boolean;
   onFullscreen?: () => void;
   className?: string;

From 89fa9dfd6465925689796c3a3a22b7437ae4a5e7 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Fri, 16 Sep 2022 10:23:23 -0400
Subject: [PATCH 3/3] Only maximise a participant when the window is narrow,
 too

---
 src/room/InCallView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 2460825..cc40c1b 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -215,7 +215,7 @@ export function InCallView({
   // window is too small to show everyone
   const maximisedParticipant = useMemo(
     () =>
-      fullscreenParticipant ?? bounds.height <= 500
+      fullscreenParticipant ?? (bounds.height <= 500 && bounds.width <= 500)
         ? items.find((item) => item.focused) ??
           items.find((item) => item.callFeed) ??
           null