Merge remote-tracking branch 'origin/livekit' into dbkr/openid

src/room/InCallView.tsx

@@ -16,6 +16,8 @@ limitations under the License.
 
 import { ResizeObserver } from "@juggle/resize-observer";
 import {
+  RoomAudioRenderer,
+  RoomContext,
   useLocalParticipant,
   useParticipants,
   useTracks,
@@ -80,6 +82,8 @@ import { VideoTile } from "../video-grid/VideoTile";
 import { UserChoices, useLiveKit } from "../livekit/useLiveKit";
 import { useMediaDevices } from "../livekit/useMediaDevices";
 import { SFUConfig } from "../livekit/openIDSFU";
+import { useFullscreen } from "./useFullscreen";
+import { useLayoutStates } from "../video-grid/Layout";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -95,7 +99,13 @@ export interface ActiveCallProps extends Omit<InCallViewProps, "livekitRoom"> {
 export function ActiveCall(props: ActiveCallProps) {
   const livekitRoom = useLiveKit(props.userChoices, props.sfuConfig);
 
-  return livekitRoom && <InCallView {...props} livekitRoom={livekitRoom} />;
+  return (
+    livekitRoom && (
+      <RoomContext.Provider value={livekitRoom}>
+        <InCallView {...props} livekitRoom={livekitRoom} />
+      </RoomContext.Provider>
+    )
+  );
 }
 
 export interface InCallViewProps {
@@ -167,9 +177,6 @@ export function InCallView({
   const toggleCamera = useCallback(async () => {
     await localParticipant.setCameraEnabled(!isCameraEnabled);
   }, [localParticipant, isCameraEnabled]);
-  const toggleScreensharing = useCallback(async () => {
-    await localParticipant.setScreenShareEnabled(!isScreenShareEnabled);
-  }, [localParticipant, isScreenShareEnabled]);
 
   const joinRule = useJoinRule(groupCall.room);
 
@@ -222,15 +229,19 @@ export function InCallView({
   const noControls = reducedControls && bounds.height <= 400;
 
   const items = useParticipantTiles(livekitRoom, participants);
+  const { fullscreenItem, toggleFullscreen, exitFullscreen } =
+    useFullscreen(items);
 
-  // The maximised participant is the focused (active) participant, given the
+  // 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(
     () =>
-      noControls
-        ? items.find((item) => item.focused) ?? items.at(0) ?? null
-        : null,
-    [noControls, items]
+      fullscreenItem ??
+      (noControls
+        ? items.find((item) => item.isSpeaker) ?? items.at(0) ?? null
+        : null),
+    [fullscreenItem, noControls, items]
   );
 
   const Grid =
@@ -238,6 +249,10 @@ export function InCallView({
 
   const prefersReducedMotion = usePrefersReducedMotion();
 
+  // This state is lifted out of NewVideoGrid so that layout states can be
+  // restored after a layout switch or upon exiting fullscreen
+  const layoutStates = useLayoutStates();
+
   const renderContent = (): JSX.Element => {
     if (items.length === 0) {
       return (
@@ -249,6 +264,9 @@ export function InCallView({
     if (maximisedParticipant) {
       return (
         <VideoTile
+          maximised={true}
+          fullscreen={maximisedParticipant === fullscreenItem}
+          onToggleFullscreen={toggleFullscreen}
           targetHeight={bounds.height}
           targetWidth={bounds.width}
           key={maximisedParticipant.id}
@@ -264,9 +282,13 @@ export function InCallView({
         items={items}
         layout={layout}
         disableAnimations={prefersReducedMotion || isSafari}
+        layoutStates={layoutStates}
       >
         {(props) => (
           <VideoTile
+            maximised={false}
+            fullscreen={false}
+            onToggleFullscreen={toggleFullscreen}
             showSpeakingIndicator={items.length > 2}
             showConnectionStats={showConnectionStats}
             {...props}
@@ -316,6 +338,11 @@ export function InCallView({
     [styles.maximised]: undefined,
   });
 
+  const toggleScreensharing = useCallback(async () => {
+    exitFullscreen();
+    await localParticipant.setScreenShareEnabled(!isScreenShareEnabled);
+  }, [localParticipant, isScreenShareEnabled, exitFullscreen]);
+
   let footer: JSX.Element | null;
 
   if (noControls) {
@@ -349,9 +376,7 @@ export function InCallView({
           />
         );
       }
-      if (!maximisedParticipant) {
-        buttons.push(<SettingsButton key="4" onPress={openSettings} />);
-      }
+      buttons.push(<SettingsButton key="4" onPress={openSettings} />);
     }
 
     buttons.push(
@@ -362,7 +387,7 @@ export function InCallView({
 
   return (
     <div className={containerClasses} ref={containerRef}>
-      {!hideHeader && (
+      {!hideHeader && maximisedParticipant === null && (
         <Header>
           <LeftNav>
             <RoomHeaderInfo
@@ -383,6 +408,7 @@ export function InCallView({
         </Header>
       )}
       <div className={styles.controlsOverlay}>
+        <RoomAudioRenderer />
         {renderContent()}
         {footer}
       </div>
@@ -464,6 +490,7 @@ function useParticipantTiles(
           local: sfuParticipant.isLocal,
           largeBaseSize: false,
           data: {
+            id,
             member,
             sfuParticipant,
             content: TileContent.UserMedia,
@@ -473,14 +500,16 @@ function useParticipantTiles(
         // If there is a screen sharing enabled for this participant, create a tile for it as well.
         let screenShareTile: TileDescriptor<ItemData> | undefined;
         if (sfuParticipant.isScreenShareEnabled) {
+          const screenShareId = `${id}:screen-share`;
           screenShareTile = {
             ...userMediaTile,
-            id: `${id}:screen-share`,
+            id: screenShareId,
             focused: true,
             largeBaseSize: true,
             placeNear: id,
             data: {
               ...userMediaTile.data,
+              id: screenShareId,
               content: TileContent.ScreenShare,
             },
           };