Merge branch 'main' into sync-webapp

example.env

@@ -1,7 +1,7 @@
 REACT_APP_TILE_SHAPE=1-1
 REACT_APP_THEME=dark
 REACT_APP_COLOR='#2F80FF'
-REACT_APP_LOGO= 
+REACT_APP_LOGO=
 REACT_APP_FONT=Roboto
 REACT_APP_TOKEN_GENERATION_ENDPOINT=<Your token generation endpoint from dashboard goes here>
 REACT_APP_ENV=prod
@@ -13,4 +13,5 @@ REACT_APP_ENABLE_STATS_FOR_NERDS='false'
 REACT_APP_PUSHER_APP_KEY=''
 REACT_APP_PUSHER_AUTHENDPOINT=''
 REACT_APP_HEADLESS_JOIN='false'
-REACT_APP_ZIPY_KEY=
+REACT_APP_ZIPY_KEY=
+REACT_APP_TITLE='100ms App'

package.json

@@ -83,7 +83,7 @@
     "prettier": "^2.5.1",
     "source-map-loader": "^3.0.1",
     "terser-webpack-plugin": "^5.3.1",
-    "webpack": "^5.69.1",
+    "webpack": "^5.76.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
     "webpack-manifest-plugin": "^4.1.1"

src/App.js

@@ -45,7 +45,8 @@ if (window.location.host.includes("localhost")) {
   appName = window.location.host.split(".")[0];
 }
 
-document.title = `${appName}'s ${document.title}`;
+document.title =
+  process.env.REACT_APP_TITLE || `${appName}'s ${document.title}`;
 
 // TODO: remove now that there are options to change to portrait
 const getAspectRatio = ({ width, height }) => {

src/components/PIP/PIPComponent.jsx

@@ -28,15 +28,15 @@ const PIPComponent = ({ peers, showLocalPeer }) => {
   const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
 
   const onPipToggle = useCallback(() => {
-    if (!isPipOn) {
+    if (isPipOn) {
+      PictureInPicture.stop().catch(err =>
+        console.error("error in stopping pip", err)
+      );
+    } else {
       PictureInPicture.start(hmsActions, setIsPipOn).catch(err =>
         console.error("error in starting pip", err)
       );
       MediaSession.setup(hmsActions, store);
-    } else {
-      PictureInPicture.stop().catch(err =>
-        console.error("error in stopping pip", err)
-      );
     }
   }, [hmsActions, isPipOn, store]);
 

src/components/VideoTile.jsx

@@ -76,7 +76,6 @@ const Tile = ({
     }
     return "large";
   }, [width, height]);
-
   return (
     <StyledVideoTile.Root
       css={{

src/plugins/NoiseSuppression.js

@@ -1,3 +1,7 @@
+/**
+ * Please refer the following docs for more detals.
+ * https://www.100ms.live/docs/javascript/v2/how--to-guides/extend-capabilities/plugins/noise-suppression
+ */
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
   selectIsLocalAudioPluginPresent,
@@ -96,15 +100,15 @@ export const NoiseSuppression = () => {
 
   if (isNSSupported && FeatureFlags.showNS() && isFeatureEnabled) {
     return (
-      <Tooltip title={`Turn ${!pluginActive ? "on" : "off"} noise suppression`}>
+      <Tooltip title={`Turn ${pluginActive ? "off" : "on"} noise suppression`}>
         <IconButton
           active={!pluginActive}
           disabled={disable}
           onClick={async () => {
-            if (!pluginActive) {
-              await addPlugin();
-            } else {
+            if (pluginActive) {
               await removePlugin();
+            } else {
+              await addPlugin();
             }
           }}
           data-testid="noise_suppression_btn"

src/plugins/VirtualBackground/VirtualBackground.jsx

@@ -1,3 +1,7 @@
+/**
+ * Please refer the following docs for more detals.
+ * https://www.100ms.live/docs/javascript/v2/how--to-guides/extend-capabilities/plugins/virtual-background
+ */
 import { useEffect, useRef, useState } from "react";
 import { HMSVirtualBackgroundTypes } from "@100mslive/hms-virtual-background";
 import {