Merge pull request #619 from robintown/unmute

Leave audio elements unmuted regardless of mute state

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({
         ))}
     </>
   );
-}
+};