Revert "feat(react-native): detect speaking while muted from stats (#…

…1200)"

This reverts commit c5fc1f5.

packages/client/src/devices/MicrophoneManager.ts

@@ -8,7 +8,6 @@ import { createSoundDetector } from '../helpers/sound-detector';
 import { isReactNative } from '../helpers/platforms';
 import { OwnCapability } from '../gen/coordinator';
 import { CallingState } from '../store';
-import { detectAudioLevels } from '../helpers/detect-audio-levels';
 
 export class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManagerState> {
   private soundDetectorCleanup?: Function;
@@ -59,27 +58,21 @@ export class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManager
   }
 
   private async startSpeakingWhileMutedDetection(deviceId?: string) {
-    await this.stopSpeakingWhileMutedDetection();
     if (isReactNative()) {
-      this.soundDetectorCleanup = detectAudioLevels(
-        this.call.state.callStatsReport$,
-        (event) => {
-          this.state.setSpeakingWhileMuted(event.isSoundDetected);
-        },
-      );
-    } else {
-      // Need to start a new stream that's not connected to publisher
-      const stream = await this.getStream({
-        deviceId,
-      });
-      this.soundDetectorCleanup = createSoundDetector(stream, (event) => {
-        this.state.setSpeakingWhileMuted(event.isSoundDetected);
-      });
+      return;
     }
+    await this.stopSpeakingWhileMutedDetection();
+    // Need to start a new stream that's not connected to publisher
+    const stream = await this.getStream({
+      deviceId,
+    });
+    this.soundDetectorCleanup = createSoundDetector(stream, (event) => {
+      this.state.setSpeakingWhileMuted(event.isSoundDetected);
+    });
   }
 
   private async stopSpeakingWhileMutedDetection() {
-    if (!this.soundDetectorCleanup) {
+    if (isReactNative() || !this.soundDetectorCleanup) {
       return;
     }
     this.state.setSpeakingWhileMuted(false);

packages/client/src/stats/state-store-stats-reporter.ts

@@ -264,7 +264,6 @@ const transform = (
       }
 
       return {
-        audioLevel: rtcStreamStats.audioLevel,
         bytesSent: rtcStreamStats.bytesSent,
         bytesReceived: rtcStreamStats.bytesReceived,
         codec: codec?.mimeType,

packages/client/src/stats/types.ts

@@ -1,5 +1,4 @@
 export type BaseStats = {
-  audioLevel?: number;
   bytesSent?: number;
   bytesReceived?: number;
   codec?: string;

sample-apps/react-native/dogfood/src/components/CallControlsComponent.tsx

@@ -7,10 +7,9 @@ import {
   ToggleCameraFaceButton,
   ToggleVideoPublishingButton,
   ScreenShareButton,
-  useCallStateHooks,
 } from '@stream-io/video-react-native-sdk';
 import React from 'react';
-import { StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { appTheme } from '../theme';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Z_INDEX } from '../constants';
@@ -31,8 +30,6 @@ export const CallControlsComponent = ({
   unreadCountIndicator,
   landscape,
 }: CallControlsComponentProps) => {
-  const { useMicrophoneState } = useCallStateHooks();
-  const { isSpeakingWhileMuted } = useMicrophoneState();
   const { bottom } = useSafeAreaInsets();
   const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'column-reverse' : 'row',
@@ -42,38 +39,22 @@ export const CallControlsComponent = ({
   };
 
   return (
-    <View>
-      {isSpeakingWhileMuted && (
-        <View style={styles.speakingLabelContainer}>
-          <Text style={styles.label}>You are muted. Unmute to speak.</Text>
-        </View>
-      )}
-      <View style={[styles.callControlsWrapper, landscapeStyles]}>
-        <ReactionsButton />
-        <ChatButton
-          onPressHandler={onChatOpenHandler}
-          unreadBadgeCount={unreadCountIndicator}
-        />
-        <ScreenShareButton />
-        <ToggleVideoPublishingButton />
-        <ToggleAudioPublishingButton />
-        <ToggleCameraFaceButton />
-        <HangUpCallButton onPressHandler={onHangupCallHandler} />
-      </View>
+    <View style={[styles.callControlsWrapper, landscapeStyles]}>
+      <ReactionsButton />
+      <ChatButton
+        onPressHandler={onChatOpenHandler}
+        unreadBadgeCount={unreadCountIndicator}
+      />
+      <ScreenShareButton />
+      <ToggleVideoPublishingButton />
+      <ToggleAudioPublishingButton />
+      <ToggleCameraFaceButton />
+      <HangUpCallButton onPressHandler={onHangupCallHandler} />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  speakingLabelContainer: {
-    backgroundColor: appTheme.colors.static_overlay,
-    paddingVertical: 10,
-    width: '100%',
-  },
-  label: {
-    textAlign: 'center',
-    color: appTheme.colors.static_white,
-  },
   callControlsWrapper: {
     justifyContent: 'space-evenly',
     zIndex: Z_INDEX.IN_FRONT,

sample-apps/react-native/dogfood/src/theme.ts

@@ -1,14 +1,7 @@
-const opacityToHex = (opacity: number) => {
-  return Math.round(opacity * 255)
-    .toString(16)
-    .padStart(2, '0');
-};
-
 export const appTheme = {
   colors: {
     static_grey: '#272A30',
     static_white: '#ffffff',
-    static_overlay: '#080707' + opacityToHex(0.85),
     primary: '#005FFF',
     light_gray: '#979797',
     light_blue: '#669FFF',