Merge branch 'main' into hide-invite

src/UrlParams.ts

@@ -29,6 +29,8 @@ export interface UrlParams {
   preload: boolean;
   // Whether to hide the room header when in a call
   hideHeader: boolean;
+  // Whether to hide the screen-sharing button
+  hideScreensharing: boolean;
   // Whether to start a walkie-talkie call instead of a video call
   isPtt: boolean;
   // Whether to use end-to-end encryption
@@ -84,6 +86,7 @@ export const getUrlParams = (
     isEmbedded: hasParam("embed"),
     preload: hasParam("preload"),
     hideHeader: hasParam("hideHeader"),
+    hideScreensharing: hasParam("hideScreensharing"),
     isPtt: hasParam("ptt"),
     e2eEnabled: getParam("enableE2e") !== "false", // Defaults to true
     userId: getParam("userId"),

src/room/InCallView.tsx

@@ -59,6 +59,7 @@ import { AudioContainer } from "../video-grid/AudioContainer";
 import { useAudioOutputDevice } from "../video-grid/useAudioOutputDevice";
 import { widget, ElementWidgetActions } from "../widget";
 import { useJoinRule } from "./useJoinRule";
+import { useUrlParams } from "../UrlParams";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -145,6 +146,8 @@ export function InCallView({
 
   useAudioOutputDevice(audioRef, audioOutput);
 
+  const { hideScreensharing } = useUrlParams();
+
   useEffect(() => {
     widget?.api.transport.send(
       layout === "freedom"
@@ -333,12 +336,15 @@ export function InCallView({
       <div className={styles.footer}>
         <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
         <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
-        {canScreenshare && !isSafari && !reducedControls && (
+        {canScreenshare &&
-          <ScreenshareButton
+          !hideScreensharing &&
-            enabled={isScreensharing}
+          !isSafari &&
-            onPress={toggleScreensharing}
+          !reducedControls && (
-          />
+            <ScreenshareButton
-        )}
+              enabled={isScreensharing}
+              onPress={toggleScreensharing}
+            />
+          )}
         {!reducedControls && (
           <OverflowMenu
             inCall

src/video-grid/AudioContainer.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useRef } from "react";
+import React, { FC, useEffect, useRef } from "react";
 
 import { Participant } from "../room/InCallView";
 import { useCallFeed } from "./useCallFeed";
@@ -29,19 +29,22 @@ interface AudioForParticipantProps {
   audioDestination: AudioNode;
 }
 
-export function AudioForParticipant({
+export const AudioForParticipant: FC<AudioForParticipantProps> = ({
   item,
   audioContext,
   audioDestination,
-}: AudioForParticipantProps): JSX.Element {
+}) => {
-  const { stream, localVolume, audioMuted } = useCallFeed(item.callFeed);
+  const { stream, localVolume } = useCallFeed(item.callFeed);
   const [audioTrackCount] = useMediaStreamTrackCount(stream);
 
   const gainNodeRef = useRef<GainNode>();
   const sourceRef = useRef<MediaStreamAudioSourceNode>();
 
   useEffect(() => {
-    if (!item.isLocal && audioContext && !audioMuted && audioTrackCount > 0) {
+    // We don't compare the audioMuted flag of useCallFeed here, since unmuting
+    // depends on to-device messages which may lag behind the audio actually
+    // starting to flow over the network
+    if (!item.isLocal && audioContext && audioTrackCount > 0) {
       if (!gainNodeRef.current) {
         gainNodeRef.current = new GainNode(audioContext, {
           gain: localVolume,
@@ -68,12 +71,11 @@ export function AudioForParticipant({
     audioDestination,
     stream,
     localVolume,
-    audioMuted,
     audioTrackCount,
   ]);
 
   return null;
-}
+};
 
 interface AudioContainerProps {
   items: Participant[];
@@ -81,10 +83,7 @@ interface AudioContainerProps {
   audioDestination: AudioNode;
 }
 
-export function AudioContainer({
+export const AudioContainer: FC<AudioContainerProps> = ({ items, ...rest }) => {
-  items,
-  ...rest
-}: AudioContainerProps): JSX.Element {
   return (
     <>
       {items
@@ -94,4 +93,4 @@ export function AudioContainer({
         ))}
     </>
   );
-}
+};