Move to react 19

react/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: [
+        'react-compiler',
+    ],
+    rules: {
+        'react-compiler/react-compiler': 'error',
+    },
+};

react/babel.config.js

@@ -1,6 +1,13 @@
+const ReactCompilerConfig = {
+    'react-compiler/react-compiler': 'error',
+}
+
 module.exports = {
     presets: [
       '@babel/preset-env',
       ['@babel/preset-react', {runtime: 'automatic'}],
     ],
+    plugins: [
+        ['babel-plugin-react-compiler', ReactCompilerConfig],
+    ]
   };

react/package.json

@@ -4,42 +4,43 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
-    "@antmedia/webrtc_adaptor": "2.12.0-SNAPSHOT-2024-Nov-29-04-11",
+    "@antmedia/webrtc_adaptor": "2.12.0",
     "@charkour/react-reactions": "^0.11.0",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.4",
-    "@mui/material": "^6.1.4",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.2.0",
+    "@mui/material": "^6.2.0",
     "emoji-picker-react": "^4.12.0",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206",
     "i18next": "^23.16.2",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-browser-languagedetector": "^8.0.2",
+    "jest-fixed-jsdom": "^0.0.9",
     "jest-websocket-mock": "^2.5.0",
     "lodash": "^4.17.21",
-    "nanoid": "^5.0.7",
-    "notistack": "^3.0.1",
-    "react": "^18.3.1",
+    "nanoid": "^5.0.9",
+    "notistack-v2-maintained": "^2.1.0",
+    "react": "^19.0.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^14.0.5",
-    "react-router-dom": "^6.27.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.1.4",
+    "react-router-dom": "^7.0.2",
     "react-scripts": "^5.0.1",
-    "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1",
     "url": "^0.11.4",
     "use-sound": "^4.0.3",
-    "web-vitals": "^4.2.3",
-    "workbox-background-sync": "^7.1.0",
-    "workbox-broadcast-update": "^7.1.0",
-    "workbox-cacheable-response": "^7.1.0",
-    "workbox-core": "^7.1.0",
-    "workbox-expiration": "^7.1.0",
-    "workbox-google-analytics": "^7.1.0",
-    "workbox-navigation-preload": "^7.1.0",
-    "workbox-precaching": "^7.1.0",
-    "workbox-range-requests": "^7.1.0",
-    "workbox-routing": "^7.1.0",
-    "workbox-strategies": "^7.1.0",
-    "workbox-streams": "^7.1.0"
+    "web-vitals": "^4.2.4",
+    "workbox-background-sync": "^7.3.0",
+    "workbox-broadcast-update": "^7.3.0",
+    "workbox-cacheable-response": "^7.3.0",
+    "workbox-core": "^7.3.0",
+    "workbox-expiration": "^7.3.0",
+    "workbox-google-analytics": "^7.3.0",
+    "workbox-navigation-preload": "^7.3.0",
+    "workbox-precaching": "^7.3.0",
+    "workbox-range-requests": "^7.3.0",
+    "workbox-routing": "^7.3.0",
+    "workbox-strategies": "^7.3.0",
+    "workbox-streams": "^7.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -67,10 +68,12 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "babel-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-preview": "^0.3.1"
   }
-}
+}

react/src/App.js

@@ -3,7 +3,7 @@ import "./App.css";
 import {CssBaseline, ThemeProvider} from "@mui/material";
 import theme from "./styles/theme";
 import React from "react";
-import {SnackbarProvider} from "notistack";
+import {SnackbarProvider} from "notistack-v2-maintained";
 import AntSnackBar from "Components/AntSnackBar";
 import {initReactI18next} from "react-i18next";
 import i18n from "i18next";

react/src/Components/AntSnackBar.js

@@ -1,5 +1,5 @@
 import React, {forwardRef, useCallback} from 'react';
-import {SnackbarContent, useSnackbar} from 'notistack';
+import {SnackbarContent, useSnackbar} from 'notistack-v2-maintained';
 import {styled} from '@mui/material/styles';
 import {Grid, Typography, useTheme} from '@mui/material';
 import {SvgIcon} from './SvgIcon';

react/src/Components/Cards/OthersCard.js

@@ -1,4 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable   */
 import React from "react";
 import Typography from "@mui/material/Typography";
 import Avatar from "@mui/material/Avatar";

react/src/Components/Cards/VideoCard.js

@@ -79,7 +79,7 @@ function VideoCard(props) {
                 }
             }, 1000);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line  
     }, [conference.isPublished]);
 
     const OverlayButton = ({ title, icon, color, onClick, label }) => (

react/src/Components/EffectsTab.js

@@ -5,7 +5,7 @@ import { SvgIcon } from "./SvgIcon";
 import { ConferenceContext } from "pages/AntMedia";
 import {CustomizedBtn} from "./Footer/Components/MicButton";
 import {useTheme} from "@mui/material";
-import {useSnackbar} from "notistack";
+import {useSnackbar} from "notistack-v2-maintained";
 import {useTranslation} from "react-i18next";
 
 function EffectsTab() {
@@ -21,11 +21,11 @@ function EffectsTab() {
     updateCustomVirtualBackgroundImages().then(() => {
       //console.log("Custom virtual background images initialized");
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []); // eslint-disable-line  
 
   React.useEffect(() => {
     getBackgroundImages();
-  }, [customVirtualBackgroundImages]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [customVirtualBackgroundImages]); // eslint-disable-line  
 
   const handleFileChange = (event) => {
     const selectedFile = event.target.files[0];

react/src/Components/Footer/Components/CameraButton.js

@@ -5,7 +5,7 @@ import { SvgIcon } from "../../SvgIcon";
 import { ConferenceContext } from "pages/AntMedia";
 import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useSnackbar } from "notistack";
+import { useSnackbar } from "notistack-v2-maintained";
 
 
 const CustomizedBtn = styled(Button)(({ theme }) => ({

react/src/Components/Footer/Components/InfoButton.js

@@ -7,7 +7,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import { ListItemIcon, ListItemText, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useSnackbar } from 'notistack';
+import { useSnackbar } from 'notistack-v2-maintained';
 import { ConferenceContext } from 'pages/AntMedia';
 
 const StyledListItemText = styled(ListItemText)(({ theme }) => ({

react/src/Components/Footer/Components/LayoutSettingsDialog.js

@@ -85,7 +85,6 @@ export function LayoutSettingsDialog(props) {
 
     if (mode === "tiled") {
       //unpin the pinned video
-      conference.allParticipants = conference.allParticipants || {};
       Object.keys(conference.allParticipants).forEach(streamId => {
         if (typeof conference.allParticipants[streamId].pinned === 'undefined'
           && conference.allParticipants[streamId].pinned === true) {

react/src/Components/Footer/Components/MicButton.js

@@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
 import { SvgIcon } from '../../SvgIcon';
 import { ConferenceContext } from 'pages/AntMedia';
 import { Tooltip } from '@mui/material';
-import { useSnackbar } from 'notistack';
+import { useSnackbar } from 'notistack-v2-maintained';
 import {styled, useTheme} from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 

react/src/Components/Footer/Components/ParticipantListButton.js

@@ -37,7 +37,7 @@ function ParticipantListButton({ footer }) {
                     color={conference?.participantListDrawerOpen ? 'primary' : 'secondary'}
                 >
                     <SvgIcon size={32} color={conference?.participantListDrawerOpen ? '#000' : '#fff'} name={'participants'} />
-                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                  {/* eslint-disable-next-line */}
                     <a style={{color: conference?.participantListDrawerOpen ? '#000' : '#fff'}}>{conference.participantCount}</a>
                 </CustomizedBtn>
             </Tooltip>

react/src/Components/Footer/Components/RequestPublishButton.js

@@ -4,7 +4,7 @@ import { SvgIcon } from '../../SvgIcon';
 import { Tooltip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import { useSnackbar } from 'notistack';
+import { useSnackbar } from 'notistack-v2-maintained';
 import { ConferenceContext} from "../../../pages/AntMedia";
 
 export const roundStyle = {

react/src/Components/Footer/Components/SettingsDialog.js

@@ -63,7 +63,7 @@ export default function SettingsDialog(props) {
       if (audio && (conference.selectedMicrophone === '' || conference.selectedMicrophone === null)) conference.microphoneSelected(audio.deviceId);
       if (conference.selectedBackgroundMode === '') conference.setSelectedBackgroundMode('none');
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line  
   }, [conference.devices]);
 
   return (

react/src/Components/Footer/Footer.js

@@ -45,7 +45,7 @@ const getCustomizedGridStyle = (theme) => {
 const CustomizedGrid = styled(Grid)(({ theme }) => (getCustomizedGridStyle(theme)));
 
 function Footer(props) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // eslint-disable-next-line  
   const id = (isComponentMode()) ? getRootAttribute("data-room-name") : useParams().id;
   const conference = React.useContext(ConferenceContext);
 

react/src/Components/WebSocketProvider.js

@@ -90,7 +90,7 @@ export const WebSocketProvider = ({ children }) => {
                 webSocket.current.close();
                 clearInterval(pingInterval);
             };
-    },[applicationWebSocketUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+    },[applicationWebSocketUrl]); // eslint-disable-line  
 
     const sendMessage = (message) => {
         if (webSocket.current && isWebSocketConnected) {

react/src/__tests__/pages/AntMedia.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, act, waitFor, screen } from '@testing-library/react';
 import AntMedia from 'pages/AntMedia';
 import { useWebSocket } from 'Components/WebSocketProvider';
-import { useSnackbar} from "notistack";
+import { useSnackbar} from "notistack-v2-maintained";
 import { ConferenceContext } from "pages/AntMedia";
 import { ThemeProvider } from '@mui/material/styles';
 import {ThemeList} from "styles/themeList";
@@ -21,8 +21,8 @@ jest.mock('Components/WebSocketProvider', () => ({
   useWebSocket: jest.fn(),
 }));
 
-jest.mock('notistack', () => ({
-  ...jest.requireActual('notistack'),
+jest.mock('notistack-v2-maintained', () => ({
+  ...jest.requireActual('notistack-v2-maintained'),
   useSnackbar: jest.fn(),
   SnackbarProvider: ({ children }) => <div></div>,
 }));

react/src/pages/AntMedia.js

@@ -5,7 +5,7 @@ import WaitingRoom from "./WaitingRoom";
 import _ from "lodash";
 import MeetingRoom from "./MeetingRoom";
 import MessageDrawer from "Components/MessageDrawer";
-import {useSnackbar} from "notistack";
+import {useSnackbar} from "notistack-v2-maintained";
 import LeftTheRoom from "./LeftTheRoom";
 import {getUrlParameter, VideoEffect, WebRTCAdaptor} from "@antmedia/webrtc_adaptor";
 import {SvgIcon} from "../Components/SvgIcon";
@@ -277,7 +277,7 @@ var publishReconnected;
 var playReconnected;
 
 function AntMedia(props) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // eslint-disable-next-line  
   const initialRoomName = (isComponentMode()) ? getRootAttribute("data-room-name") : useParams().id;
   const [roomName, setRoomName] = useState(initialRoomName);
 
@@ -377,7 +377,7 @@ function AntMedia(props) {
         }
       }, 1000);
     }
-  }, [presenterButtonStreamIdInProcess]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [presenterButtonStreamIdInProcess]); // eslint-disable-line  
 
     const {sendMessage, latestMessage, isWebSocketConnected} = useWebSocket();
 
@@ -485,7 +485,7 @@ function AntMedia(props) {
       setParticipantUpdated(!participantUpdated);
       //console.log("setParticipantUpdated due to videoTrackAssignments or allParticipants change.");
     }, 5000);
-  }, [videoTrackAssignments, allParticipants]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [videoTrackAssignments, allParticipants]); // eslint-disable-line  
 
     function handleUnauthorizedDialogExitClicked() {
 
@@ -1050,7 +1050,7 @@ function AntMedia(props) {
                 }
             }, 3000);
         }
-    }, [presenterButtonStreamIdInProcess]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [presenterButtonStreamIdInProcess]); // eslint-disable-line  
 
     function makeParticipantPresenter(streamId) {
         let participantsRole = "";
@@ -1371,7 +1371,7 @@ function AntMedia(props) {
             });
 
      //just run once when component is mounted
-    }, []);  //eslint-disable-line react-hooks/exhaustive-deps
+    }, []);  //eslint-disable-line  
 
     useEffect(() => {
         if (devices.length > 0) {
@@ -1381,7 +1381,7 @@ function AntMedia(props) {
                 setDevices(devices);
             });
         }
-    }, [devices]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [devices]); // eslint-disable-line  
 
     if (webRTCAdaptor) {
         webRTCAdaptor.callback = infoCallback;
@@ -1459,7 +1459,7 @@ function AntMedia(props) {
         }
 
 
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line  
     }, [initialized]);
 
     function checkAndSetIsPinned(streamId, broadcastObject) {
@@ -3014,7 +3014,7 @@ function AntMedia(props) {
                 displayMessage("Recording stopped forcefully due to error: " + definition.message, "white")
             }
         }
-        }, [latestMessage, publishStreamId, displayMessage, handleSendNotificationEvent, updateRoomRecordingStatus]); // eslint-disable-line react-hooks/exhaustive-deps
+        }, [latestMessage, publishStreamId, displayMessage, handleSendNotificationEvent, updateRoomRecordingStatus]); // eslint-disable-line  
 
     const makeFullScreen = (divId) => {
         if (fullScreenId === divId) {

react/src/pages/LayoutPinned.js

@@ -1,4 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable   */
 import VideoCard from "Components/Cards/VideoCard";
 import OthersCard from "Components/Cards/OthersCard";
 import React from "react";

react/src/pages/LayoutTiled.js

@@ -1,4 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable   */
 import VideoCard from "Components/Cards/VideoCard";
 import OthersCard from "Components/Cards/OthersCard";
 import React from "react";

react/src/pages/LeftTheRoom.js

@@ -12,7 +12,7 @@ function useWidth() {
   const keys = [...theme.breakpoints.keys].reverse();
   return (
     keys.reduce((output, key) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
+      // eslint-disable-next-line  
       const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;
     }, null) || 'xs'
@@ -28,7 +28,7 @@ function LeftTheRoom({ withError : leaveRoomWithError }) {
 
   React.useEffect(() => {
     conference.handleLeaveFromRoom();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line  
   }, []);
   const message = leaveRoomWithError !== null ? t('Something Went Wrong') : t('You have left the meeting');
 

react/src/pages/MeetingRoom.js

@@ -1,4 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable   */
 import VideoCard from "Components/Cards/VideoCard";
 import React from "react";
 import Footer from "Components/Footer/Footer";