Merge branch 'dev' into WEB-2805

examples/prebuilt-react-integration/src/main.css

@@ -1,3 +1,5 @@
+@import url('@100mslive/roomkit-react/index.css');
+
 html,
 body,
 #root {
@@ -17,3 +19,7 @@ body {
   width: 100%;
   margin: 0;
 }
+
+.tl-container {
+  border-radius: 0.75rem;
+}

packages/hms-video-store/src/index.ts

@@ -53,6 +53,7 @@ export type {
   HMSQuizLeaderboardResponse,
   HMSQuizLeaderboardSummary,
   HMSTranscriptionInfo,
+  HMSICEServer,
 } from './internal';
 
 export { EventBus } from './events/EventBus';

packages/hms-video-store/src/interfaces/config.ts

@@ -5,6 +5,13 @@ import InitialSettings from './settings';
  * @link https://docs.100ms.live/javascript/v2/features/preview
  * @link https://docs.100ms.live/javascript/v2/features/join
  */
+
+export type HMSICEServer = {
+  urls: string[];
+  userName?: string;
+  password?: string;
+};
+
 export interface HMSConfig {
   /**
    * the name of the peer, can be later accessed via peer.name and can also be changed mid call.
@@ -53,10 +60,14 @@ export interface HMSConfig {
    */
   autoManageVideo?: boolean;
   /**
-   * if this flag is enabled, wake lock will be acquired automatically(if supported) when joining the room, so the device
+   * if this flag is enabled, wake lock will be acquired automatically (if supported) when joining the room, so the device
    * will be kept awake.
    */
   autoManageWakeLock?: boolean;
+  /**
+   * use custom STUN/TURN servers for media connection (advanced)
+   */
+  iceServers?: HMSICEServer[];
 }
 
 export interface HMSMidCallPreviewConfig {

packages/hms-video-store/src/notification-manager/managers/PollsManager.ts

@@ -88,7 +88,7 @@ export class PollsManager {
       }
 
       this.updatePollResult(savedPoll, updatedPoll);
-      await this.updatePollResponses(savedPoll, false);
+      await this.updatePollResponses(savedPoll, true);
 
       updatedPolls.push(savedPoll);
     }

packages/hms-video-store/src/sdk/index.ts

@@ -424,6 +424,7 @@ export class HMSSdk implements HMSInterface {
           this.localPeer!.peerId,
           { name: config.userName, metaData: config.metaData || '' },
           config.autoVideoSubscribe,
+          config.iceServers,
         )
         .then((initConfig: InitConfig | void) => {
           initSuccessful = true;
@@ -565,6 +566,7 @@ export class HMSSdk implements HMSInterface {
         { name: config.userName, metaData: config.metaData! },
         config.initEndpoint!,
         config.autoVideoSubscribe,
+        config.iceServers,
       );
       HMSLogger.d(this.TAG, `✅ Joined room ${roomId}`);
       this.analyticsTimer.start(TimedEvent.PEER_LIST);

packages/hms-video-store/src/session-store/interactivity-center/HMSWhiteboardCenter.ts

@@ -78,6 +78,11 @@ export class WhiteboardInteractivityCenter implements HMSWhiteboardInteractivity
     for (const whiteboard of whiteboards.values()) {
       if (whiteboard.url) {
         const response = await this.transport.signal.getWhiteboard({ id: whiteboard.id });
+        const localPeer = this.store.getLocalPeer();
+        const isOwner = localPeer?.customerUserId === response.owner;
+        const open = isOwner
+          ? localPeer.role?.permissions.whiteboard?.includes('admin')
+          : response.permissions.length > 0;
         const newWhiteboard: HMSWhiteboard = {
           ...whiteboard,
           id: response.id,
@@ -86,7 +91,7 @@ export class WhiteboardInteractivityCenter implements HMSWhiteboardInteractivity
           addr: response.addr,
           owner: response.owner,
           permissions: response.permissions,
-          open: response.permissions.length > 0,
+          open,
         };
 
         this.store.setWhiteboard(newWhiteboard);

packages/hms-video-store/src/signal/init/index.ts

@@ -1,6 +1,8 @@
 import { InitConfig } from './models';
 import { ErrorFactory } from '../../error/ErrorFactory';
 import { HMSAction } from '../../error/HMSAction';
+import { HMSICEServer } from '../../interfaces';
+import { transformIceServerConfig } from '../../utils/ice-server-config';
 import HMSLogger from '../../utils/logger';
 
 const TAG = '[InitService]';
@@ -26,26 +28,26 @@ export default class InitService {
     userAgent,
     initEndpoint = 'https://prod-init.100ms.live',
     region = '',
+    iceServers,
   }: {
     token: string;
     peerId: string;
     userAgent: string;
     initEndpoint?: string;
     region?: string;
+    iceServers?: HMSICEServer[];
   }): Promise<InitConfig> {
     HMSLogger.d(TAG, `fetchInitConfig: initEndpoint=${initEndpoint} token=${token} peerId=${peerId} region=${region} `);
     const url = getUrl(initEndpoint, peerId, userAgent, region);
     try {
       const response = await fetch(url, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
+        headers: { Authorization: `Bearer ${token}` },
       });
       try {
         const config = await response.clone().json();
         this.handleError(response, config);
         HMSLogger.d(TAG, `config is ${JSON.stringify(config, null, 2)}`);
-        return transformInitConfig(config);
+        return transformInitConfig(config, iceServers);
       } catch (err) {
         const text = await response.text();
         HMSLogger.e(TAG, 'json error', (err as Error).message, text);
@@ -78,9 +80,12 @@ export function getUrl(endpoint: string, peerId: string, userAgent: string, regi
   }
 }
 
-export function transformInitConfig(config: any): InitConfig {
+export function transformInitConfig(config: any, iceServers?: HMSICEServer[]): InitConfig {
   return {
     ...config,
-    rtcConfiguration: { ...config.rtcConfiguration, iceServers: config.rtcConfiguration?.ice_servers },
+    rtcConfiguration: {
+      ...config.rtcConfiguration,
+      iceServers: transformIceServerConfig(config.rtcConfiguration?.ice_servers, iceServers),
+    },
   };
 }

packages/hms-video-store/src/transport/index.ts

@@ -23,7 +23,7 @@ import { ErrorFactory } from '../error/ErrorFactory';
 import { HMSAction } from '../error/HMSAction';
 import { HMSException } from '../error/HMSException';
 import { EventBus } from '../events/EventBus';
-import { HMSRole } from '../interfaces';
+import { HMSICEServer, HMSRole } from '../interfaces';
 import { HMSLocalStream } from '../media/streams/HMSLocalStream';
 import { HMSLocalTrack, HMSLocalVideoTrack, HMSTrack } from '../media/tracks';
 import { TrackState } from '../notification-manager';
@@ -397,8 +397,9 @@ export default class HMSTransport {
     peerId: string,
     customData: { name: string; metaData: string },
     autoSubscribeVideo = false,
+    iceServers?: HMSICEServer[],
   ): Promise<InitConfig | void> {
-    const initConfig = await this.connect(token, endpoint, peerId, customData, autoSubscribeVideo);
+    const initConfig = await this.connect(token, endpoint, peerId, customData, autoSubscribeVideo, iceServers);
     this.state = TransportState.Preview;
     this.observer.onStateChange(this.state);
     return initConfig;
@@ -410,11 +411,12 @@ export default class HMSTransport {
     customData: { name: string; metaData: string },
     initEndpoint: string,
     autoSubscribeVideo = false,
+    iceServers?: HMSICEServer[],
   ): Promise<void> {
     HMSLogger.d(TAG, 'join: started ⏰');
     try {
       if (!this.signal.isConnected || !this.initConfig) {
-        await this.connect(authToken, initEndpoint, peerId, customData, autoSubscribeVideo);
+        await this.connect(authToken, initEndpoint, peerId, customData, autoSubscribeVideo, iceServers);
       }
 
       this.validateNotDisconnected('connect');
@@ -447,6 +449,7 @@ export default class HMSTransport {
     peerId: string,
     customData: { name: string; metaData: string },
     autoSubscribeVideo = false,
+    iceServers?: HMSICEServer[],
   ): Promise<InitConfig | void> {
     this.setTransportStateForConnect();
     this.joinParameters = new JoinParameters(
@@ -456,9 +459,10 @@ export default class HMSTransport {
       customData.metaData,
       endpoint,
       autoSubscribeVideo,
+      iceServers,
     );
     try {
-      const response = await this.internalConnect(token, endpoint, peerId);
+      const response = await this.internalConnect(token, endpoint, peerId, iceServers);
       return response;
     } catch (error) {
       const shouldRetry =
@@ -474,7 +478,7 @@ export default class HMSTransport {
 
       if (shouldRetry) {
         const task = async () => {
-          await this.internalConnect(token, endpoint, peerId);
+          await this.internalConnect(token, endpoint, peerId, iceServers);
           return Boolean(this.initConfig && this.initConfig.endpoint);
         };
 
@@ -898,7 +902,7 @@ export default class HMSTransport {
     }
   }
 
-  private async internalConnect(token: string, initEndpoint: string, peerId: string) {
+  private async internalConnect(token: string, initEndpoint: string, peerId: string, iceServers?: HMSICEServer[]) {
     HMSLogger.d(TAG, 'connect: started ⏰');
     const connectRequestedAt = new Date();
     try {
@@ -908,6 +912,7 @@ export default class HMSTransport {
         peerId,
         userAgent: this.store.getUserAgent(),
         initEndpoint,
+        iceServers,
       });
       const room = this.store.getRoom();
       if (room) {
@@ -1093,6 +1098,7 @@ export default class HMSTransport {
         this.joinParameters!.authToken,
         this.joinParameters!.endpoint,
         this.joinParameters!.peerId,
+        this.joinParameters!.iceServers,
       );
     }
 

packages/hms-video-store/src/transport/models/JoinParameters.ts

@@ -1,3 +1,5 @@
+import { HMSICEServer } from '../../interfaces';
+
 export class JoinParameters {
   constructor(
     public authToken: string,
@@ -6,5 +8,6 @@ export class JoinParameters {
     public data: string = '',
     public endpoint: string = 'https://prod-init.100ms.live/init',
     public autoSubscribeVideo: boolean = false,
+    public iceServers?: HMSICEServer[],
   ) {}
 }

packages/hms-video-store/src/utils/ice-server-config.ts

@@ -0,0 +1,11 @@
+import { HMSICEServer } from '../interfaces';
+
+export const transformIceServerConfig = (defaultConfig?: RTCIceServer[], iceServers?: HMSICEServer[]) => {
+  if (!iceServers || iceServers.length === 0) {
+    return defaultConfig;
+  }
+  const transformedIceServers = iceServers.map(server => {
+    return { urls: server.urls, credentialType: 'password', credential: server.password, username: server.userName };
+  });
+  return transformedIceServers;
+};

packages/hms-whiteboard/.eslintrc

@@ -0,0 +1,87 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "react-app",
+    "react-app/jest"
+  ],
+  "plugins": ["prettier", "simple-import-sort"],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-unused-vars": "error",
+    "no-nested-ternary": 1,
+    "no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "args": "none",
+        "ignoreRestSiblings": false
+      }
+    ],
+    "react/react-in-jsx-scope": "error",
+    "react/jsx-curly-brace-presence": [
+      2,
+      {
+        "props": "never"
+      }
+    ],
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": false
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto" // This is need to handle different end-of-line in windows/mac
+      }
+    ],
+    "import/first": "error",
+    "import/namespace": [2, { "allowComputed": true }],
+    "import/no-duplicates": "error",
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          [
+            // Packages `react` related packages come first.
+            "^react",
+            "^@?\\w",
+            // Internal packages.
+            "^@100mslive/react-sdk",
+            "^@100mslive/react-icons",
+            // Side effect imports.
+            "^\\u0000",
+
+            "(components)",
+            // Other relative imports. Put same-folder imports and `.`.
+            "^\\./(?=.*/)(?!/?$)",
+            "^\\.(?!/?$)",
+            "^\\./?$",
+            "(plugins)",
+            "(components)?(.*)(/use.*)",
+            ".*(hooks)",
+            "(common)",
+            "(services)",
+            "(utils)",
+            "(constants)",
+            // Style imports.
+            "^.+\\.?(css)$"
+          ]
+        ]
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "ignorePatterns": ["src/*.css", "src/images/*", "src/grpc/*", "dist/**"]
+}