fix: viewer livestream muting issue in SDK

packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx

@@ -18,13 +18,13 @@ import {
   LiveIndicator,
 } from '../LivestreamTopView';
 import { IconWrapper, Maximize } from '../../../icons';
-import InCallManager from 'react-native-incall-manager';
 import {
   VolumeOff,
   VolumeOn,
   PauseIcon,
   PlayIcon,
 } from '../../../icons/LivestreamControls';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
 /**
  * Props for the ViewerLivestreamControls component.
@@ -65,6 +65,9 @@ export const ViewerLivestreamControls = ({
   const [showPlayPauseButton, setShowPlayPauseButton] = useState(true);
   const playPauseTimeout = useRef<NodeJS.Timeout | null>(null);
 
+  const { useDominantSpeaker } = useCallStateHooks();
+  const dominantSpeaker = useDominantSpeaker();
+
   const hidePlayPauseButtonAfterDelay = useCallback(() => {
     if (playPauseTimeout.current) {
       clearTimeout(playPauseTimeout.current);
@@ -104,8 +107,16 @@ export const ViewerLivestreamControls = ({
   };
 
   const toggleAudio = () => {
-    setIsMuted(!isMuted);
-    InCallManager.setForceSpeakerphoneOn(isMuted);
+    const audioTrack = dominantSpeaker?.audioStream?.getAudioTracks?.()[0];
+    const shouldMute = !isMuted;
+    if (shouldMute) {
+      // @ts-expect-error - _setVolume is a private method of MediaStreamTrack in rn-webrtc
+      audioTrack?._setVolume(0);
+    } else {
+      // @ts-expect-error -_setVolume is a private method of MediaStreamTrack in rn-webrtc
+      audioTrack?._setVolume(1);
+    }
+    setIsMuted(shouldMute);
   };
 
   const togglePlayPause = () => {

packages/react-native-sdk/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx

@@ -1,5 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { hasScreenShare, SfuModels } from '@stream-io/video-client';
+import {
+  hasScreenShare,
+  SfuModels,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 import { usePaginatedLayoutSortPreset } from '../../../hooks/usePaginatedLayoutSortPreset';
@@ -9,6 +13,7 @@ import {
   type VideoRendererProps,
 } from '../../Participant';
 import type { ScreenShareOverlayProps } from '../../utility/ScreenShareOverlay';
+import { useTrackDimensions } from '../../../hooks';
 
 /**
  * Props for the LivestreamLayout component.
@@ -56,11 +61,6 @@ export const LivestreamLayout = ({
       React.ComponentProps<NonNullable<typeof VideoRenderer>>['objectFit']
     >();
 
-  // no need to pass object fit for local participant as the dimensions are for remote tracks
-  const objectFitToBeSet = currentSpeaker?.isLocalParticipant
-    ? undefined
-    : objectFit;
-
   const onDimensionsChange = useCallback(
     (d: SfuModels.VideoDimension | undefined) => {
       if (d) {
@@ -84,48 +84,57 @@ export const LivestreamLayout = ({
         livestreamLayout.container,
       ]}
     >
-      <RemoteVideoTrackDimensionsRenderLessComponent
-        onDimensionsChange={onDimensionsChange}
-      />
       {VideoRenderer &&
         hasOngoingScreenShare &&
         presenter &&
         (presenter.isLocalParticipant && ScreenShareOverlay ? (
           <ScreenShareOverlay />
         ) : (
-          <VideoRenderer trackType="screenShareTrack" participant={presenter} />
+          <>
+            <VideoRenderer
+              trackType="screenShareTrack"
+              objectFit={objectFit}
+              participant={presenter}
+            />
+            <VideoTrackDimensionsRenderLessComponent
+              onDimensionsChange={onDimensionsChange}
+              participant={presenter}
+              trackType="screenShareTrack"
+            />
+          </>
         ))}
       {VideoRenderer && !hasOngoingScreenShare && currentSpeaker && (
-        <VideoRenderer
-          participant={currentSpeaker}
-          objectFit={objectFitToBeSet}
-          trackType="videoTrack"
-        />
+        <>
+          <VideoRenderer
+            participant={currentSpeaker}
+            objectFit={objectFit}
+            trackType="videoTrack"
+          />
+          <VideoTrackDimensionsRenderLessComponent
+            onDimensionsChange={onDimensionsChange}
+            participant={currentSpeaker}
+            trackType="videoTrack"
+          />
+        </>
       )}
     </View>
   );
 };
 
-const RemoteVideoTrackDimensionsRenderLessComponent = ({
+const VideoTrackDimensionsRenderLessComponent = ({
   onDimensionsChange,
+  participant,
+  trackType,
 }: {
   onDimensionsChange: (d: SfuModels.VideoDimension | undefined) => void;
+  participant: StreamVideoParticipant;
+  trackType: 'videoTrack' | 'screenShareTrack';
 }) => {
-  const [dimension, setDimension] = useState<SfuModels.VideoDimension>();
-  const { useCallStatsReport } = useCallStateHooks();
-  const statsReport = useCallStatsReport();
-  const highestFrameHeight = statsReport?.subscriberStats?.highestFrameHeight;
-  const highestFrameWidth = statsReport?.subscriberStats?.highestFrameWidth;
-
-  useEffect(() => {
-    if (highestFrameHeight && highestFrameWidth) {
-      setDimension({ height: highestFrameHeight, width: highestFrameWidth });
-    }
-  }, [highestFrameHeight, highestFrameWidth]);
+  const { width, height } = useTrackDimensions(participant, trackType);
 
   useEffect(() => {
-    onDimensionsChange(dimension);
-  }, [dimension, onDimensionsChange]);
+    onDimensionsChange({ width, height });
+  }, [width, height, onDimensionsChange]);
 
   return null;
 };

sample-apps/react-native/dogfood/src/screens/LiveStream/ViewLiveStream.tsx

@@ -41,21 +41,10 @@ export const ViewLiveStreamChildren = ({
     params: { callId },
   } = route;
 
-  const client = useStreamVideoClient();
-  const call = useSetCall(callId, 'livestream', client);
-
-  if (!call) {
-    return null;
-  }
-
   /**
    * Note: Here we provide the `StreamCall` component again. This is done, so that the call used, is created by the anonymous user.
    */
-  return (
-    <StreamCall call={call}>
-      <LivestreamPlayer callId={callId} callType="livestream" />
-    </StreamCall>
-  );
+  return <LivestreamPlayer callId={callId} callType="livestream" />;
 };
 
 export const ViewLiveStreamScreen = ({