agora-appbuilder-core 3.0.10 → 3.0.12

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -23,8 +23,6 @@ import AgoraRTC, {
   EncryptionMode,
   ILocalTrack,
   ClientRoleOptions,
-  CameraVideoTrackInitConfig,
-  MicrophoneAudioTrackInitConfig,
 } from 'agora-rtc-sdk-ng';
 import type {
   RtcEngineEvents,
@@ -48,12 +46,9 @@ type callbackType = (uid?: UID) => void;
 declare global {
   interface Window {
     engine: RtcEngine;
-    AgoraRTC: typeof AgoraRTC;
   }
 }
 
-window.AgoraRTC = AgoraRTC;
-
 export enum AREAS {
   /**
    * China.
@@ -171,7 +166,6 @@ if ($config.LOG_ENABLED) {
 }
 
 export default class RtcEngine {
-  private activeSpeakerUid: number;
   public appId: string;
   // public AgoraRTC: any;
   public client: any | IAgoraRTCClient;
@@ -184,7 +178,6 @@ export default class RtcEngine {
     ['RemoteAudioStateChanged', () => null],
     ['RemoteVideoStateChanged', () => null],
     ['NetworkQuality', () => null],
-    ['ActiveSpeaker', () => null],
   ]);
   public localStream: LocalStream = {};
   public screenStream: ScreenStream = {};
@@ -192,16 +185,15 @@ export default class RtcEngine {
   private inScreenshare: Boolean = false;
   private videoProfile: VideoProfile = '480p_9';
   private isPublished = false;
-  private isAudioEnabled = false;
-  private isVideoEnabled = false;
+  private isAudioEnabled = true;
+  private isVideoEnabled = true;
   private isAudioPublished = false;
   private isVideoPublished = false;
   private isJoined = false;
-  private videoDeviceId = undefined;
-  private audioDeviceId = undefined;
+  private deviceId = '';
   private muteLocalVideoMutex = false;
   private muteLocalAudioMutex = false;
-  private speakerDeviceId = '';
+
   // Create channel profile and set it here
 
   // Create channel profile and set it here
@@ -222,17 +214,9 @@ export default class RtcEngine {
   }
 
   async enableAudio(): Promise<void> {
-    const audioConfig: MicrophoneAudioTrackInitConfig = {
-      bypassWebAudio: Platform.OS == 'web' && isMobileOrTablet(),
-      // microphoneId: this.audioDeviceId,
-    };
     try {
-      let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
+      let localAudio = await AgoraRTC.createMicrophoneAudioTrack({});
       this.localStream.audio = localAudio;
-      this.audioDeviceId = localAudio
-        ?.getMediaStreamTrack()
-        .getSettings().deviceId;
-      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = e;
       e.status = {audioError};
@@ -250,30 +234,15 @@ export default class RtcEngine {
      *    The Web SDK directly publishes the local audio stream without processing it through WebAudio.
      */
 
-    const audioConfig: MicrophoneAudioTrackInitConfig = {
-      bypassWebAudio: Platform.OS == 'web' && isMobileOrTablet(),
-      // microphoneId: this.audioDeviceId,
-    };
-    const videoConfig: CameraVideoTrackInitConfig = {
-      encoderConfig: this.videoProfile,
-      // cameraId: this.videoDeviceId,
-    };
+    const audioConfig =
+      Platform.OS == 'web' && isMobileOrTablet() ? {bypassWebAudio: true} : {};
     try {
       let [localAudio, localVideo] =
-        await AgoraRTC.createMicrophoneAndCameraTracks(
-          audioConfig,
-          videoConfig,
-        );
+        await AgoraRTC.createMicrophoneAndCameraTracks(audioConfig, {
+          encoderConfig: this.videoProfile,
+        });
       this.localStream.audio = localAudio;
       this.localStream.video = localVideo;
-      this.audioDeviceId = localAudio
-        ?.getMediaStreamTrack()
-        .getSettings().deviceId;
-      this.videoDeviceId = localVideo
-        ?.getMediaStreamTrack()
-        .getSettings().deviceId;
-      this.isVideoEnabled = true;
-      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = false;
       let videoError = false;
@@ -281,20 +250,14 @@ export default class RtcEngine {
         let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
 
         this.localStream.audio = localAudio;
-        this.audioDeviceId = localAudio
-          ?.getMediaStreamTrack()
-          .getSettings().deviceId;
-        this.isAudioEnabled = true;
       } catch (error) {
         audioError = error;
       }
       try {
-        let localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
+        let localVideo = await AgoraRTC.createCameraVideoTrack({
+          encoderConfig: this.videoProfile,
+        });
         this.localStream.video = localVideo;
-        this.videoDeviceId = localVideo
-          ?.getMediaStreamTrack()
-          .getSettings().deviceId;
-        this.isVideoEnabled = true;
       } catch (error) {
         videoError = error;
       }
@@ -308,11 +271,6 @@ export default class RtcEngine {
     }
   }
 
-  async enableAudioVolumeIndication(interval, smooth, isLocal) {
-    AgoraRTC.setParameter('AUDIO_VOLUME_INDICATION_INTERVAL', interval);
-    this.client.enableAudioVolumeIndicator();
-  }
-
   async publish() {
     if (this.localStream.audio || this.localStream.video) {
       try {
@@ -402,12 +360,6 @@ export default class RtcEngine {
           ...this.remoteStreams.get(user.uid),
           audio: audioTrack,
         });
-        if (this.speakerDeviceId) {
-          // setting sepeaker for all remote stream (newly joining user)
-          this.remoteStreams
-            .get(user.uid)
-            ?.audio?.setPlaybackDevice(this.speakerDeviceId);
-        }
         (this.eventsMap.get('RemoteAudioStateChanged') as callbackType)(
           user.uid,
           2,
@@ -452,36 +404,6 @@ export default class RtcEngine {
       }
     });
 
-    this.client.on('volume-indicator', (volumes) => {
-      const highestvolumeObj = volumes.reduce(
-        (highestVolume, volume, index) => {
-          if (highestVolume === null) {
-            return volume;
-          } else {
-            if (volume.level > highestVolume.level) {
-              return volume;
-            }
-            return highestVolume;
-          }
-          // console.log(`${index} UID ${volume.uid} Level ${volume.level}`);
-        },
-        null,
-      );
-      const activeSpeakerUid =
-        highestvolumeObj && highestvolumeObj?.level > 0 && highestvolumeObj?.uid
-          ? highestvolumeObj.uid
-          : undefined;
-
-      //To avoid infinite calling dispatch checking if condition.
-      if (this.activeSpeakerUid !== activeSpeakerUid) {
-        const activeSpeakerCallBack = this.eventsMap.get(
-          'ActiveSpeaker',
-        ) as callbackType;
-        activeSpeakerCallBack(activeSpeakerUid);
-        this.activeSpeakerUid = activeSpeakerUid;
-      }
-    });
-
     // this.client.on('stream-fallback', (evt))
     this.client.on('stream-type-changed', function (uid, streamType) {
       console.log('[fallback]: ', uid, streamType);
@@ -546,8 +468,7 @@ export default class RtcEngine {
       event === 'ScreenshareStopped' ||
       event === 'RemoteAudioStateChanged' ||
       event === 'RemoteVideoStateChanged' ||
-      event === 'NetworkQuality' ||
-      event === 'ActiveSpeaker'
+      event === 'NetworkQuality'
     ) {
       this.eventsMap.set(event, listener as callbackType);
     }
@@ -695,7 +616,7 @@ export default class RtcEngine {
   async changeCamera(cameraId, callback, error): Promise<void> {
     try {
       await this.localStream.video?.setDevice(cameraId);
-      this.videoDeviceId = cameraId;
+      this.deviceId = cameraId;
       callback(cameraId);
     } catch (e) {
       error(e);
@@ -707,9 +628,9 @@ export default class RtcEngine {
       const devices = await AgoraRTC.getDevices(true);
       for (let i = 0; i < devices.length; i++) {
         let d = devices[i];
-        if (d.kind === 'videoinput' && d.deviceId !== this.videoDeviceId) {
+        if (d.kind === 'videoinput' && d.deviceId !== this.deviceId) {
           await this.localStream.video?.setDevice(d.deviceId);
-          this.videoDeviceId = d.deviceId;
+          this.deviceId = d.deviceId;
           break;
         }
       }
@@ -721,26 +642,12 @@ export default class RtcEngine {
   async changeMic(micId, callback, error) {
     try {
       await this.localStream.audio?.setDevice(micId);
-      this.audioDeviceId = micId;
       callback(micId);
     } catch (e) {
       error(e);
     }
   }
 
-  async changeSpeaker(speakerId, callback, error) {
-    try {
-      this.speakerDeviceId = speakerId;
-      // setting sepeaker for all remote stream (previously joined users)
-      this.remoteStreams?.forEach((stream, uid, map) => {
-        stream?.audio?.setPlaybackDevice(speakerId);
-      });
-      callback(speakerId);
-    } catch (e) {
-      error(e);
-    }
-  }
-
   async enableDualStreamMode(enable: boolean) {
     return this.client[enable ? 'enableDualStream' : 'disableDualStream']();
     // enable

package/template/customization-api/sub-components.ts

@@ -4,7 +4,7 @@ export {default as PrimaryButton} from '../src/atoms/PrimaryButton';
 export {default as SecondaryButton} from '../src/atoms/SecondaryButton';
 export {default as TextInput} from '../src/atoms/TextInput';
 //Icons
-export {Icons} from '../agora-rn-uikit';
+export {default as icons} from '../src/assets/icons';
 
 // commented for v1 release
 //create screen

package/template/customization-api/typeDefinition.ts

@@ -18,7 +18,7 @@ import {
   UidType,
 } from '../agora-rn-uikit';
 import {I18nInterface} from '../src/language/i18nTypes';
-import {IconsInterface} from '../src/atoms/CustomIcon';
+import {IconsInterface} from '../agora-rn-uikit/src/Controls/Icons';
 export type {RenderInterface, RenderStateInterface, UidType};
 export type {
   ChatTextInputProps,
@@ -56,7 +56,6 @@ export interface ChatCmpInterface {
 
 export interface renderComponentInterface {
   user: RenderInterface;
-  isMax?: boolean;
 }
 
 export interface renderComponentObjectInterface {

package/template/electron/index.html

@@ -1,29 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <base href="./" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <style>
-      .video-container > * {
-        background-color: #000 !important;
-      }
-      .video-container video {
-        background-color: #000;
-      }
-      .video-container {
-        background-color: #000;
-      }
-    </style>
-    <div id="react-app" style="height: 100vh; display: flex"></div>
-  </body>
-</html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <base href="./">
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+    <body>
+        <style>
+            .video-container > *{
+                background-color: #000 !important;
+
+            }
+            .video-container video{
+                background-color: #000;
+            }
+            .video-container{
+                background-color: #000;
+            }
+        </style>
+        <div id="react-app" style="
+            height: 100vh;
+            display: flex;
+        ">
+        </div>
+    </body>
+</html>

package/template/electron/renderer/index.js

@@ -1,6 +1,5 @@
 import Video from '../../src/App';
 import {AppRegistry} from 'react-native';
-import '../../src/assets/font-styles.css';
 // import React from 'react';
 
 // const Video = () => <div>Hello </div>;

package/template/global.d.ts

@@ -47,6 +47,7 @@ interface ConfigInterface {
   APP_NAME: string;
   LOGO: string;
   APP_ID: string;
+  PRIMARY_COLOR: string;
   FRONTEND_ENDPOINT: string;
   BACKEND_ENDPOINT: string;
   PSTN: boolean;
@@ -56,9 +57,11 @@ interface ConfigInterface {
   SCREEN_SHARING: boolean;
   CLIENT_ID: string;
   LANDING_SUB_HEADING: string;
+  BG: string;
   ENCRYPTION_ENABLED: boolean;
   PROFILE: VideoProfile;
-  SENTRY_DSN: string;
+  PRIMARY_FONT_COLOR: string;
+  SECONDARY_FONT_COLOR: string;
   ENABLE_GOOGLE_OAUTH: boolean;
   ENABLE_SLACK_OAUTH: boolean;
   ENABLE_MICROSOFT_OAUTH: boolean;
@@ -72,31 +75,6 @@ interface ConfigInterface {
   GEO_FENCING: boolean;
   LOG_ENABLED: boolean;
   AUDIO_ROOM: boolean;
-  PRIMARY_ACTION_BRAND_COLOR: string;
-  PRIMARY_ACTION_TEXT_COLOR: string;
-  SECONDARY_ACTION_COLOR: string;
-  FONT_COLOR: string;
-  BG: string;
-  BACKGROUND_COLOR: string;
-  VIDEO_AUDIO_TILE_COLOR: string;
-  VIDEO_AUDIO_TILE_OVERLAY_COLOR: string;
-  VIDEO_AUDIO_TILE_TEXT_COLOR: string;
-  VIDEO_AUDIO_TILE_AVATAR_COLOR: string;
-  SEMANTIC_ERROR: string;
-  SEMANTIC_SUCCESS: string;
-  SEMANTIC_WARNING: string;
-  SEMANTIC_NEUTRAL: string;
-  INPUT_FIELD_BACKGROUND_COLOR: string;
-  INPUT_FIELD_BORDER_COLOR: string;
-  CARD_LAYER_1_COLOR: string;
-  CARD_LAYER_2_COLOR: string;
-  CARD_LAYER_3_COLOR: string;
-  CARD_LAYER_4_COLOR: string;
-  CARD_LAYER_5_COLOR: string;
-  HARD_CODED_BLACK_COLOR: string;
-  ICON_TEXT: boolean;
-  ICON_BG_COLOR: string;
-  TOOLBAR_COLOR: string;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/index.js

@@ -14,11 +14,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import * as Sentry from '@sentry/react-native';
 import App from './src/App';
 import {name as appName} from './app.json';
 
-Sentry.init({
-  dsn: 'https://b5df0450fe284baa8376e62ace331580@o615358.ingest.sentry.io/5749898',
-});
 AppRegistry.registerComponent(appName, () => App);

package/template/index.rsdk.tsx

@@ -18,7 +18,6 @@ import SDKAppWrapper, {
 } from './src/SDKAppWrapper';
 import React from 'react';
 import * as RN from 'react-native-web';
-import './src/assets/font-styles.css';
 
 export * from 'customization-api';
 export * from 'customization-implementation';

package/template/index.web.js

@@ -9,14 +9,8 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import { AppRegistry } from 'react-native';
-import * as Sentry from '@sentry/browser';
+import {AppRegistry} from 'react-native';
 import Video from './src/App';
-import './src/assets/font-styles.css'
-
-Sentry.init({
-  dsn: 'https://b5df0450fe284baa8376e62ace331580@o615358.ingest.sentry.io/5749898',
-});
 
 AppRegistry.registerComponent('App', () => Video);
 

package/template/index.wsdk.tsx

@@ -6,7 +6,7 @@ import SDKAppWrapper, {
 import SDKEvents from './src/utils/SdkEvents';
 import React from 'react';
 import * as RN from 'react-native-web';
-import './src/assets/font-styles.css';
+
 export * from 'customization-api';
 export * from 'customization-implementation';
 

package/template/ios/HelloWorld/Info.plist

@@ -53,18 +53,9 @@
 	<key>NSCameraUsageDescription</key>
 	<string>Camera access</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Mic access</string>
-	<key>UIAppFonts</key>
-	<array>
-		<string>SourceSansPro-Regular.ttf</string>
-		<string>icomoon.ttf</string>
-	</array>
-	<key>UIBackgroundModes</key>
-	<array>
-		<string>audio</string>
-	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -74,12 +65,8 @@
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
-	</array>
-	<key>UISupportedInterfaceOrientations~ipad</key>
-	<array>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
-		<string>UIInterfaceOrientationPortrait</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>

package/template/ios/HelloWorld.xcodeproj/project.pbxproj

@@ -18,8 +18,6 @@
 		65580BB1266EDC8000B310B6 /* File.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65580BB0266EDC8000B310B6 /* File.swift */; };
 		65580BB3266EDD6300B310B6 /* HelloWorld.entitlements in Resources */ = {isa = PBXBuildFile; fileRef = 65580BB2266EDCA400B310B6 /* HelloWorld.entitlements */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
-		49B7B61E43464F098E87335F /* icomoon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FF34150ABA37458FB48221FB /* icomoon.ttf */; };
-		76624C45E19C435BACC727C7 /* SourceSansPro-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -58,8 +56,6 @@
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = HelloWorld/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
-		FF34150ABA37458FB48221FB /* icomoon.ttf */ = {isa = PBXFileReference; name = "icomoon.ttf"; path = "../src/assets/fonts/icomoon.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
-		E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */ = {isa = PBXFileReference; name = "SourceSansPro-Regular.ttf"; path = "../src/assets/fonts/SourceSansPro-Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -152,7 +148,6 @@
 				00E356EF1AD99517003FC87E /* HelloWorldTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
-				A87D6475B3A64BB58397D417 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -170,16 +165,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		A87D6475B3A64BB58397D417 /* Resources */ = {
-			isa = "PBXGroup";
-			children = (
-				FF34150ABA37458FB48221FB /* icomoon.ttf */,
-				E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */,
-			);
-			name = Resources;
-			sourceTree = "<group>";
-			path = "";
-		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -319,8 +304,6 @@
 				65580BB3266EDD6300B310B6 /* HelloWorld.entitlements in Resources */,
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
-				49B7B61E43464F098E87335F /* icomoon.ttf in Resources */,
-				76624C45E19C435BACC727C7 /* SourceSansPro-Regular.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

package/template/metro.config.js

@@ -16,7 +16,7 @@
  * @format
  */
 
-const blacklist = require('metro-config/src/defaults/exclusionList');
+const blacklist = require('metro-config/src/defaults/blacklist');
 
 // blacklist is a function that takes an array of regexes and combines
 // them with the default blacklist to return a single regex.

package/template/package.json

@@ -49,15 +49,10 @@
   },
   "dependencies": {
     "@apollo/client": "3.3.20",
-    "@gorhom/bottom-sheet": "4.4.5",
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-community/async-storage": "1.12.1",
     "@react-native-community/checkbox": "0.4.2",
     "@react-native-community/clipboard": "1.5.1",
-    "@sentry/react": "6.5.1",
-    "@sentry/react-native": "2.4.3",
-    "@sentry/tracing": "6.2.1",
-    "@supersami/rn-foreground-service": "^1.1.1",
-    "agora-react-native-rtm": "1.5.1",
+    "agora-react-native-rtm": "1.5.0",
     "agora-rtc-sdk-ng": "4.14.0",
     "agora-rtm-sdk": "1.4.3-203",
     "electron-log": "4.3.5",
@@ -68,26 +63,19 @@
     "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
     "react-is": "18.0.0",
-    "react-native": "0.64",
+    "react-native": "0.63.5",
     "react-native-agora": "3.7.1",
-    "react-native-gesture-handler": "2.8.0",
     "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",
     "react-native-keep-awake": "4.0.0",
     "react-native-keyboard-manager": "6.5.4-1",
-    "react-native-reanimated": "2.12.0",
     "react-native-responsive-fontsize": "0.5.1",
-    "react-native-svg": "13.6.0",
-    "react-native-vector-icons": "9.2.0",
-    "react-native-walkthrough-tooltip": "1.4.0",
     "react-native-web": "0.14.13",
     "react-router-dom": "5.2.0",
-    "react-router-native": "5.2.0",
-    "react-spring-bottom-sheet": "3.4.1",
-    "react-tooltip": "4.5.1"
+    "react-router-native": "5.2.0"
   },
   "devDependencies": {
     "@babel/core": "7.14.3",
@@ -116,7 +104,6 @@
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-transform-define": "2.0.1",
     "cross-env": "7.0.3",
-    "css-loader": "6.7.2",
     "del": "5.1.0",
     "electron": "16.0.1",
     "electron-builder": "23.6.0",
@@ -134,8 +121,7 @@
     "prettier": "2.3.1",
     "react-devtools-electron": "4.7.0",
     "react-refresh": "0.12.0",
-    "react-test-renderer": "17.0.1",
-    "style-loader": "3.3.1",
+    "react-test-renderer": "16.13.1",
     "ts-loader": "^8.3.0",
     "typescript": "3.9.9",
     "webpack": "5.72.0",