diff --git a/Project/package-lock.json b/Project/package-lock.json
index 0354e538..70c965e1 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 6b0cfcbd..00d362cf 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 a9450fe8..4c85d532 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 0cc0784d..60cadc84 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 98842115..13064abe 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 957970b2..7b44dc81 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 d6d704cc..7b38f24c 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 8a4a34bd..36d022e9 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 62544d67..7d0e2a3d 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 efce427f..0105952f 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 24d38da5..b7fe38f2 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 06bacaed..47d7fcf6 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 94621088..da996bb1 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';