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

src/room/GroupCallView.tsx

@@ -58,6 +58,7 @@ interface Props {
   isPasswordlessUser: boolean;
   confineToRoom: boolean;
   preload: boolean;
+  skipLobby: boolean;
   hideHeader: boolean;
   rtcSession: MatrixRTCSession;
 }
@@ -67,6 +68,7 @@ export const GroupCallView: FC<Props> = ({
   isPasswordlessUser,
   confineToRoom,
   preload,
+  skipLobby,
   hideHeader,
   rtcSession,
 }) => {
@@ -125,80 +127,80 @@ export const GroupCallView: FC<Props> = ({
   latestMuteStates.current = muteStates;
 
   useEffect(() => {
+    // this effect is only if we don't want to show the lobby (skipLobby = true)
+    if (!skipLobby) return;
+
+    const defaultDeviceSetup = async (
+      requestedDeviceData: JoinCallData,
+    ): Promise<void> => {
+      // XXX: I think this is broken currently - LiveKit *won't* request
+      // permissions and give you device names unless you specify a kind, but
+      // here we want all kinds of devices. This needs a fix in livekit-client
+      // for the following name-matching logic to do anything useful.
+      const devices = await Room.getLocalDevices(undefined, true);
+      const { audioInput, videoInput } = requestedDeviceData;
+      if (audioInput === null) {
+        latestMuteStates.current!.audio.setEnabled?.(false);
+      } else {
+        const deviceId = await findDeviceByName(
+          audioInput,
+          "audioinput",
+          devices,
+        );
+        if (!deviceId) {
+          logger.warn("Unknown audio input: " + audioInput);
+          latestMuteStates.current!.audio.setEnabled?.(false);
+        } else {
+          logger.debug(
+            `Found audio input ID ${deviceId} for name ${audioInput}`,
+          );
+          latestDevices.current!.audioInput.select(deviceId);
+          latestMuteStates.current!.audio.setEnabled?.(true);
+        }
+      }
+
+      if (videoInput === null) {
+        latestMuteStates.current!.video.setEnabled?.(false);
+      } else {
+        const deviceId = await findDeviceByName(
+          videoInput,
+          "videoinput",
+          devices,
+        );
+        if (!deviceId) {
+          logger.warn("Unknown video input: " + videoInput);
+          latestMuteStates.current!.video.setEnabled?.(false);
+        } else {
+          logger.debug(
+            `Found video input ID ${deviceId} for name ${videoInput}`,
+          );
+          latestDevices.current!.videoInput.select(deviceId);
+          latestMuteStates.current!.video.setEnabled?.(true);
+        }
+      }
+    };
     if (widget && preload) {
       // In preload mode, wait for a join action before entering
       const onJoin = async (
         ev: CustomEvent<IWidgetApiRequest>,
       ): Promise<void> => {
-        // XXX: I think this is broken currently - LiveKit *won't* request
-        // permissions and give you device names unless you specify a kind, but
-        // here we want all kinds of devices. This needs a fix in livekit-client
-        // for the following name-matching logic to do anything useful.
-        const devices = await Room.getLocalDevices(undefined, true);
-
-        const { audioInput, videoInput } = ev.detail
-          .data as unknown as JoinCallData;
-
-        if (audioInput === null) {
-          latestMuteStates.current!.audio.setEnabled?.(false);
-        } else {
-          const deviceId = await findDeviceByName(
-            audioInput,
-            "audioinput",
-            devices,
-          );
-          if (!deviceId) {
-            logger.warn("Unknown audio input: " + audioInput);
-            latestMuteStates.current!.audio.setEnabled?.(false);
-          } else {
-            logger.debug(
-              `Found audio input ID ${deviceId} for name ${audioInput}`,
-            );
-            latestDevices.current!.audioInput.select(deviceId);
-            latestMuteStates.current!.audio.setEnabled?.(true);
-          }
-        }
-
-        if (videoInput === null) {
-          latestMuteStates.current!.video.setEnabled?.(false);
-        } else {
-          const deviceId = await findDeviceByName(
-            videoInput,
-            "videoinput",
-            devices,
-          );
-          if (!deviceId) {
-            logger.warn("Unknown video input: " + videoInput);
-            latestMuteStates.current!.video.setEnabled?.(false);
-          } else {
-            logger.debug(
-              `Found video input ID ${deviceId} for name ${videoInput}`,
-            );
-            latestDevices.current!.videoInput.select(deviceId);
-            latestMuteStates.current!.video.setEnabled?.(true);
-          }
-        }
-
+        defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
         enterRTCSession(rtcSession, perParticipantE2EE);
-
-        PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
-        // we only have room sessions right now, so call ID is the emprty string - we use the room ID
-        PosthogAnalytics.instance.eventCallStarted.track(
-          rtcSession.room.roomId,
-        );
-
         await Promise.all([
           widget!.api.setAlwaysOnScreen(true),
           widget!.api.transport.reply(ev.detail, {}),
         ]);
       };
-
       widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
       return () => {
         widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
       };
+    } else {
+      // if we don't use preload and only skipLobby we enter the rtc session right away
+      defaultDeviceSetup({ audioInput: null, videoInput: null });
+      enterRTCSession(rtcSession, perParticipantE2EE);
     }
-  }, [rtcSession, preload, perParticipantE2EE]);
+  }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
 
   const [left, setLeft] = useState(false);
   const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);

src/room/InCallView.module.css

@@ -98,3 +98,12 @@ limitations under the License.
     gap: var(--cpd-space-4x);
   }
 }
+
+.footerThin {
+  padding-top: var(--cpd-space-3x);
+  padding-bottom: var(--cpd-space-5x);
+}
+
+.footerHidden {
+  display: none;
+}

src/room/InCallView.tsx

@@ -41,6 +41,7 @@ import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import classNames from "classnames";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -178,7 +179,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const [showConnectionStats] = useShowConnectionStats();
 
-  const { hideScreensharing } = useUrlParams();
+  const { hideScreensharing, showControls } = useUrlParams();
 
   const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
     room: livekitRoom,
@@ -388,7 +389,15 @@ export const InCallView: FC<InCallViewProps> = ({
       />,
     );
     footer = (
-      <div className={styles.footer}>
+      <div
+        className={classNames(
+          showControls
+            ? hideHeader
+              ? [styles.footer, styles.footerHidden]
+              : [styles.footer, styles.footerThin]
+            : styles.footer,
+        )}
+      >
         {!mobile && !hideHeader && (
           <div className={styles.logo}>
             <LogoMark width={24} height={24} aria-hidden />
@@ -399,8 +408,8 @@ export const InCallView: FC<InCallViewProps> = ({
             />
           </div>
         )}
-        <div className={styles.buttons}>{buttons}</div>
-        {!mobile && !hideHeader && (
+        {!showControls && <div className={styles.buttons}>{buttons}</div>}
+        {!mobile && !hideHeader && !showControls && (
           <LayoutToggle
             className={styles.layout}
             layout={layout}
@@ -425,7 +434,7 @@ export const InCallView: FC<InCallViewProps> = ({
             />
           </LeftNav>
           <RightNav>
-            {!reducedControls && onShareClick !== null && (
+            {!reducedControls && !showControls && onShareClick !== null && (
               <InviteButton onClick={onShareClick} />
             )}
           </RightNav>

src/room/RoomPage.tsx

@@ -31,8 +31,14 @@ import { platform } from "../Platform";
 import { AppSelectionModal } from "./AppSelectionModal";
 
 export const RoomPage: FC = () => {
-  const { confineToRoom, appPrompt, preload, hideHeader, displayName } =
-    useUrlParams();
+  const {
+    confineToRoom,
+    appPrompt,
+    preload,
+    hideHeader,
+    displayName,
+    skipLobby,
+  } = useUrlParams();
 
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
@@ -78,10 +84,11 @@ export const RoomPage: FC = () => {
         isPasswordlessUser={passwordlessUser}
         confineToRoom={confineToRoom}
         preload={preload}
+        skipLobby={skipLobby}
         hideHeader={hideHeader}
       />
     ),
-    [client, passwordlessUser, confineToRoom, preload, hideHeader],
+    [client, passwordlessUser, confineToRoom, preload, hideHeader, skipLobby],
   );
 
   let content: ReactNode;