Upgrade fluentui/react to 8.122.9 and fix VideoOff2 icon

Sharif Rahaman · Sharif Rahaman · commit fa696cb8996e · 2025-02-10T11:35:56.000-08:00
diff --git a/Project/package-lock.json b/Project/package-lock.json
diff --git a/Project/package.json b/Project/package.json
@@ -3,15 +3,16 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@azure/communication-calling": "1.27.1-beta.1",
+    "@azure/communication-calling": "1.33.2-beta.1",
     "@azure/communication-calling-effects": "1.1.1-beta.1",
     "@azure/communication-common": "^2.3.0",
     "@azure/communication-identity": "^1.3.0",
     "@azure/communication-network-traversal": "^1.1.0-beta.1",
     "@azure/logger": "^1.0.3",
     "@azure/msal-browser": "^2.33.0",
     "@azure/msal-node": "^1.17.1",
-    "@fluentui/react": "^7.158.1",
+    "@fluentui/react": "^8.122.9",
+    "@fluentui/react-icons-mdl2": "^1.3.82",
     "@microsoft/applicationinsights-web": "^3.0.2",
     "pako": "^2.1.0",
     "react": "^16.14.0",
diff --git a/Project/src/App.js b/Project/src/App.js
@@ -1,10 +1,18 @@
 import React, { useState } from 'react';
 import './App.css';
 import MakeCall from './MakeCall/MakeCall'
-import { initializeIcons } from '@uifabric/icons';
+import { initializeIcons } from '@fluentui/font-icons-mdl2';
+import { registerIcons } from '@fluentui/react/lib/Styling';
+import { VideoOff2Icon } from '@fluentui/react-icons-mdl2';
 import { ToastContainer } from 'react-toastify';
 
-initializeIcons('https://res.cdn.office.net/files/fabric-cdn-prod_20241209.001/assets/icons/');
+initializeIcons();
+// VideoOff2 is not available in fluentui/react-icons-mdl2. So we need to use fluentui/font-icons-mdl2 to register the icon and use it.
+registerIcons({
+  icons: {
+    VideoOff2: <VideoOff2Icon style={{verticalAlign: 'baseline'}} />
+  }
+});
 
 function App() {
   let [users, setUsers] = useState([<MakeCall/>]);
diff --git a/Project/src/MakeCall/AddParticipantPopover.js b/Project/src/MakeCall/AddParticipantPopover.js
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { PrimaryButton, TextField } from 'office-ui-fabric-react';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
+import { TextField } from '@fluentui/react/lib/TextField';
 import { CallKind } from "@azure/communication-calling";
 import { createIdentifierFromRawId } from '@azure/communication-common';
 
diff --git a/Project/src/MakeCall/CallCaption.js b/Project/src/MakeCall/CallCaption.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Features } from '@azure/communication-calling';
-import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { Dropdown } from '@fluentui/react/lib/Dropdown';
 
 // CallCaption react function component
 const CallCaption = ({ call }) => {
diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
@@ -1,12 +1,12 @@
 import React from "react";
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react'
+import { MessageBar, MessageBarType } from '@fluentui/react'
 import { FunctionalStreamRenderer as StreamRenderer } from "./FunctionalStreamRenderer";
 import AddParticipantPopover from "./AddParticipantPopover";
 import RemoteParticipantCard from "./RemoteParticipantCard";
-import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { Panel, PanelType } from '@fluentui/react/lib/Panel';
 import { Icon } from '@fluentui/react/lib/Icon';
 import LocalVideoPreviewCard from './LocalVideoPreviewCard';
-import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { Dropdown } from '@fluentui/react/lib/Dropdown';
 import { LocalVideoStream, Features, LocalAudioStream } from '@azure/communication-calling';
 import { utils } from '../Utils/Utils';
 import CustomVideoEffects from "./RawVideoAccess/CustomVideoEffects";
@@ -1545,18 +1545,7 @@ export default class CallCard extends React.Component {
                             title = {`${this.state.canOnVideo ? (this.state.videoOn ? 'Turn your video off' : 'Turn your video on') : 'Video is disabled'}`}
                             variant="secondary"
                             onClick={() => this.handleVideoOnOff()}>
-                            {
-                                this.state.canOnVideo && this.state.videoOn &&
-                                <Icon iconName="Video" />
-                            }
-                            {
-                                (this.state.canOnVideo && !this.state.videoOn) &&
-                                <Icon iconName="VideoOff2" />
-                            }
-                            {
-                                (!this.state.canOnVideo) &&
-                                <Icon iconName="VideoOff" />
-                            }
+                                <Icon iconName={`${this.state.canOnVideo ? (this.state.videoOn ? 'Video' : 'VideoOff2') : 'VideoOff'}`} />
                         </span>
                         <span className="in-call-button"
                             title={`${this.state.canUnMuteMic ? (this.state.micMuted ? 'Unmute your microphone' : 'Mute your microphone') : 'Microphone is disabled'}`}
diff --git a/Project/src/MakeCall/CallSurvey.js b/Project/src/MakeCall/CallSurvey.js
@@ -1,12 +1,12 @@
 import React from "react";
 import {
     PrimaryButton
-} from 'office-ui-fabric-react'
+} from '@fluentui/react/lib/Button'
 import StarRating from '../MakeCall/StarRating';
 import { Features } from '@azure/communication-calling';
 import config from '../../clientConfig.json';
 import { ApplicationInsights } from '@microsoft/applicationinsights-web';
-import { TextField } from 'office-ui-fabric-react';
+import { TextField } from '@fluentui/react/lib/TextField';
 
 export default class CallSurvey extends React.Component {
     constructor(props) {
diff --git a/Project/src/MakeCall/DataChannelCard.js b/Project/src/MakeCall/DataChannelCard.js
@@ -2,7 +2,9 @@ import React from "react";
 import { ToastContainer, toast } from 'react-toastify';
 import { Features } from '@azure/communication-calling';
 import 'react-toastify/dist/ReactToastify.css';
-import { PrimaryButton, TextField } from 'office-ui-fabric-react';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
+import { TextField } from '@fluentui/react/lib/TextField';
+
 import { utils } from '../Utils/Utils';
 
 const toastOptions = {
diff --git a/Project/src/MakeCall/Lobby.js b/Project/src/MakeCall/Lobby.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { PrimaryButton } from 'office-ui-fabric-react';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
 import { Features } from '@azure/communication-calling';
 
 // Lobby react function component
diff --git a/Project/src/MakeCall/Login.js b/Project/src/MakeCall/Login.js
@@ -1,8 +1,7 @@
 import React from "react";
-import {
-    TextField, PrimaryButton, Checkbox,
-    MessageBar, MessageBarType
-} from 'office-ui-fabric-react'
+import { Checkbox, MessageBar, MessageBarType } from '@fluentui/react';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
+import { TextField } from '@fluentui/react/lib/TextField';
 import { Features } from "@azure/communication-calling";
 import { utils } from "../Utils/Utils";
 import { v4 as uuid } from 'uuid';
diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js
@@ -1,12 +1,9 @@
 import React from "react";
 import { CallClient, LocalVideoStream, Features, CallAgentKind, VideoStreamRenderer } from '@azure/communication-calling';
 import { AzureCommunicationTokenCredential, createIdentifierFromRawId} from '@azure/communication-common';
-import {
-    PrimaryButton,
-    TextField,
-    MessageBar,
-    MessageBarType
-} from 'office-ui-fabric-react'
+import { PrimaryButton } from '@fluentui/react/lib/Button';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { MessageBar, MessageBarType } from '@fluentui/react';
 import { Icon } from '@fluentui/react/lib/Icon';
 import IncomingCallCard from './IncomingCallCard';
 import CallCard from '../MakeCall/CallCard';
diff --git a/Project/src/MakeCall/MediaConstraint.js b/Project/src/MakeCall/MediaConstraint.js
@@ -1,5 +1,6 @@
 import React from "react";
-import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { Dropdown } from '@fluentui/react/lib/Dropdown';
+
 
 export default class MediaConstraint extends React.Component {
     constructor(props) {
diff --git a/Project/src/MakeCall/NetworkConfiguration/ProxyConfiguration.js b/Project/src/MakeCall/NetworkConfiguration/ProxyConfiguration.js
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
-import {
-    TextField,
-    PrimaryButton,
-    Checkbox
-} from 'office-ui-fabric-react';
+import { Checkbox } from '@fluentui/react';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
+import { TextField } from '@fluentui/react/lib/TextField';
 
 export const ProxyConfiguration = (props) => {
     const [proxyUrl, setProxyUrl] = useState('');
diff --git a/Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js b/Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
-import {
-    TextField,
-    PrimaryButton,
-    Checkbox
-} from 'office-ui-fabric-react';
+import { Checkbox } from '@fluentui/react';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
+import { TextField } from '@fluentui/react/lib/TextField';
 
 export const TurnConfiguration = (props) => {
     const [turnUrls, setTurnUrls] = useState('');
diff --git a/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js b/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { PrimaryButton } from 'office-ui-fabric-react'
+import { PrimaryButton } from '@fluentui/react/lib/Button'
 
 export default class CustomVideoEffects extends React.Component {
 
diff --git a/Project/src/MakeCall/RealTimeTextCard.js b/Project/src/MakeCall/RealTimeTextCard.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Features } from '@azure/communication-calling';
-import { PrimaryButton } from 'office-ui-fabric-react/lib/components/Button';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
 
 // RealTimeText react function component
 const RealTimeTextCard = ({ call, state }) => {
diff --git a/Project/src/MakeCall/RemoteParticipantCard.js b/Project/src/MakeCall/RemoteParticipantCard.js
@@ -1,6 +1,6 @@
 import React, { useEffect, createRef } from "react";
 import { utils } from '../Utils/Utils';
-import { Persona, PersonaSize } from 'office-ui-fabric-react';
+import { Persona, PersonaSize } from '@fluentui/react/lib/Persona';
 import { Icon } from '@fluentui/react/lib/Icon';
 import {
     isCommunicationUserIdentifier,
diff --git a/Project/src/MakeCall/Section.js b/Project/src/MakeCall/Section.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Depths } from '@uifabric/fluent-theme/lib/fluent/FluentDepths';
-import { PrimaryButton } from 'office-ui-fabric-react'
+import { PrimaryButton } from '@fluentui/react/lib/Button'
 
 export default class Section extends React.Component {
     constructor(props) {
diff --git a/Project/src/MakeCall/StarRating.js b/Project/src/MakeCall/StarRating.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Icon } from '@fluentui/react/lib/Icon';
-import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { Dropdown } from '@fluentui/react/lib/Dropdown';
 
 export default class StarRating extends React.Component {
     constructor(props) {
diff --git a/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js b/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { PrimaryButton, Dropdown } from 'office-ui-fabric-react';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
+import { Dropdown } from '@fluentui/react/lib/Dropdown';
 import { Features } from '@azure/communication-calling';
 import { BackgroundBlurEffect, BackgroundReplacementEffect } from '@azure/communication-calling-effects';
 import VideoEffectsImagePicker from './VideoEffectsImagePicker';
