From f0b7768bb14de6067b2068e84b521b9331101e60 Mon Sep 17 00:00:00 2001 From: Sharif Rahaman Date: Fri, 31 Jan 2025 21:18:29 -0800 Subject: [PATCH 1/2] Remove duplicate icon --- Project/src/MakeCall/CallCard.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js index 76e489a..7f2c9d5 100644 --- a/Project/src/MakeCall/CallCard.js +++ b/Project/src/MakeCall/CallCard.js @@ -1550,11 +1550,7 @@ export default class CallCard extends React.Component { } { - (this.state.canOnVideo || !this.state.videoOn) && - - } - { - (!this.state.canOnVideo) && + !this.state.videoOn && } From fa696cb8996e55dfcc13815b351b8e1b51cf4c91 Mon Sep 17 00:00:00 2001 From: Sharif Rahaman Date: Mon, 10 Feb 2025 11:35:56 -0800 Subject: [PATCH 2/2] Upgrade fluentui/react to 8.122.9 and fix VideoOff2 icon --- Project/package-lock.json | 548 +++++++----------- Project/package.json | 5 +- Project/src/App.js | 12 +- Project/src/MakeCall/AddParticipantPopover.js | 3 +- Project/src/MakeCall/CallCaption.js | 2 +- Project/src/MakeCall/CallCard.js | 19 +- Project/src/MakeCall/CallSurvey.js | 4 +- Project/src/MakeCall/DataChannelCard.js | 4 +- Project/src/MakeCall/Lobby.js | 2 +- Project/src/MakeCall/Login.js | 7 +- Project/src/MakeCall/MakeCall.js | 9 +- Project/src/MakeCall/MediaConstraint.js | 3 +- .../ProxyConfiguration.js | 8 +- .../NetworkConfiguration/TurnConfiguration.js | 8 +- .../RawVideoAccess/CustomVideoEffects.js | 2 +- Project/src/MakeCall/RealTimeTextCard.js | 2 +- Project/src/MakeCall/RemoteParticipantCard.js | 2 +- Project/src/MakeCall/Section.js | 2 +- Project/src/MakeCall/StarRating.js | 2 +- .../VideoEffects/VideoEffectsContainer.js | 3 +- 20 files changed, 252 insertions(+), 395 deletions(-) diff --git a/Project/package-lock.json b/Project/package-lock.json index 0354e53..70c965e 100644 --- a/Project/package-lock.json +++ b/Project/package-lock.json @@ -8,7 +8,7 @@ "name": "ACSCallingSample", "version": "1.0.0", "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", @@ -16,7 +16,8 @@ "@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", @@ -67,9 +68,9 @@ } }, "node_modules/@azure/communication-calling": { - "version": "1.27.1-beta.1", - "resolved": "https://registry.npmjs.org/@azure/communication-calling/-/communication-calling-1.27.1-beta.1.tgz", - "integrity": "sha512-XWQ5Udgt5TiVJETa+jJKZ7u40iPeHe+l92WZRpTVoqNcIKw/IFdKkkb8jtf/7N8mzDt8jVVQG9GLOQRpa+uvnw==", + "version": "1.33.2-beta.1", + "resolved": "https://registry.npmjs.org/@azure/communication-calling/-/communication-calling-1.33.2-beta.1.tgz", + "integrity": "sha512-kwMh8RF65dJkk+SDog+DtMD/UZWxDvObd+OSatBQmsFOX6rwAc5NVik0iyqnLk8bm+5Xdieb6AotQaKDgOd4zg==", "dependencies": { "@azure/communication-common": "^2.3.0", "@azure/logger": "^1.0.3" @@ -2120,197 +2121,233 @@ } }, "node_modules/@fluentui/date-time-utilities": { - "version": "7.9.1", - "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-7.9.1.tgz", - "integrity": "sha512-o8iU1VIY+QsqVRWARKiky29fh4KR1xaKSgMClXIi65qkt8EDDhjmlzL0KVDEoDA2GWukwb/1PpaVCWDg4v3cUQ==", + "version": "8.6.9", + "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.6.9.tgz", + "integrity": "sha512-dgOlVm4nXBWDLqijmvn4iAtyv1hVpQZjN6p0So74BW+7ASUTkQGe3lf8PHV/OjBiXfZa4qwONvmTQBGCheNU0w==", "dependencies": { - "@uifabric/set-version": "^7.0.24", - "tslib": "^1.10.0" + "@fluentui/set-version": "^8.2.23", + "tslib": "^2.1.0" } }, - "node_modules/@fluentui/date-time-utilities/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, "node_modules/@fluentui/dom-utilities": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-1.1.2.tgz", - "integrity": "sha512-XqPS7l3YoMwxdNlaYF6S2Mp0K3FmVIOIy2K3YkMc+eRxu9wFK6emr2Q/3rBhtG5u/On37NExRT7/5CTLnoi9gw==", + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.3.9.tgz", + "integrity": "sha512-8PPzv31VXnyMvZrzK7iSGPRx8piJjas0xV+qaNQ1tzAXHuTaLXPeADJK/gEDH1XA/e9Vaakb3lPUpRVa8tal+w==", + "dependencies": { + "@fluentui/set-version": "^8.2.23", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/font-icons-mdl2": { + "version": "8.5.57", + "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.57.tgz", + "integrity": "sha512-HYB+deey6wt6qHtTKdrhPhTZi7ZZVI2IwlguabK+22LzixgSdeJ0sg5Hhau5IKFwrn8ExEFOwfoaZ6KCSbcMwQ==", "dependencies": { - "@uifabric/set-version": "^7.0.24", - "tslib": "^1.10.0" + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.6", + "@fluentui/utilities": "^8.15.19", + "tslib": "^2.1.0" } }, - "node_modules/@fluentui/dom-utilities/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + "node_modules/@fluentui/foundation-legacy": { + "version": "8.4.23", + "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.4.23.tgz", + "integrity": "sha512-lWFouH1+vku2LgKaZUhuBNyoXJ7DByUIMXHF7Osgq/miN8ewHt5uez8LuuSHDgCytxksCY4usCMIIL2zJD0I6w==", + "dependencies": { + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.6", + "@fluentui/utilities": "^8.15.19", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } }, "node_modules/@fluentui/keyboard-key": { - "version": "0.2.17", - "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.2.17.tgz", - "integrity": "sha512-iT1bU56rKrKEOfODoW6fScY11qj3iaYrZ+z11T6fo5+TDm84UGkkXjLXJTE57ZJzg0/gbccHQWYv+chY7bJN8Q==", + "version": "0.4.23", + "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.4.23.tgz", + "integrity": "sha512-9GXeyUqNJUdg5JiQUZeGPiKnRzMRi9YEUn1l9zq6X/imYdMhxHrxpVZS12129cBfgvPyxt9ceJpywSfmLWqlKA==", "dependencies": { - "tslib": "^1.10.0" + "tslib": "^2.1.0" } }, - "node_modules/@fluentui/keyboard-key/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + "node_modules/@fluentui/merge-styles": { + "version": "8.6.13", + "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.6.13.tgz", + "integrity": "sha512-IWgvi2CC+mcQ7/YlCvRjsmHL2+PUz7q+Pa2Rqk3a+QHN0V1uBvgIbKk5y/Y/awwDXy1yJHiqMCcDHjBNmS1d4A==", + "dependencies": { + "@fluentui/set-version": "^8.2.23", + "tslib": "^2.1.0" + } }, "node_modules/@fluentui/react": { - "version": "7.204.0", - "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-7.204.0.tgz", - "integrity": "sha512-WQKHcO6cboGO0eCPsiNSzUwnMWBmAvdltu4X0tvXwb+q8W3wZzCQiU1voDVYNm4Nz/Jgiiy8jbMcesmNAq7jsw==", - "dependencies": { - "@uifabric/set-version": "^7.0.24", - "office-ui-fabric-react": "^7.204.0", - "tslib": "^1.10.0" + "version": "8.122.9", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.122.9.tgz", + "integrity": "sha512-sjVAx/YeU/xtr9fqEEGeOeA2MVoFU3PU3lxYGtqUtoW7P/dsRjf/LCV7w9Y3ywKcDrStO4lJMsYamJSKO+T90w==", + "dependencies": { + "@fluentui/date-time-utilities": "^8.6.9", + "@fluentui/font-icons-mdl2": "^8.5.57", + "@fluentui/foundation-legacy": "^8.4.23", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/react-focus": "^8.9.20", + "@fluentui/react-hooks": "^8.8.16", + "@fluentui/react-portal-compat-context": "^9.0.13", + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.6", + "@fluentui/theme": "^2.6.64", + "@fluentui/utilities": "^8.15.19", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" }, "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" + "@types/react": ">=16.8.0 <19.0.0", + "@types/react-dom": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0", + "react-dom": ">=16.8.0 <19.0.0" } }, - "node_modules/@fluentui/react-compose": { - "version": "0.19.24", - "resolved": "https://registry.npmjs.org/@fluentui/react-compose/-/react-compose-0.19.24.tgz", - "integrity": "sha512-4PO7WSIZjwBGObpknjK8d1+PhPHJGSlVSXKFHGEoBjLWVlCTMw6Xa1S4+3K6eE3TEBbe9rsqwwocMTFHjhWwtQ==", + "node_modules/@fluentui/react-focus": { + "version": "8.9.20", + "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.9.20.tgz", + "integrity": "sha512-eOYKohP5v82jUAeEj7Mscqy5Tt4DhgTsVwf+cejj3AGhvLfFfmUbJFmVClooqXFdMgm1vvPGdub8SHA02REVkg==", "dependencies": { - "@types/classnames": "^2.2.9", - "@uifabric/set-version": "^7.0.24", - "@uifabric/utilities": "^7.38.2", - "classnames": "^2.2.6", - "tslib": "^1.10.0" + "@fluentui/keyboard-key": "^0.4.23", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.6", + "@fluentui/utilities": "^8.15.19", + "tslib": "^2.1.0" }, "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0" + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" } }, - "node_modules/@fluentui/react-compose/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@fluentui/react-focus": { - "version": "7.18.17", - "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-7.18.17.tgz", - "integrity": "sha512-W+sLIhX7wLzMsJ0jhBrDAblkG3DNbRbF8UoSieRVdAAm7xVf5HpiwJ6tb6nGqcFOnpRh8y+fjyVM+dV3K6GNHA==", + "node_modules/@fluentui/react-hooks": { + "version": "8.8.16", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.8.16.tgz", + "integrity": "sha512-PQ1BeOp+99mdO0g7j6QLtChfXG1LxXeHG0q5CtUeD1OUGR+vUDK84h60sw7e7qU9sSmvPmHO7jn69Lg3CS+DXw==", "dependencies": { - "@fluentui/keyboard-key": "^0.2.12", - "@uifabric/merge-styles": "^7.20.2", - "@uifabric/set-version": "^7.0.24", - "@uifabric/styling": "^7.25.1", - "@uifabric/utilities": "^7.38.2", - "tslib": "^1.10.0" + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", + "@fluentui/utilities": "^8.15.19", + "tslib": "^2.1.0" }, "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" } }, - "node_modules/@fluentui/react-focus/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@fluentui/react-stylesheets": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/@fluentui/react-stylesheets/-/react-stylesheets-0.2.9.tgz", - "integrity": "sha512-6GDU/cUEG/eJ4owqQXDWPmP5L1zNh2NLEDKdEzxd7cWtGnoXLeMjbs4vF4t5wYGzGaxZmUQILOvJdgCIuc9L9Q==", + "node_modules/@fluentui/react-icons-mdl2": { + "version": "1.3.82", + "resolved": "https://registry.npmjs.org/@fluentui/react-icons-mdl2/-/react-icons-mdl2-1.3.82.tgz", + "integrity": "sha512-+CcCqwUai5g6gnC2LgWunIriZ3eJMRic8YnvB5QVoe1RI6vEesHvGZTD4EuWjzqngbxbJyDD5LQDolZH4XuMhg==", "dependencies": { - "@uifabric/set-version": "^7.0.24", - "tslib": "^1.10.0" + "@fluentui/react-icon-provider": "^1.3.78", + "@fluentui/set-version": "^8.2.23", + "@fluentui/utilities": "^8.15.19", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" }, "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0" + "react": ">=16.8.0 <19.0.0" } }, - "node_modules/@fluentui/react-stylesheets/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@fluentui/react-theme-provider": { - "version": "0.19.16", - "resolved": "https://registry.npmjs.org/@fluentui/react-theme-provider/-/react-theme-provider-0.19.16.tgz", - "integrity": "sha512-Kf7z4ZfNLS/onaFL5eQDSlizgwy2ytn6SDyjEKV+9VhxIXdDtOh8AaMXWE7dsj1cRBfBUvuGPVnsnoaGdHxJ+A==", + "node_modules/@fluentui/react-icons-mdl2/node_modules/@fluentui/react-icon-provider": { + "version": "1.3.78", + "resolved": "https://registry.npmjs.org/@fluentui/react-icon-provider/-/react-icon-provider-1.3.78.tgz", + "integrity": "sha512-TsIsnAn4f8MhPpw6yiWwEmf8wQWj/yBUHTINBitx8JNL9PitUV9Bq4h7trAG97z59z6bCKX/Uyn6LvoeGR9gLQ==", "dependencies": { - "@fluentui/react-compose": "^0.19.24", - "@fluentui/react-stylesheets": "^0.2.9", - "@fluentui/react-window-provider": "^1.0.6", - "@fluentui/theme": "^1.7.13", - "@uifabric/merge-styles": "^7.20.2", - "@uifabric/react-hooks": "^7.16.4", - "@uifabric/set-version": "^7.0.24", - "@uifabric/utilities": "^7.38.2", - "classnames": "^2.2.6", - "tslib": "^1.10.0" + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.6", + "tslib": "^2.1.0" }, "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0" + "@types/react": ">=16.8.0 <19.0.0", + "@types/react-dom": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0", + "react-dom": ">=16.8.0 <19.0.0" } }, - "node_modules/@fluentui/react-theme-provider/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + "node_modules/@fluentui/react-portal-compat-context": { + "version": "9.0.13", + "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.13.tgz", + "integrity": "sha512-N+c6Qs775jnr/4WIzsQuNaRu4v16fa+gGsOCzzU1bqxX0IR9BSjjO2oLGC6luaAOqlQP+JIwn/aumOIJICKXkA==", + "dependencies": { + "@swc/helpers": "^0.5.1" + }, + "peerDependencies": { + "@types/react": ">=16.14.0 <19.0.0", + "react": ">=16.14.0 <19.0.0" + } }, "node_modules/@fluentui/react-window-provider": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-1.0.6.tgz", - "integrity": "sha512-m2HoxhU2m/yWxUauf79y+XZvrrWNx+bMi7ZiL6DjiAKHjTSa8KOyvicbOXd/3dvuVzOaNTnLDdZAvhRFcelOIA==", + "version": "2.2.28", + "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.28.tgz", + "integrity": "sha512-YdZ74HTaoDwlvLDzoBST80/17ExIl93tLJpTxnqK5jlJOAUVQ+mxLPF2HQEJq+SZr5IMXHsQ56w/KaZVRn72YA==", "dependencies": { - "@uifabric/set-version": "^7.0.24", - "tslib": "^1.10.0" + "@fluentui/set-version": "^8.2.23", + "tslib": "^2.1.0" }, "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" } }, - "node_modules/@fluentui/react-window-provider/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + "node_modules/@fluentui/set-version": { + "version": "8.2.23", + "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.23.tgz", + "integrity": "sha512-VPXaBsiaa3Xn/AY40nLU9bvDQ62lpMVnFzFTlQ8CbpdwrjxNlRxDUY5vRToNzp1+Zu5gD/+CgsXqIZGcry5L5w==", + "dependencies": { + "tslib": "^2.1.0" + } }, - "node_modules/@fluentui/react/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + "node_modules/@fluentui/style-utilities": { + "version": "8.11.6", + "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.11.6.tgz", + "integrity": "sha512-bVFu/ONP2+GZ/JzR6NhN7+1fuMHvi+LjOfgo21HQoDakY/KwFaitLiQBQFlRpbRUVcZXQDqe4Ur6EDFAlb2I7Q==", + "dependencies": { + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/theme": "^2.6.64", + "@fluentui/utilities": "^8.15.19", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" + } }, "node_modules/@fluentui/theme": { - "version": "1.7.13", - "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-1.7.13.tgz", - "integrity": "sha512-/1ZDHZNzV7Wgohay47DL9TAH4uuib5+B2D6Rxoc3T6ULoWcFzwLeVb+VZB/WOCTUbG+NGTrmsWPBOz5+lbuOxA==", + "version": "2.6.64", + "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.6.64.tgz", + "integrity": "sha512-cjzwPgq3Zsw4F6Xy7A7yN8WCeEXKTwk9lfJzEr5b00euJRuPMxkxesBbAWW43+/1l1eWVYmSm4GcEMDVD4BfXQ==", "dependencies": { - "@uifabric/merge-styles": "^7.20.2", - "@uifabric/set-version": "^7.0.24", - "@uifabric/utilities": "^7.38.2", - "tslib": "^1.10.0" + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/utilities": "^8.15.19", + "tslib": "^2.1.0" }, "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" } }, - "node_modules/@fluentui/theme/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + "node_modules/@fluentui/utilities": { + "version": "8.15.19", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.15.19.tgz", + "integrity": "sha512-20WoYz0wW7pkmur+7qxTwRfvkdAnHfylLdCYSm91WLupb0cwQ1wWZWIuyo+e0cjcvem1T9TC1+NjWs0kavTWBg==", + "dependencies": { + "@fluentui/dom-utilities": "^2.3.9", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", @@ -2545,6 +2582,14 @@ "node": ">=8.0.0" } }, + "node_modules/@swc/helpers": { + "version": "0.5.15", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", + "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==", + "dependencies": { + "tslib": "^2.8.0" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -2572,15 +2617,6 @@ "@types/node": "*" } }, - "node_modules/@types/classnames": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz", - "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==", - "deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.", - "dependencies": { - "classnames": "*" - } - }, "node_modules/@types/connect": { "version": "3.4.36", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz", @@ -2698,9 +2734,9 @@ } }, "node_modules/@types/prop-types": { - "version": "15.7.7", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.7.tgz", - "integrity": "sha512-FbtmBWCcSa2J4zL781Zf1p5YUBXQomPEcep9QZCfRfQgTxz3pJWiDFLebohZ9fFntX5ibzOkSsrJ0TEew8cAog==", + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", "peer": true }, "node_modules/@types/qs": { @@ -2716,23 +2752,22 @@ "dev": true }, "node_modules/@types/react": { - "version": "17.0.66", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.66.tgz", - "integrity": "sha512-azQzO1tuioq9M4vVKzzdBgG5KfLhyocYkRlJMBDcrJ7bUzyjR7QIGbZk2zH7sB5KpXRWoZJQ3CznVyhDS/swxA==", + "version": "18.3.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", + "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", "peer": true, "dependencies": { "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "17.0.21", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.21.tgz", - "integrity": "sha512-3rQEFUNUUz2MYiRwJJj6UekcW7rFLOtmK7ajQP7qJpjNdggInl3I/xM4I3Hq1yYPdCGVMgax1gZsB7BBTtayXg==", + "version": "18.3.5", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz", + "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==", "peer": true, - "dependencies": { - "@types/react": "^17" + "peerDependencies": { + "@types/react": "^18.0.0" } }, "node_modules/@types/retry": { @@ -2741,12 +2776,6 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, - "node_modules/@types/scheduler": { - "version": "0.16.4", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz", - "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==", - "peer": true - }, "node_modules/@types/send": { "version": "0.17.2", "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.2.tgz", @@ -2803,135 +2832,6 @@ "@types/node": "*" } }, - "node_modules/@uifabric/foundation": { - "version": "7.10.16", - "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.10.16.tgz", - "integrity": "sha512-x13xS9aKh6FEWsyQP2jrjyiXmUUdgyuAfWKMLhUTK4Rsc+vJANwwVk4fqGsU021WA6pghcIirvEVpWf5MlykDQ==", - "dependencies": { - "@uifabric/merge-styles": "^7.20.2", - "@uifabric/set-version": "^7.0.24", - "@uifabric/styling": "^7.25.1", - "@uifabric/utilities": "^7.38.2", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" - } - }, - "node_modules/@uifabric/foundation/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@uifabric/icons": { - "version": "7.9.5", - "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-7.9.5.tgz", - "integrity": "sha512-0e2fEURtR7sNqoGr9gU/pzcOp24B/Lkdc05s1BSnIgXlaL2QxRszfaEsl3/E9vsNmqA3tvRwDJWbtRolDbjCpQ==", - "dependencies": { - "@uifabric/set-version": "^7.0.24", - "@uifabric/styling": "^7.25.1", - "@uifabric/utilities": "^7.38.2", - "tslib": "^1.10.0" - } - }, - "node_modules/@uifabric/icons/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@uifabric/merge-styles": { - "version": "7.20.2", - "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.20.2.tgz", - "integrity": "sha512-cJy8hW9smlWOKgz9xSDMCz/A0yMl4mdo466pcGlIOn84vz+e94grfA7OoTuTzg3Cl0Gj6ODBSf1o0ZwIXYL1Xg==", - "dependencies": { - "@uifabric/set-version": "^7.0.24", - "tslib": "^1.10.0" - } - }, - "node_modules/@uifabric/merge-styles/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@uifabric/react-hooks": { - "version": "7.16.4", - "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.16.4.tgz", - "integrity": "sha512-k8RJYTMICWA6varT5Y+oCf2VDHHXN0tC2GuPD4I2XqYCTLaXtNCm4+dMcVA2x8mv1HIO7khvm/8aqKheU/tDfQ==", - "dependencies": { - "@fluentui/react-window-provider": "^1.0.6", - "@uifabric/set-version": "^7.0.24", - "@uifabric/utilities": "^7.38.2", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" - } - }, - "node_modules/@uifabric/react-hooks/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@uifabric/set-version": { - "version": "7.0.24", - "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.24.tgz", - "integrity": "sha512-t0Pt21dRqdC707/ConVJC0WvcQ/KF7tKLU8AZY7YdjgJpMHi1c0C427DB4jfUY19I92f60LOQyhJ4efH+KpFEg==", - "dependencies": { - "tslib": "^1.10.0" - } - }, - "node_modules/@uifabric/set-version/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@uifabric/styling": { - "version": "7.25.1", - "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.25.1.tgz", - "integrity": "sha512-bd4QDYyb0AS0+KmzrB8VsAfOkxZg0dpEpF1YN5Ben10COmT8L1DoE4bEF5NvybHEaoTd3SKxpJ42m+ceNzehSw==", - "dependencies": { - "@fluentui/theme": "^1.7.13", - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/merge-styles": "^7.20.2", - "@uifabric/set-version": "^7.0.24", - "@uifabric/utilities": "^7.38.2", - "tslib": "^1.10.0" - } - }, - "node_modules/@uifabric/styling/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@uifabric/utilities": { - "version": "7.38.2", - "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.38.2.tgz", - "integrity": "sha512-5yM4sm142VEBg3/Q5SFheBXqnrZi9CNF5rjHNoex0GgGtG3AHPuS7U8gjm+/Io1MvbuCrn6lyyIw0MDvh1Ebkw==", - "dependencies": { - "@fluentui/dom-utilities": "^1.1.2", - "@uifabric/merge-styles": "^7.20.2", - "@uifabric/set-version": "^7.0.24", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" - } - }, - "node_modules/@uifabric/utilities/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, "node_modules/@webassemblyjs/ast": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", @@ -3632,11 +3532,6 @@ "node": ">=6.0" } }, - "node_modules/classnames": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" - }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -3979,9 +3874,9 @@ } }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "peer": true }, "node_modules/debug": { @@ -5819,39 +5714,6 @@ "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==", "dev": true }, - "node_modules/office-ui-fabric-react": { - "version": "7.204.0", - "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.204.0.tgz", - "integrity": "sha512-W1xIsYEwxPrGYojvVtGTGvSfdnUoPEm8w6hhMlW/uFr5YwIB1isG/dVk4IZxWbcbea7612u059p+jRf+RjPW0w==", - "dependencies": { - "@fluentui/date-time-utilities": "^7.9.1", - "@fluentui/react-focus": "^7.18.17", - "@fluentui/react-theme-provider": "^0.19.16", - "@fluentui/react-window-provider": "^1.0.6", - "@fluentui/theme": "^1.7.13", - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/foundation": "^7.10.16", - "@uifabric/icons": "^7.9.5", - "@uifabric/merge-styles": "^7.20.2", - "@uifabric/react-hooks": "^7.16.4", - "@uifabric/set-version": "^7.0.24", - "@uifabric/styling": "^7.25.1", - "@uifabric/utilities": "^7.38.2", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <18.0.0", - "@types/react-dom": ">=16.8.0 <18.0.0", - "react": ">=16.8.0 <18.0.0", - "react-dom": ">=16.8.0 <18.0.0" - } - }, - "node_modules/office-ui-fabric-react/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -7176,9 +7038,9 @@ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" }, "node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" }, "node_modules/tunnel": { "version": "0.0.6", diff --git a/Project/package.json b/Project/package.json index 6b0cfcb..00d362c 100644 --- a/Project/package.json +++ b/Project/package.json @@ -3,7 +3,7 @@ "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", @@ -11,7 +11,8 @@ "@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 index a9450fe..4c85d53 100644 --- 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: + } +}); function App() { let [users, setUsers] = useState([]); diff --git a/Project/src/MakeCall/AddParticipantPopover.js b/Project/src/MakeCall/AddParticipantPopover.js index 0cc0784..60cadc8 100644 --- 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 index 9884211..13064ab 100644 --- 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 index 957970b..7b44dc8 100644 --- 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 && - - } - { - (this.state.canOnVideo && !this.state.videoOn) && - - } - { - (!this.state.canOnVideo) && - - } + { const [proxyUrl, setProxyUrl] = useState(''); diff --git a/Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js b/Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js index d6d704c..7b38f24 100644 --- 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 index 8a4a34b..36d022e 100644 --- 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 index 62544d6..7d0e2a3 100644 --- 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 index efce427..0105952 100644 --- 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 index 24d38da..b7fe38f 100644 --- 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 index 06bacae..47d7fcf 100644 --- 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 index 9462108..da996bb 100644 --- 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';