agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/components/DeviceConfigure.tsx

@@ -9,111 +9,36 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useRef,
-  useContext,
-} from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 import {ClientRole} from '../../agora-rn-uikit';
 import DeviceContext from './DeviceContext';
-import AgoraRTC, {DeviceInfo} from 'agora-rtc-sdk-ng';
-import {useRtc, PrimaryButton} from 'customization-api';
-import Toast from '../../react-native-toast-message';
-import TertiaryButton from '../atoms/TertiaryButton';
-import {StyleSheet, Text} from 'react-native';
-import CustomIcon from '../atoms/CustomIcon';
-import StorageContext from './StorageContext';
-
-import type RtcEngine from '../../bridge/rtc/webNg/';
-import ColorContext from './ColorContext';
-
-const log = (...args) => {
-  console.log('[DeviceConfigure] ', ...args);
-};
-
-type WebRtcEngineInstance = InstanceType<typeof RtcEngine>;
+import AgoraRTC from 'agora-rtc-sdk-ng';
+import {useRtc} from 'customization-api';
 
 interface Props {
   userRole: ClientRole;
 }
-type deviceInfo = MediaDeviceInfo;
-type deviceId = deviceInfo['deviceId'];
-type deviceKind = deviceInfo['kind'];
-
+interface deviceInfo {
+  deviceId: string;
+  groupId: string;
+  kind: string;
+  label: string;
+}
+interface changedDeviceInfo {
+  device: deviceInfo;
+  initAt: number;
+  state: 'INACTIVE' | 'ACTIVE';
+  updateAt: number;
+}
 const DeviceConfigure: React.FC<Props> = (props: any) => {
+  const [selectedCam, setSelectedCam] = useState('');
+  const [selectedMic, setSelectedMic] = useState('');
+  const [deviceList, setDeviceList] = useState<any>([]);
   const rtc = useRtc();
-  const [selectedCam, setUiSelectedCam] = useState('');
-  const [selectedMic, setUiSelectedMic] = useState('');
-  const [selectedSpeaker, setUiSelectedSpeaker] = useState('');
-  const [deviceList, setDeviceList] = useState<deviceInfo[]>([]);
-
-  const {primaryColor} = useContext(ColorContext);
-  const {store, setStore} = useContext(StorageContext);
-  const {rememberedDevicesList, activeDeviceId} = store;
-
-  const isChrome = useMemo(() => {
-    return (
-      deviceList.filter((device) => device.deviceId === 'default').length > 0
-    );
-  }, [deviceList]);
-
-  // const rememberedDevicesList = useRef<
-  //   Record<MediaDeviceInfo['kind'], savedDeviceInfo[]>
-  // >({
-  //   audioinput: [],
-  //   videoinput: [],
-  //   audiooutput: [],
-  // });
 
-  const updateActiveDeviceId = (
-    kind: MediaDeviceInfo['kind'],
-    deviceId: string,
-  ) => {
-    // const {kind, deviceId} = device;
-
-    setStore((prevState) => ({
-      ...prevState,
-      activeDeviceId: {
-        ...activeDeviceId,
-        [kind]: deviceId,
-      },
-    }));
-  };
-
-  const updateRememberedDeviceList = (
-    device: MediaDeviceInfo,
-    switchOnConnect: boolean,
-  ) => {
-    const {kind} = device;
-    // rememberedDevicesList.current[kind].push({...device, switchOnConnect});
-    // window.localStorage.setItem(
-    //   'rememberedDevicesList',
-    //   JSON.stringify(rememberedDevicesList.current),
-    // );
-    setStore((prevState) => ({
-      ...prevState,
-      rememberedDevicesList: {
-        ...prevState.rememberedDevicesList,
-        [kind]: {
-          [device.deviceId]: switchOnConnect
-            ? 'switch-on-connect'
-            : 'ignore-on-connect',
-          ...prevState.rememberedDevicesList[kind],
-        },
-      },
-    }));
-  };
-
-  const {RtcEngine} = rtc as unknown as {RtcEngine: WebRtcEngineInstance};
-  const {localStream} = RtcEngine;
-
-  const refreshDeviceList = useCallback(async () => {
-    let updatedDeviceList: MediaDeviceInfo[];
-    await RtcEngine.getDevices(function (devices: deviceInfo[]) {
-      log('Fetching all devices: ', devices);
+  const refreshDevices = useCallback(async () => {
+    rtc.RtcEngine.getDevices(function (devices: deviceInfo[]) {
+      console.log('DeviceTesting: fetching all devices: ', devices);
       /**
        * Some browsers list the same microphone twice with different Id's,
        * their group Id's match as they are the same physical device.
@@ -121,398 +46,115 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
        * preference
        */
       /**
-       *  1. Fetch devices and filter so the deviceId with empty
-       *     values are exluded
+       *  1. Fetch devices and filter so the deviceId with default or empty
+       *     values are exluded for both audio and video devices. Also exclude
+       *     output devices. ex: Mac speakers are of type audiooutput(device.kind)
        *  2. Store only unique devices with unique groupIds
        */
 
-      updatedDeviceList = devices.filter(
+      const uniqueDevices = devices.filter(
         (device: deviceInfo) =>
-          // device?.deviceId !== 'default' &&
+          device?.deviceId !== 'default' &&
           device?.deviceId !== '' &&
-          (device.kind == 'audioinput' ||
-            device.kind == 'videoinput' ||
-            device.kind == 'audiooutput'),
+          (device.kind == 'audioinput' || device.kind == 'videoinput'),
       );
-
-      log('Setting unique devices', updatedDeviceList);
-      setDeviceList(updatedDeviceList);
+      console.log('DeviceTesting: set unique devices', uniqueDevices);
+      setDeviceList(uniqueDevices);
     });
-
-    return updatedDeviceList;
   }, []);
 
-  const getAgoraTrackDeviceId = (type: 'audio' | 'video') => {
-    const mutedState =
-      //@ts-ignore
-      type === 'audio' ? !RtcEngine.isAudioEnabled : !RtcEngine.isVideoEnabled;
-
-    let currentDevice: string;
-
-    if (mutedState) {
-      currentDevice =
-        //@ts-ignore
-        type === 'audio' ? RtcEngine.audioDeviceId : RtcEngine.videoDeviceId;
-      log(`Agora ${type} Engine is using`, currentDevice);
-    } else {
-      currentDevice = localStream[type]
-        ?.getMediaStreamTrack()
-        .getSettings().deviceId;
-      log(`Agora ${type} Track is using`, currentDevice);
-    }
-    return currentDevice ?? '';
-  };
-
-  /**
-   * Retrieves the devices being used by agora tracks and
-   * updates the selected Ui states with them.
-   * Ignores for audioOutput since state acts as ground
-   * truth.
-   */
-  const syncSelectedDeviceUi = (kind?: deviceKind) => {
-    log('Refreshing', kind ?? 'all');
-    switch (kind) {
-      case 'audioinput':
-        setUiSelectedMic(getAgoraTrackDeviceId('audio'));
-        break;
-      case 'videoinput':
-        setUiSelectedCam(getAgoraTrackDeviceId('video'));
-        break;
-      case 'audiooutput':
-        break;
-      default:
-        setUiSelectedMic(getAgoraTrackDeviceId('audio'));
-        setUiSelectedCam(getAgoraTrackDeviceId('video'));
-    }
-  };
-
-  /**
-   * Sets the devices to the default device on chrome or
-   * the first item on the devices list on other browsers
-   * optionally takes device list to use that instead
-   * of state which might be stale
-   */
-  const fallbackToDefaultDevice = (
-    kind: deviceKind,
-    uniqueDevices?: MediaDeviceInfo[],
-  ) => {
-    const deviceListLocal = uniqueDevices || deviceList;
-    switch (kind) {
-      case 'audioinput':
-        const audioInputFallbackDeviceId = deviceListLocal.find(
-          (device) =>
-            device.kind === 'audioinput' &&
-            (isChrome ? device.deviceId === 'default' : true),
-        )?.deviceId;
-        setSelectedMic(audioInputFallbackDeviceId);
-        break;
-      case 'videoinput':
-        const videoInputFallbackDeviceId = deviceListLocal.find(
-          (device) => device.kind === 'videoinput',
-        )?.deviceId;
-        setSelectedCam(videoInputFallbackDeviceId);
-        break;
-      case 'audiooutput':
-        const audioOutputFallbackDeviceId = deviceListLocal.find(
-          (device) =>
-            device.kind === 'audiooutput' &&
-            (isChrome ? device.deviceId === 'default' : true),
-        )?.deviceId;
-
-        setSelectedSpeaker(audioOutputFallbackDeviceId);
-        break;
-    }
-  };
-
   useEffect(() => {
-    const interval = setInterval(() => {
-      navigator.mediaDevices.enumerateDevices();
-    }, 2000);
-    return () => {
-      clearInterval(interval);
+    AgoraRTC.onMicrophoneChanged = async (changedDevice: changedDeviceInfo) => {
+      // When new audio device is plugged in ,refresh the devices list.
+      console.log('DeviceTesting: on-microphone-changed');
+      if (changedDevice && changedDevice.state === 'ACTIVE') {
+        if (changedDevice.device?.kind === 'audioinput') {
+          console.log('DeviceTesting: NEW audio device detected and selected');
+          setSelectedMic(changedDevice.device?.deviceId);
+        }
+      }
+      if (changedDevice && changedDevice.state === 'INACTIVE') {
+        if (changedDevice.device?.kind === 'audioinput') {
+          console.log('DeviceTesting: audio device inactive');
+          setSelectedMic('');
+        }
+      }
     };
-  }, []);
-
-  useEffect(() => {
-    // Labels are empty in firefox when permission is granted first time
-    // refresh device list if labels are empty
-
-    const logTag = 'useEffect[rtc,store]';
-
-    if (activeDeviceId && deviceList.length > 0) {
-      // If stream exists and selected devices are empty, check for devices again
-      if (!selectedCam || selectedCam.trim().length == 0) {
-        log(logTag, 'cam: Device list populated but No selected cam');
-        const currentVideoDevice = getAgoraTrackDeviceId('video');
-        const {videoinput: storedVideoInput} = activeDeviceId;
-
-        if (
-          storedVideoInput &&
-          currentVideoDevice &&
-          currentVideoDevice !== storedVideoInput &&
-          deviceList.find((device) => device.deviceId === storedVideoInput)
-        ) {
-          log(logTag, 'cam: Setting cam to active id', storedVideoInput);
-          setSelectedCam(storedVideoInput);
-        } else {
-          setUiSelectedCam(currentVideoDevice);
+    AgoraRTC.onCameraChanged = async (changedDevice: changedDeviceInfo) => {
+      // When new video device is plugged in ,refresh the devices list.
+      console.log('DeviceTesting: on-camera-changed');
+      if (changedDevice && changedDevice.state === 'ACTIVE') {
+        if (changedDevice.device?.kind === 'videoinput') {
+          console.log('DeviceTesting: NEW video device detected and selected');
+          setSelectedCam(changedDevice.device?.deviceId);
         }
       }
-
-      if (!selectedMic || selectedMic.trim().length == 0) {
-        log(logTag, 'mic: Device list populated but No selected mic');
-        const currentAudioDevice = getAgoraTrackDeviceId('audio');
-        const {audioinput: storedAudioInput} = activeDeviceId;
-
-        if (
-          storedAudioInput &&
-          currentAudioDevice &&
-          currentAudioDevice !== storedAudioInput &&
-          deviceList.find((device) => device.deviceId === storedAudioInput)
-        ) {
-          log(logTag, 'mic: Setting mic to active id', storedAudioInput);
-          setSelectedMic(storedAudioInput);
-        } else {
-          setUiSelectedMic(currentAudioDevice);
+      if (changedDevice && changedDevice.state === 'INACTIVE') {
+        if (changedDevice.device?.kind === 'videoinput') {
+          console.log('DeviceTesting: video device inactive');
+          setSelectedCam('');
         }
       }
+    };
+  }, []);
 
-      if (!selectedSpeaker || selectedSpeaker.trim().length == 0) {
-        log(logTag, 'speaker: Device list populated but No selected speaker');
-        const {audiooutput: storedAudioOutput} = activeDeviceId;
-        const defaultSpeaker = deviceList.find(
-          (device) =>
-            device.deviceId === 'default' &&
-            (isChrome ? device.deviceId === 'default' : true),
-        )?.deviceId;
+  useEffect(() => {
+    refreshDevices();
+  }, [selectedCam, selectedMic]);
 
-        if (
-          defaultSpeaker &&
-          storedAudioOutput &&
-          defaultSpeaker !== storedAudioOutput &&
-          deviceList.find((device) => device.deviceId === storedAudioOutput)
-        ) {
-          log(
-            logTag,
-            'speaker: Setting speaker to active id',
-            storedAudioOutput,
-          );
-          setSelectedSpeaker(storedAudioOutput);
-        } else {
-          setUiSelectedSpeaker(defaultSpeaker);
+  useEffect(() => {
+    if (!selectedMic || selectedMic.trim().length == 0) {
+      for (const i in deviceList) {
+        if (deviceList[i].kind === 'audioinput') {
+          console.log('DeviceTesting: set selected audio');
+          setSelectedMic(deviceList[i].deviceId);
+          break;
         }
       }
     }
-
-    if (
-      deviceList.length === 0 ||
-      deviceList.find((device: MediaDeviceInfo) => device.label === '')
-    ) {
-      log(logTag, 'Empty device list');
-      refreshDeviceList();
-    }
-  }, [rtc, store]);
-
-  const commonOnChangedEvent = async (changedDeviceData: DeviceInfo) => {
-    // Extracted devicelist because we want to perform fallback with
-    // the most current version.
-    const previousDeviceList = deviceList;
-    const updatedDeviceList = await refreshDeviceList();
-    const changedDevice = changedDeviceData.device;
-
-    const {logTag, currentDevice, setCurrentDevice} = {
-      audioinput: {
-        logTag: 'mic: on-microphone-changed',
-        currentDevice: selectedMic,
-        setCurrentDevice: setSelectedMic,
-      },
-      audiooutput: {
-        logTag: 'speaker: on-speaker-changed',
-        currentDevice: selectedSpeaker,
-        setCurrentDevice: setSelectedSpeaker,
-      },
-      videoinput: {
-        logTag: 'cam: on-camera-changed',
-        currentDevice: selectedCam,
-        setCurrentDevice: setSelectedCam,
-      },
-    }[changedDevice.kind];
-
-    log(logTag, changedDeviceData);
-
-    if (currentDevice === 'default') {
-      // const previousDefaultDevice = previousDeviceList.find(
-      //   (device) => device.deviceId === 'default',
-      // );
-      // const currentDefaultDevice = updatedDeviceList.find(
-      //   (device) => device.deviceId === 'default',
-      // );
-      //   log(logTag, 'current Default device', {
-      //     changedDeviceData,
-      //     previousDeviceList,
-      //     updatedDeviceList,
-      //     previousDefaultDevice,
-      //     currentDefaultDevice,
-      //   });
-      // if (previousDefaultDevice.groupId !== currentDefaultDevice.groupId) {
-      //   log(logTag, 'Default device changed', {
-      //     changedDeviceData,
-      //     previousDeviceList,
-      //     updatedDeviceList,
-      //     previousDefaultDevice,
-      //     currentDefaultDevice,
-      //   });
-      //   setCurrentDevice('default');
-      // }
-      setCurrentDevice('default');
-    }
-
-    const didChangeDeviceExistBefore = previousDeviceList.find(
-      (device) => device.deviceId === changedDevice.deviceId,
-    )
-      ? true
-      : false;
-
-    if (changedDeviceData.state === 'ACTIVE' && !didChangeDeviceExistBefore) {
-      const rememberedDevice =
-        rememberedDevicesList[changedDevice.kind][changedDevice.deviceId];
-
-      if (!rememberedDevice) {
-        showNewDeviceDetectedToast(changedDevice);
-      } else {
-        if (rememberedDevice === 'switch-on-connect') {
-          setCurrentDevice(changedDevice.deviceId);
-          return;
+    if (!selectedCam || selectedCam.trim().length == 0) {
+      for (const i in deviceList) {
+        if (deviceList[i].kind === 'videoinput') {
+          console.log('DeviceTesting: set selected camera');
+          setSelectedCam(deviceList[i].deviceId);
+          break;
         }
       }
-    } else if (changedDeviceData.state === 'INACTIVE') {
-      if (changedDevice.deviceId === currentDevice) {
-        fallbackToDefaultDevice(changedDevice.kind, updatedDeviceList);
-        return;
-      }
     }
-  };
-
-  // Port this to useEffectEvent(https://beta.reactjs.org/reference/react/useEffectEvent) when
-  // released
-  useEffect(() => {
-    log('previous devicelist updated', deviceList);
-    AgoraRTC.onMicrophoneChanged = commonOnChangedEvent;
-  }, [selectedMic, deviceList]);
-
-  useEffect(() => {
-    AgoraRTC.onPlaybackDeviceChanged = commonOnChangedEvent;
-  }, [selectedSpeaker, deviceList]);
+  }, [deviceList]);
 
   useEffect(() => {
-    AgoraRTC.onCameraChanged = commonOnChangedEvent;
-  }, [selectedCam, deviceList]);
-
-  const setSelectedMic = (deviceId: deviceId) => {
-    log('mic: setting to', deviceId);
-    return new Promise((res, rej) => {
-      RtcEngine.changeMic(
-        deviceId,
-        () => {
-          syncSelectedDeviceUi('audioinput');
-          updateActiveDeviceId('audioinput', deviceId);
-          res(null);
-        },
-        (e: any) => {
-          console.error('DeviceConfigure: Error setting mic', e);
-          rej(e);
-        },
-      );
-    });
-  };
-
-  const setSelectedCam = (deviceId: deviceId) => {
-    log('cam: setting  to', deviceId);
-    return new Promise((res, rej) => {
-      RtcEngine.changeCamera(
-        deviceId,
-        () => {
-          syncSelectedDeviceUi('videoinput');
-          updateActiveDeviceId('videoinput', deviceId);
-          res(null);
-        },
-        (e: any) => {
-          console.error('Device Configure: Error setting webcam', e);
-          rej(e);
-        },
+    if (selectedCam.length !== 0) {
+      rtc.RtcEngine.changeCamera(
+        selectedCam,
+        () => {},
+        (e: any) => console.log(e),
       );
-    });
-  };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCam]);
 
-  const setSelectedSpeaker = (deviceId: deviceId) => {
-    log('speaker: setting to', deviceId);
-    return new Promise((res, rej) => {
-      RtcEngine.changeSpeaker(
-        deviceId,
-        () => {
-          setUiSelectedSpeaker(deviceId);
-          updateActiveDeviceId('audiooutput', deviceId);
-          res(null);
-        },
-        (e: any) => {
-          console.error('Device Configure: Error setting speaker', e);
-          rej(selectedSpeaker);
-        },
+  useEffect(() => {
+    if (selectedMic.length !== 0) {
+      rtc.RtcEngine.changeMic(
+        selectedMic,
+        () => {},
+        (e: any) => console.log(e),
       );
-    });
-  };
-
-  const showNewDeviceDetectedToast = (device: MediaDeviceInfo) => {
-    const {name, setAction} = {
-      audioinput: {
-        name: 'mic',
-        setAction: setSelectedMic,
-      },
-      videoinput: {
-        name: 'webcam',
-        setAction: setSelectedCam,
-      },
-      audiooutput: {
-        name: 'speaker',
-        setAction: setSelectedSpeaker,
-      },
-    }[device.kind];
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedMic]);
 
-    Toast.show({
-      type: 'checked',
-      // leadingIcon: <CustomIcon name={'mic-on'} />,
-      text1: `New ${name} detected`,
-      // @ts-ignore
-      text2: (
-        <Text>
-          <Text>New {name} named </Text>
-          <Text style={{fontWeight: 'bold'}}>{device.label}</Text>
-          <Text> detected. Do you want to switch?</Text>
-        </Text>
-      ),
-      visibilityTime: 6000,
-      checkbox: {
-        disabled: false,
-        color: primaryColor,
-        text: 'Remember my choice',
-      },
-      primaryBtn: {
-        text: 'SWITCH DEVICE',
-        onPress: (checked: boolean) => {
-          setAction(device.deviceId);
-          checked && updateRememberedDeviceList(device, true);
-          Toast.hide();
-        },
-      },
-      secondaryBtn: {
-        text: 'IGNORE',
-        onPress: (checked: boolean) => {
-          checked && updateRememberedDeviceList(device, false);
-          Toast.hide();
-        },
-      },
-    });
-  };
+  useEffect(() => {
+    // If stream exists and deviceList are empty, check for devices again
+    // Labels are empty in firefox when permission is grante first time, refresh device list if labels are empty
+    if (
+      deviceList.length === 0 ||
+      deviceList.find((device: MediaDeviceInfo) => device.label === '')
+    ) {
+      refreshDevices();
+    }
+  }, [rtc]);
 
   return (
     <DeviceContext.Provider
@@ -521,8 +163,6 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         setSelectedCam,
         selectedMic,
         setSelectedMic,
-        selectedSpeaker,
-        setSelectedSpeaker,
         deviceList,
         setDeviceList,
       }}>

package/template/src/components/DeviceContext.tsx

@@ -13,11 +13,9 @@ import {createContext} from 'react';
 
 interface DeviceContext {
   selectedCam: string;
-  setSelectedCam: (cam: string) => Promise<any>;
+  setSelectedCam: (cam: string) => void;
   selectedMic: string;
-  setSelectedMic: (mic: string) => Promise<any>;
-  selectedSpeaker: string;
-  setSelectedSpeaker: (speaker: string) => Promise<any>;
+  setSelectedMic: (mic: string) => void;
   deviceList: MediaDeviceInfo[];
   setDeviceList: (devices: MediaDeviceInfo[]) => void;
 }
@@ -25,11 +23,9 @@ interface DeviceContext {
 const DeviceContext = createContext<DeviceContext>({
   selectedCam: '',
   selectedMic: '',
-  selectedSpeaker: '',
   deviceList: [],
-  setSelectedCam: async () => {},
-  setSelectedMic: async () => {},
-  setSelectedSpeaker: async () => {},
+  setSelectedCam: () => {},
+  setSelectedMic: () => {},
   setDeviceList: () => {},
 });
 export default DeviceContext;