Add hideControls url param for screen recordings. (#1808)

---------

Signed-off-by: Timo K <toger5@hotmail.de>

src/UrlParams.ts

@@ -62,6 +62,10 @@ interface UrlParams {
    * Whether to hide the room header when in a call.
    */
   hideHeader: boolean;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
   /**
    * Whether to hide the screen-sharing button.
    */
@@ -201,6 +205,7 @@ export const getUrlParams = (
     appPrompt: parser.getFlagParam("appPrompt", true),
     preload: parser.getFlagParam("preload"),
     hideHeader: parser.getFlagParam("hideHeader"),
+    showControls: parser.getFlagParam("showControls"),
     hideScreensharing: parser.getFlagParam("hideScreensharing"),
     e2eEnabled: parser.getFlagParam("enableE2e", true),
     userId: parser.getParam("userId"),

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";
@@ -177,7 +178,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const [showConnectionStats] = useShowConnectionStats();
 
-  const { hideScreensharing } = useUrlParams();
+  const { hideScreensharing, showControls } = useUrlParams();
 
   const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
     room: livekitRoom,
@@ -387,7 +388,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 />
@@ -398,8 +407,8 @@ export const InCallView: FC<InCallViewProps> = ({
             />
           </div>
         )}
-        <div className={styles.buttons}>{buttons}</div>
+        {!showControls && <div className={styles.buttons}>{buttons}</div>}
-        {!mobile && !hideHeader && (
+        {!mobile && !hideHeader && !showControls && (
           <LayoutToggle
             className={styles.layout}
             layout={layout}
@@ -424,7 +433,7 @@ export const InCallView: FC<InCallViewProps> = ({
             />
           </LeftNav>
           <RightNav>
-            {!reducedControls && onShareClick !== null && (
+            {!reducedControls && !showControls && onShareClick !== null && (
               <InviteButton onClick={onShareClick} />
             )}
           </RightNav>